레이아웃의 모든 것

1. position 속성 - relative, absolute, fixed
2. inline, inline-block, block

 

1. position 속성 - relative, absolute, fixed

position 에서 사용하는 값은 4개가 있는데 static 은 거의 사용하지 않아서

relative, absolute, fixed를 정리해보았다.

 

relative

relative는

position: relative; 자체로는 특별한 의미가 없다.

top, right, bottom, left 프로퍼티가 있어야 힘을 발휘한다.

위치를 이동시켜주는 top, right, bottom, left 프로퍼티가 있어야 원래의 위치에서 이동할 수 있는 것이다.

 

top, right, bottom, left 는 position이라는 프로퍼티가 있을 때만 적용되는 프로퍼티이다.

 

absolute

absolute는

특정 부모에 대해 절대적으로 움직인다.

단, 부모 중에 position이 relative, fixed, absolute 하나라도 있어야 한다.

일반적으로 기준이 될 부모에게 position: relative; 를 부여하면 된다.

 

또한 block-element는 가로크기가 부모 너비만큼 전부 차지해야 하는데,

 absolute 값을 갖게 되면, 내용의 크기만큼만 가로크기가 된다.

그리고 right: 0; 와 left: 0;을 주면 width: 100%; 를 준 것과 같은 결과가 된다.

 

fixed

fixed는

말그대로 고정됐다는 뜻이다.

fixed는 눈에 보이는 브라우저 화면 크기만큼, 화면 내에서만 움직인다.

absolute처럼 relative를 가진 부모 필요없다.

 

브라우저 최상단에 고정시키려면

왼쪽(left)에서 0, 오른쪽(right)에서 0, 상단(top)에서 0 으로 붙여주면 된다.

 

position이 absolute이거나 fixed가 되면 주변의 요소에 상관없이 위치하게 된다.
그래서 해당 영역이 무의미해지면서 다른 요소들과 겹치게 되는데
그럴 땐 body에 padding-top을 주면 된다.

---

2. inline, inline-block, block

linline

inline요소는

요소끼리 서로 한 줄에, 바로 옆에 위치할 수 있다는 뜻이다.

예를 들어, <span>, <a>, <img> 등이 있다.

이 liline태그들은 줄바꿈 없이 순서대로 한 줄이 보이게 된다.

 

inline요소 특징

- width와 height 속성을 지정해도 무시한다.

- margin과 padding 속성은 좌우 간격만 반영되고 상하 간격은 반영 되지 않는다.

 

inline-block

inline엘리먼트처럼 전후 줄바꿈 없이 한 줄에 나란히 배치되지만

block엘리먼트처럼 width와 height 속성 지정 및 margin과 padding 속성의 상하 간격 지정이 가능하다.

<input>, <button>, <select> 등이 있다.

 

inline-block엘리먼트를 이용하면

여러 개의 엘리먼트를 한 줄에 정확히 원하는 너비만큼 배치할 수 있어서

레이아웃에 활용하기 좋다.

 

block

태그의 대부분이 block 요소인데

block 요소의 의미는, 이 요소 바로 옆(좌우측)에 다른 요소를 붙여넣을 수 없다는 것이다.

그래서 다른 엘리먼트들은 다른 줄로 밀어내고 혼자 한 줄을 차지한다.

예를 들어, <div>, <h1>, <header>, <p>, <li> 등이 있다.

 

 

display 속성 값은
원하는 값으로 자유롭게
css에서 수정하능하다.