[CSS] CSS로 레이아웃 만들기

CSS로 레이아웃을 만들 때 비슷한 부분이 계속 헷갈려서 한번 총정리해보는 시간을 가지려고 한다.

1. 브라우저에서 사용하는 좌표계

브라우저에서 사용하는 좌표계는 왼쪽 상단의 좌표가 (0,0)이 된다.
이 좌표계를 바탕으로 절대/상대적인 위치에 요소를 positioning 할 수 있다.

예제

좌측에서 50px, 상단에서 50px 떨어진 박스이다.

<style>
	.box {
    	border: 1px solid black;
    	width: 200px;
    	height: 100px;
    	position: relative;
    	left: 50px;
    	top: 50px;
  </style>

<div class="box">box</div>

출력 결과

2. 다양한 display 속성

display 속성은 요소를 어떻게 보여줄지 결정하며 크게 4가지의 속성으로 나눌 수 있다.

• none: 보이지 않음
• block: 블록 박스
• inline: 인라인 박스
• inline-block: block과 inline의 중간 형태

1) none

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

예제

<style>
	.none { display: none }
</style>

<div class="none">1</div>
<div>2</div>
<div>3</div>

출력 결과

2) block

div 태그, p 태그, h 태그, li 태그 등이 이에 해당된다.
가로 영역을 모두 채우며 block 요소 다음에 등장하는 태그는 줄바꿈이 된 것처럼 보인다.
또한 width, height 속성을 지정할 수 있다.

예제

<style>
	.block1 { width: 500px; border: 2px solid #000000 }
	.block2 { width: 300px; border: 2px solid #6495ED }
</style>

<div class="block1">1</div>
<div class="block2">2</div>

출력 결과

3) inline

span 태그, b 태그, i 태그, a 태그 등이 이에 해당된다.
inline 요소는 block과 달리 줄바꿈이 되지 않고, width와 height를 지정할 수 없다.

예제

<style>
	.inline1 { 
  		width: 100px; /* inline 요소이므로 이 값은 무시된다. */
  		border: 1px solid #1E90FF
  	}
	.inline2 { 
  		border: 1px solid #FFD700
  	}
	.inline3 { 
  		background: #E6E6FA
  	}
</style>

<span class="inline1">1</span>
<span class="inline2">2</span>
<p>inline 요소는 <span class="inline3">block과 달리 줄바꿈이 되지 않고,</span> width와 height를 지정할 수 없다.<p>

출력 결과

4) inline-block

block과 inline의 중간 형태라고 볼 수 있다.
줄바꿈이 되지 않지만 width와 height를 지정할 수 있다.

예제

<style>
	.inline-block1 { 
  		display: inline-block;
  		width: 100px;
  		height: 50px;
  		border: 3px solid #1E90FF
  	}
	.inline-block2 { 
  		display: inline-block;
  		width: 200px;
  		border: 3px solid #FFD700
  	}
	.inline-block3 { 
  		display: inline-block;
  		background: #E6E6FA
  	}
</style>

<span class="inline-block1">안녕하세요</span>
<span class="inline-block2">Hello</span>
<p>inline-block 요소는 <span class="inline-block3">block과 달리 줄바꿈이 가능하고,</span> width와 height를 지정할 수 있다.<p>

출력 결과

3. Box Model

box-sizing: border-box; 를 통해 박스 사이즈 계산 방법을 다르게 설정할 수 있다.

1) box-sizing 값을 border-box로 지정하지 않은 경우

예제

<style>
    .block1 { 
        width: 500px; 
		height: 100px;
        border: 5px solid #000000; 
        padding: 10px;
        margin: 20px
    }
</style>
    
<div class="block1">1</div>

출력 결과

box-sizing을 지정하지 않았을 경우
width: 500px, height: 100px의 값을 준 컨텐츠에
padding: 10px, border: 5px이 컨텐츠 외부의 또 다른 값으로 더해진다.
따라서 최종적으로 해당 박스는 width: 530px(500+20+10), height: 130px(100+20+10)의 값을 가지게 된다.

2) box-sizing 값을 border-box로 지정한 경우

예제

<style>
    .block1 { 
		box-sizing: border-box;
        width: 500px; 
		height: 100px;
        border: 5px solid #000000; 
        padding: 10px;
        margin: 20px
    }
</style>
    
<div class="block1">1</div>

출력 결과

box-sizing을 지정했을 경우
padding: 10px, border: 5px이
width: 500px, height: 100px의 값을 가진 컨텐츠에 내부에 포함된다.
따라서 최종적으로 해당 박스는 width: 500px(470+20+10), height: 100px(70+20+10)의 값을 가지게 된다.

4. Position 속성

CSS로 레이아웃을 만들 때는 Position 속성에 대한 이해가 필요하다.
Position 속성은 총 5가지로 나누어볼 수 있다.

• static: 기본값
• relative: 기본값 + 상대적인 위치
• absolute: 부모 중 기준점이 있는 경우 그 기준으로 절대적인 위치
• fixed: 브라우저 화면의 좌상단을 기준으로 절대적인 위치
• sticky: 기본적으로 relative 처럼 작동하나, 스크롤 영역을 벗어나면 fixed 처럼 작동

1) static

static은 영역이 차지하는 고유한 영역의 위치이다.

예제

<style>
	body { margin: 0; padding: 0; }
	#r1 { position: static; width: 200px; height: 200px; background: #ff0000; }
	#r2 { position: static; width: 200px; height: 200px; background: #0000ff; }
	#r3 { position: static; width: 200px; height: 200px; background: #ffff00; }
	#r4 { position: static; width: 100px; height: 100px; background: #006600; }
	#r5 { position: static; width: 100px; height: 100px; background: #ffcc33; }
	#r6 { position: static; width: 200px; height: 200px; background: #cc0066; }
</style>

<div id="r1">사각형1</div>
<div id="r2">사각형2</div>
<div id="r3">부모
	<div id="r4">자식1</div>
	<div id="r5">자식2</div>
</div>
<div id="r6">사각형3</div>

출력 결과

2) relative

relative는 해당 영역의 기준 위치인 static을 중심으로 이동한다.
비교를 위해 사각형1만 static 상태로 두고 나머지 영역은 relative로 만든 후 이동시켜보겠다.

예제

<style>
	body { margin: 0; padding: 0; }
	#r1 { position: static; width: 200px; height: 200px; background: #ff0000; }
	#r2 { position: relative; top: 0px; left: 200px; width: 200px; height: 200px; background: #0000ff; }
	#r3 { position: relative; top: 0px; left: 200px; width: 200px; height: 200px; background: #ffff00; }
	#r4 { position: relative; top: 0px; left: 100px; width: 100px; height: 100px; background: #006600; }
	#r5 { position: relative; top: 0px; left: 100px; width: 100px; height: 100px; background: #ffcc33; }
	#r6 { position: relative; top: 0px; left: 200px; width: 200px; height: 200px; background: #cc0066; }
</style>

<div id="r1">사각형1</div>
<div id="r2">사각형2</div>
<div id="r3">부모
	<div id="r4">자식1</div>
	<div id="r5">자식2</div>
</div>
<div id="r6">사각형3</div>

출력 결과

3) absolute

absolute는 브라우저의 좌측 상단(0, 0)을 기준으로 움직인다.
좀 더 빠른 이해를 위해 예제에서 사각형1은 static으로 두고, 나머지를 absolute로 만든 후 이동시켜보겠다.

예제

<style>
	body { margin: 0; padding: 0; }
	#r1 { position: static; width: 200px; height: 200px; background: #ff0000; }
	#r2 { position: absolute; top: 100px; left: 100px; width: 200px; height: 200px; background: #0000ff; }
	#r3 { position: absolute; top: 200px; left: 200px; width: 200px; height: 200px; background: #ffff00; }
	#r4 { position: absolute; top: 20px; left: 50px; width: 100px; height: 100px; background: #006600; }
	#r5 { position: absolute; top: 80px; left: 50px; width: 100px; height: 100px; background: #ffcc33; }
	#r6 { position: absolute; top: 500px; left: 500px; width: 200px; height: 200px; background: #cc0066; }
</style>

<div id="r1">사각형1</div>
<div id="r2">사각형2</div>
<div id="r3">부모
	<div id="r4">자식1</div>
	<div id="r5">자식2</div>
</div>
<div id="r6">사각형3</div>

출력 결과

4) fixed

fixed도 absolute와 마찬가지로 브라우저의 좌상단을 기준으로 움직이지만, 둘 사이에는 차이점이 있다.

• absolute와 fixed의 차이

  	- absolute

  position 속성이 absolute이더라도 화면에서 항상 절대적인 위치가 되는 것은 아니다.
  부모의 position 속성이 static인 경우에는 화면의 좌측상단(0,0)을 기준으로 한다.
  부모의 position 속성이 static이 아닌 경우에는 부모의 시작점을 기준으로 한다.
  또한, 스크롤 시에는 그에 맞게 이동한다.

  • fixed
    fixed는 부모의 속성에 상관없이 항상 화면에서 절대적인 위치가 된다.
    또한, 스크롤 시에도 항상 그 자리에 위치한다.

예제에서는 사각형1만 static 상태로 두고 나머지 영역은 fixed로 만든 후 이동시켜보겠다.

예제

<style>
	body { margin: 0; padding: 0; }
	#r1 { position: static; width: 200px; height: 200px; background: #ff0000; }
	#r2 { position: fixed; top: 100px; left: 100px; width: 200px; height: 200px; background: #0000ff; }
	#r3 { position: fixed; top: 200px; left: 200px; width: 200px; height: 200px; background: #ffff00; }
	#r4 { position: fixed; top: 20px; left: 50px; width: 100px; height: 100px; background: #006600; }
	#r5 { position: fixed; top: 80px; left: 50px; width: 100px; height: 100px; background: #ffcc33; }
	#r6 { position: fixed; top: 500px; left: 500px; width: 200px; height: 200px; background: #cc0066; }
</style>

<div id="r1">사각형1</div>
<div id="r2">사각형2</div>
<div id="r3">부모
	<div id="r4">자식1</div>
	<div id="r5">자식2</div>
</div>
<div id="r6">사각형3</div>

출력 결과

위에서 보면 알 수 있듯이, position 속성을 fixed로 설정했을 시에는 자식 사각형들이 부모의 position 속성에 상관없이 화면의 좌측상단(0,0)을 기준으로 움직이는 것을 볼 수 있다.

5) sticky

sticky는 기본적으로 relative처럼 작동하나, 스크롤 영역을 벗어나면 fixed처럼 작동한다.
예제에서는 사각형2를 fixed로 만든 후 이동시켜보겠다.

예제

<style>
	body { margin: 0; padding: 0; }
	#r1 { position: static; width: 200px; height: 200px; background: #ff0000; }
	#r2 { position: sticky; top: 0px; left: 200px; width: 200px; height: 200px; background: #0000ff; }
	#r3 { position: relative; top: 0px; left: 400px; width: 200px; height: 200px; background: #ffff00; }
	#r4 { position: relative; top: 0px; left: 0px; width: 100px; height: 100px; background: #006600; }
	#r5 { position: relative; top: 0px; left: 0px; width: 100px; height: 100px; background: #ffcc33; }
	#r6 { position: relative; top: 300px; left: 600px; width: 200px; height: 200px; background: #cc0066; }
</style>

<div id="r1">사각형1</div>
<div id="r2">사각형2</div>
<div id="r3">부모
	<div id="r4">자식1</div>
	<div id="r5">자식2</div>
</div>
<div id="r6">사각형3</div>

출력 결과

왼쪽은 사각형2(파란색 사각형)의 position 속성을 fixed로 설정한 뒤 스크롤을 내리지 않은 화면이고, 오른쪽은 스크롤을 내린 화면이다. 왼쪽 그림에서는 부모와 자식1, 2 사각형 좌측 상단에 위치해있던 사각형2가, 오른쪽 그림에서는 부모와 자식1, 2 사각형 옆으로 움직이는 것을 볼 수 있다.
이처럼 sticky는 스크롤을 내리기 전에는 relative처럼 작동하나 스크롤 영역을 벗어나니까 fixed처럼 브라우저의 좌상단을 기준으로 움직인다는 것을 알 수 있다.

---

그동안 계속 헷갈렸던 css 레이아웃 부분을 한번 싹 정리하고 나니까 뒤섞여있던 개념들이 잘 정돈된 느낌이다. 앞으로 css로 레이아웃을 만들다가 헷갈리는 부분이 있으면 블로그에 정리한 글을 보며 계속 복습하는 시간을 가져야겠다😃