CSS 레이아웃 (Display, Position) 헷갈렷던 용어 개인정리

position

static : 기본적인 옵션. 

relative : 부모태그 위치를 기준으로 움직임

absolute : 하단 태그에 영향을 미치지 않음. 자신의 content 크기만 차지. 값을 주는 순간 부모의 위치를 기준으로 움직임

                 부모의 포지션이 static이 아닐때만 적용됨. 즉, static이면 그 위의 부모를 기준으로 움직이게 됨.

fixed : 하단 태그에 영향을 미치지 않음. 자신의 content 크기만 차지. 항상 최상위 태그를 기준으로 움직임.

           스크롤을 무시함

sticky : 스크롤을 무시함

 

display

예를 들어 div는 블록개념인데, span은 인라인개념이므로 내용이 채워지면 그만큼 확장이 된다. (컨텐츠 자체만을 꾸밈)

하지만 이를 display 옵션을 통해  block, 또는 inline, inline-block으로 변경을 하면 그 속성이 적용된다.

 

flex

1. 컨테이너에 적용

2. 각각의 아이템에 적용

main axis(축)과 cros axis이 존재 (중심축과 반대축)

 

div.container>div.item.item${$}*10

 

100%: 컨테이너의 부모의 높이의 100%를 채우겠다는 뜻

100vh : 보이는 view port를 다 채우겠다.

 

display: flex

flex-direction : row (기본), column-reverse

flex-wrap : 기본은 none, 크기에 상관없이 한 줄에 꽉채운다.

nowrap : 크기가 변할때 아니면 다음라인으로 넘어가게 된다.

 

flex-flow : column nowrap (위 속성 한 번에 적용)

justify-content : 어떻게 배치할 것이냐 flex-start (어딜 중심으로해서 배치할 것이냐, 중심축에서 아이템 배치)

                             space-around,  space-evenly/between

align-items: 반대축에서 아이템 배치

                   : baseline

align-content: 상동

 

flex-grow : 자신의 고유한 사이즈유지 (기본)

flex-shrink : 줄일때 얼마만큼 줄이게 되는지 (상역)

flex-basis : XX% (위 두 옵션을 퍼센테이지 비율로 처리)

 

align-self : flex 아이템 중 개별로 처리하고 싶을 때 사용

 

flex: 1차원

grid: 2차원

 

display : grid

각각의 요소는 cell로 불림

 

emmet

관련 문법은 아래 블로그에 상세히 설명됨

(https://inpa.tistory.com/entry/HTML-%F0%9F%8E%A8-Emmet-%EB%AC%B8%EB%B2%95-%EC%A0%95%EB%A6%AC)