🔲Layout
- 블록 요소와 인라인 요소가 보여지는 방식
🔲display
- 요소를 블록과 인라인 요소 중 어느 쪽으로 처리할지와 함께, flow, grid, flex처럼 자식 요소를 배치할 때 사용할 레이아웃을 설정한다.
display: inline-block
display: none<속성>
- inline-block: span은 inline요소이나, css의 display속성으로 block요소로 변경해 줄 수 있다.(width,height와 margin top/bottom 설정 가능)
- none: 문서의 layout을 변경하면서 요소를 숨긴다.
🔲 visibility
- 문서의 layout을 변결하지 않고 요소를 보이거나 숨긴다.
- visible / hidden으로 결정한다. 아래는
visibility: hidden인 경우이다.
🔲 float
- 한 요소가 normal flow (block,inline요소가 일반적으로 보여지는 방식) 으로부터 빠져 텍스트 및 inline 요소가 그 주위를 감싸는 자기 컨테이너의 좌우측을 따라 배치할 수 있도록 한다.
- normal flow에 따라 float된 요소의 다음 요소가 float된 요소의 자리로 온다.
- 만약 text가 있는 경우 text는 float된 요소 오른쪽으로 밀려난다.
- float시키면 block요소의 성격을 띈다.
/* 키워드 값 */
float: left;
float: right;
float: none;
float: inline-start;
float: inline-end;<속성>
left : containing block(부모 영역)의 차지할 수 있는 영역 중 제일 좌측으로 떠오른다.
right : containing block(부모 영역)의 차지할 수 있는 영역 중 제일 우측으로 떠오른다.
🔲 position
- 문서 상에 요소를 배치하는 방법을 지정한다. 기본은
position: static이다. - static인 요소들은 static이 아닌 요소보다 z-index가 낮다.
<Value>
- 아래 값들에 대해 offset - top,bottom, right, left속성이 최종 배치 위치를 결정한다.
relative
◼ 요소를 normal flow 따라 배치하고, static경우의 위치를 기준으로 위치를 이동한다.
◼ top/bottom, right/left를 동시에 쓰는 경우 top과 left가 우선시된다.
absolute
◼ 요소를 normal flow에서 제거한다.
◼ 대신 가장 가까운 위치의 부모 요소의 position 값에 대해 상대적으로 배치한다.(주로 기준으로 삼고 싶은 블록 요소에 relative값을 준다.)
◼ 단, 부모요소가 위치 지정 요소가 없다면(staic이라면) 가장 상위 블록(body)을 기준으로 삼는다.
◼ width를 주지 않으면 가장 긴 요소를 기준으로 width가 결정된다.
◼ position: absolute를 주는 순간 block 요소가 된다.
fixed
◼ 뷰포트를 기준으로 삼아 위치가 고정된다.
sticky
◼ 요소를 normal flow에 따라 배치하고, 가장 가까운 스크롤 되는 부모 컨테이너를 기준으로 top, right, bottom, left의 값에 맞추어 fixed처럼 작동한다.
◼ 아래 코드에서는 스크롤되는 부모는 body이기 때문에 parent가 body에 대해 stiky작용을 한다.
🔲 overflow
- 요소의 콘텐츠가 너무 커서 요소의 블록 서식 맥락에 맞출 수 없을 때의 처리법을 지정한다.
/* 키워드 값 */
overflow: visible; - 넘치는 부분도 보인다.
overflow: hidden; - 넘치는 부분은 보이지 않는다.
overflow: scroll; - 스크롤을 하면 숨겨진 내용을 볼 수 있다.
overflow: auto; - 넘치면 자동으로 스크롤이 가능하도록 한다.
🔲 z-index
- 요소의 z축 index를 지정할 수 있다. 더 큰 z-index를 가진 요소가 작은 요소보다 위에 나타난다.
z-index: [integer]
wanna be bright person✨ Front-End developer