CSS Layout 정복하기!
html, body {
margin: 0px;
padding: 0px;
}
.box_model {
width: 300px;
height: 300px;
background-color: blue;
margin-left: 50px;
padding-left: 50px;
border: solid 50px red;
}
레이아웃 디스플레이 속성을 block/inline통해서 속성 변경 가능
<span>Hello World</span>
<span>Nice to meet you</span> <!--span은 inline요소인데,
block요소로 아래처럼 바꿀수 있음 -->
span { display : block; // div는 기본으로 block요소를 가지고 있음
width: 100px;
height: 100px;
background-color: red;
}
<h1>Hello World</h1>
<h1>Nice to meet you</h1> <!--h1은 block요소인데,
inline요소로 아래처럼 바꿀수 있음 -->
h1 { display : inline;
width: 100px;
height: 100px;
background-color: red;
}
<positioning 확인 법>
1.마진병합이일어나는지?
2.주체 속성 사용가능?
3.부모의높이값이 없을때 자식의 높이값으로 이동할 수 있는지?
모든 html은기본값이 static
static : HTML 태그의 기본값으로 위치 정보를 임의로 설정할 수 없음 기본적인 위치 지정 방식인 left, top, right, bottom 속성값이 적용되지 않음
fixed : 마진병합현상이렁나지않음, top 적용하면 위쪽상단 기준 100 아래로 바뀜 (3차원), 무조건 브라우저 기준으로 좌표가 형성이됨
relative : 마진병합일어남 top.left.bottom,right 사용가능, 자식의 높이값이 부모늬 높이값 영향줌 (2차원/3차원의 성격을 다 가지고 있음)
-absolute : 마진병합 안일어남, top/left사용가능, 브라우저 기준으로 top 설정됨 (fix)와 같다. 화면에고정되지는 않음
layer층의 우선순위 결정하고 싶을때 사용함(position 속성 사용할 시 적용 가능)
.sideleft {
position : absolute;
top: 0;
right: 0;
z-index: 1;
}
auto : 기본 값, 지정하지 않은것과 같음
number : 배치 순서를 결정하며 숫자가 높을 수록 앞으로 나옴, -1도 올수있음.
말 그대로 오른쪽 혹은 왼쪽으로 띄워서 정렬
absolute position(absoulte/fix)은 float을 무시한다
float를 사진과 함께 적용하면 글자들이 사진 주위로 둘러싼 형태가 된다 그걸 붙지 않게 하려면 clear 를 사용하면 됨
- clear : none
<div class="clearfix">
.clearfix {
clear: both;}
</div>