text-decoration 텍스트의 장식을 지정하는 속성이다. (기본 값 : none currentColor solid) text-decoration: text-decoration-line text-decoration-color text-decoration-style | initial | inherit; text-decoration의 속성 값 text-decoration-line 텍스트 꾸밈의 종류를 지정하는 속성이다. (기본 값 : none) none : 텍스트 꾸밈을 생성하지 않음 (기본값) underline : 밑줄로 꾸밈을 설정 overline : 윗줄로 꾸밈을 설정 line-through : 중간을 지나는 줄로 꾸밈을 설정 text-decoration-color 텍스트 꾸밈의 색상을 지정하는 ..
text-indent 텍스트의 들여쓰기를 지정하는 속성이다. (기본 값 : 0) text-indent: length | initial | inherit; text-indent의 속성 값 length : px, em 등을 이용해 문단의 첫 줄에 대한 들여쓰기를 수행합니다. 음수 값을 사용할 수 있으며, 음수 값 사용 시 왼쪽으로 이동한다. text-indent: 40px; text-indent: 1em; text-indent: -40px; /* 비추천 방식 */ percent(%) : 텍스트를 포함하는 컨테이너 블록의 width(부모의 width)를 기준으로 변환된 백분율 값으로 들여쓰기한다. 이때 부모의 width는 border, padding 등의 요소는 제외한 순수한 width를 말한다. text-i..
css를 통해서 텍스트를 수직, 수평 정렬 할 수 있다. 수직 정렬은 vertical-align 속성을 이용하며, 수평 정렬은 text-align 속성을 이용한다. 이때 주의하실 점은 block 요소가 아닌 inline 또는 inline-block에서만 사용할 수 있다는 것이다. 따라서 display이 속성이 변하지 않은 div, p와 같은 블록레벨 요소에는 수직, 수평 정렬이 적용되지 않는다. vertical-align 요소의 수직 정렬을 지정하는 속성이다. (기본 값 : baseline) vertical-align: keyword | length | percent | initial | inherit ; vertical-align의 속성 값 keyword : baseline(기본 값), sub, sup..
실무에서 폰트 관련해서 주로 사용되는 명칭으로 '시스템 폰트', '이미지 폰트', '웹 폰트'가 있다. 시스템 폰트 : font-family로 선언한 글꼴이 사용자 시스템에 기본으로 설치 되어 있어 사용할 수 있는 경우 이미지 폰트 : 글자를 표현함에 있어 시각적인 요소를 많이 넣고 싶을 때 글꼴 대신 이미지를 이용해서 표현하는 경우를 의미한다. 이미지 폰트는 폰트가 아니라 이미지이다. 웹 폰트 : 서버에 저장해 제공하거나, 웹 경로를 통해 사용하는 폰트를 의미한다. @font-face 웹에 있는 글꼴을 사용자의 로컬 환경(컴퓨터)으로 다운로드하여 적용하는 속성이다. (기본 값 : 없음) @font-face { /* font-properties */ } @font-face의 속성 값 font..
font의 경우 앞서 배운 font와 관련된 다양한 값을 축약 속성에 넣을 수 있다. 다만 속성마다 선언 순서를 지켜야 하는 제약이 있음에 유의해야한다. 또한, 반드시 꼭 넣어야 하는 속성들이 있는 등 지켜야 할 규칙이 많고 가독성이 좋지 않기 때문에 실무에서 선호하는 편은 아님을 알아두자. 그렇지만 font로 선언된 속성을 보고 어떤 값들이 적용되어 있는지 해석할 수 있어야 한다. 축약 가능한 font 관련 속성 font-style, font-variant, font-weight, font-size/line-height, font-family 속성들은 한 번에 선언할 수 있는 축약형 속성이다. (기본 값 : 각 속성들의 기본 값) font: font-style font-variant font-weigh..
[CSS] 폰트 (font) - font-style, 폰트 스타일
font-style 글꼴의 스타일을 지정하는 속성이다. (기본 값 : normal) font-style: normal | italic | oblique | initial | inherit; font-style의 속성 값 normal : font-family 내에 분류된 기본 값 italic : italic 스타일로 표현 oblique : oblique 스타일로 표현 - oblique 텍스트의 기울기에 대한 각도를 추가로 지정할 수 있다. font-style: normal; font-style: italic; font-style: oblique; font-weight oblique : 유효한 값은 -90 ~ 90도이며, 따로 각도를 지정하지 않으면 14도가 사용됩니다. 양수 값은 글의 끝 부분 쪽으로 기울..
font-weight 글꼴의 굵기를 지정하는 속성이다. (기본 값 : normal) font-weight: normal | bold | bolder | lighter | number | initial | inherit ; font-weight의 속성 값 normal : 기본 값 (400) bold : 굵게 표현(700) bolder : 부모 요소 보다 두껍게 표현 lighter : 부모 요소 보다 얇게 표현 font-weight: normal; /* 400과 같음 */ font-weight: bold; font-weight: lighter; font-weight: bolder; number : 100, 200, 300, 400, 500, 600, 700, 800, 900 (클수록 더 두껍게 표현) - 수..
font-size 글꼴의 크기를 지정하는 속성이다. (기본 값: medium) font-size: keyword | length | initial | inherit ; 기본 값 미지정 시 글꼴의 기본크기는 16px (1em) keyword : medium(기본 값), xx-small, x-small, small, large, x-large, xx-large, smaller, larger - absolute size : 기본 값인 medium에 대한 상대적인 크기로, 브라우저마다 사이즈가 다르게 정의한다. - relative size : 부모 요소의 font-size 크기에 상대적으로 적용되며, smaller는 0.8배, larger는 1.2배이다. font-size: medium; /* ..
[CSS] 폰트 (font) - line-height, 행간 조정
장문의 글에서는 가독성을 위해서 글 사이의 간격을 띄우기도 한다. 이때 행간을 조정한다고 하는데, line-height 속성을 이용해 이 행간을 조정할 수 있다. 그러나 정확하게 line-height는 줄의 높이를 의미하는 것이고, 이를 이용해서 행간을 조정할 수 있는 것이다. line-height의 속성 행간을 제어할 때 사용하는 속성이라 해서 줄 간격으로 생각해 오해하기 쉬울 수가 있다. 줄 바꿈이 되었을 때, 윗줄의 텍스트 하단과 아랫줄의 텍스트 상단까지의 간격이라고 생각할 수도 있지만, line-height로 제어되는 부분을 line-box라고도 하며 이는 타이포그래피 구조에서 배웠던 [em 박스] + [상하단의 여백]까지를 의미한다. line-height: normal | number | len..