#11 CSS position, inline, inline-block, block float

-- Position

 

CSS 스타일링에서 기본적으로 갖고 있는 포지션 상태를 static이라고 한다.

 

> position: relative

 

relative로 스타일링을 하게 되면, top, bottom, left, right로 값을 지정해주면서 이동이 가능하다. 이때 이동의 기준은 지정해주는 위치로부터 움직인다.

예) top: 10px --> 위에서부터 아래로 10px 움직인다.

     top: -10px --> 마이너스 10픽셀 이기 때문에 위와 반대로 위로 10px 움직인다.

 

> position: absolute

 

absolute의 직관적인 말 뜻처럼, 절대적인 위치를 포지셔닝 할 수 있다. 

이때, 포지셔닝의 위치는 상위 태그, (그 위의 상위 태그가 없을 때는, body태그가 된다)의 position: static 속성을 가지고 있지 않은 부모를 기준으로 움직인다.

 

하지만, 부모 중에 포지션이 relative, absolute, fixed인 태그가 없다면 가장 위의 태그(body)가 기준이 된다.

 

> position: fixed

 

실제로 눈으로 보이는 스크린의 위치에 포지셔닝(고정)을 한다.

티스토리 블로그의 상단에 있는 내비게이션 바나 애플 홈페이지의 상단 내비게이션 바가 대표적인 예.

보통 그래서 body의 margin-top에 공간을 지정하면서 body안의 내용들과 내비게이션 바가 겹치지 않게 스타일링한다.

 

-- display 속성

 

> inline 요소

 

말처럼 줄 속에 들어가는 요소. <span> <a> <img> <li>등이 해당된다.

 

> block 요소

inline과 반대되는 느낌으로, <div> <p> <h1> <ul> <ol> 등의 태그들이 해당된다.

block 요소를 사용할 때는 기본적으로 width가 100%를 차지하게 된다. 그렇기 때문의 별도의 스타일링이 없으면 자동으로 새로운 줄에 계속 생성된다.

 

> inline-block 요소

 

block요소로 이루어지는 inline을 inline-block라고 한다.

일반적으로 block 요소와 다르게, inline-block은 생성될 때 자동으로 줄 바꿈이 돼서 한 줄에 같이 존재할 수 없는데,

 

display: inline-block

 

으로 지정하게 되면 가능해진다.

즉, 박스 모양이 옆으로 늘어선다.

 

--float

> float

 

float은 페이지의 레이아웃용으로 많이 사용된다. 그리드 레이아웃이라고 부르기도 한다.

말 뜻처럼 띄우는 개념인데, 3차원 도면으로 봤을 때, 살짝 위로 띄어서 left나 right으로 옮기는 포지셔닝.

상위 태그에 특정하게 가로길이를 설정하지 않았으면 보이는 화면에서 inline-block형태로 지정된 방향으로 위치하게 된다.

 

float: left

 

왼쪽으로 inline-block형태로 block이 오게 된다.

만약 여러 개의 태그들이 float : left가 되어서 왼쪽으로 쌓이다가, 더 이상 한 화면 안에 left 정렬하지 못하게 되었을때, 다음줄로 자동으로 이동하게 된다.

float: right도 여러개의 inline-block 형태들이 오른쪽으로 정렬되면서 쌓이다가 위와 같이 더이상 정렬할 공간이 없으면 줄 바뀜이 된다.

 

 

※ 3개 이상의 block이 존재하고, 그중 한 개만 float이 되는 경우에는,

 

float 속성을 처리당한 그다음의 block은 그 위의 float처리가 되어 있는 inline-block의 속성을 따라가게 된다.

 

예) div1 , div2 가 있고 div1에만 float: right가 되어있다고 가정하자.(div2에는 별도의 스타일링이 지정되지 않았다.)

 이때의 결과 값은 |div2______________|div1_____| 이렇게 한 줄에 div2가 왼쪽에 div1이 오른쪽에 float 된 상태를 볼 수 있다.

 

일반적으로 생각해보면, div1은 오른쪽으로 float 되고, div2는 block속성이니까 div1줄 아래 div2가 있어야 할 것 같지만, div2가 별도의 스타일링이 되지 않아서, div1의 inline-block 속성을 따라가게 되어 둘 다 한 줄에 존재할 수 있는 것이다.

 

+ 다르게 설명하면 div1은 오른쪽으로 붕~떠서 붙게 되고 div2는 div1아래에 깔리게 된다.

하지만 div2의 inline들은 (만약 p태그처럼 글이 적혀있으면) 그 글들은 div1아래에 겹쳐서 들어가게 되지 않고 글은 볼 수 있다.