citeFred’s Blog

/

/

citeFred’s Blog

/

/

Share

🏷️

HTML,CSS

# of Posts

7

1 more property

Gallery

Search

주말이라 좀 쉬면서 웹서핑을 하는데 내 블로그를 보니 흔한 테마로 사용했더니 너무 심심해보였다.

뭔가 추가 해볼만한 것이 없을까 생각되서 메뉴 헤더 부분에 이미지, Github 이미지와 링크를 연결하는데,

나의 티스토리 테마는 반응형으로 구현되어 있었다. 매번 백엔드에만 관심이 있었지만 프론트엔드의 반응형 웹이 변화하는 것이 항상 궁금하긴 했었다. 내가 원하는건 Most Used Languages 위젯의 크기가 커서, 반응형으로 브라우저 크기를 조절하면 메뉴가 삐져나오거나 한쪽으로 치우치고해서 꼴보기 싫었다. 아무리 티스토리 테마로 만들었다해도 HTML, CSS 수정이 가능하기 때문에 한번 수리할겸 프론트엔드는 어떤 코드를 쓰는지 살펴보았다. 우선 내가 아는 프론트엔드? 라고하기에도 기초적인 CSS 지식을 활용해서 테마 제작자의 HTML과 CSS를 살펴봤다.

내가 수정을 원하는 태그의 경로를 찾아내서 div로 덩어리들을 묶기 시작했다.

전체 Wrapper 1개와

가로 왼쪽 50%차지 = {(내 로고)+(닉네임)}+{(Github로고)+(숨은a태그)} 1덩이

가로 오른쪽 50%차지 = (MostUsedLanguage) 1덩이

[HTML, CSS]05 반응형 웹 CSS 작동 방식 @media은 조건문?

HTML, CSS 기초

배운점:

HTML, CSS과 Bootstrap 활용을 빠르게 복습

어려운 점:

태그 내의 여러 속성값을 지정하는 방법에 대해서 익숙해지고 검색을 생활화해야 한다.

배운점:

linear-gradient 를 사용하여 이미지를 어둡게 보정

division태그 내부의 콘텐츠 (Text, Input, Button 등) 을 가운데 정렬

백그라운드 색상 제거 (투명화) transprent

추가적으로 "hover"(마우스 커서가 올라간 경우) 테두리 강조 이벤트를 추가

어려운 점:

기초적인 CSS 꾸미는 태그, 속성 사용법 익혀야 한다.

부트스트랩을 활용하더라도 속성을 변경하면서 어떤것들이 변경되는지 확인 필요

기초적인 CSS 꾸미는 태그, 속성 사용법 익혀야 한다.

웹 페이지 만들기

배운점:

아이디와 패스워드 input 속성인 type="text"와 type="password"를 활용

추후에 form태그로 감싸고 method 속성을 통해 통신해야 한다.

head태그에서 style태그를 통해 클래스, 아이디 등 선택자를 지정하여 다양한 style을 적용 시킬 수 있다.

어려운 점:

css 선택자에 대해서 더 공부해야한다 부모자식관계, 특정 속성을 선택하는 등 더 많은 방법

웹 페이지 배포(git page) 활용

배운점:

github>repo>settings 에서 깃 페이지를 배포 할 수 있다.

어려운 점:

github, jekyll를 활용한 블로그 제작을 해보려했는데 시간이없다!

멋진 블로그를 꾸며보자!

나중에 도전해보자 좀 더 천천히 연습할 필요가 있다.

[HTML, CSS]04 HTML, CSS, 기초 원페이지 웹사이트 생성 배운점, 어려웠던점

linear-gradient 를 사용하여 이미지를 어둡게 보정 할 수 있다.

보통 은은하고 Dark한 느낌을 좋아하다 보니..

linear-gradient 보정 후

division태그 내부의 콘텐츠 (Text, Input, Button 등) 을 가운데 정렬하는 4줄 코드이다.

프로토타입 페이지 구성할때 그냥 외워서(ctrl c+v) 사용할 코드. 자주 사용될 것 같다.

이전에 text-align... block.. 등 생각보다 내 마음대로 움직이지 않던 부분인데 아래 코드로 쉽게 정렬 할 수 있음

[HTML, CSS]03 생각보다 쓸만한 CSS 응용편!

1. Google Fonts 페이지 방문

해당 페이지에서 Google이 제공하는 다양한 폰트를 확인 할 수 있다.

Browse Fonts - Google Fonts

Making the web more beautiful, fast, and open through great typography

https://fonts.google.com/?subset=korean

2. 원하는 폰트 선택

원하는 폰트 종류(Font-Family)를 선택한 이후 하단에 나열되는 폰트 세부 형태를 결정하고 "Select"를 클릭하면 우측 세부정보 창이 나타난다.

3. 폰트 참조 링크 복사

세부정보 창에서 copy code 탭의 "@import"를 선택하면

HTML style탭에 입력 할 수 있는 폰트 코드 링크가 제공된다.

4. 해당 코드를 작성중인 HTML 문서의 style 태그 내 삽입

5. 선택자를 통해 원하는 폰트 적용

이후 다시 Google Fonts의 세부정보 창 @import 하단의 "CSS rules to specify families"의 내용을 복사하여

[HTML, CSS]02 Google Fonts 스타일 적용하기

메인 페이지의 코드를 간소화 시킴

협업 시 분리 작업 가능

프로젝트 관리 편리
head태그 내에서 링크태그를 통해 <style> 태그 내 꾸밈 코드들을 분리 할 수 있다.

index.html의 <head>에 추가된 내용

index.html의 style태그 코드는 모두 주석(삭제) 처리 했다.

index.html에 있을때와 동일한(style이 동일) 결과를 얻을 수 있다. 태그에 직접 입력하는 하드코딩보다 이와 같이 css파일을 분리하여 관리하면 협업시에도 style 이 적용안되거나 충돌이 생기는 부분을 최소화 할 수 있다.

[HTML, CSS]01 CSS 파일 모듈화(파일 분리)

아이디와 패스워드 input 속성인 type="text"와 type="password"를 활용

추후에 form태그로 감싸고 method 속성을 통해 통신해야 한다.

head태그에서 style태그를 통해 클래스, 아이디 등 선택자를 지정하여 다양한 style을 적용 시킬 수 있다.

[HTML, CSS]00 기초적인 로그인 페이지 생성

1주차 강의를 통해

HTML, CSS과 Bootstrap 활용을 빠르게 복습 할 수 있었다.

다시 천천히 코드를 작성하고 변화를 관찰하면서 코드 작성법을 익히고 있으며

관련 단축키들도 다시 익숙해지고 있다.

html 주요 태그로는 !doctype 선언문과

html, head, body, div, h1-5, button, input, p, br, img src, label 등

css 주요 태그로는

color(text),background-color:(background), font-size, font-family, margin, padding, text-align, width, height, border 등

태그 내의 여러 속성값을 지정하는 방법에 대해서 익숙해지고 검색을 생활화해야 한다.

[HTML, CSS]06 1주차 스터디(WIL)