 |
|
| |
| CSS float 속성, clear 속성, z - index 속성 |
|
|
  |
14년 전 |
- 박스 이동, 정렬(float 속성)
•속성 : float
•값 : left, right, none, inherit
•기본값 : none
•적용대상 : position 속성의 값이 'static' 인 요소(content 속성으로 생성된 내용 제외)
속성 값에 대한 의미는 다음과 같다.
float: left : 그 요소를 왼쪽으로 float된 블록 박스로 만든다.
float: right : 그 요소를 오른쪽으로 float된 블록 박스로 만든다.
float: none : 그 요소를 float 하지 않는다.
float 속성을 적용하는 요소는 어떠한 형태로든 폭을 지정해야 하는 규칙이 있다.
float는 뒤에 이어지는 다른 블록 레벨 요소의 박스에서도 유효하며 float가 헤제되지 않는다.(clear 속성으로 해제 가능)
/* float 사용 예제 */
div#content{
width: 200px;
height: 200px;
background-color: silver;
float: left;
}
div#side{
width: 300px;
height: 100px;
background-color: fuchsia;
}
div#footer{
width: 300px;
height: 50px;
background-color: aqua;
}
- 박스 이동, 정렬 해제(clear 속성)
•속성 : claer
•값 : left, right, none, both, inherit
•기본값 : none
•적용대상 : 블록 레벨 요소
속성 값에 대한 의미는 다음과 같다.
clear: none : float에 대하여 박스의 위치를 제약하지 않고 float는 계속해서 유효, float는 해제되지 않는다.
clear: left : 왼쪽으로 float된 박스보다 아래에 새로운 박스를 생성하여 표시, 왼쪽 float 해제
clear: right : 오른쪽으로 플로트된 박스보다 아래에 새로운 박스를 생성하여 표시, 오른쪽 float 해제
clear: both : 좌우로 float된 박스보다 아래에 새로운 박스를 생성하여 표시, 좌우 양측 float 해제
clear 속성은 float 된 박스 뒤에 이어지는 박스가 인접하지 않게 배치하는 속성이다.
/* clear 사용 예제 */
div#content{
width: 200px;
height: 200px;
background-color: silver;
float: left;
}
div#side{
width: 300px;
height: 100px;
background-color: fuchsia;
}
div#footer{
width: 300px;
height: 50px;
background-color: aqua;
clear: both;
}
- 겹쳐지는 순서(z-index 속성)
•속성 : z-index
•값 : auto, 정수, inherit
•기본값 : auto
•적용대상 : position 속성의 값이 'static' 이외의 요소
속성 값에 대한 의미는 다음과 같다.
z-index: auto : 그 박스의 겹쳐지는 순서는 부모 요소와 같다. 새로운 순서를 지정하지 않는다.
z-index: 정수 : 그 박스의 겹쳐지는 순서를 명시하며 기준이 되는 '0'이 자동으로 지정된다. 값이 큰 박스가 값이 작은 박스보다 항상 앞에 표시된다. 마이너스 값도 지정이 가능하다. 같은 값의 박스는 XHTML 에서 뒤에 출현하는 요소가 앞에 표시된다.
/* z-index 사용 예제 */
div#text1{
z-index: 10;
position: absolute;
width: 150px;
height: 150px;
background-color: silver;
}
div#test2{
z-index: 20;
position: absolute;
top: 50px;
left: 50px;
width: 150px;
height: 150px;
background-color: fuchsia;
}
div#test3{
z-index: 30;
position: absolute;
top: 100px;
left: 100px;
width: 150px;
height: 150px;
background-color: aqua;
}
|
|
 추천 : 369 |
추천
목록
|
|
| |
|
