HTML+CSS 기초 강의 - 29. CSS 속성 기초 1 - 텍스트 속성
CSS는 HTML 태그에 적용하는 속성들을 모아서 하나의 이름으로 정의해놓은 것을 말합니다.
이렇게 정의한 이름을 클래스라고 합니다. 즉, CSS 클래스는 CSS속성의 묶음입니다.
클래스는 클래스, ID명으로 정의할 수도 있고, HTML 문서 안의 전체, 또는 특정 영역의 태그들에만 적용되도록 태그명으로 정의할 수도 있습니다.
클래스 속성은
클래스명 [, 클래스명2] {
클래스 속성이름1:속성값;
클래스 속성이름2:속성값;
}
와 같은 형태로 작성합니다.
클래스명 뒤에 중괄호({})로 태그 속성(들)을 감싸고, 1개의 클래스 속성 뒤에는 세미콜론(;)을 붙여 속성 1개가 끝났음을 표시합니다.
맨끝에오는 클래스 속성의 세미콜론은 생략 가능합니다.
예를들어
.txt1{
font-size:1em;
font-family:'Noto Sans KR'
}
.txt2, #special-title, div p {font-size:0.9em;font-family: 'Nanum Gothic', san-serif;}
과 같은 형태로 작성합니다.
클래스 속성(들)은 세미콜론(;)으로 구분되기 때문에 가독성 여부에 따라 줄바꿈을 하지 않아도 무방합니다.
또, 정의한 클래스 속성들을 한꺼번에 여러개의 클래스명에 적용하려면 쉼표(,)로 구분해 여러개의 클래스명을 나열해도 됩니다.
클래스 속성은 속성에 따라 사용할 수 있는 속성과 그렇지 않은 속성들이 있으며, 적용되는 범위가 태그에 따라 달라지기도 합니다.
클래스 속성을 종류별로 몇가지 범위로 구분해 하나씩 알아보도록 하겠습니다.
여기서는 기본적인 속성들 중심으로만 알아보고, 잘 사용하지 않는 고급 속성들은 다른 강의에서 별도로 설명합니다.
텍스트 속성
텍스트 내용이 들어갈 수 있는 모든 태그에서 사용가능합니다.
속성 |
값 |
설명 |
font-size |
pt, px, em, rem, % 단위로 0 이상 숫자. medium, xx-small, x-small, small, large, x-large, xx-large, smaller, larger, length, initial, inherit |
태그 안의 내용 텍스트 크기를 지정. 보통 숫자 단위로 지정해 사용합니다. medium은 웹브라우저에서 지정한 기본 크기입니다.(보통 16px) 텍스트로 크기를 지정하는 단위는 국내 웹환경에서는 거의 사용하지 않습니다. 이런게 있다 정도만 아시면 됩니다. %와 em은 부모 요소에 대한 상태적인 크기입니다. 특히 em 단위는 모바일과 레티나 디스플레이 지원을 위해 필수적으로 알아야 하고 가능하면 em 단위를 사용할 것을 추천합니다. 예) font-size:12px; font-size:1em; |
font-family |
문자열 |
글꼴 지정. 공백으로 분리된 이름을 가진 글꼴명은 따옴표로 감싸야 합니다. 기본적으로 웹폰트를 사용하는 것이 추세이기 때문에 웹폰트를 HTML문서나 CSS 파일에 연결하고 사용하는 것 정도는 기본적으로 알아야 합니다. 예) font-family:'Noto Sans KR' |
text-decoration |
none, underline, overline, line-through |
텍스트에 라인을 긋는 효과 지정. 2개이상 지정 가능. HTML5에서 사라진 태그인 예) text-decoration:underline; 
|
letter-spacing |
정수 px 단위로 간격 지정. |
텍스트 글자간 간격을 결정. "normal" 로 텍스트 값을 주면 상속된 값을 리셋합니다. 보통 -1px 면 아주 좁은 간격, 0px면 좁은 간격, 1px면 기본간격(normal 간격), 2px면 조금 넓은 간격이 됩니다. 예) letter-spacing:0px; 
|
line-height |
pt, px, em, rem, % 단위로 0 이상 숫자. |
텍스트 줄 높이. 텍스트가 2줄 이상일 경우 줄 사이 간격을 결정 
|
text-align |
left, center, right |
태그 안에서의 텍스트 정렬 지정. 별도의 위치 속성이 부여되지 않은 이미지 및 태그도 영향을 미칩니다. 
|
font-weight |
normal, bold, 100 ~ 900 bolder, lighter |
텍스트 두께 지정. 숫자로 100 ~ 900 범위로 100단위 숫자로 두께를 지정할 수 있습니다. 모든 값을 사용할 수 있는 것은 아니고 글꼴에 따라 사용할 수 있는 두께에 제약이 있습니다. 지원하지 않는 두께인 경우 적용해도 실제 텍스트에 반영되지 않습니다. normal은 400, bold는 700 과 같습니다. 대부분의 한글 글꼴은 100~300은 얇은, 400~500은 일반(normal), 600~900은 두꺼운(bold) 굵기가 적용됩니다. 따라서 숫자를 사용해 텍스트 두께를 조절할 경우 200, 400, 700을 사용하는 것을 추천합니다. 영문 글꼴은 개별 글꼴에 따라 약간씩 차이가 있으므로 확인해서 사용해야 합니다. 경우에 따라서는 두께 조절이 적용되지 않는 글꼴도 있습니다. bolder, lighter는 bold, normal과는 달리 상대 두께입니다. 부모에서 상속된 것보다 두껍게(bolder), 얇게(lighter) 변경됩니다. 
|