웹사이트를 만들 때 레이아웃을 활용하여 그리드를 만드는 것이 기본입니다.
그래서 이번에는 레이아웃을 구성할 때 주로 쓰이는 중요한 속성들에 대해 정리해보기로 했습니다.

position

position은 태그의 위치를 정하는 속성입니다.
윗줄에 position:relative 처럼 상태명을,
아랫줄에는 top:50px 처럼 움직이고 싶은 방향과 값을 정해줍니다.

position: relative

relative는 자신의 현재 위치를 기준으로 상하좌우로 움직일 수 있습니다.

position: absolute

absolute는 자신의 위치가 아닌 부모의 위치를 기준으로 움직입니다.

📍중요!

이 때 부모 태그는 반드시 relative,absolute,fixed 중 하나의 position 속성을 가지고 있어야 합니다!!
부모에게 position 속성이 정의되어 있지 않으면 그 상위 부모의 position 속성을 따릅니다.
만약에 상위 부모들 중 아무도 position 속성이 없으면 body태그를 기준으로 위치가 적용됩니다!

fixed

fixed는 현재 위치에 관련없이 브라우저 창을 기준으로 위치를 정합니다. 또한 스크롤을 해도 위치가 변하지 않고 항상 고정되어 있습니다. 웹사이트 상단에 고정되어 있는 navigation bar가 대표적입니다.

display

display는 요소를 어떻게 보여줄지 정합니다.

display:none

none는 해당 태그가 인식되지 않도록 해줍니다.
visibility:hidden과의 차이점은 hidden은 투명한 영역이 화면상에 남지만 none는 아예 인식이 되지 않아 공간도 차지하지 않는다는 것입니다.

block

우리가 흔히 쓰는 태그인 <div> ,<p>,<h>,<li> 등이 해당됩니다.
block은 가로영역을 모두 차지합니다. 따라서 block 후에 태그를 쓰면 해당 태그는 아랫줄에 내려가게 됩니다.
또한 width, height, margin, padding 을 적용할 수 있는 기본적인 태그입니다.
block은 박스 같은 특정 영역에 적용하기 좋은 태그입니다.

inline

<span>, <b>, <i>, <a> 등이 해댱됩니다.
inline 태그는 가로영역 전부를 차지하지 않고 해당 컨텐츠만큼만 차지합니다. 따라서 inline 후에 다음 태그를 스면 해당 태그는 오른쪽에 보이게 됩니다.
또한 width, height, margin, padding을 적용할 수 없습니다.
inline은 문자나 문장에 적용하기 좋은 태그입니다.

inline-block

inline-block은 inline과 block 사이의 중간 형태입니다.
inline처럼 줄바꿈이 되지 않지만 width,height,margin 같은 프로퍼티를 줄 수 있습니다.
inline-block은 Internet Explorer 7 이하에서는 적용이 되지 않습니다!

align

align은 텍스트나 태그를 왼쪽,중앙,오른쪽을 기준으로 정렬하고 싶을 때 사용합니다. 가로정렬, 세로정렬 모두 가능해요!
그 중에서 float에 대해 알아보겠습니다.

float

float는 이미지 옆에 텍스트를 띄우기 위해 만들어진 속성입니다.
float를 쓰면 부모를 기준으로 왼쪽,중앙,오른쪽 정렬이 가능해집니다.
부모가 없으면 body를 기준으로 적용됩니다.

float는 유용하지만 문제점도 있습니다.
float를 사용하면 부모가 자식(float를 쓴 태그)을 인지하지 못하게 되어 부모 태그 안에 해당 자식 태그가 없다고 처리해버립니다. 그래서 원하는대로 css를 적용하기 힘들어진다는 문제가 생깁니다.
이를 해결하고 레이아웃을 올바르게 적용하기 위해서는 다음과 같은 세가지 해결책이 있습니다.

• 1) overflow:hidden or overflow:auto
  float를 쓴 태그의 부모 태그의 style에 overflow:hidden이나 overflow:auto를 적용한다.

• 2) clear:both
  float를 쓴 태그 말고 영향을 받은 태그에 clear:both를 적용한다.

• 3) 선택자명::after {display:block; clear:both; content:"";}
  ::before와 ::after는 해당 태그의 앞 혹은 뒤에 html상에서는 태그가 없는데도 있는 것처럼 보이게 만들어주는 가상요소입니다.
  float를 쓴 태그의 부모 태그에게 ::after를 써주고 안에 아무것도 없는 빈 블록을 만들어주고 clear:both를 적용하면 문제를 해결할 수 있습니다.