1. Margin (BOX 의 여백지정)
{ margin-left : 여백값 ; --------> %값이나 길이단위로 표시.
margin-right :여백값 ; 여백을 음수값을 주면 요소가 잘리는 현상발생
margin-top : 여백값 ;
margin-bottom : 여백값; }
- shorthand 로 표기할때 유의할 것
{margin : 10pt} --> 하나의 속성값만 표기하면 전체속성값이 동일
{margin : 10pt 20pt} --> 두개의 속성값이 표기되면 상하/좌우 속성값을 말한다.
{margin : 10pt 20pt 30pt} --> 세개의 속성값이 표기되면 상/좌우/하 속성값
{margin : 10pt 20pt 30pt 40pt} --> 네개 각각의 속성값
이와같이 shorthand 방식으로 쓸수 있는 것으로
margin, border-width, border-style, border-color, padding이 있다.
2. Border(테두리를 지정)
1) 테두리선 모양 지정
{ border-style : none/ ---------> border=0. 테두리가 없음
dotted/dashed/ --> 점선모양/굵은 점선모양 (익스플로러 5.5 부터 가능)
solid/double/ ----> 실선모양/이중 실선모양
groove/ridge/ ----> 오목하게 들어간/볼록하게 나온 액자 테두리 모양
inset/outset ;} ----> 왼쪽 빛에 의해 명암을 준 모양으로 오목/볼록한 모양
이 속성도 방향에 따라
border-top-style, border-bottom-style, border-left-style, border-right-style 의 부분속성 있다.
2) 테두리의 폭지정
{ border-width : thin/medium/thick/ --> 가늘게/보통/두껍게
길이단위값 ;}
border-top-width, border-bottom-width, border-left-width, border-right-width 가 있다.
3) 테두리 색상설정
{ border-color : 색상값/명 ;}
border-top-color, border-bottom-color, border-left-color, border-right-color 있음
3. Padding(컨텐츠와 테두리사이의 간격)
{ padding : 간격수치값 ;}
padding-top, padding-bottom, padding-left, padding-right
4. Position (BOX의 위치지정)
택스트위에 텍스트를 올리거나 이미지를 올리거나 할때 사용한다.
{ position : static/ ----> 이동성이 없는 정적인 형식. 크기속성만 있음
relative/ ----> left top의 위치와 크기속성이 따라온다. 상대적 위치 -값도 가능
위치를 지정할때 left/top 방식과 bottom/right 방식이 있으며 둘중 하나만 적용한다.
브라우저의 안쪽으로 이동하는 경우는 +, 바깥쪽으로 이동하는 경우는 - 값이 지정된다.
absolute ;} --> left top의 위치와 크기속성이 따라온다. 절대적 위치(0,0)기준
z-index : 겹쳐지는 순서. 값이 클수록 위에 위치
5. Visibility (숨김처리)
{ visibility : visible/hidden ----> hidden은 보여주지만 않을 뿐 영역은 유지된다.
점선이 dotted 였군요..;; 잘 쓰겠습니다.^^
메뉴글자에 마우스 오버시 밑에 예쁜 색의 점선이 있으면 이쁘더라고요.
메뉴에 적용하려면 스타일시트를 수정하면 되는 걸까요?..;;