Programming/HTML CSS
1. CSS z-index, top, left, zoom, float 사용
.css_img {
 position: relative;

 top:10px;
 left:10px;

 height:100px;
 width:100px;
}

.css_div {
 position: absolute;

 top:10px;
 left:50px;
}
▶CSS 정의 - img에서 지정한 이미지의 위치를 위쪽에서 10px, 왼쪽에서 10px 떨어진 지점에 배치합니다.
<img class="css_img" src="sample.jpg">
<div class="css_div">CLIEL</div>
▶CSS 적용 - div 위치를 위쪽에서 10px, 왼쪽에서 50px 떨어진 지점에 배치합니다.

2. CSS z-index, top, left, zoom, float 속성

(1) z-index

요소가 겹쳐서 배치될때 배치되는 순서를 지정합니다. 정수로 지정하며 숫자가 높을 수록 위로 올라오게 됩니다.

(2) position

위치와 관련된 속성을 설정합니다. 이 속성의 값을 absolute로 설정하면 top과 left 속성에 지정된 좌표값(절대값)에 해당하는 위치에 요소가 배치되도록 합니다.

(3) top

요소가 배치되는 세로위치를 지정합니다. 단위로는 in(인치), cm(센치미터), mm(밀리미터), pt(포인터), pc(피카스) 단위를 사용하며 em(배수, 1.5 = 150%), ex(em대비 1/2크기), px(픽셀), %(%단위)등의 상대적 단위크기를 사용하기도 합니다.

(4) left

요소가 배치되는 가로위치를 지정합니다. 단위는 top과 같습니다.

(5) zoom

요소가 배치될때 확대비율을 지정합니다. 1이면 100%를 1.5면 150%를 의미하며 100%, 150%의 단위를 사용하여 지정할 수도 있습니다.

(6) float

텍스트와 함께 배치되는 경우의 표시위치를 지정합니다. left(왼쪽), right(오른쪽) 값을 사용할 수 있으며 none(적용없음)을 지정할 수도 있습니다. none는 기본값입니다.

본래 이 속성은 이미지에만 사용하는 것을 기본으로 하지만 필요에 따라 div등 화면의 레이아웃을 구성하기 위한 다른 태그에도 적용이 가능합니다.

(7) overflow

부모 요소안에 자식요소의 배치가 포함되어 있는 경우 자식 요소가 부모요소의 범위를 벗어날때 어떻게 처리되느냐를 지정하는 속성입니다.

이 속성값을 hidden으로 하는 경우 안에 포함된 자식 요소가 범위를 벗어나면 벗어나는 부분을 숨기게 되고 scroll 로 지정하면 벗어나는 부분을 표시하되 그 영역이 브라우저 화면을 넘으면 스크롤을 생성하게 됩니다.

이 속성은 부모 요소에 적용해야 합니다.
0 0