📌 학습한 내용
CSS 레이아웃 1
1. 박스모델
: 레이아웃의 구조를 빠르게 파악할 수 있도록 도와주는 옵션
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;
}
2. margin 병합 현상
(1) 형제간
: 형제간에 margin-bottom과 margin-top을 사용했을 때, 공백을 공유하고 있는 상황에서는 숫자가 큰 값이 작은값을 병합
.margin-one {margin-bottom: 100px;}
.margin-two {margin-top: 50px;}-> 위의 경우 150px이 아닌 100px이 된다.
(2) 부자간
: 자식 태그에 , 부모 태그에도 영향을 주는 경우margin 속성을 줬을 때
(부모자식간에 마진 병합 현상을 해결하기 위해 position을 사용 =>position : absolute;)
3. 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;
}
4. 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의 성격을 갖고 있음)
5. 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 상태이냐에 따라 좌표 기준점이 달라짐.
- 3차원 적인 특징을 가지고 있으면, (top, left, bottom, right)좌표 기준점이 부모 기준으로 움직이게 된다.
32가지의 경우의 수(부모 4가지, 자식 4가지, 3가지 position 조건)
📌 학습중 어려웠던 점
position의 활용- margin 병합 현상의 적용
- 부자간 margin 병합 현상은 top과 bottom에만 해당하는가?
📌 해결방법
다시 한 번 인강을 들어야겠다. 새로운 개념이 많아서 이해하는데 시간이 좀 걸릴 것 같다.
📌 학습소감
오늘은 전체적으로 중요한 내용이라고도 했고 어렵기도 했다. vertical-align 까지는 크게 무리 없이 따라갔는데, position 부분에서 완전히 이해하지 못한 채 뒷부분을 따라가기는 벅찼다. 특히 마진 병합 현상과 inline & block요소가 계속해서 튀어나와서 개념을 이해했다고 생각했는데도 활용하는데 어려움이 있었다. 분량과 난이도에 비해 시간도 너무 촉박했어서 주말동안 이부분을 확실하게 숙지해야겠다.😵
