position, float : 배치방식
display : 속성, 박스유형
Position
: html요소들을 좌우로 배치하는 것에서 벗어나 기준 위치 내에서 자유롭게 배치하고자 할 때 사용. 애니메이션을 줄 수 있다.
{position:static;}
: position 속성을 입력하지 않았을 때의 기본값. top, left, right, bottom 속성값이 적용되지 않는다.
{position:relative;} 상대값
: 해당요소의 원래 위치를 기준으로 위치를 잡을 때 (원래 위치란 position:relative 속성이 없을 때의 위치) 화면이 바뀔 때 그대로 있게 잡아 주는 기준이 되는 역할. 떠 있으나 다른 요소들이 자리가 없어진 줄 모른다, 가운데 정렬이 안된다, 명령어로만 컨트롤 할 수 있다, top, left를 우선순위로 둔다. 부모 요소를 기준으로 자리가 잡힌다.
즉 요약하면
1. 적용된 요소는 레이아웃의 변동이 없다(그자리임)
2. 적용된 요소의 크기는 내용의 크기만큼 자동으로 인지되지 않는다.
3. 자기자신(원래 있던자리)이 기준.
(원래 있던 자리에서 상대위치(left, right, top, bottom)를 정한다.
(left, right, top, bottom으로 위치를 잡으면 실체가 움직이는 것이 아니다.)
실체가 움직이려면 margin을 이용해야 한다.
{position:absolute;} 절대값
: 부모 요소 중 기준 요소 내에서 절대값으로 특정 위치에 배치할 때 절대값, 부모가 만들어 놓은 반경 내에서 절대값 유지. 숨어 있는 요소가 올라올 때 올라온 반경 내에서 자리값 유지. absolute요소 사용시 바로 밑에 있는 요소가 올라옴. 부모 relative 안으로 들어가 그 위치가 0이 된다.(즉 부모요소중 기준요소 내에서 절대값으로 특정위치에 배치할 때.)
absolute가 적용된 요소의 기준이 될 자격: 가까운 부모중에서 position 속성이 기본값(static)이 아닌 요소(fixed, relative, absolute)
{position:fixed;}
: 무조건 화면을 기준으로 위치를 잡을 때(고정).
-위에 나열한 position 속성들은 기준위치 내에서 가까운쪽 부터의 수치로 위치를 지정한다.
left, right, top, bottom 기본으로 지정 (세부조정 margin으로도 조절 가능)-
Display
block(div, p h...)
-div처럼 한 줄씩 쌓임
그렇기에 width : 100%; 를 넣을 필요가 없다.
여기에 padding 5%를 추가한다면 width가 총 110%가 되기에 스크롤이 생긴다.
width, height, margin, padding 모두 반영된다.
ex) div, h1, ul, li, p, table, pre, form, header, nav 태그, display 속성의 기본값
inline(span, a, em...)
-옆으로 연결됨. 크기 조정 안 됨(width, height, margint-top 등 적용 안 됨)
margin과 padding은 좌우만 반영. 상하는 무시된다.즉(width, height는 무시하고 margin, padding은 좌우만 반영, 상하는 무시)
ex) span, a, img, input, strong, br 태그
inline-block(button,select)
-inline처럼 옆으로 연결됨. block처럼 width, height, margin, padding 등이 적용됨.
(한 줄에 여러개 배치 가능)
none
- 화면에 나타나지 않게 함. 요소가 차지한 영역까지 없앤다. 이와는 달리 visibility:hidden 속성은 영역을 남긴다.
float
요소를 특정한 방향으로 띄우는 효과를 줌.
다른 element들은 float 속성으로 떠버린 태그가 남긴 공간을 채우려 한다.
{float: left} 좌측 끝에 배치
{float: right} 우측 끝에 배치
clear 속성을 적용해 주면, float를 지정해 주었던 효과가 사라지게 된다.
clear:right 속성을 가진 element와 float:right를 가진 element가 동시에 있을 경우, float:right 속성을 가진 태그가 영향을 받지 않게 된다.
<div class="float-test">
<img src = "http://dkfjkd>
<p>이미지입니다.</p>
</div>
img {
float: left;
}하지만 float 속성을 사용하면 block 성질을 가진 요소로 인해 레이아웃이 망가지거나 부모가 높이를 인지를 못해서 부모를 벗어나는 경우가 발생할 수 있다.
이를 해결하는 방법은 clear를 사용하는 것이다. clear는 float의 속성을 지우는
역할을 하며 left, right, both가 있다.
만약 float:left의 속성을 지우고 싶은 영역이 있다면 해당 class지정 후, clear:left 적용하면 됨 그러면 세로 정렬을 무시하고 그 아래 영역으로 내려가게 됨. 이것을 해결하기 위해 clear를 사용한다. clear은 float의 속성을 지우는 것이고 left, right, both가 있다.
float을 clear하는 4가지 방법
1. 가상요소 :after사용
우선'가상 선택자'라는 개념을 이해해야 하는데 흔히 알고있는 :link, :visited,
:hover, :active, :focus는 모두 가상클래스이다.
'가상 선택자'는 다시 '가상 클래스'와 '가상 엘리먼트'로 구문할 수 있다.
'가상 클래스'는 요소에 직접적으로 클래스를 부여하지는 않았지만, 요소의 상태에 따라서 클래스를 적용한 것처럼 효과를 다르게 줄 수 있다. 가장 많이 쓰이는 예 시 는 a태그의 효과를 바꾸기 위해 a:hover, a:link이고, 이때 a뒤에 쓰인 :hover, :link를 가상 클래스라고 합니다.
'가상 요소'는 말 그대로 가상의 요소를 만들고 내용을 넣어 출력하겠다는 것입니 다. 보통 ::after, ::before을 자주 사용합니다.
그럼 ::after로 어떻게 해제 하는지 알아보면 float 속성을 적용한 요소의 부모 요소에 ::after를 사용해주시면 됩니다.
#container::after{content:"";display:block;clear:both;}-
overflow속성 사용
자식 엘리먼트의 높이를 부모에게 반영하는 방법으로 부모 엘리먼트에 overflow:auto 또는 overflow:hidden속성을 부여하는 방법이 있습니다.
'overflow:auto' 사용시 자식의 너비가 부모의 너비보다 크다면 가로 스크롤바가 생기고, 'overflow:hidden'의 경우 넘치는 부분이 잘리기 때문에 사용하지 않는 것이 좋습니다. -
빈 엘리먼트에 clear속성 적용
이 방법은 #container영역이 끝나기 직전 빈 엘리먼트를 넣고 빈 엘리먼트에 clear:both 속성을 부여하여 부모가 자식의 높이를 인식하도록 하는 방법입니다. 하지만 의미 없는 빈 엘리먼트를 사용하기 때문에 역시 권장되는 방법이 아닙니다.
.clear{clear:both;height:0;overflow:hidden;}처리하여 .clear라는 빈 엘리먼트가 높이를 갖지 않도록 하고 보이지 않도록 처리 합니다. -
바깥 div를 float 하면 자식의 float 높이를 인지하여 그만큼의 좊이를 차지한다. 그러나 block 요소의 성질을 잃게 되기 때문에 width: 100% 추가해야한다.
