[길벗 학습단] 6장 CSS 필수 속성 다루기 (3)

5. 위치 속성으로 HTML 요소 배치하기

1. position

html 요소를 좌표값에 따라 배치할 때
static, relative 등 속성값이 있다. static은 기본 흐름에 따라 배치하는 것

1. relative

기준점이 해당 요소의 왼쪽 위 모서리.
left: 10px; /* 왼쪽 위 모서리로 부터 왼쪽으로 100px 떨어진 것 */
top: 10px; /* 왼쪽 위 모서리로부터 100px 아래 */

2. absolute

기준이 웹브라우저의 왼쪽 위 모서리. (relative랑 헷갈리니 꼭 실습해 보기)

3. fixed

absolute와 비슷하지만 스크롤해도 그 위치에 있음.

4. sticky

스크롤하는 중에 임계점에 도달하면 fixed인 것처럼 고정됨.

5. z-index

position으로 요소 위치를 지정하다 보면 겹치는 때가 있다. 이 때 겹치는 요소들의 앞뒤 배치를 바꾸고 싶을 때 사용한다.더 높은 z-index 값을 갖는 요소가 앞에 표시된다.

2. float

1. 블록 성격 요소를 인라인 성격 요소처럼 배치하기

div는 블록 요소이지만 float 값을 주면 인라인처럼 행동한다. (그렇게 보인다.)
그 이유는 float은 요소를 띄우는 것이기 때문이다. (배를 띄우듯이)

<div class="red>red</red>
<div class="blue">blue</blue>

.red { 
background: red;
float:left;
}

.blue {
background: blue;
}

이렇게 두면 red 부분이 인라인처럼 되지만 실제론 파란색 요소의 일부가 빨간색 요소 밑에 깔려 있게 된다.

2. float 속성 사용시 문제점

float을 사용하면 요소를 띄우는 것이기 때문에 다른 요소들이 그 요소를 제대로 인식하지 못한다. 그래서 레이아웃이 깨질 수도 있다. 예를 들어 div가 여러개 겹쳐져 있는 경우, 자식 div에 float 속성을 주면 부모 div는 자식 div를 인식하지 못하기 때문에 div 크기가 작아 보일 수 있다. (이유: div는 내용물이 있어야 보이므로)

해결방법: clear 사용

3. clear

float을 씌운 요소 다음에 나오는 요소가 float에 영향을 받아 깔리지 않도록(?) clear 값을 준다.

답글 남기기

이메일 주소는 공개되지 않습니다.