display
속성을 이용하여 요소 레벨을 변경할 수 있다.
// 인라인
display : inline;
// 블록
display : block;
// 인라인 블록
display : inline-block;
display: none;
을 통해 요소를 보이지 않도록 지정한다.//
display : none;
💡
display: none;
vsvisibility: hidden;
( 레이아웃에서의 배제 여부 )
display: none;
: 코드 상에 없는 것처럼 표현한다. ( 레이아웃에서 배제 O )
visibility: hidden;
: 요소가 있어야할 자리는 계산하지만 요소의 콘텐츠 및 디자인은 보이지 않도록 처리한다. ( 레이아웃에서 배제 X )
한 요소가 보통 흐름으로부터 빠져 텍스트 및 인라인 요소가 그 주위를 감싸는 자기 컨테이너의 좌우축을 따라 배치되어야 함을 지정한다.
/* 키워드 값 */
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 란, 요소의 레이아웃을 변경하지 않을 시 웹페이지 요소가 자기 자신을 배치하는 방법에 관해 설명한 것을 말한다.
( 예를 들면 , 인라인 요소는 가로배치 & 블록요소는 세로배치 ... etc )
💡
static
: 기본값. 일반적인 문서 흐름에 따라 배치한다.
💡
relative
: 자기 자신을 기준으로 삼는다.
static
이 아닌 요소 )가 없다면 초기 컨테이닝 블록을 기준으로 삼는다. 💡
absolute
: 조상 요소 중에서 position:static
이 아닌 요소를 찾아 기준점으로 삼는다.
💡
fixed
: 뷰포트를 기준으로 삼는다.
💡
sticky
: 처음에는 Normal Flow( 문서 흐름 )에 따라 배치되었다가, 어느 시점에 도달하면 지정한 위치에 스티커처럼 붙어있도록 하는 속성
스크롤 되는 요소의 바로 하위요소( 자식요소 )에 지정해야 주어야 한다.
⭐ position:
static
; 이 아닌 요소들은 모두 float처럼 위로 붕 뜬다고 이해하도록 한다!!!
요소의 콘텐츠가 너무 커서 요소의 블록 서식 맥락에 맞출 수 없을 때의 처리법을 지정한다.
- 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축 순서를 지정한다. 더 큰 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를 자기 외의 바깥 요소와 비교하지 않는다.