📌 학습한 내용
: 레이아웃의 구조를 빠르게 파악할 수 있도록 도와주는 옵션
margin
, padding
, border
, content
<열린태그>content</닫힌태그>
<div class="box-model">Hello World</div>
.box-model {
width: 200px;
height: 200px;
background-color: yellowgreen;
border: solid 10px orange;
margin: 100px;
/* = margin: 0 0 0 100px;*/
padding: 100px;
/* = paddingL 0 0 0 100px;*/
}
오브젝트가 스스로 움직이는 것이 아니라, margin
과 padding
의 공백에 의해서 밀리게 된 것
padding: top(right, bottom, left);
-> 선택된 영역의 크기가 달라질 수도 있음 (예시는 padding
으로 인해 실제로 width
가 300으로 보임)
margin: top(right, bottom, left);
👉 css의 코드 분량이 늘어날 수록 파일의 용량이 커짐 -> 로딩 시간이 소비가 됨 -> 따라서 한 줄로 코드 작성
=> 웹사이트 로딩 속도가 빨라짐 (1000ms = 1초)
<html>
과 <body>
안에는 margin
과 padding
이 들어가 있음.html, body {
margin: 0;
padding: 0;
} /* -> margin과 padding의 모든 방향의 값을 0으로 주겠다. */
작업시 위와같이 초기화 시켜줄 것.
box-sizing: border-box;
border
와 padding
값이 적용되는 것.box-model {
box-sizing: border-box;
width: 200px;
height: 200px;
background-color: yellowgreen;
border: solid 10px orange;
padding: 100px 0 0 100px;
}
(1) 형제간
: 형제간에 margin-bottom
과 margin-top
을 사용했을 때, 공백을 공유하고 있는 상황에서는 숫자가 큰 값이 작은값을 병합
.margin-one {margin-bottom: 100px;}
.margin-two {margin-top: 50px;}
-> 위의 경우 150px이 아닌 100px이 된다.
(2) 부자간
: 자식 태그에 , 부모 태그에도 영향을 주는 경우margin
속성을 줬을 때
(부모자식간에 마진 병합 현상을 해결하기 위해 position
을 사용 =>position : absolute;
)
display
속성: 선택한 태그의 진영을 바꿀 수 있다. (Inline / Block)
Inline
: x축 정렬, 공간(width
,height
)을 가질 수 없음, 상하 배치 작업 불가능Block
: y축 정렬, 공간을 가질 수 있음, 상하 배치 작업 가능 <h1>Block</h1>
<h1>Block</h1>
<h1>Block</h1>
<span>Inline</span>
<span>Inline</span>
<span>Inline</span>
h1 {
display: inline;
width: 100px;
height: 100px;
background-color: yellow;
margin-top: 50px;
}
span {
display: block;
width: 100px;
height: 100px;
background-color: pink;
margin-top: 50px;
}
(<h1>
에도 기본적으로 margin
과 padding
값이 존재)
inline-block
: inline요소의 기능 + block요소의 기능 => 메뉴 만드는데 주로 사용h1 {
display: inline-block;
width: 100px;
height: 100px;
background-color: yellow;
margin-top: 50px;
}
vertical-align
속성top
: 형제 관계에 있는 인라인 요소들 중에서 가장 크기가 큰 값을 기준으로 최상단에 배치bottom
: 최하단에 배치middle
: 가운데 배치 <span class="inline">Inline</span>
<span class="inline-block">Inline-Block</span>
<img src="https://via.placeholder.com/200">
.inline-block {
display: inline-block;
width: 100px;
height: 100px;
background-color: yellow;
}
.inline, .inline-block, img {
vertical-align: top;
}
👉 inline 요소에만 사용 가능 (<img>
는 display가 inline-block의 성격을 갖고 있음)
position
속성1차원 - 선
2차원 - 평면, 면이 미리면 같이 붙어잇는 면도 밀려남
3차원 - z축의 개념 등장
👉 홈페이지는 2차원과 3차원을 조합해서 만들어진다.
<고려사항 3가지>
1. margin-top
사용시, 부모 자식 지간에 발생하는 마진 병합 현상이 일어나는지
2. top, right, bottom, left
속성의 사용이 가능한지
3. 자식의 height
값이 부모에게 영향을 주는지
(1) static
1.o, 2.x, 3.o
=> 2차원에 포함되는 속성값
👉 모든 html 태그는 2차원에서 부터 시작, positon: static;
의 속성을 디폴트로 가지고 있음.
(2) fixed
1.x, 2.o (top이 움직이는 기준점은 브라우저 (왼쪽 상단을) 기준으로 움직이게 된다.) 3.x
: 화면에 고정 (static과 정반대) => 3차원 영역에 포함되는 속성값
(3) relative
1.o, 2.o (top이 움직이는 기준점은 원래 박스가 있었던 위치로 부터 움직이게 된다.) 3.o
=> 2차원과 3차원의 특징을 모두 가지고 있다.(혼합형)
top, left, bottom, right
는 해당 박스가 주체가 되어서 움직이는 속성 margin
과 padding
은 공백을 넣음으로써 해당 박스가 밀려서 움직이는 속성(4) absolote
*
1.x, 2.o (top이 움직이는 기준점은 브라우저 (왼쪽 상단을) 기준으로 움직이게 된다.) 3.x
: fixed
와 동일, 3차원 특성을 갖고 있음
👉 2-1 부모가 어떤 postion
상태이냐에 따라 좌표 기준점이 달라짐.
32가지의 경우의 수(부모 4가지, 자식 4가지, 3가지 position 조건)
📌 학습중 어려웠던 점
position
의 활용📌 해결방법
다시 한 번 인강을 들어야겠다. 새로운 개념이 많아서 이해하는데 시간이 좀 걸릴 것 같다.
📌 학습소감
오늘은 전체적으로 중요한 내용이라고도 했고 어렵기도 했다. vertical-align 까지는 크게 무리 없이 따라갔는데, position 부분에서 완전히 이해하지 못한 채 뒷부분을 따라가기는 벅찼다. 특히 마진 병합 현상과 inline & block요소가 계속해서 튀어나와서 개념을 이해했다고 생각했는데도 활용하는데 어려움이 있었다. 분량과 난이도에 비해 시간도 너무 촉박했어서 주말동안 이부분을 확실하게 숙지해야겠다.😵