.class : class="class" 의 모든 요소를 선택
#id : id="id" 의 모든 요소를 선택
:link : 링크 선택자는 html에서 모든 링크들을 선택.
background : 모든 background 속성을 한번에 선언할 수 있다. ex) div{background:#ff0000 url(bg.gif) top left no-repeat}
background-color : 배경의 색상을 지정.
background-image : 배경의 이미지를 지정.
background-position : 배경의 위치를 지정.
border : 요소에 테두리 효과를 주는 것. color, width, style. ex) div { border:solid 2px #ff0000; }
height : 요소의 높이값을 지정.
속성 : auto - 기본값, 브라우저의 높이에 따라 자동으로 설정.
% - 요소가 포함된 영역의 퍼센트 값으로 계산. ex) div { height:50px; }
font : 모든 폰트 속성을 하나로 정의. font-size,font-family 는 필수 값. ex) div { font:italic small-caption bold 12px arial,sans-serif; }
line-height 속성은 선(텍스트 줄) 사이의 간격을 정의한다.
속성 font-weigth - 폰트의 굵기를 지정.
bold (두껍게) ex) { font-weight:bold; }
margin : top right bottom left ( 10px 10px 10px 10px ) ex) div { margin:10px 20px; }
auto - 브라우저가 자동으로 계산하여 중앙에 오게 위치.
padding : top right bottom left ( 10px 10px 10px 10p ) ex) div { padding:10px 20px; }
clear : float 된 요소를 해제시키는 방법으로 clear 속성에 지정된 값에 위치된 float 속성은 적용되지 않는다.
float : 박스 요소를 띄울 위치를 지정한다.
만약 position 속성에서 absolute 가 지정되어 있다면 float 속성은 무시된다.
left - 요소를 왼쪽 방향으로 띄워지게 지정
right - 요소를 오른쪽 방향으로 띄워지게 지정
float할 요소는 width 값을 지정해준다. 너비를 지정해주지 않으면 각 브라우저 마다 랜더링이 달라진다.
float된 요소는 브라우저의 정상흐름을 벗어나 해당 문서(부모요소)의 가장 왼쪽 또는 오른쪽에 위치한다.
display : 인라인(inline), 블럭(block) 타입인지 등에 관한 요소의 유형을 지정.
block - 위아래 줄바꿈이 되는 블럭요소로 지정.
position : 해당요소가 문서나 브라우저 상에서 어디에 위치 될지를 지정. ex) div { position:absolute; left:50px; top:10px; }
absolute - 해당 요소의 첫번째 부모 요소 위치에 따라 지정
relative - 해당 요소의 기본위치에 따라 지정.
예를 들어 left 20 이면 20픽셀이 요소의 왼쪽 위치에 추가된다.
visibility : 해당 요소가 보여지게 할지 안보여지게 할지 지정.
visible - 기본값, 요소가 보여지게 지정.
hidden - 요소가 보여지지 않게 지정 ( 해당 요소의 공간은 유지됨)
{ visibility:hidden; } 은 보여지지 않지만 공간은 차지하고 있으며,
{ display:none; } 은 보여지지 않으면서 공간도 없어지게 된다. 두 속성의 차이점을 주의해야 한다.
text : line-height - 텍스트 줄 간격을 지정.
text-align - 텍스트의 수평방향 정렬을 지정.
vertical-align - 요소의 수직 정렬에 대한 지정
letter spacing - 자간 간격 너비를 지정
line-height - 텍스트 줄 간격을 지정
'help > html,css' 카테고리의 다른 글
| [html] 기본 Tag 설명 (0) | 2013.02.26 |
|---|
호빵팔이