반응형
문서 내 텍스트의 스타일을 변경하는 CSS 모음과 축약형 정리.
서식(font, text) 관련 CSS 정리
<p>
텍스트 서식 관련 CSS 테스트 입니다.
텍스트 서식 관련 CSS 테스트 입니다.
텍스트 서식 관련 CSS 테스트 입니다.
텍스트 서식 관련 CSS 테스트 입니다.
텍스트 서식 관련 CSS 테스트 입니다.
</p>p {
width: 600px; /* 1 */
border: 1px solid red; /* 2 */
font-weight: bold; /* 3 */
font-style: italic; /* 4 */
font-size: 20px; /* 5 */
line-height: 1.2; /* 6 */
font-family: '맑은 고딕'; /* 7 */
color: green; /* 8 */
text-indent: 10px; /* 9 */
text-align: center; /* 10 */
text-decoration: line-through; /* 11 */
}
CSS 주석 번호에 따라 차례대로 기록.
- width - 선택 태그의 가로값을 지정한다. p는 블록 요소이기 때문에 가로값 지정이 가능.
- border - 선택 태그의 테두리를 지정한다. 굵기, 선모양, 색상 순서로 공백으로 구분해 적는다.
- font-weight - 글자의 굵기를 지정한다. 기본값은 normal, bold는 굵게.
- font-style - 폰트 스타일을 지정한다. 기본값은 normal, italic은 사선으로 기울여진 글씨.
- font-size - 글자 크기를 수치로 입력해 지정한다.
- line-height - 행간을 조절한다. 단위를 넣을 수도 있으며, 숫자만 입력할 경우 폰트 사이즈를 기준으로 배수 적용.
보통 본문 기준 1.2~1.6 정도가 적당하고 보기 좋다. - font-family - 서체(글꼴)를 지정한다. 시스템에 설치된 폰트만 출력되므로 '시스템 폰트'라고 불리는 보편적으로 설치되어있는 폰트를 사용해야 한다. 한글은 굴림, 돋움, 맑은고딕(win). 영문은 Arial, Verdana, Helvetica가 대표적이다.
- color - 글자의 컬러를 지정한다.
- text-indent - 문단의 들여쓰기를 수치로 입력해 지정한다.
- text-align - 문단의 정렬을 지정한다. 기본값은 left.
- text-decoration - 그 외 줄긋기 등 서체에 꾸밈효과를 준다. 하이퍼링크가 걸리는 a 태그를 제외하곤 none;이 기본값.
폰트(font) 속성의 축약형
일부 폰트 속성들은 축약형으로 한 줄로 간략하게 입력 가능하다.
p {
font-weight: bold;
font-style: italic;
font-size: 20px;
line-height: 1.2;
font-family: '맑은 고딕';
}p {
font: bold italic 20px/1.2 '맑은 고딕';
}
- 공백으로 구분해서 입력해준다.
- font-size의 사이즈를 기반으로 작동하는 line-height는 font-size 수치 뒤에 슬래시(/)로 구분하여 적어준다.
- font-family는 마지막으로 적어준다.
텍스트는 문서의 정보를 담고있는 가장 기본적인 구성요소로, 메뉴부터 본문, 심지어 감춰져 보이지 않는 부분까지 배치되어있다. 어찌보면 디테일한 부분에선 서식 관련 CSS가 가장 많이 사용하는 스타일이 아닐까 싶다.
용도에 따라 적재적소에 맞는 스타일을 짤 수 있도록 세부 속성들을 잘 파악해두어야겠다. 많이 쓰는 만큼 축약형도 요긴하게 활용할 수 있을 거 같다.
반응형
