웹 UI개발 정리[ 레이아웃]

하얀성 2023. 1. 27. 12:39

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 등 다양한 속성 값 존재

display: none의 예시

display: inline의 예시

inline-block요소 (inline 처럼 화면에 나타나지만 block의 성질을 가짐. ㅡ> box모델의 속성을 적용가능해서 크기 지정 등이 가능해짐)

inline level 요소 사이의 공백과 개행 처리 inline 요소의 경우 공백과 개행에 대해서 하나의 여백으로 받아들입니다. 따라서 inline와 inline-block의 경우 태그 사이의 공백이나 개행이 있을 경우 약 4px의 여백을 가지게 됩니다.

display와 box model의 관계

display	width	height	margin	padding	border
block	ㅇ	ㅇ	ㅇ	ㅇ	ㅇ
inline	X	X	좌/우	ㅇ(설명)	ㅇ(설명)
inline-block	ㅇ	ㅇ	ㅇ	ㅇ	ㅇ

<결론>

inline은 width, height가 반영안됨.

margin, padding, border은 좌우에만 적용(아래 위도 적용가능 할 수 있으나 암묵적으로 좌우만 사용)

block, inline-block은 width~ border까지 모두 적용됨(상하좌우 구분x)

단, inline-block의 배치는 inline과 동일하기 때문에 block 때는 없던 4px의 여백이 생긴다.

inline-block과 inline의 차이 상세설명

둘다 inline처럼 배치

block의 배치모습

두 inline 사이의 공백은 서로의 태그를 붙여 아래처럼 여백을 없애줄 수 있다.

여백도 inline요소라 결국 공간이 어느정도 보장되기 때문이다. (4px 공백)

inline 요소의 padding/border 속성이 좌/우 만 적용 된다고 표시한 이유 추가 설명

실제로 inline 요소의 padding/border는 좌/우뿐만 아니라 상/하에도 적용이 됩니다.

(단, 안되기도 해서 사용권장x 아래 이유설명)

parent 는 <div>, child 는 <span>하지만 상/하 padding/border는 line-box에는 영향을 주지 못하기 때문에 위와 같이 부모 요소의 박스에 반영되지 않습니다.

parent 는 <div>, child 는 <span>
또한 인접한 다른 line-box 에도 반영되지않습니다. 즉 콘텐츠가 겹칠 수 있기 때문에 실무에서는 잘 사용하지 않습니다.
line-box에 대해 궁금하거나 기억이 나지 않으신다면 Chapter06에 line-height 강의를 참고하시면 됩니다.

속성-visibility

CSS에서 요소를 숨기는 방법에는 몇 가지가 있습니다.

display: none 은 아예 못쓰게끔 하고.

isibility: hidden은 나중에 쓸 수도 있지만 가려야 할 것에 사용합니다.

display: none과 차이점

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

속성-float

-특징1: 요소의 보통 흐름에 띄워지게 함.

p태그는 block 요소이지만

p태그 안의 text들은 inline 요소이다.

그래서 윗처럼 text들이 box1 ,2 의 사이 부분까지 차지해 버리는 것.

p태그의 영역은 파란색부분이다. 아래와 같이 자신의 영역을 모두 차지하고 있다.

-특징2: 그래서 float요소가 있으면 그 사이 공간을 inline 태그나 inline 요소가 매꾸게 된다.

-특징3: inline 요소도 float 가능. 하지만 적용했을 경우, inline요소는 display값이 block으로 바뀌게 된다.

(inline-table 이나 flex 속성을 이 특징 적용안되고 기존의 display 값을 유지함.)

속성-clear

요소를 floating 된 요소의 영향에서 벗어나게 하는 속성입니다.

기본 값 : none

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

☆block 요소이거나, display가 block일 때만 사용가능.

inline 요소를 clear하는 방법. inline요소의 부모 요소 안에서 clear:both 선언해서 해결.(내 부모의 두 div자식들이 clear대상)

속성-position

요소의 레이아웃을 설정하는 대표적인 속성은 position 속성입니다.

position은 요소의 위치를 원하는 곳으로 이동할 수 있게 합니다.

position을 사용하기 위해서는 요소를 이동시키기 위한 좌표 속성인 offset에 대해서도 알아야 합니다.

position과 offset 속성을 잘 활용하면 더 다양하고 화려한 레이아웃을 구현할 수 있습니다.

< 속성 값 >

static	Normal-flow 에 따라 배치되며 offset 값이 적용되지 않는다. (기본값)
absolute	부모 요소의 위치를 기준으로 offset 에 따라 배치된다. 부모가 position 값(static 제외)을 가지면 offset 값의 시작점이 된다. * 부모의 position 값이 static 인 경우 조상의 position 값이 static이 아닐 때까지 거슬러 올라가 기준으로 삼습니다. Normal-flow의 흐름에서 벗어난다.
fixed	뷰포트(브라우저의 창)를 기준으로 offset 에 따라 배치된다. 즉, 화면 스크롤에 관계없이 항상 화면의 정해진 위치에 정보가 나타난다. 부모의 위치에 영향을 받지 않는다.
relative	자신이 원래 있어야 할 위치를 기준으로 offset 에 따라 배치된다.(dispaly값이 bolckd으로 바뀜) 부모의 position 속성에 영향을 받지 않는다. Normal -flow의 흐름에 따른다. 주변 요소에 영향을 주지 않으면서 offset 값으로 이동한다

absolute가 postion으로 선언된 태그는 display가 block요소로 변경된다.

그래서 위와 같이 span처럼 inline 요소임에도 block의 특성들을 쓸 수 있는 것.

div 상자의 꼭짓점 부분을 0,0으로 잡고 그 기준으로 움직이게 된다.

relative 값은 div의 0,0을 기준으로 즉, 자기자신을 기준으로 top left right bottom 등을 이용해 위치를 변화 시킨다.

absolute는 조상의 position을 기준으로 offset 값의 영향을 받아 위치를 이동함.

조상들이 relative값이 없어, 기준이 되주지 못했다면 body를 기준으로 삼아 이동.

아래처럼 부모의 padding 영역부터 기준을 삼아 이동. (border, margin의 영역 변화는 기준점의 변화로 이어지지 않음)

fixed는 화면브라우저를 기준으로 위치가 이동되며 화면 스크롤을 내려도 고정됨.

속성-z-index

z-index 속성

기본 값 : auto

요소가 겹치는 순서(쌓임 순서 또는 stack order)를 지정하는 속성입니다.

z-index: auto | number | initial | inherit;

< 속성 값 >

auto	쌓임 순서를 부모와 동일하게 설정(기본값)
number	해당 수치로 쌓임 순서를 설정(음수 허용)

z-index: 1;

position 값이 static이 아닌 경우 지정가능
순서 값이 없을 경우 생성순서(코드상 순서)에 따라 쌓임
부모가 z-index 값이 있을 경우 부모 안에서만 의미있음(부모값끼리 비교했을 때, 더 작으면 자식값이 아무리 커도 밑에 있게됨)
큰 값이 가장 위쪽(음수 사용 가능)

Q. 아래 코드를 보고 쌓임 순서에서 가장 위에 올라오는 요소가 어떤 것일지 고르시오.

<div class="green" style="background: green; margin-top: 60px; margin-left: 60px;">GREEN</div>

<div class="orange" style="background: orange; margin-left: 90px;">ORANGE</div>

div { width: 100px; height: 100px; color: white; }
.red, .blue { position: absolute; }
.green { position: relative; }
.red { z-index:5; }
.blue { z-index:6; }
.green { z-index:7; }
.orange { z-index:8; }

RED
ORANGE
BLUE
GREEN

정답: green

오답원인: z-index도 position의 속성이며, relative가 기준이 되는 가장 높은 속성값이니 absolute나 z-index 보다 우선시 됨