💻 학습 내용

💡 BOX 모델

구성 요소

• Margin : border를 기준으로 바깥 쪽
• Padding : border과 컨텐츠 사이
• border
• content : <열린태그></닫힌태그> 사이의 내용물

⭐️ html과 body태그에 기본적으로 설정된 margin과 padding값이 존재하기에 작업할 때 margin, padding 값을 0으로 설정하고 시작해야 한다.

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

⭐️ border-box : 내가 결정한 크기(200x200)안에서 border과 padding 값이 적용 된다.

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

marghin 병합 현상

• 형제간의 병합 현상 : 형제 요소가 수직 방향 일 때 더 큰 값을 가진 요소의 마진 값으로 반영

• 부모간의 병합 현상 : 부모 요소의 margin-top과 자식 요소의 margin-top이 서로 닿는 경우에도 더 큰 값을 가진 요소의 마진 값으로 반영

Dispaly

: 내가 선택한 태그의 진영을 바꿀 수 있다. (Inline<->Block)
⭐️ display : inline-block; => 메뉴 버튼을 만들 때 많이 사요 ㅇ됨

Position

: 2차원, 3차원 중 몇차원인지 결정하게 함

positon의 종류

📝 부모의 position에 따라 자식의 top값의 적용 기준 점이 달라진다

💻 마무리

이번 시간에는 레이아웃을 짜는 아주 기본적인 방법에 대해서 배웠다.
레이아웃을 만들어 나가려면 box 개념을 알아야 했다. box model에서 margin과 padding개념이 유독 어렵게 느껴졌다. 아무래도 낯선 단어라서 더 어렵게 느껴지는 것 같다. border을 기준으로 margin은 바깥 쪽이고 padding은 콘텐츠와 더 가 까운 쪽이다. 위치 개념을 제대로 이해하면서 margin, padding과 좀 더 친해졌다.

positon을 이해하려면 차원에 대한 개념이 성립 되어야 한다.
웹사이트는 2차원과 3차원을 적절하게 섞어서 사용해야 한다.
대표적인 2차원 positon은 static 이며, 3차원은 fixed,absolute 이다.
relative는 두가지가 적절히 섞여있는 혼합형이라고 할 수 있다.
실습을 꾸준히 하면서 제대로 된 이해가 필요할 것 같다. position은 아주 중요한 개념이고 제대로 이해를 해야 레이아웃을 작성 할 수있다고 한다.
수업을 반복하면서 들으면서 position을 공부하는 하루가 되었다.