6. 레이아웃
🔷 display
❐ inline
- Ex ) span 등
- 영역의 크기가 내부 콘텐츠 크기로 정해진다. ex ) span 등
- margin, padding의 top / bottom 지정할 수 없다. ( right / left는 가능 )
- 여러 요소가 가로로 배치 된다.
❐ block
- Ex ) div 등
- width를 지정하지 않으면 가로 전체를 차지한다.
- margin, padding의 상하 좌우 모두 지정 가능하다.
- 여러 요소가 세로로 배치된다.
❐ inline-block
- Ex ) input 등
- width를 지정하지 않으면 가로 전체를 차지한다.
- margin, padding의 상하 좌우 모두 지정 가능하다.
- 여러 요소가 가로로 배치 된다.
요소 레벨 변경
display 속성을 이용하여 요소 레벨을 변경할 수 있다.
// 인라인
display : inline;
// 블록
display : block;
// 인라인 블록
display : inline-block;❐ none
display: none;을 통해 요소를 보이지 않도록 지정한다.
//
display : none;💡
display: none;vsvisibility: hidden;( 레이아웃에서의 배제 여부 )
display: none;: 코드 상에 없는 것처럼 표현한다. ( 레이아웃에서 배제 O )
visibility: hidden;: 요소가 있어야할 자리는 계산하지만 요소의 콘텐츠 및 디자인은 보이지 않도록 처리한다. ( 레이아웃에서 배제 X )
🔷 float
한 요소가 보통 흐름으로부터 빠져 텍스트 및 인라인 요소가 그 주위를 감싸는 자기 컨테이너의 좌우축을 따라 배치되어야 함을 지정한다.
/* 키워드 값 */
float: left;
float: right;
float: none;
float: inline-start;
float: inline-end;
/* 전역 값 */
float: inherit;
float: initial;
float: unset;-
none: 기본값 -
left: 요소가 자신의 포함 블록의 좌측에 부동해야 함을 나타내는 키워드 -
right: 요소가 자신의 포함 블록의 우측에 부동해야 함을 나타내는 키워드 -
inline-start: 요소가 자신의 포함 블록의 시작쪽에 부동해야 함을 나타내는 키워드 / 즉, ltr(left to right) 스크립트 상에서 왼쪽 그리고 rtl(right to left) 스크립트 상에서는 오른쪽 -
inline-end: 요소가 자신의 포함 블록의 끝쪽에 부동해야 함을 나타내는 키워드 / 즉, ltr 스크립트 상에서 오른쪽 그리고 rtl 스크립트 상에서는 왼쪽.
🔷 position & Normal Flow
position 속성은 문서 상에 요소를 배치하는 방법을 지정한다.
Normal Flow 란, 요소의 레이아웃을 변경하지 않을 시 웹페이지 요소가 자기 자신을 배치하는 방법에 관해 설명한 것을 말한다.
( 예를 들면 , 인라인 요소는 가로배치 & 블록요소는 세로배치 ... etc )
❐ static
- 요소를 일반적인 문서 흐름에 따라 배치한다. ( 기본값 )
- top, right, bottom, left 등의 속성을 사용할 수 없다.
💡
static: 기본값. 일반적인 문서 흐름에 따라 배치한다.
❐ relative
- 요소를 일반적인 문서 흐름에 따라 배치하고, 자기 자신을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용한다.
- 오프셋은 다른 요소에는 영향을 주지 않는다.
- 따라서 페이지 레이아웃에서 요소가 차지하는 공간은 static일 때와 같다.
💡
relative: 자기 자신을 기준으로 삼는다.
❐ absolute
- 요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않는다.
( float 처럼 붕 뜨게 된다고 이해한다. ) - 대신 가장 가까운 위치 지정 조상 요소( 부모 요소 )를 기준으로 상대적으로 배치한다.
- 단, 조상 중 위치 지정 요소( position:
static이 아닌 요소 )가 없다면 초기 컨테이닝 블록을 기준으로 삼는다. - 최종 위치는 top, right, bottom, left 값이 지정한다.
💡
absolute: 조상 요소 중에서 position:static이 아닌 요소를 찾아 기준점으로 삼는다.
❐ fixed
- 요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않는다.
- 대신 뷰포트의 초기 컨테이닝 블록을 기준으로 삼아 배치한다.
- 최종 위치는 top, right, bottom, left 값이 지정한다.
💡
fixed: 뷰포트를 기준으로 삼는다.
❐ sticky
- 요소를 일반적인 문서 흐름에 따라 배치한다.
- 테이블 관련 요소를 포함해 가장 가까운, 스크롤 되는 조상과, 표 관련 요소를 포함한 컨테이닝 블록( 가장 가까운 블록 레벨 조상 )을 기준으로 삼는다.
- 최종 위치는 top, right, bottom, left의 값에 따라 오프셋을 적용하고, 오프셋은 다른 요소에는 영향을 주지 않는다.
💡
sticky: 처음에는 Normal Flow( 문서 흐름 )에 따라 배치되었다가, 어느 시점에 도달하면 지정한 위치에 스티커처럼 붙어있도록 하는 속성
스크롤 되는 요소의 바로 하위요소( 자식요소 )에 지정해야 주어야 한다.
⭐ position:
static; 이 아닌 요소들은 모두 float처럼 위로 붕 뜬다고 이해하도록 한다!!!
🔷 overflow
요소의 콘텐츠가 너무 커서 요소의 블록 서식 맥락에 맞출 수 없을 때의 처리법을 지정한다.
- overflow-x
- overflow-y
/* 키워드 값 */
overflow: visible;
overflow: hidden;
overflow: clip;
overflow: scroll;
overflow: auto;
overflow: hidden visible;
/* 전역 값 */
overflow: inherit;
overflow: initial;
overflow: unset;-
visible:
- 기본값. 콘텐츠를 자르지 않으며 안쪽 여백 상자 밖에도 그릴 수 있다. -
hidden: 콘텐츠를 안쪽 여백 상자에 맞추기 위해 잘라낸다.
- 스크롤바를 제공하지 않고, 스크롤할 방법(드래그, 마우스 휠 등)도 지원하지 않는다.
- 대신, 코드를 사용해 스크롤할 수는 있으므로 (offsetLeft 속성 설정 등), 이 상태의 요소도 스크롤 컨테이너이다. -
clip:
- hidden과 마찬가지로, 콘텐츠를 안쪽 여백 상자에 맞춰 자른다.
- 그러나 clip은 코드를 사용한 스크롤링도 방지하므로 어떠한 스크롤도 불가능하다. -
scroll:
- 콘텐츠를 안쪽 여백 상자에 맞추기 위해 잘라낸다.
- 브라우저는 콘텐츠를 실제로 잘라냈는지 여부를 따지지 않고 항상 스크롤바를 노출하므로 내용의 변화에 따라 스크롤바가 생기거나 사라지지 않는다. -
auto:
- 사용자 에이전트( 브라우저 )가 결정한다.
- 콘텐츠가 안쪽 여백 상자에 들어간다면 visible과 동일하게 보이나, 새로운 블록 서식 문맥을 생성한다.
- 데스크톱 브라우저의 경우 콘텐츠가 넘칠 때 스크롤바를 노출합니다. -
hidden visible:
- auto와 동일하게 동작하지만, 스크롤바가 공간을 차지하는 대신 콘텐츠 위에 위치한다.
- Webkit(Safari 등)과 Blink(Chrome 또는 Opera 등) 기반 브라우저만 지원한다.
🔷 z-index
위치 지정 요소와, 그 자손 또는 하위 플렉스 아이템의 Z축 순서를 지정한다. 더 큰 z-index 값을 가진 요소가 작은 값의 요소 위를 덮는다.
/* 키워드 값 */
z-index: auto;
/* <integer> 값 */
z-index: 0;
z-index: 3;
z-index: 289;
z-index: -1; /* 음수 값으로 우선순위를 낮출 수 있음 */
/* 전역 값 */
z-index: inherit;
z-index: initial;
z-index: unset;-
auto:
- 기본값
- 박스가 새로운 쌓임 맥락을 생성하지 않는다.
- 현재 쌓임 맥락에서의 위치는 부모 요소와 동일하다. -
<integer>:
- 현재 쌓임 맥락에서의 위치로 이 값을 사용한다.
- 또한 자신만의 쌓임 맥락을 생성하고, 해당 맥락에서 자신의 위치를 0으로 설정한다.
- 이로 인해 자손의 z-index를 자기 외의 바깥 요소와 비교하지 않는다.
