display / 요소를 숨기는법 / visibility / float / position / offset

모든 요소는 자신만의 display값이 있다.
이 값에 따라 block, inline 등의 rendering 박스 유형이 결정
display속성으로 해당 요소의 렌더링 박스 유형 변경 가능, 렌더링 여부 결정 가능

 

display : value;

---

기본 값 : 요소마다 상이함

none : 요소가 렌더링 되지 않음 (요소를 숨길 수 있음)

inline : inline level 요소처럼 렌더링

block : block level 요소처럼 렌더링

inline-block : inline level 요소처럼 렌더링(배치)되지만 block level의 성질을 가짐 * height 나 width 등과 같은 박스모델 속성을 적용할 수 있다

• 그외에 list-item, flex, inline-flex, table, table-cell 등 다양한 속성 값 존재
• inline level 요소 사이의 공백과 개행 처리 inline 요소의 경우 공백과 개행에 대해서 하나의 여백으로 받아들입니다. 따라서 inline와 inline-block의 경우 태그 사이의 공백이나 개행이 있을 경우 약 4px의 여백을 가지게 됩니다.

display와 box model의 관계

display	width	height	margin	padding	border
block	ㅇ	ㅇ	ㅇ	ㅇ	ㅇ
inline	X	X	좌/우	ㅇ(실질, 좌우)	ㅇ(실질, 좌우)
inline-block	ㅇ	ㅇ	ㅇ	ㅇ	ㅇ

 

inline 요소의 padding/border는 좌/우뿐만 아니라 상/하에도 적용 

 

 

상/하 padding/border는 line-box에는 영향을 주지 못하기 때문에 위와 같이 부모 요소의 박스에 반영안됨

인접한 다른 line-box 에도 반영되지않음. (컨텐츠가 겹칠 수 있음)

 

visibility

---

CSS에서 요소를 숨기는 방법에는 몇 가지 (display : none; visibility:hidden; 그리고 위치 속성을 이용하는 방법 )

기본값 : visible;

visibility: visible | hidden | collapse | initial | inherit;

visibility: visible; /* 보임 기본값 */

visibility: hidden; /* 숨김, 자신의 박스 영역은 유지(margin까지 모두 포함) */

visibility: collapse; /* 셀간의 경계를 무시하고 숨김(박스영역 없음, 테이블의 행과 열 요소에만 지정 가능, 그 외 요소 지정은 hidden과 같음) */

display : none VS visibility : hidden

• display: none: 요소가 렌더링 되지 않음(DOM에 존재하지 않음)
• visibility: hidden: 요소가 보이지는 않지만 렌더링 되며 화면에 공간을 가지고 있음(DOM에 존재함)

 

float

---

모든 요소는 기본적으로 위-> 아래, 좌->우 배치된다.

float속성은 이 배치에서 벗어나 독자적인 공간 '위'에 배치된다. floating되지 않은 요소들에 주의해야한다. (clear속성으로 해결가능)

기본 값 : none

float: none (float시키지 않음) | left | right | initial | inherit;

Element를 띄어지게 하는데 주변 텍스타, 인라인 요소가 주위를 감싼다.

대부분 엘리먼트의 display값은 block으로 설정. (display값 변경 예외 : inline-table, flex 등)

 

clear

---

floating 엘리먼트는 주변 엘리먼트 배치에도 영향을 주는데, 주변 요소들이 의도치 않은 위치에 배치될 수 있다. 이 때 clear속성을 사용하여 문제 해결.

대부분 floating 엘리먼트 다음 엘리먼트에 바로 clear해주는 것이 좋다.

기본 값 : none;

clear: none | left | right | both | initial | inherit;

none : 양쪽으로 floating 요소를 허용(기본값)
both  : 양쪽으로 floating 요소를 허용하지 않음 (float으로부터 탈출)
left  : 왼쪽으로 floating 요소를 허용하지 않음 
right : 오른쪽으로 floating 요소를 허용하지 않음 

block-level 요소만 적용 가능

 

position 17:00 복습

---

레이아웃 설정의 대표적 속성

엘리먼트의 위치를 원하는 곳으로 이동시켜줌(이를 위해 좌표 속성 offset알아야 함)

기본 값 : static

position: static | absolute | fixed | relative | sticky | initial | inherit;

static	position을 선언해놓지 않은 상태의 기본값 Normal-flow 에 따라 배치 offset 값 적용 안됨 좌표 값(top:10px left:10px;)을 넣어도 반영 안됨
relative	자신이 원래 있어야 할 위치(왼쪽상단꼭지점 top,left_0,0)를 기준으로 offset 에 따라 배치된다. (상대적배치) 부모의 position 속성과 무관 Normal -flow의 흐름에 따른다. 주변 요소에 영향을 주지 않으면서 offset 값으로 이동한다
fixed	뷰포트(브라우저의 창)를 기준으로 offset 에 따라 배치된다. 즉, 화면 스크롤에 관계없이 항상 화면의 정해진 위치에 정보가 나타난다. 고정적인 좌표값을 지니기에 display : block이 됨 부모의 위치와 무관함, 브라우저가 위치 기준
absolute	Normal-flow의 흐름에서 벗어난다. 부모 요소의 위치를 기준으로 offset 에 따라 배치된다. position 값(static 제외)지닌 부모가 offset 값의 시작점. (시작점을 알고싶으면 top:0, left:0 입력.  부모의 padding영역부터 가짐 즉 부모의 border 안쪽에 위치) * 부모의 position 값이 static 인 경우 조상의 position 값이 static이 아닐 때까지 거슬러 올라가 기준으로 삼는다. 절대적인 좌표값을 지니기에 display : block이 됨
sticky	지원 브라우저 제한적

Normal-flow 란? 일반적인 상황에서 각의 요소들의 성질에 따라 배치 되는 순서(흐름). 
예를 들면, block 레벨 요소들은 상하로 배치되고, inline 레벨 요소들은 좌우로 배치되는 것

 

offset(top/left/bottom/right)

---

기본값 : auto;

top|bottom|left|right: auto|length|initial|inherit;

offset의 %단위 사용 이전에 padding과 margin에서 % 값을 적용할 때, '상하좌우 방향에 관계없이' 가로 사이즈를 기준으로 %값을 계산된다. 그러나 offset은 top, bottom (상하) 는 기준이 되는 요소의 height 값 left, right (좌우) 는 width값에 대하여 계산.