Dev Log #5 - 7월 2일

Juhui_0304·2021년 7월 2일

Dev Log

목록 보기

5/49

오늘 학습한 내용

✅ 웹사이트 레이아웃에 필요한 css속성
✅ box모델
✅ margin 병합 현상
✅ display 속성
✅ vertical-align 속성
✅ position 속성 (static, fixed, relative, absolute)

1. box모델

웹사이트를 만들 때 각 레이아웃의 공백, 구조를 빠르게 파악할 수 있게 도와주는 일종의 옵션이다.

구성하는 요소 : margin, padding, border, contents가 있다.

margin, padding은 오브젝트를 옮기고자 할 때 좌표 배치작업을 진행하는 css 속성이다.
선택된 object가 주체적으로 움직이는 것이 아니다.
새롭게 생성된 공백에 의해서(타의에 의해서) 밀려서 움직이게 되는 것이다.
🚨 padding 사용시 주의점: 선택된 영역의 공간의 크기가 달라질 수 있다.
margin, padding 코드 단순화 시키는 법: 12시 시계방향을 생각 하면 된다. (top ➡️ right ➡️ bottom ➡️ left)
코드를 한줄로 정리하는 이유: css코드 분량이 길어질 수록 브라우저의 로딩 속도가 느려진다.

👉 html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

	<div class="box-model">
		Hello World!
	</div>


</body>
</html>

👉 css

.box-model {
	width: 200px;
	height: 200px;
	background-color: yellow;
	border: solid 10px red;

	margin: 100px 0 0 100px;
	padding: 100px 0 0 100px;

	/*
	margin-left:  100px;
	margin-top: 100px;
	margin-right: ;
	margin-bottom: ;

	padding-left: 100px;
	padding-top: 100px;
	padding-right: ;
	padding-bottom: ;
	*/
}

👉 결과물

👉 참고(브라우저 로딩 속도)

자세히 보면 아무런 속성값을 지정하지 않아도 태생적으로 html, body 태그 안에도 margin과 padding값이 들어가있어서 브라우저와 테두리 사이의 미세한 공간(틈)이 들어가 있다.
이를 해결하기 위해서는 html, body 태그에 margin, padding 속성값을 0으로 따로 지정해 주어야 한다.
즉, .html, body {padding: 0; margin: 0;} 값을 디폴트로 넣어주는 것이 좋다.
box-sizing: border-box;를 사용하게 되면 속성을 적용한 영역에 크기를 기준으로 해서 크기 안쪽으로 border와 padding 값이 세팅이 된다.
내가 만든 공간에 대한 크기는 유지를 한 상태에서 padding으로 위치를 변경하고 싶다. 👉 그럴때에는 box-sizing: border-box;를 사용하면 된다.

👉 html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

	<div class="box-model">
		Hello World!
	</div>


</body>
</html>

👉 css

.html, body {
	padding: 0;
	margin: 0;
}

.box-model {
	box-sizing: border-box;
	
	width: 200px;
	height: 200px;
	background-color: yellow;
	border: solid 10px red;

	/*margin: 100px 0 0 100px;*/
	padding: 100px 0 0 100px;

	/*
	margin-left:  100px;
	margin-top: 100px;
	margin-right: ;
	margin-bottom: ;

	padding-left: 100px;
	padding-top: 100px;
	padding-right: ;
	padding-bottom: ;
	*/
}

✔️ margin 병합 현상 :

웹사이트 레이아웃 작업을 진행할 때 가장 많이 만나게 되는 문제 중 하나(크게 두가지만 기억! 1. 형제지간에 발생하는 margin 병합 현상, 2. 부모-자식지간에 발생하는 margin 병합 현상)

✔️ 형제지간에 발생하는 margin 병합 현상 :

형제지간에 margin-top과 margin-bottom을 사용했을 때 그 공백을 공유하고 있는 상황에서는 숫자가 큰 값에 우선순위가 더 높다. 즉, 큰 값이 작은 값을 먹어버린다.

👉 html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

	<div class="margin-one"></div>
	<div class="margin-two"></div>

</body>
</html>

👉 css

.html, body {
	padding: 0;
	margin: 0;
}

.margin-one {
	width: 100%;
	height: 100px;
	background-color: yellow;

	margin-bottom: 100px;
}

.margin-two {
	width: 100%;
	height: 100px;
	background-color: blue;

	margin-top: 50px;
}

👉 결과물

빨간색 선 테두리 친 부분이 병합 현상(=margin-bottom: 100px;이 margin-top: 50px;을 병합한 상태, 먹어버린 상태)

✔️ 부모-자식지간에 발생하는 margin 병합 현상 :

웹사이트를 만들 때 가장 많이 발생하는 문제현상 중 하나이다. 자식 요소 안에 margin값을 넣으면 부모 요소까지 같이 먹히는 현상이다. 이를 해결하기 위해서는 position: absolute; 속성을 넣어서 해결해야한다.

👉 html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
	<div class="margin-parent">

		<div class="margin-child"></div>
		
	</div>

</body>
</html>

👉 css

.html, body {
	padding: 0;
	margin: 0;
}

.margin-parent {
	width: 300px;
	height: 300px;
	background-color: yellow;
}

.margin-child {
	width: 150px;
	height: 150px;
	background-color: blue;

	margin-top: 100px;
}

👉 결과물

부모인 노란색 박스가 자식인 파란색 박스에 따라 함께 margin-top: 100px;이 먹힌 현상

👉 position: absolute; 속성을 통해 문제 해결

.html, body {
	padding: 0;
	margin: 0;
}

.margin-parent {
	width: 300px;
	height: 300px;
	background-color: yellow;
}

.margin-child {
	position: absolute;

	width: 150px;
	height: 150px;
	background-color: blue;

	margin-top: 100px;
}

자식인 파란색 박스만 margin-top: 100px;이 적용됨.

2. display 속성

html태그는 크게 두가지 진영으로 갈린다. 한가지는 block요소, 다른 한가지는 inline요소이다. block요소는 연속적으로 작성을 했을 때 y축 현상, 줄바꿈 현상이 나타나고 inline 요소는 줄바꿈 없이 나란히 병렬이 된다.

이번엔는 block요소와 inline요소를 더 deep하게 알아본다.

block요소는 공간을 만들 수 있고 margin-top, margin-bottom, padding-top, padding-bottom를 적용할 수 있다(상하 배치O).
inline요소는 공간을 만들 수 없고 margin-top, margin-bottom, padding-top, padding-bottom를 적용할 수 없다(상하 배치X).

👉 html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

	<h1>Block</h1>
	<h1>Block</h1>
	<h1>Block</h1>

	<span>Inline</span>
	<span>Inline</span>
	<span>Inline</span>



</body>
</html>

👉 css

h1 {
	width: 100px;
	height: 100px;
	background-color: yellow;

	margin-top: 100px;
}

span {
	width: 100px;
	height: 100px;
	background-color: pink;

	margin-top: 100px;
}

👉 결과물

h1태그(block 요소)를 inline 요소로 사용하고 싶을 때, span태그(inline 요소)를 block 요소로 처리하고 싶을 때 사용하는 것이 display 속성이다.

👉 css

h1 {
	display: inline;

	width: 100px;
	height: 100px;
	background-color: yellow;

	margin-top: 100px;
}

span {
	display: block;
	
	width: 100px;
	height: 100px;
	background-color: pink;

	margin-top: 100px;
}

👉 결과물

display속성을 사용하면 내가 선택한 진영을 바꿀 수 있다.

x축 정렬이면서 width, height 공간에 대한 크기를 만들고 싶고, 심지어 상하배치 적용까지 가능하고 싶다면(즉, inline요소 block요소 모두 사용하고 싶다면) display: inline-block;을 적용하면 된다.
display: inline-block; 경우는 메뉴 버튼을 만들 때 자주 사용한다.

3. vertical-align 속성

vertical-align: top; 속성은 같은 선상에 있는 형제 관계에 있는 inline요소들 중에서 가장 숫자, 크기가 큰 값을 기준으로 최상단에 배치가 된다.
vertical-align: bottom; 속성은 같은 선상에 있는 형제 관계에 있는 inline요소들 중에서 가장 숫자, 크기가 큰 값을 기준으로 최하단에 배치가 된다.
vertical-align: middle; 속성은 같은 선상에 있는 형제 관계에 있는 inline요소들 중에서 가장 숫자, 크기가 큰 값을 기준으로 중간에 배치가 된다.
verticla-align 속성은 inline요소에만 적용이 된다.(block인 h1태그 적용X)
img태그는 기본적으로 display가 inline-block 성격을 가지고 있다.

👉 html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

	<span class="inline">Inline</span>
	<span class="inline-block">Inline-Block</span>
	<img src="https://via.placeholder.com/200">
	<h1>Block</h1>

</body>
</html>

👉 css

.inline-block {
	display: inline-block;

	width: 100px;
	height: 100px;
	background-color: yellow;
}

.inline, inline-block, img {
	vertical-align: middle;
}

👉 결과물

4. position 속성 ⭐️⭐️⭐️⭐️⭐️

레이아웃에서 가장 중요하고 어려운 내용이다. position을 이용하려면 차원이라는 것을 이해해야한다.

차원: 1차원, 2차원, 3차원
1차원: 선
2차원: 평면(서로 다른 박스가 붙여져 있다면 한 박스가 오른쪽으로 밀리게 되면 나머지 박스도 같이 오른쪽으로 밀리게 된다.)
3차원: 현실세계에서 보는 세상(한 박스가 움직이면 나머지 박스는 움직일 수 도 있고, 움직이지 않을 수도 있다. 이 이유는 z축이라는 것이 발생하기 때문이다. ex.레이어 맨 앞으로 옮기기, 맨 뒤로 옮기기와 같은 행위)
웹사이트는 2차원과 3차원과 적절히 섞어가면서 제작(꼭 인지할 것)
position 속성은 내가 선택한 영역을 2차원으로 만들 것인지, 3차원으로 만들 것인 지 결정짓는 속성값이다.

position을 공부할 때 3가지 경우의 수만 기억하면 된다.
1. margin-top 사용시 부모 자식 지간에 발생하는 마진 병합 현상이 일어나는 지
2. top, right, bottom, left 속성을 사용할 수 있는 지
3. 자식의 높이 값이 부모에게 영향을 주는 지
즉, 3가지를 기준으로해서 position 속성 값을 갖고있는 특징을 파악해주면 된다.

position 크게 4가지 속성값을 가지고 있다(static, fixed, rerlative, absolute)

✔️ static

static 특징을 갖고있는 차원은 2차원이다.

margin-top 사용시 부모 자식 지간에 발생하는 마진 병합 현상이 일어난다.

top, right, bottom, left 속성을 사용할 수 없다.

(부모가 높이 값을 가지고 있지 않았을 때)자식의 높이 값이 부모에게 영향을 준다.

position 속성을 주지 않더라도 이전과 동일한 결과가 순차적으로 발생한다.
정리하자면, 모든 html태그는 기본적으로 position: static; 상태이다. 즉, 모든 html태그는 2차원으로 시작하고 있다.

👉 html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

	<div class="static-parent">
		<div class="static-child"></div>
	</div>


</body>
</html>

👉 css

.static-parent {
	width: 300px;
	/*height: 300px;*/
	background-color: yellow;
}

.static-child {
	position: static;

	width: 150px;
	height: 150px;
	background-color: blue;

	/*margin-top: 100px;*/
	/*top: 100px;*/
}

👉 결과물 (특징 1,2,3을 차례대로 적용했다)

✔️ fixed

fixed 특징을 갖고있는 차원은 3차원이다.

margin-top 사용시 부모 자식 지간에 발생하는 마진 병합 현상이 일어나지 않는다.

top, right, bottom, left 속성을 사용할 수 있다.
(단, 움직이는 기준점은 브라우저 왼쪽 상단을 기준으로 움직이고 있다.)

(부모가 높이 값을 가지고 있지 않았을 때)자식의 높이 값이 부모에게 영향을 줄 수 없다.

static 속성과 완전히 반대이다.
3차원 영역에 포함되는 속성값 중 하나이다.

👉 html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

	<div class="box1"></div>

	<div class="fixed-parent">
		<div class="fixed-child"></div>
	</div>

	<div class="box2"></div>


</body>
</html>

👉 css

.box1 {
	width: 300px;
	height: 200px;
	background-color: gray;
}

.fixed-parent {
	width: 300px;
	/*height: 300px;*/
	background-color: yellow;
}

.fixed-child {
	position: fixed;

	width: 100px;
	height: 100px;
	background-color: blue;

	/*margin-top: 100px;*/
	/*top: 100px;*/
}

.box2 {
	width: 300px;
	height: 2000px;
	background-color: green;
}

👉 결과물

✔️ relative

2차원과 3차원의 특징 양 쪽 모두를 가지고 있다.(혼합형)

margin-top 사용시 부모 자식 지간에 발생하는 마진 병합 현상이 일어난다.

top, right, bottom, left 속성을 사용할 수 있다.
(단, 움직이는 기준점은 최초 자리에 있었던 위치를 기준으로 움직이고 있다.)

(부모가 높이 값을 가지고 있지 않았을 때)자식의 높이 값이 부모에게 영향을 준다.

top, right, bottom, left 속성은 margin, padding 속성값과 다르게 자기자신이 주체가 되서 움직인다.

👉 html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

	<div class="box1"></div>

	<div class="relative-parent">
		<div class="relative-child"></div>
	</div>

</body>
</html>

👉 css

.box1 {
	width: 300px;
	height: 200px;
	background-color: gray;
}

.relative-parent {
	width: 300px;
	/*height: 300px;*/
	background-color: yellow;
}

.relative-child {
	position: relative;

	width: 100px;
	height: 100px;
	background-color: blue;

	/*margin-top: 100px;*/
	/*top: 100px;*/

}

👉 결과물

✔️ absolute

fixed 특징을 갖고있는 차원은 3차원이다.

margin-top 사용시 부모 자식 지간에 발생하는 마진 병합 현상이 일어나지 않는다.

top, right, bottom, left 속성을 사용할 수 있다.
(단, 움직이는 기준점은 브라우저 왼쪽 상단을 기준으로 움직이고 있다.)

(부모가 높이 값을 가지고 있지 않았을 때)자식의 높이 값이 부모에게 영향을 줄 수 없다.

fixed와 동일하다.
fixed와 또다른 차별점은 부모가 어떤 포지션 상태인지에 따라서 좌표 기준점이 다시 달라진다.(2번 특징)
부모가 3차원 포지션 상태(absolute, fixed, relative)이면 브라우저 기준이 아닌 부모의 기준으로 움직인다.
부모가 2차원 포지션 상태(static)이면 브라우저 기준으로 움직인다.

👉 html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

	<div class="box1"></div>

	<div class="absolute-parent">
		<div class="absolute-child"></div>
	</div>


</body>
</html>

👉 css

.box1 {
	width: 300px;
	height: 200px;
	background-color: gray;
}

.absolute-parent {
	position: absolute;
	
	width: 300px;
	height: 300px;
	background-color: yellow;
}

.absolute-child {
	position: absolute;

	width: 100px;
	height: 100px;
	background-color: blue;

	/*margin-top: 100px;*/
	top: 100px;

}

👉 결과물(특징 1,2,3을 적용한 것과 마지막은 부모에 absolute속성을 넣어 적용했다.)

✔️ position 속성 총정리

마진 병합 현상 유무 (2차원 O, 3차원 X)
top, right, bottom, left (2차원 X, 3차원 O)
자식의 높이값이 부모의 높이값에 영향을 주는 지 유무 (2차원 O, 3차원 X)

부모 자식 관계를 만들어주고 부모의 포지션상태, 자식의 포지션 상태 총 16가지 경우의 수(4x4)가 나오고 거기에 대해서 특징 3가지를 다 따져봐야한다. 총 48가지(16x3)의 경우의 수가 나온다.

분류	static	fixed	relative	absolute
차원	2차원	3차원	혼합	3차원
margin 병합문제	O	X	O	X
top, right, bottom, left 속성	X	O(브라우저)	O(최초)	O(브라우저)
높이값 영향	O	X	O	X

오늘의 학습 후기(어려웠던 점, 개선할 점)

오늘의 학습 후기는 가려웠던 점을 속시원하게 긁은 느낌이다.🥳 웹디자이너로 홈페이지 유지보수를 할 때 항상 어려웠던 점이 바로 position 부분이기 때문이다. 특히, margin 병합에서 문제가 생겨 이를 바로 잡기 위해서는 position 속성값을 이용해서 해결해야하는데, 레이아웃이 워낙 다양하고 거기에 따른 적용법이 하나하나 다 틀린 것을 이미 실무에서 느껴본 경험이 있다. 그런 상황이 올때마다 엉망진창이 되는 레이아웃을 보고 절망한 경험이 많았기에 오늘의 학습 내용은 나에게 너무나도 뜻깊었고 중요했다ㅜㅜ😭👏 김인권 강사님께서 설명을 이해하기 쉽게 잘 설명해주셔서 하나하나 쏙쏙 들어온 것 같다. 특히, 기준 3가지로 static, relative, fixed, absolute 값이 나뉘어지고 더 나아가 자식 포지션 뿐만 아니라 부모 포지션에 따라서도 레이아웃이 달라진다는 점이 인상깊었다. 강사님께서 추천한 학습법인 총 48가지 경우의 수를 하나하나 다 만들어보고 꼭 제대로! 익혀야겠다. 오늘의 어려웠던 점은 position과 margin 병합 부분이 어려웠고 이는 레이아웃을 직접 만듦으로써 해소할 수 있었다. 다음주 수업을 위해 주말에는 이번주에 학습했던 내용을 복습하고 나의 것으로 만드는 것에 집중해야겠다😊