position, display, float 속성 정리
1. Position
(1) static
기본적인 위치 지정 방식. 문서의 기본적인 흐름을 따른다.
모든 태그들은 처음에 position: static 상태이다. (기본적으로 static이라 따로 써주지 않아도 된다.)
left,top,right,bottom값이 적용되지않는다
차례대로 왼쪽에서 오른쪽, 위에서 아래로 쌓인다.
(2) relative
Static과 유사하나 원래 위치에서 주어진 값만큼 이동된다.
top(위), right(오른쪽), bottom(아래), left(왼쪽) 속성을 사용해 위치 조절이 가능하다.
Relative 속성에서 #top 태그에 top: 5px를 주면 위로 이동할 것 같지만 아래로 이동한다. relative는 각각의 방향을 기준으로 태그 안쪽 방향으로 이동한다. 바깥쪽으로 이동하게 하고 싶으면 5px 대신 음수 -5px를 주면 된다.
(3) absolute
기본 흐름을 따르지 않고 부모 엘리먼트의 상대적으로 지정된다. 자세한 내용은 아래와 같다.
1) 부모 요소 포지션이 relative, absolute, fixed인 태그가 있다면 부모의 요소를 기준으로 움직인다.
2) 부모요소 포지션이 static 이라면 body 태그를 기준으로 배치된다.
3) 부모요소가 없다면 포지션 문서의 body를 기준으로 배치된다.
(4) fixed
Fixed 포지션은 화면의 스크롤이나 움직임에 관계없이 화면의 특정 부분에 고정되는 포지션이다.
아래 그림은 fixed와 absolute의 차이점이다.
2. display
(1) block
block은 한 영역을 차지 하는 박스형태을 가지는 성질이다. 그렇기 때문에 기본적으로 block은 width값이 100%가 됩니다. 그리고 라인이 새로 추가된다는 것을 알 수 있다.
• block은 height와 width 값을 지정 할 수 있다.
• block은 margin과 padding을 지정 할 수 있다.
CSS 소스코드
header {
border: 1px solid black;
display: block;
width: 200px;
height: 200px;
}
nav {
border: 1px solid black;
display: block;
width: 200px;
height: 200px;
}
section {
border: 1px solid black;
display: block;
width: 200px;
height: 200px;
}결과물
(2) inline
inline은 주로 텍스트를 주입 할 때 사용 되는 형태이다. 그렇기 때문에 기본적으로 block처럼 width값이 100%가 아닌 컨텐츠 영역 만큼 자동으로 잡히게 되며 라인이 새로 추가 되지 않는다. 높이 또한 폰트의 크기만큼 잡힌다.(line-height로 설정이 가능 하긴 합니다.)
• width와 height를 명시 할 수 없다.
• margin은 위아래엔 적용 되지 않는다.
• padding은 좌우는 공간과 시각적인 부분이 모두 적용 되지만 위아래는 시각적으로는 추가되지만 공간을 차지 하지는 않는다.
CSS 소스코드
header {
border: 1px solid black;
display: inline;
width: 200px;
height: 200px;
}
nav {
border: 1px solid black;
display: inline;
width: 200px;
height: 200px;
}
section {
border: 1px solid black;
display: inline;
width: 200px;
height: 200px;
}
결과
(3) inline-block
inline-block 은 말그대로 inline의 특징과 block의 특징을 모두 가진 요소이다. inline-block의 특징은 다음과 같다.
• 줄바꿈이 이루어지지 않는다.
• block처럼 width와 height를 지정 할 수 있다.
• 만약 width와 height를 지정하지 않을 경우, inline과 같이 컨텐츠만큼 영역이 잡힌다.
CSS 소스코드
header {
border: 1px solid black;
display: inline-block;
width: 200px;
height: 200px;
}
nav {
border: 1px solid black;
display: inline-block;
width: 200px;
height: 200px;
}
section {
border: 1px solid black;
display: inline-block;
width: 200px;
height: 200px;
}결과물
3. float
(1) 개요
CSS의 float 속성은 특히 국내 실무 내에서 레이아웃 설계하는 과정에서 많이 사용하는 속성이다.
복잡한 형태의 레이아웃을 구성하는데 필요한 핵심 속성으로 특정 요소를 떠있게, 흐르도록, 부유하게 하도록 하는 속성이다.
다시 말해, float 속성을 사용해 박스를 왼쪽(left) 또는 오른쪽(right)으로 "부유"시키는 레이아웃 기법이다.
여기서 '부유하다' 라는 의미는 요소가 기본적인 문서 배치의 흐름에서 벗어나 요소의 모서리가 페이지의 왼쪽이나 오른쪽으로 이동하는 것을 말한다.
이 플로팅 모델을 이용하면 문서의 흐름과 관계없이 화면 배치를 유연하게 할 수 있다.
(2) float 의 속성값(value)
• left : 요소를 왼쪽 방향으로 부유하게 설정
• right : 요소를 오른쪽 방향으로 부유하게 설정
• none : 기본값(default), 요소를 띄우지 않는다.(3) 주의사항
플롯 속성을 사용할 요소는 position 속성의 absolute 값과 양립할 수 없다.
(4) 플롯팅의 문제점
1) 아래와 같이 컨텐이너가 엘리먼트를 감싸야 한다. 하지만, 플로팅을 사용하다보면 (2)와 같은 현상이 발생한다.
2) 아래와 같이 컨텐이너가 엘리먼트를 감싸지 못하는 문제가 발생한다.
(5) 플로팅 레이아웃 해제
플로팅한 요소는 레이아웃을 무너뜨리는 경우가 나타난다. 이를 플로팅을 사용하면서 발생하는 문제인데 이를 해결하기 위해서는 float을 해제해 주어야 한다.
이를 위해서 clearfix라고 전세계적으로 관용적으로 불리는 방법을 사용한다. 이 방법 외에 다른 방법으로도 가능하지만 float을 이용해 레이아웃을 잡다보면 clear가 필요해지기 때문에 가급적 플롯된 요소의 부모 요소에 clearfix 방법을 적용하는 것을 권장하고 있다.
clear의 속성 값은 다음과 같다.
• left : 왼쪽에 floating 된 요소를 지정 해제
• right : 오른쪽에 floating 된 요소를 지정 해제
• both : 왼쪽 오른쪽 모두 floating 된 요소를 지정 해제
• none : 기본값(default), floating 을 해제하지 않음
이 방식은 구형 브라우저인 IE7 에서 가상 요소를 지원하지 않기 때문에 다음과 같은 핵을 사용해야 한다.
가상 요소 대신에 부모 요소에 CSS 핵인 zoom:1; 이라는 속성을 적용하는데 이는 MS사의 인터넷익스플로러 구형 브라우저 중에 [IE 5.5 ~ 7]은 hasLayout 이라는 속성을 가지게 구현해 놓은 IE 만의 고유한 속성이다.
(6) 그 이외의 해결방법
첫 번째 float 해제 방법
CSS
.parent { float: left; }플롯된 요소가 자식 요소일 경우에 부모요소는 자식 요소(문서 흐름에서 벗어남)를 감싸지 못하는 특징으로 인해 레이아웃이 무너진 형태처럼 보이게 된다. 이는 플롯을 사용하게 되면 발생되는 현상이며 이 문제를 해결하기 위해서는 플롯의 영향을 받지 않도록 해야 한다.
다시 말해, 부모요소는 플롯된 자식요소를 포함하는 경우에 부모요소는 높이를 인지하지 못하게 된다.
이 문제를 해결하는 방법 중에 하나가 부모(컨테이닝 요소)에게도 float 속성을 반영하는 방법이 있다.
이렇게 하면 부모 요소는 자식 요소의 높이를 인지하게 되지만 부모 요소도 float 된 요소가 되어 인라인 블럭의 특징을 가지고 되기 때문에 비주얼 디자인 레이아웃에 따라 상황에 맞도록 사용해야 한다.
두 번째 float 해제 방법
이 방법 역시 부모 요소에 적용하는데 display: inline-block; 속성을 사용하는 방법이 있다.
부모 요소는 자식 요소의 높이를 인지하게 되지만 되지만 부모 요소에 정의된 인라인블럭 속성 특성 때문에 본인 영역만큼만 너비를 가지게 된다.
CSS
.parent { display: inline-block; }세 번째 float 해제 방법
세 번째 방법으로 플롯을 해제할 수 있는 속성은 overflow:hidden; 방식이다.
이 속성 역시도 부모 요소에 적용해야 하며, 이 속성의 특징은 자식 요소가 부모 요소 박스보다 클 경우에 자식 요소 박스의 콘텐츠를 숨기고 보이지 않게 해주는 속성이다.
overflow: auto;를 적용해도 되지만 자식 요소 박스의 너비가 부모 요소 박스의 너비보다 클 경우에 스크롤이 생기기 때문에 권장되지 않는다.
overflow 특징대로 넘치는 것을 숨겨주는 속성인데, 여기선 다른 의미도 포함하고 있다.
넘치는 콘텐츠를 숨긴다는 의미는 부모 요소 박스가 그 자식 요소 콘텐츠를 숨긴다는 것이다.
그런데 부모 요소가 플롯된 자식 요소로 인해 높이를 인지하지 못하고 있는 상황에서 overflow: hidden; 속성을 적용하게 되면 부모 요소(컨테이닝 박스)는 넘치는 요소를 숨김 처리를 하려고 하기 때문에 자식 요소의 높이를 인지하기 위해 자동으로 높이값을 계산하게 된다.
CSS
.parent { overflow: hidden; } 참고로 overflow:hidden; 속성을 적용하는 방법은 권장되지는 않는다.
예를 들어, 동적(스크립팅)으로 자식, 자손 요소들 중에서 부모 요소 박스를 벗어나서 보여주어야 될 경우에 hidden 값으로 인해 보여주고자 하는 콘텐츠를 보여줄 수 없게 되기 때문에 잘 판단하여 선택적으로 사용해야 한다.
네번째 float 해제 방법
마지막으로 소개하는 방식은 micro clearfix 라는 이름의 테크닉이다.
이 방법은 CSS 연구전문가인 니콜라스 갤러거가 고안한 방법(micro clearfix hack)으로 처음 HTML5 보일러플레이트란 템플릿 엔진을 통해 소개되었다.
2011년에 고안되었지만 이후 부트스트랩(Ver.1~3)에서 이 방법을 사용하면서 널리 알려지게 되었다.
CSS
.parent {
/* For IE 6/7 only */
*zoom: 1;
}
.parent:before,
.parent:after {
content: "";
display: table;
}
.parent:after {
clear:both;
}정리하며
CSS 레이아웃과 관련된 방법은 position 속성도 있으나 최근에는 플렉스박스(flexbox), 그리드 등의 방법을 많이 사용하고 있다.
