[CSS] 레이아웃, 배치 속성

또나·2023년 3월 22일

layout이란 웹사이트를 구성하는 요소들을 배치할 공간을 분할하고 정렬하는 것이다.
공간을 분할할 때는 먼저 행을 구분한 후, 행 내부 요소를 분리하는 것이 일반적이다.
핵심은 블록 요소들을 원하는 위치에 배열하는 것! 레이아웃에 관련된 속성들을 익혀보자✨

1. float

주로 레이아웃을 구성할 때 블록 요소를 가로 배치하기 위해 사용.
박스를 왼쪽 또는 오른쪽으로 이동하거나 이동하지 않음을 지정.
position 속성 값이 static인 요소에 적용되고, 기본 값은 none이다.
본래 아래 예제와 같이 이미지와 텍스트가 있을 때, 이미지 주위를 텍스트로 감싸기 위해 만들어진 것이다.

flexbox 레이아웃를 사용한다면 더욱 간단하게 정렬을 구현할 수도 있지만 flexbox 레이아웃을 지원하지 않는 IE를 고려해야 한다면 float 속성을 사용해야 한다.

1-1. 속성 값

	float :
left	박스를 왼쪽에 이동시킨다. 뒤에 나오는 내용은 박스의 오른쪽 상단면에 붙는다.
right	박스를 오른쪽에 이동시킨다. 뒤에 나오는 내용은 박스의 왼쪽 상단면에 붙는다. 가로 정렬의 경우, 먼저 기술된 요소가 가장 오른쪽에 출력되므로 출력 순서가 역순이 된다.
none	박스를 이동시키지 않는다.

1-2. 주의사항

좌측, 우측 가로 정렬만 할 수 있으므로 중앙 정렬은 margin: auto 를 사용해야 한다.

width 값을 지정하지 않은 block 요소는 내용물 만큼의 크기를 갖게 된다.

💡 부모 안의 자식을 float 시킬 경우
자식은 붕 뜨게 되며 부모에게는 집나간 자식 취급을 받게 된다.
그러면서 나머지 자식이 빈 공간을 채우게 되며, 부모의 height 역시 빠진 자식만큼 줄어들게 됨.
이 때 부모요소에 overflow: hidden 을 주면 높이 값을 찾을 수 있다.
혹은, 부모 요소 다음 div를 만들어 clear: both 를 설정하는 방법도 가능하지만 의미없는 빈 요소를 사용해야 하기 때문에 권장하는 방법은 아니다.

1-3. clear:both

clear은 이 float 속성을 사용시 주변으로 컨텐츠가 흐르듯이 배치하는 것을 해제하기 위한 전용 속성이다. float이 사용된 요소가 정렬된 방향에 따라 clear: left는 float: left를 , clear: right는 float: right를, clear: both는 양 쪽 모두의 float을 해제한다. clear속성 이후 float는 영향을 끼치지 않게 된다.


<style>
.clearfix:after {
  content: "";
  display: block;
  clear: both;
}
</style>

<body>
  <div class="parent clearfix">
    <div class="child">float</div>
  </div>
</body>

clear속성을 주기 위한 또다른 div를 불필요하게 만들기보다 부모요소의 가상으로 자식 요소를 덧붙여 clear를 주면 의미 없는 태그를 만들지 않을 수 있어 현업에서 가장 많이 사용된다.

2. position

엘리먼트 배치방법. 즉 문서 상에 요소를 자유자재로 배치하는 방법을 지정.
static을 제외한 나머지 속성 값에는 좌표를 이용해 요소의 위치를 조절할 수 있다.
top, right, bottom, left 속성으로 요소 위치를 지정함.
특정 장소에 고정할 때는 position 두 요소를 옆으로 배치 시켜야 할 땐 float을 사용.

2-1. 속성 값

	position :
static	일반적인 배치 적용. 모든 요소의 디폴트 포지션 값. top, right, bottom, left 속성 적용 불가
relative	상대적인 위치에 배치. 즉 요소의 본래 위치를 기준으로 배치. 위치는 top, right, bottom, left 속성에 의해 지정. 뒤에 계속되는 요소의 배치에 영향을 주지 않음 `float`처럼 붕 뜨는 것 처럼 되지만, 자신의 원래 위치를 기억하고 가족 구성원을 알고 있음.
absolute	절대적인 위치에 배치. 기준점 `relative`를 기준 삼아서 움직인다. 부모와 조부모가 모두 `static`이 아닌 경우 더 가까운 부모가 기준점. 적용시 inline-block 속성으로 바뀌므로 적절한 width 값을 주어야 한다.
fixed	고정적인 위치에 배치. 브라우저가 스크롤 되어도 고정된다. 기준점은 뷰포트, 위치는 top, right, bottom, left 속성에 의해 지정. 뒤에 계속되는 요소의 배치에 영향을 주지 않음. 적용시 inline-block 속성으로 바뀌므로 적절한 width 값을 주어야 한다.
sticky	스크롤 위치에 따라 `relative`와 `fixed`사이를 전환함. 지정한 임계값을 넘으면 `fixed`로 동작. 지원하는 브라우저가 많지 않다.
initial	요소의 속성 값을 초기화.
inherit	부모 요소에서 속성을 상속받음.

2-2. z-index

z-index 속성에 큰 숫자값을 지정할수록 화면 전면에 출력된다. position: static 외의 요소에만 적용된다.

z-index가 같은 값일 경우 HTML 구조상 아래인 것이 먼저 적용 됨.
z-index가 아무리 크더라도 부모 태그의 z-index가 더 우선됨.

3. display

요소의 디스플레이 속성, 즉 요소를 표시하는 방법을 지정한다.
[HTML] 기초 정리 에 엘리먼트 속성들을 정리해놨다. 기본적인 속성을 이해하고 CSS를 제어하자!

3-1. 속성 값

	display:
block	엘리먼트를 한 줄 100% 차지하는 블록 요소로 만든다.
inline	엘리먼트를 글자처럼 한 줄로 이어 사용되는 인라인요소로 만든다. 내용만큼 너비를 가지며 크기 값 지정 불가. 여백은 좌우만 적용됨.
inline-block	인라인과 블록의 복합 속성 글자처럼 한 줄로 이어 표현되며 크기와 여백 값을 지정할 수 있다. 인라인블록요소 뒤에 엔터나 스페이스가 있을 경우, 공간 4px이 자동 지정된다. (`margin-right: -4px;` 이나 부모 요소에 `font-size: 0`을 주어 공간을 없애는 방법이 있다.)
none	해당 요소의 박스는 물론 자식 박스까지 생성하지 않아 보이지 않게 감춘다.
inherit	부모 요소로부터 속성을 상속 받음
list-item	li가 갖는 기본속성을 적용시킴

💡display:none; 과 visibility: hidden; 의 차이
visibility 속성은 요소를 보이게 할 것인지 보이지 않게 할 것인지를 정의한다. 즉, 요소의 렌더링 여부를 결정. 기본값은 visibility: visible 이다.
display: none; 은 해당 요소의 공간까지 사라지게 하지만 visibility: hidden; 은 해당 요소의 공간은 사라지지 않고 남아있게 된다.

3-2. flex

flexbox는 기존의 float, position, display 속성을 사용해 HTML 요소의 배치, 정렬, 방향, 순서, 크기를 조절하는 대신에 좀 더 쉽고 효율적으로 조절할 수 있는 레이아웃 제작 방식이다. 특히 반응형 레이아웃을 만들기 좋다.

부모요소, 컨테이너에 적용

속성 값	display: flex
flex-direction:	row - 가로축, 왼쪽에서 오른쪽으로 정렬 (row-reverse 오른쪽에서 왼쪽 정렬) column - 세로축, 위에서 아래로 정렬 (column-reverse 아래에서 위로 정렬)
flex-wrap:	nowrap - 기본 값, 한 라인에 가득차더라도 다음 줄로 넘어가지 않음 wrap - 한 라인에 가득차면 넘치지 않게 다음 줄로 정렬된다.
flex-flow:	flew-direction, flex-wrap 속성을 한 줄에 쓸 수 있음
justify-content: ( 주 축에서 items의 위치 설정 )	flex-start - 좌측에 붙어 아이템 배치 flex-end - 우측에 붙어 아이템 배치 center - 중앙에 맞춰 배치 space-around - 아이템들 양 옆으로 공간 균일 space-evenly - 균일한 공간으로 배치 space-between - 아이템을 양 끝으로 붙어 배치하고 공간 균일
align-items: ( 주 축의 위치 설정 )	center - 축을 중앙으로 배치 end - 축을 끝으로 배치 baseline -