12강. CSS 속성 3

※ 다음 강좌를 수강하고 내용을 정리한 것입니다.

https://www.inflearn.com/course/html-css-강좌#

실전 HTML & CSS 강좌 - 인프런

 

12-1 font-family, font-size 속성

글꼴 및 폰트 사이즈 관련 속성을 살펴봅니다.

font-family:에 인자를 여러 가지 주면 앞의 글꼴을 지원하지 않을 때 뒤의 글꼴을 이용합니다.

 

 

12-2 font-style, font-weight, line-height 속성

글꼴 및 폰트 사이즈 관련 속성을 살펴봅니다.

line-height로 행간격을 조절합니다.

 

 

12-3 text-align, text-decoration 속성

글자에 대한 정렬과 간단한 글꼴모양의 속성을 살펴 봅니다.

text-algin:center로 좌우정렬하고 line_height를 통해 위아래정렬을 할 수 있습니다.

a태그에 text-decoration: none하면 하이퍼링크의 밑줄 사라집니다.

 

 

12-4 position 속성

absolute, fixed, static, relative 속성값과 relative, absolute 혼합에 대해서 살펴봅니다.

position: absolute하면 좌상단기준 절대적위치에 놓인다.(top:50px; left:50px;값에 의해)

감싸고 있는게 브라우저가 아니라 다른 태그가 감싸고 있으면, 그 태그의 좌상단이 기준입니다.

 

position: fixed하면 화면줄이고 스크롤할때도 위치가 고정됩니다.

 

position: static(디폴트값)이면 블록형태로 층층이쌓입니다.(top, left줘도 의미없어집니다.)

 

postition: relative이면 이전것 기준으로 시작점이 바뀝니다.

 

z-index는 깊이값을 고정한다. 숫자가 높을수록 상단에 위치해서 덮게된다.

안쪽요소에 absolute있으면 바깥쪽요소에 relative줘야 한다.

 

github.com/HoYoungChun/piro14/tree/master/%EC%9D%B8%ED%94%84%EB%9F%B0%20%EC%9D%B8%EA%B0%95

HoYoungChun/piro14