TIL 07 CSS Position Display

 

1.  Css Position 

css position 속성은 문서 상에 요소를 배치할 방법을 지정한다. 대표적으로 relative, absolute, fixed등이 있다.

 

01.  relative

 

 

 

 

빨간박스와 파란박스를 만들어서 어떤 포지션값도 주지않은 상태이다. 디폴트값은 static이고 이는 아무영향을 미치지않는다.

이제 파란박스에 position값을 relative로 주면 어떻게 변하지 보면

 

 

 

relative는  원래 위치에서 top, left에서 -100px, 100px만큼 떨어진곳에서 위치하는걸 볼 수 있다. 값이 음수면 방향이 반대로 된다.

 

02.   absolute

absolute는 부모 요소의 position이 relative, fixed, absolute중 하나면 부모 기준으로 위치가 결정되는데 그 외라면 가장 상단 부모태그인 body를 기준으로 결정된다.

 

 

 

파란박스의 position을 absolute를 두고 top, left는 각각 0px, 300px값을 준 결과이다. 부모태그는 body를 기준으로 움직인거다.

보통 body태그가 아닌 부모태그를 기준으로 absolute를 사용할려면 부모태그에 position값을 relative를 준다.

 

03.  fixed

fixed는 부모태그의 position과 상관없이 항상 고정된 자리에서 있다. 스크롤을 내려도 같은 자리에 위치해있다.

 

 

position을 fixed로 고정시켜놓고 스크롤을 내리면 어떻게 되는지 보면

 

 

위와 같이 고정되있는걸 확인 할 수 있고, top, left로 고정시키고 싶은 위치도 정할 수 있다.

 

2. CSS display

display속성은 요소를 화면에 어떻게 보여줄지 결정하는 요소다. 대표적으로 block, inline, inline-block등이 있다

 

01.  inline

inline 속성의 html요소들은 줄 바꿈없이 같은줄에 배치가 된다. 대표적인 inline태그는 <span>, <a>, <img>등이 있다.

 

 

 

 

위 예시와 같이 줄바꿈없이 한줄에 나오는걸 볼 수 있다. 그리고 inline요소가 차지하는 영역은 배경색을 보면 알 수 있듯이 콘텐츠가 있는 영역까지만이다. 인라인요소는 width, height으로 크기를 정해도 css내에서 무시된다.

 

02. block

block 속성의 html요소들이 줄 바꿈이 생긴다.  대표적인 block태그는 <div>, <p>, <h2>등이 있다.

 

 

 

위 예시와같이 block요소 태그들은 줄바꿈이 생기고 block 요소의 범위는 따로 width을 정해주지않으면 페이지 끝까지 차지한다.

아래 정사각형은 width와 height을 설정해 크기를 정한것이다.

 

03.  inline-block

inline-block 요소는 블럭요소와 인라인요소를 합친 속성이다. 인라인요소처럼 줄바꿈이 일어나지않지만 블럭요소와 같이 width, height을 정해줘서 크기를 정할 수 있다. 만약 따로 크기를 설정하지 않으면 inline요소와 같이 콘텐츠크기만큼 영역을 차지한다.

 

 

 

 

위 p태그에 display 속성을 inline-block을 부여하니깐 span태그와 같은줄에 나오는걸 볼 수 있다. 요소가 차지하는 영역은 콘텐츠의 

영역이랑 같은것을 볼 수 있다.