CSS 기본 (2)_서식

기본 서식 스타일

font-size : 크기 지정

    px em rem 등

 

font-weight : 글꼴 두께

    bold(700) normal(기본값,400) / 100~900

 

line-height : 줄 간격

    em

 

font-family : 글꼴

 

font-style : 문자 스타일

    italic normal oblique

 

color

    (색상 명) #16진수코드 rgb(0,0,0) rgba(0,0,0,0.5) - 마지막값 투명도

 

text-decoration : 텍스트 줄 표시/제거

    underline(밑줄) line-through(취소선) overline none

 

text-transform : 대소문자 설정

    capitalize(첫 글자만 대문자) uppercase(대문자) lowercase(소문자) none

 

text-align : 정렬

    center left right justify(양쪽 정렬)

 

text-shadow : 그림자

    (x-축거리) (y-축거리) (퍼짐 거리 정도) (색상)

    none

---

일반적인 설정

font-size

body의 기본설정 폰트크기는 16px

가장 일반적으로 가독성이 높은 크기는 15px!

 

line-height

1.6em이 일반적

(em은 상대 단위, 폰트 크기를 바꾸면 줄 간격이 자동으로 변함)

 

---

목록 스타일

disc ● circle ○ square ■ none  등등

 

임의로 설정

1. list-style-image: url(아이콘 이미지경로)

2. 가상클래스 before 이용해 변경

<ul class="menu">
  <li>menu1</li>
  <li>menu2</li>
  <li>menu3</li>
</ul>

.menu li::before {
    content: '◐';
}