7월 2일 Velog

학습한 내용

CSS 레이아웃

1. Box Model

[html]

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

[css]

html, body {

	margin: 0;
	padding: 0;
}

.box-model {
	box-sizing: border-box;

	width: 200px;
	height: 200px;
	background-color: yellow;
	border: solid 10px red;
/*
	margin-left: 100px;
	margin-top: 100px;
	padding-left: 100px;
	padding-top: 100px;
*/  
	margin: 100px 0 0 100px;  
	padding : 100px 0 0 100px;
	
}

• 박스 모델 : 웹 사이트를 만들 때 각 레이아웃의 구조를 파악할 수 있도록 도와주는 옵션

• 박스 모델의 구성 요소 : margin, padding, border, content

• content : 열린 태그와 닫힌 태그 사이에 있는 내용

• margin-left : 선택된 태그의 왼쪽 공백

• padding-left : 선택된 태그의 내용물의 왼쪽 공백
  ※ 선택된 영역이 주체적으로 움직이는 것이 아니다
  ※ padding에 의해 영역의 크기가 변화한다.
  : (width : 200 -> 300, height: 200 -> 300)

• 종류 : margin(padding)-left/top/right/bottom

• 한 줄로 작성할 때 순서 : top -> right -> bottom -> left (시계방향)

• html과 body 태그 사이에 margin과 padding이 기본적으로 존재한다,
  -> html, body { margin: 0; padding: 0; } -> 디폴트로 넣어야 한다.

• box-sizing: border-box; : width/height 고정된 채로 margin, padding 적용

• ctrl + / : 주석

2. margin 병합 현상

(1) 형제 태그

[html]

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

[css]

.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, margin-top과 같이 같은 공간을 공유하는 형제 태그의 margin 중 큰 숫자가 우선으로 공간을 차지한다. (100 + 50 -> 100)

(2) 부모 자식 태그

[html]

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

[css]

.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을 주면 부모 태그 영역도 함께 자리이동
• position: absolute; : 입력하면 자식 태그만 자리이동

3. Display

[html]

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

	<h2>Block</h2>
	<h2>Block</h2>
	<h2>Block</h2>

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

[css]

h1 {
	display: inline-block;

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

	margin-top: 100px;

}

span {
	display: block;

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

	margin-top: 100px;
}

h2 {
	display: inline;

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

	margin-top: 500px;
}

• h1 태그는 margin, padding 기본적으로 가지고 있다. -> 제거해줘야 한다
• Block : 상하 배치 작업을 할 수 있다, 공간을 가질 수 있다
• Inline : 상하 배치 작업을 할 수 없다, 공간을 가질 수 없다
• display : 내가 선택한 태그의 진영(inline/block)을 바꿀 수 있다

※ display: inline-block; : x축 정렬(inline), 상하 배치 작업 가능/공간 존재(block), 메뉴 버튼을 만들 때 많이 사용된다.
※ inline(+ inline-block) 사이에 공백이 들어가 있음 주의

4. Vertical-Align

[html]

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

[css]

.inline-block {
	display: inline-block;

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

.inline, .inline-block, img {
	/*vertical-align: top;*/
	/*vertical-align: bottom;*/
	/*vertical-align: middle;*/
}

• vertical-align: top; : 형제관계에 있는 태그들 중 가장 큰 공간을 차지하는 값을 기준으로 최상단에 정렬된다
• vertical-align: bottom; : 형제관계에 있는 태그들 중 가장 큰 공간을 차지하는 값을 기준으로 최하단에 정렬된다
• vertical-align: middle; : 형제관계에 있는 태그들 중 가장 큰 공간을 차지하는 값을 기준으로 중앙에 정렬된다

※ img : x축 정렬이면서 공간을 차지한다(inline-block 성질)

5. Position

[차원]

• 1차원 : 선
• 2차원 : 평면, 두 평면이 겹쳐질 수 없다.
• 3차원 : 박스, 두 평면이 겹쳐질 수 있다. (z축의 영향)
• 홈페이지는 2차원과 3차원의 조합으로 만들어진다.

[position 성질]
1. margin-top 사용시 부모 자식 지간에 발생하는 마진 병합 현상이 일어나는지
-> margin-top: 100px;
2. top, right, bottom, left 속성을 사용할 수 있는지
-> top: 100px;
3. 자식 태그의 높이값이 부모 태그에게 영향을 주는지
-> (부모 태그 내의) /*height: 300px;*/

(1) static

[html]

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

[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. 부모 자식 간의 margin 병합 현상 : O
2. top/left/right/bottom 사용 : X, 차례대로 왼쪽에서 오른쪽, 위에서 아래로 쌓인다.
3. 자식 태그의 높이값이 부모 태그에게 적용 : O

• position: static; : 일단 모든 태그들은 처음에 position: static 상태이다.

• 2차원 속성

(2) fixed

[html]

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

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


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

[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;
}

1. 부모 자식 간의 margin 병합 현상 : X
2. top/left/right/bottom 사용 : O, 브라우저 좌측 상단 기준
3. 자식 태그의 높이값이 부모 태그에게 적용 : X

• 3차원 속성

• position: fixed; : 고정되어 스크롤을 내려도 움직이지 않음

(3) relative

[html]

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

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

[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;
}

1. 부모 자식 간의 margin 병합 현상 : O
2. top/left/right/bottom 사용 : O, 원래 있던 위치를 기준으로 함
3. 자식 태그의 높이값이 부모 태그에게 적용 : O

• 2차원 + 3차원 속성

(4) absolute

[html]

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

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

[css]

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

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

.absolute-child {
	position: absolute;

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

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

1. 부모 자식 간의 margin 병합 현상 : X
2. top/left/right/bottom 사용 : O, 브라우저 좌측 상단/부모 태그 영역 기준
3. 자식 태그의 높이값이 부모 태그에게 적용 : X

• 3차원 속성

※ 부모 태그의 position이 absolute/fixed/relative : top, left의 기준점은 부모 태그 영역 기준
※ 부모 태그의 position이 static : top, left의 기준점은 브라우저 왼쪽 상단

[Position의 상관관계]

학습한 내용 중 어려웠던 점 또는 해결 못한 것들

position의 속성값들을 배우면서 다양한 조건에서 결과물이 달라지는 것을 정확하게 파악하는 것이 쉽지 않았다. 또한 relative와 absolute에서 top값이 적용되는 기준점에 대한 개념이 확실하게 서지 않았다.

해결 방법 작성

css 파일을 수정하여 4x4x3=48 개의 경우의 수를 만들어 하나하나 확인하여 엑셀로 정리하였다. 또한 자식 태그를 하나 더 추가하여 relative와 absolute의 기준점 차이를 눈으로 직접 확인하였다.
[html]

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

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

[css]

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

.absolute-parent {
	/*position: static;*/
	/*position: fixed;*/
	/*position: relative;*/
	/*position: absolute;*/


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

.absolute-child {
	/*position: static;*/
	/*position: fixed;*/
	/*position: relative;*/
	/*position: absolute;*/

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

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


.absolute-child-2 {
	/*position: relative;*/
	/*position: absolute;*/

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

	top : 300px;
}

주석을 하나씩 해제하면서 결과를 눈으로 확인하였고 relative와 absolute의 top값에 대한 기준점이 각각 원래 위치, 부모 태그 영역이라는 것도 시각적으로 이해할 수 있었다.

학습 소감

내가 이해하지 못했던 부분을 직접 코드를 추가하여 결과물을 확인하는데 처음에는 두 개의 자식 태그 영역이 겹치기도 하고 내 스스로 기준점이 헷갈리면서 어려움을 많이 느꼈다. 그렇지만 코드를 천천히 살펴서 기준점을 확실히 이해하면서 엑셀 표로 정리하는 것도 한결 수월해짐을 느꼈다. 앞으로도 의문점이 생기면 코드를 수정해보면서 시각적으로 결과물을 확인하면서 학습을 해야겠다는 생각을 했다.