display 프로퍼티
모든 요소는 딱 한 개의 display 값을 갖고 있습니다. 가질수 있는 display의 종류는
- inline
- block
- inline-block
- flex
- list-item
- 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
- static
- relative
- fixed
- 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속성을 기반으로 레이아웃을 잡는 경우가 많습니다.
속성
leftrightnone: defaultìnherit: 부모의 float 값을 상속받는다.
예제)
img{
float: right;
}clear - 해제 기법
- float을 사용해 레이아웃을 잡다보면 무너뜨리게 되는 현상이 생기게 됩니다.
- clear 속성을 적용해 float의 영향을 받지 않도록 합니다.
관용적인 기법의 이름 'clearfix'
- 가급적 플롯된 요소의 부모 요소에 적용하는 것을 권장함
.clearfix{clear: left}속성 : float 된 요소를 지정해제
leftrightboth: 왼쪽 오른쪽 모두 floating 된 요소를 지정 해제none: default
overflow:hidden -해제 방법
overflow: hidden을 부모 요소에 적용해야합니다.- 자식 요소가 부모 요소박스보다 클 경우에 사용하고 자식요소를 숨깁니다.
🤔 권장하지 않는 이유 > 동적으로 자식 요소들 중에서 부모 요소 박스를 벗어나서 보여주어야 될 경우 hidden 값으로 인해 보여주고자 하는 콘텐츠를 보여줄 수 없을 수도 있습니다.
