display 프로퍼티

모든 요소는 딱 한 개의 display 값을 갖고 있습니다. 가질수 있는 display의 종류는

1. inline
2. block
3. inline-block
4. flex
5. list-item
6. none

display 속성에서 block & in-line 에 대해 정리하겠습니다.

block display

• 새로운 줄에서 시작하려는 경향이 있다.
• 가로 길이는 최대한 많이 차지하려고 하는 성향.

ex) <div> ,<h1>, <p>, <nav> ,<ul>, <li>

inline display

• 가로 길이는 필요한 만큼만 차지하는 성향
• 다른 요소들과 같은 줄에 머무르려고 하는 성향

ex) <i> , <b> , <img> ,<span> , <a> ,<button>

inline-block

• 다른 요소들과 같은 줄에 머무를 수 있으면서
• width, height를 지정할 수 있다.

position

1. static
2. relative
3. fixed
4. absolute

static position

• 기본 (포지셔닝이 안 된 요소) -> 쉽게 이야기하자면 원래 있어야할 자리에 있습니다.
• 모든 HTML 요소의 position 속성의 기본 설정값은 static 입니다.

div { position : static } 

relative position

• 원래 위치를 기준으로 위치를 설정합니다.
• 원래 위치를 기준으로 위에 30px 공간이 생깁니다. -> 아래로 30px 이동한 것처럼 보입니다.

b {	
    postion:relative;
    top: 30px;
  }

fixed position

• 브라우저 윈도우가 기준으로 위치를 설정합니다.
• 웹 페이지가 스크롤 되어도 위치가 고정되어있습니다.
• ex) navigation bar

#bar{
	postion: fixed;
    top: 0;
}

absolute position

• 가장 가까운 포지셔닝이 된 조상(Ancestor) 요소가 기준으로 위치를 결정합니다.
• 만약 포지셔닝이 된 조상이 없다면 body 요소를 기준으로 위치를 설정합니다.

float

레이아웃을 구성 할 때 필요한 속성입니다!
특정 요소를 '떠있게' 하도록하는 속성입니다.
문서의 흐름과 관계없이 왼쪽으로 또는 오른쪽으로 이동시킬 수 있습니다.

float 속성은 이전에 레이아웃을 잡는데 자주 사용했던 속성입니다. 지금은 flex 속성을 기반으로 레이아웃을 잡는 경우가 많습니다.

속성

• left
• right
• none : default
• ìnherit : 부모의 float 값을 상속받는다.

예제)

img{
	float: right; 
}

clear - 해제 기법

• float을 사용해 레이아웃을 잡다보면 무너뜨리게 되는 현상이 생기게 됩니다.
• clear 속성을 적용해 float의 영향을 받지 않도록 합니다.

관용적인 기법의 이름 'clearfix'

• 가급적 플롯된 요소의 부모 요소에 적용하는 것을 권장함

.clearfix{clear: left}

속성 : float 된 요소를 지정해제

• left
• right
• both : 왼쪽 오른쪽 모두 floating 된 요소를 지정 해제
• none : default

overflow:hidden -해제 방법

• overflow: hidden을 부모 요소에 적용해야합니다.
• 자식 요소가 부모 요소박스보다 클 경우에 사용하고 자식요소를 숨깁니다.

🤔 권장하지 않는 이유 > 동적으로 자식 요소들 중에서 부모 요소 박스를 벗어나서 보여주어야 될 경우 hidden 값으로 인해 보여주고자 하는 콘텐츠를 보여줄 수 없을 수도 있습니다.