css 레이아웃 정리, background

레이아웃 Layout

 

display - inline, block, inline-block

 

inline요소 : ex ) span..

- 영역의 크기가 내부 콘텐츠 크기로 정해진다.

- margin, padding 의 top/bottom은 제외하고 지정할 수 있다. ( 위, 아래 는 지정 불가)

- 여러 요소가 가로 배치가 된다.

 

block요소 : ex ) div..

- 영역의 크기를 width, height 를 지정할 수 있다.

- width를 지정하지 않으면 가로 전체를 차지한다.

- 여러 요소가 세로 배치가 된다.

 

inline - block요소 : ex ) input...

- 영역의 크기를 width, height 를 지정할 수 있다.

- 여러 요소가 가로 배치가 된다.

 

display : block;
display : inline-block;

- display 속성으로 변경 가능

---

요소를 없애는 방법

- display : none / 요소를 없애는 속성

- visibility : hidden / 요소를 숨기는 속성

---

float

- 요소가 흐름(normal flow)으로부터 빠져 텍스트 및 인라인 요소가 그 주위를 감싸는 자기 컨테이너의 좌우측을 따라 배치되어야함을 지정

/* 키워드 값 */
float: left;
float: right;
float: none;
float: inline-start;
float: inline-end;

/* 전역 값 */
float: inherit;
float: initial;
float: unset;

---

position

- 문서 상에 요소를 배치하는 방법을 지정

 

* static : 일반적인 문서 흐름에 따라 배치

 

* relative : 일반적인 문서 흐름에 따라 배치하고, 자기 자신을 기준으로 t, r, b, l 의 값에 따라 오프셋을 적용한다.

오프셋은 다른 요소에는 영향을 주지 않는다.

ex ) top, bottom / rigth, left 두개를 동시에 서로 주게 되면 하나만 적용 된다.

 

* absolute : 요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간에도 배정하지 않는다.

대신 가장 가까운 위치 지정 조상 요소에 대해 상대적으로 배치한다.

단 조상 요소 중 위치 지정 요소가 없다면 초기 블록 기준으로 배치 된다.

ex ) 조상 중에서 position이 static이 아닌 요소를 찾아서 기준점을 삼는다. / 부모 요소중에 relative를 주고 자주 사용.

 

* fixed : 요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃 공간에도 배정하지 않는다.

대신 뷰포트 초기 블록을 기준으로 삼아서 배치 한다.

단, 조상 요소 중 하나가 transform, perspective, filter 속성 중 어느 하나라도 none이 아니라면 뷰포트 대신 그 조상 블록 기준으로 배치 된다.

ex ) absolute와 다르게 뷰포트를 기준으로 기준점을 삼는다.

 

* sticky : 일반적인 문서 흐름에 따라 배치하고, 테이블 관련 요소를 포함해서 가장 가까운, 스크롤 되는 조상과 가장 가까운 블록 조상을 기준으로 기준점을 삼는다.

ex ) 기준이 되는 부모가 스크롤이 될 때 실행할 수 있다.

---

overflow

- 요소의 콘텐츠가 너무 커서 요소의 블록 서식 맥락에 맞출 수 없을 때 처리법을 지정

/* 키워드 값 */
overflow: visible;
overflow: hidden;
overflow: clip;
overflow: scroll;
overflow: auto;
overflow: hidden visible;

/* 전역 값 */
overflow: inherit;
overflow: initial;
overflow: unset;

---

z-index

더 큰 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;

---

background-repeat

- 배경 이미지의 반복 방법을 지정

/* 키워드 값 */
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: repeat;
background-repeat: space;
background-repeat: round;
background-repeat: no-repeat;

/* 2개 값 구문: 가로 | 세로 */
background-repeat: repeat space;
background-repeat: repeat repeat;
background-repeat: round space;
background-repeat: no-repeat round;

/* 전역 값 */
background-repeat: inherit;
background-repeat: initial;
background-repeat: unset;

---

background-position

- 이미지의 시작점을 지정할 수 있음.

- px, top, right, left, bottom 등등

 

background-origin

- 배경의 원점을 테두리 시작점, 테두리 내부, 안쪽 여백 내부 중 하나로 지정

ex ) 기본값 padding-box

 

background-size

- cover 비율을 깨지 않고 확대시킨다.

- contain 이미지를 깨지 않고 가로 또는 세로에 맞춰서 최대크기로 확대 시킨다.

- px, rem, % 등등 크기 조절 가능

- 하나의 크기만 입력하게 되면 가로크기에 맞춰짐

---