레이아웃의 모든 것 (18-2 작성글)

1. position 속성 - relative, absolute, fixed

: position은 요소의 위치를 지정할 수 있는 레이아웃 태그로 float와 언뜻 비슷해보이지만 많이 다른 태그이다.

[위치를 정렬, 지정한다] 라는 용도는 같지만 position은 부모요소로 있지만 상속되지 않는다. 또한 float는 왼쪽, 오른쪽 위치 지정만 가능하지만 position은 절대적, 상대적위치로 상하좌우 지정이 된다.   

 

position은 아래의 속성 중 하나로 지정이 가능하다.

 

relative 

자기자신을 기준으로 상대적 위치를 잡으며 해당 오프셋은 다른 요소에 영향을 주지 않는다. 요소에 특별한 속성을 부여하지 않는다면 static과 동일하게 작용한다.  margin:auto가 사용이 가능한 position 속성이다.

 

 

absolute 

브라우저의 흐름에 상관없이 body 태그를 기준으로 위치를 지정한다. 하지만 가까운 상위요소가 존재한다면 그 상위요소를 기준으로 위치가 지정된다(static은 상위요소로 지정되지 않는다). relative와 동일하게 상하좌우로 움직일 수 있다. 또한 position:absolute로 지정된다면 div여도 더이상 widht:100%가 불가능하다. 

 

※ absolute는 어떤 영역을 화면에 좌표값으로 지정하는 절대값이기때문에 margin:auto / float 사용은 기본적으로 불가능하다.

※ static이 absolute의 상위요소에서 제외되는 이유는 요소의 위치를 문서의 흐름대로 지정하는 속성때문이다. static 은 top, right, bottom, left, z-index 태그의 영향을 받지 않는다. 시작값이 정확하게 선언되어있지 않은 기본값이라 absolute 위치값 설정자체가 불가능하다.

 

 

fixde

브라우저를 기준으로 설정되는 고정 속성. 기본적인 고정위치는 상단 윈쪽 꼭지점. 위치의 좌표를 수직, 수평에 구애받지 않고 지정할 수 있다. 

 

 

 

 

 

 

2. inline, inline-block, block 에 대해서

: 요소들을 어떻게 보여주느냐에 관한 dispaly에 사용되는 속성값들이다. 상황에 따라 속성값을 변경해가며 사용한다. 상위태그로 사용하여도 값이 상속되지는 않는다.

 

inline

대표적인 태그로는 <span>, <a> 가 존재한다. 해당 속성값으로 지정되면 앞뒤 줄바꿈없이 요소들이 나란히 배치된다. inline요소를 사용할때 주의할 점은 해당 요소가 지정하고 있는 공간만큼만 차지하는 성질때문에 width, height와 같은 크기변경 태그가 사용불가하다는 점입니다. 비슷한 맥략으로 margin과 paading은 좌우간격은 조절가능하나, 상하조절은 무시됩니다.

 

 

 

inline-block

inline과 block의 성질이 합쳐진 속성. 수평의 공간은 inline의 요소와 동일하게 지정하고 있는 공간만큼만 차지하며, 수직(상하)의 공간은 block과 동일하게 원하는대로 변경이 가능하다. 쉽게 말하면 앞뒤 줄바꿈없이 있는 태그의 크기변경, 여백변경이 가능하다는 것.

대표적인 태그로는 <button>, <select>가 있다.

 

 

 

block

 

위에 설명했듯이 block과 inline의 가장 큰 차이점은 요소의 크기다.  block은 브라우저의 가로폭을 전체를 차지한다. 그래서 줄바꿈없는 inline과 달리 아래로 떨어지는 특징이 있다.  이 특징을 이해하면 대표적인 태그들 예상이 가능하다, <div>,<p> 같은 태그다.

inline과 다르게 상하좌우 여백 변경, 크기변경이 자유롭다.

 

 

 

 

 

3. float에 대해서

: 요소의 좌우의 위치를 지정하며 정렬이 가능한 태그. 정확하게 말하면 요소가 [띄워지게] 만드는 태그이다. float는 left,right로 좌우설정, inherit로 상위요소에서 상속, none으로 지우기 등이 가능하다. float 속성이 지정되면 이름의 뜻과 동일하게 공간은 차지하지만 다른요소 배치에 영향을 주지 않게 된다. 이 특징때문에 float가 적용된 상태에선 부모요소가 float가 적용된 요소를 자식으로 인식하지 못하는 상황이 발생하게 된다. 이 문제를 해결하기 위해서는 아래와 같은 방법이 사용된다.

 

 

※ overflow를 응용하는 방법

 

이 방법은 부모요소(상위요소)에 overflow:hidden을 넣어 크기를 잡아주는 방법이다. overflow:hidden은 지정된 위치를 넘어간 요소를 숨기는 태그인데 이것은 부모요소 박스가 그 자식요소 콘텐츠를 숨긴다는 의미로도 사용이 가능하다. 띄워진 자식요소를 부모요소가 인지하여 그 자식요소를 감싸기위해 높이가 자동으로 조절되는 방법이다.

 

 

position에서 설명했듯이 float는 하위요소에게 속성을 상속한다. 그 특징때문에 float와 절대 뗄 수 없는 태그가 있는데 바로 clear다. [취소하다]라는 뜻을 가진 이 태그는 float의 속성이 상속되는것을 취소한다. 

 

보통은 both를 주로사용하지만 both는 양쪽의 모든 float를 제거한다는 뜻이고, 원한다면 left, right로 지정제거도 가능하다.

float가 지정된 요소는 정상적으로 처리되지 않는 오류가 많다. 상위요소의 높이가 없어지는 문제, 아래에 나타나지않고 중간에 붕뜨는 문제 등이 발생한다. 이러한 문제를 해결하기 위해 clear를 사용한다.