레이아웃을 잡자.

이름부터 자바스크립트인 자의 블로그·2020년 4월 26일

CSS Flex TIL block float html inline inline block layout position

HTML, CSS

목록 보기

6/9

1. 레이아웃을 잡는 기준은...

나는 건축설계를 하듯이 하려고 한다. 큰 덩어리(mass)을 잡고, 메스의 모양을 얼추 잡은 뒤 그 메스 안에 공간을 생성한다. 이 공간은 휴식을 위한 공간, 생활하는 공간 등등, 그리고 그 안에는 룸을 통해 실제로 어떤 행위가 일어날 수 있도록 한다.

2. position

HTML 요소가 위치를 결정하는 방식

정적 위치(static position) 지정 방식
상대 위치(relative position) 지정 방식
고정 위치(fixed position) 지정 방식
절대 위치(absolute position) 지정 방식

static position

HTML요소의 위치를 결정하는 가장 기본적인 방식

static으로 설정된 요소는 top, right, bottom, left 속성값에 영향을 받지 않는다

단순히 웹 페이지의 흐름에 따라 차례대로 요소들을 위치시키는 방식

relative position

해당 HTML 요소의 기본 위치를 기준으로 위치를 설정하는 방식

HTML 요소의 기본 위치란 해당 요소가 static position일 때 결정되는 위치를 의미한다

fixed position

뷰포트(viewport)를 기준으로 위치를 설정하는 방식

즉, 웹 페이지가 스크롤 되어도 고정 위치로 지정된 요소는 항상 같은 곳에 위치하게 된다

absolute position

뷰포트(viewport)를 기준으로 위치를 결정하는 것과 비슷하게 동작한다

그러나 뷰포트(viewport)를 기준으로 하는 것이 아닌 위치가 설정된 조상(ancestor) 요소를 기준으로 위치를 설정하게 된다

하지만 위치가 설정된 조상(ancestor) 요소를 가지지 않는다면, HTML 문서의 body 요소를 기준으로 위치를 설정하게 된다

static position과 다른 방식들과의 차이점

정적 위치(static position) 지정 방식을 제외한 나머지 다른 방식(relative, fixed, absolute)들은 전부 어떤 기준에 대해 해당 요소의 상대적인 위치를 설정하는 방식

- 상대 위치(relative position) : 해당 요소가 정적 위치 지정 방식일 때의 위치에 상대적으로 위치함

- 고정 위치(fixed position) : 뷰포트(viewport)에 상대적으로 위치함

- 절대 위치(absolute position) : 위치가 설정된 바로 상위의 조상(ancestor) 요소에 상대적으로 위치함

z-index 속성

HTML 요소의 위치를 설정하게 되면 어떤 요소들은 설정된 위치 및 방식에 따라 서로 겹칠 수도 있다

z-index 속성은 이렇게 겹쳐지는 요소들이 쌓이는 스택(stack)의 순서를 설정한다

스택(stack)의 순서는 양수나 음수 모두 설정할 수 있으며, 크기가 클수록 앞쪽에 위치하고 작을수록 뒤쪽에 위치하게 된다

2-1. position에서 부모와 자식관계

default값인 position: static;과
뷰포트(쉽게 브라우저)를 기준(브라우저 화면의 왼쪽위 픽셀)으로 고정되는 position: fixed;는 제외하고,

position: relative;
position: absolute;

에서

position: relative; 자체로는 어느 위치로 이동하지는 않는다. 위치를 이동시켜주는 top, right, bottom, left 프로퍼티가 있어야 원래의 위치에서 원하는 위치로 이동할 수 있다.

* 이동하고 싶은 요소부터 relative와 top, right, bottom, left 프로퍼티를 사용하면 된다. 그 부모 요소의 position이 어떤 것이든... 부모 position이 명시되어 있지않아도 default값(static)으로 되어있어 작동됨으로.

position: absolute; 부모 중에 position이 relative, fixed, absolute 하나라도 있으면 그 부모에 대해 절대적으로 움직이며 만약 지정되지않으면 맨 위인 <body>까지 타고 간다..

* 일반적으로 absolute를 쓸 경우, 부모에게 position: relative; 를 부여해서 사용한다. static으로는 사용할 수가 없고 그렇다고 부모를 fixed나 absolute를 쓰면 부모요소를 원하는데로 작성할 수 없을테니...

3. inline, inline-block, block

display

CSS에서 레이아웃을 제어하기 위한 프로퍼티.

block

화면상에서 기본적으로 한줄을 차지하며 다음 태그는 줄바꿈이 적용된다.

inline

텍스트가 차지한 만큼의 공간을 가지고 있으며 줄바꿈이 적용되지 않는다.

inline-block

inline과 block의 속성을 둘다 가지고 있는 것으로 줄바꿈이 적용되지 않으나 inline속성에서 할 수 없었던 width/height 변경 및 line-height등을 바꿀 수 있다.

none

요소를 렌더링하지 않도록 설정한다.

visibility 속성을 hidden으로 설정한 것과 달리, 영역도 차지하지 않는다.

<style>
.display-none{ display: none }
.invisible{ visibility: hidden }
</style>

<div class="display-none">1</div>
<div>2</div>

<div class="invisible">3</div>
<div>4</div>

2

4

3-1. distplay : flex

기본: flex는 부모요소에 설정해줘야 자식요소들이 적용된다

flex은 기본적으로 가로정렬을 할 수 있고 float나 inline-block에서 부족했던 점을 보완코자 나온 뷰포트나 요소의 크기가 불명확하거나 동적으로 변할 때에도 효율적으로 요소를 배치, 정렬, 분산할 수 있는 방법을 제공하는 CSS3의 새로운 레이아웃 방식이다.

* flex에 관해서는 많은 내용이 있다. 추가적으로 https://heropy.blog/2018/11/24/css-flexible-box/ 에서 공부해야겠다.

많이 쓰는 2가지만 우선 메모

justify-contents:center
align-items:center

4. float에 대해서

float 라는 단어는 원래 ‘뜨다’ 라는 의미이며, 원래 웹페이지에서 이미지를 어떻게 띄워서 텍스트와 함께 배치할 것인가에 대한 속성.

inherit: 부모 요소에서 상속

left: 왼쪽에 부유하는 블록 박스를 생성. 페이지 내용은 박스 오른쪽에 위치하며 위에서 아래로 흐름

right: 오른쪽에 부유하는 블록 박스를 생성. 페이지 내용은 박스 왼쪽에 위치하며 위에서 아래로 흐름.

이후 요소에 clear 속성이 있으면 페이지 흐름이 달라짐

none 이 아니라면 display 속성은 무시된다

none : 요소를 부유시키지 않음

left와 right를 통해 부유속성을 지정시 display는 무시된다 (none은 제외)
또한 이후 요소에 clear 속성이 있으면 페이지 흐름이 달라진다

clear

float 속성을 통해 태그를 부유시킨 이후 문서의 흐름을 제거하기 위해 쓰인다
방향에 따라 3가지 속성을 사용할 수 있다

left: 좌측 부유 제거

right: 우측 부유 제거

both: 양쪽 모두 제거

<html>
<head>
<style>
	.float-container{ width: 320px; border: 2px solid #09c; }
	.float-container img{ float: left; margin: 5px; padding: 5px; border: 2px solid #90C; }
</style>
</head>
<body>
	<div class="float-container">
		<img src="/images/attach/earth.jpg">
		<p>This is first line with floating image.</p>
		<p style="clear: both">This is second line with cleared property.</p>
	</div>
</body>
</html>

레이아웃에서의 clear

float 속성이 레이아웃에서 많이 사용한다고 하였는데, clear속성도 float를 레이아웃에서 사용하며 발생되는 문제를 해결하기 위해 많이 사용된다.

float 속성을 적용한 태그는 붕 뜨며 정상적인 요소로 처리가 안되기 때문에
아래에 나타나야 하는 내용이 부유된 태그의 중간에 나타나는 문제 및 상위 태그의 높이가 없어지는 문제 등이 발생하게 된다.

<style>
	.box-container{
		width: 350px;
		border: 2px solid #09c;
		background-color: #d7f5ff;
	}
	.box-container .box{
		width: 80px;
		height: 40px;
		border: 2px solid red;
		background-color: #ffe7d5;
	}
</style>
<div class="box-container">
	<div class="box" style="float: left">박스1</div>
	<div class="box" style="float: right">박스2</div>
</div>
<div>박스 아래에 나타나야 하는 내용</div>

<div class="box-container">
	<div class="box" style="float: left">박스1</div>
	<div class="box" style="float: right">박스2</div>
	<div style="clear: both"></div>
</div>
<div>박스 아래에 나타나야 하는 내용</div>