선택자 {선언}
선택자, 선택자 {선언}
선언
|
속성:속성값 |
선택자.class {선언}
예제)
|
p.red{color:red} <p></p> <- 적용되지 않는다. <p class=”red”></p> <- 적용된다. |
독립적 class
l ‘.’ 표기자 이용
예제)
|
.red{color:red} <h3 class=”red”></h3> <- 적용된다. <p class=”red”></P> <- 적용된다. |
아이디에 스타일을
l ‘#’ 표기자 이용
l ID 는 유일하므로 한 문서에 한번만 사용된다.
예제)
|
#red{color:red} <p id=”red”></p> <- 적용된다. <p></p> <- 적용되지 않는다. |
주석
‘/*’ 로 시작하여 ‘*/’로 끝난다.
텍스트 속성
|
속성 |
속성값 |
설명 |
|
color |
red, #FF0000 |
텍스트 색상 |
|
direction |
ltr, rtl |
텍스트 방향 |
|
line-height |
150% |
줄 간격 |
|
letter-spacing |
-0.1px |
글자 간격 |
|
text-align |
left, right, center, justify |
텍스트 정렬 |
|
text-decoration |
none, underline, overline, line-through, blink |
텍스트 장식 |
|
text-indent |
20px |
들여쓰기 |
|
text-transform |
none, capitalize, uppercase, lowercase |
대소문자 지정 |
|
word-spacing |
1px |
단어 간격 |
배경 속성
|
속성 |
설명 |
값 |
|
배경색을 지정할 수 있습니다. |
#FFFF80, Ivory | |
|
배경이미지를 지정할 수 있습니다. |
url(bg.gif) | |
|
배경이미지의 반복 여부를 지정합니다. |
repeat, repeat-x, repeat-y, no-repeat | |
|
배경이미지의 위치를 지정합니다. |
top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right | |
|
배경이미지의 스크롤 여부를 지정합니다. |
scroll, fixed |
폰트
l Font-family
l Font-size
l Font-weight
폰트 크기 단위
|
절대단위 |
상대단위 |
|
pt (포인트, 1pt= 1/72 in) |
% (기준이 되는 글꼴에 대한 퍼센트) |
|
in (인치, 1in = 25.4 mm) |
em (기준이 되는 글꼴에 대한 문자의 높이) |
|
mm (밀리미터) |
|
|
cm(센티미터) |
|
|
pc (파이카, 1pc=12pt) |
|
|
px (픽셀,1px=모니터의 1도트) |
|
Box model
중요한 4가지는 content, padding, border, margin 입니다.
1. content : 순수한 콘텐츠
2. padding : 콘텐츠와 경계선 사이의 여백
3. border : 경계선
4. margin : 경계선 밖에서 박스모델의 최종 경계선까지의 여백
border
<p style="border-width:2px; border-color:gray; border-style:solid;">solid 스타일의 경계선</p>
<p style="border-width:2px; border-color:gray; border-style:dotted;">dotted 스타일의 경계선</p>
<p style="border-width:2px; border-color:gray; border-style:dashed;">dashed 스타일의 경계선</p>
<p style="border-width:2px; border-color:gray; border-style:double;">double 스타일의 경계선</p>
