1. 학습내용
레이아웃
박스모델이란? 웹사이트를 만들때 레이아웃의 공백이나 구조를 빠르게 파악할 수 있게 도와주는 옵션
박스모델을 구성하는 4가지 요소
1.margin 2.border 3.padding 4.content
열린태그와 닫힌태그 사이의 내용물을 content로 기억하자. 즉 밑에 태그를 보면 div태그 기준으로 Hello World 자체가 content, body태그 기준으로는 div태그 자체가 content
margin과 padding은 특정 오브젝트를 옮기고자할때 사용 (좌표배치작업), margin과 padding을 구분짓는 요소를 border라고 보면됨.
마진과 패딩 둘다 자의가 아닌 타의에 의해서(새롭게 생성된 공백에 밀려서) 움직이게됨.
margin padding 값을 넣어줄때 하나하나 넣어주게 되면 코드분량이 늘어나게 되고 브라우저의 로딩속도가 느려지게됨 그래서 ==== 1번과 같이줄여서 사용. 적는 순서는 12시기준 시계방향 즉, top right bottom left
주의점 : 노란박스가 200x200이면 정사각형이여야 하는데 직사각형인 이유 padding을 사용하게되면 공간자체가 벌어지기때문에 실제 노란색 width 값은 300이된다. (그후 padding값 100추가)
padding을 적용하더라도 공간에 대한 크기를 유지하고 싶으면 box-sizing: border-box; 사용. 속성을 적용한 영역의 크기를 기준으로해서 크기 안쪽으로 border와 padding 값이 세팅됨
브라우저와 테두리사이에 미세한 공백이 있음(html과 body 태그안에도 태생적인 margin과 padding이 들어가있음) html과 body 양쪽에 margin,padding 값을 0을 주겠다- 맨밑 코드
웹사이트 만들때 html과 body 태그의 margin과 padding은 0을 적용하는 코드를 default로 넣어주는 것이 좋다.
주석 단축키 : ctrl + /
html
<div class="box-model">
Hello World
</div>
css
.box-model {
width: 200px;
height: 200px;
background-color: yellow;
border: solid 10px red;
box-sizing: border-box;
1==========================
margin: 100px 0 0 100px;
padding: 100px 0 0 100px;
2==========================
margin-left: 100px;
margin-top: 100px;
margin-bottom: ;
margin-right: ;
padding-right: ;
padding-bottom: ;
padding-left: 100px;
padding-top: 100px;
===========================
}
html, body {
margin: 0;
padding: 0;
}
마진병합현상
1.형제지간
margin-one에 margin-bottom 100을 주면 노란색 영역(one)을 기준으로 아래쪽에 100이라는 공백이 들어오고 파란색 영역(two)은 밀리게된다.
그 상황에 margin-two에 margin-top 50을 주면 파란색이 50만큼 더 내려갈줄 알았지만 변화없음
즉,margin-one bottom과 margin-two top이 공백을 공유하고있음(이경우 큰값의 우선순위가 높음 = 큰값이 작은값을 병합). top의 값을 150으로 늘리면 파란색이 더내려오게 된다. 결론 100으로 동일한 값을 주면 두영역은 100px이라고 하는 공백을 공유하고있는것이다.
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: 100px;
}
2.부모자식
웹사이트만드는 도중 가장 많이 만날수 있는 문제. child에게 top 100을 주면 자식만 움직일 줄 알았지만 같이움직임 --> 해결방법 : position 속성을 사용
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;
}
display
이전 시간에 html이 크게 두가지 진영으로 나뉜다고 배웠다. block과 inline
이 둘의 차이점은 block은 연속적으로 작성시 y축정렬(줄바꿈현상), inline은 x축정렬(줄바꿈없음)
나머지 차이점에 대해서 배워보자
첫번째는 block은 공간을 만들 수 있지만 inline은 불가(밑 사진참조)
block사이에 공백이있는 이유? h1태그를 사용했는데 h1태그도 margin과 padding값이 기본적으로 있어서 0으로 만들어줘야함(지금은안함)
두번째는 block은 상하배치작업이 가능, inline은 불가
h1(block)-->inline, span(inline)-->block 바꾸고 싶을때 사용하는 것이 display.
inline-block : x축정렬(inline) + width,height 값적용 ,상하배치작업가능(block)
inline-block은 메뉴버튼만들때 자주사용
inline 요소 사용시 주의점 : 각 영역사이에 공백이 있음(기본)
html
<h1>Block</h1>
<h1>Block</h1>
<h1>Block</h1>
<span>Inline</span>
<span>Inline</span>
<span>Inline</span>
css
h1 {
width: 100px;
height: 100px;
background-color: yellow;
margin-top: 100px;
display: inline-block;
}
span {
width: 100px;
height: 100px;
background-color: pink;
margin-top: 100px;
display: block;
}
display 적용
Vertical align
inline요소에만 사용가능, block요소에는 안됨.
정렬을 깔끔하게 하고 싶을때 사용하는 속성
top:형제관계에 있는 인라인요소들중에서 가장 크기가 큰값을 기준으로 최상단에 배치
middle:센터중심에 정렬
img태그는 왜? img태그는 display가 inline-block의 성격을 가지고있음. 공부한내용을 살펴보면 img 여러개 생성시 x축정렬이되고 크기조절도 가능함
html
<span class="inline">Inline</span>
<span class="inline-block">Inline-Block</span>
<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, h1{
vertical-align: middle;
}
Position (어렵고 중요)
차원에 대한 이해
2차원(평면)은 서로다른박스가 붙어있다면 밀리면 같이밀림.
3차원이 바로 현실세계. z축개념이 등장하고, 포토샵 레이어 개념으로 생각하면 편함
차원을 왜 알아야할까? 웹사이트 만들때 2차원과 3차원을 섞어서 만들기때문
position 공부시 3가지 경우의 수
1.margin-top 사용시 부모자식간에 발생하는 마진병합현상여부
2.top,right,bottom,left 사용여부(예시에선 top기준으로 설명)
3.자식의 높이값이 부모에게 영향을 주는지 여부
poistion 4가지 속성값
1. static 2.fixed 3.relative 4.absolute
poistion을 공부할때 방법
1. 부모자식관계 만들기
2. 부모의 poistion 상태(4)
3. 자식의 poistion 상태(4)
4x4=16 x 3가지경우의수(m.t, trbl, p/c height) = 48가지
48가지 경우의수를 완벽하게 이해하면 레이아웃 마스터
static
모든 html은 기본적으로 postion-static 상태
1. magin-top 사용시 마진병합현상 일어남(o)
2. top,r,b,l 사용불가(x)
3. 부모의 높이값이 정해지지 않았을때 자식의 높이값이 부모에게 영향(o)
이런 특징은 2차원의특징 즉,staic은 2차원 영역에 포함되는 속성값
.static-parent {
width: 300px;
background-color: yellow;
}
.static-child {
position: static;
width: 150px;
height: 150px;
background-color: blue;
margin-top: 100px;
top: 100px;
}fixed
사용시 파란색 원이 따라 움직이는데 움직이는게 아니라 고정된것이라고 봐야한다. 그리고 쇼핑몰 페이지 스크롤시 따라다니는 배너광고는 전부 이걸 이용한것
1.margin-top 사용시 마진병합없음(x)
2.top,r,b,l 사용가능(o) 그러나 top이 움직이는 기준점은 브라우저 왼쪽상단을 기준으로 움직이는것, 즉 최초의 파란색박스 위치가 아닌 좌표기준점이 브라우저 기준으로 바뀜
3.부모의 높이값이 없을때 자식 높이값 영향없음(x)
이런 특징은 3차원특징, 즉 fixed는 3차원영역에 포함되는 속성값
static과 완전반대
.box1 {
width: 300px;
height: 200px;
background-color: gray;
}
.fixed-parent {
width: 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
1.margin-top 사용시 마진병합있음(o)
2.top,r,b,l 사용가능(o) 그러나 top 원래기준으로 움직임(브라우저기준x)
top(다른것포함)은 margin,padding과 다르다. 무슨말인가하면 margin과 padding은 공백에 밀려서 움직였다면 top은 자기가 주체가 되어서 움직임
3.자식의 높이값이 부모에게 영향있음(o)
2차원 + 3차원 특징을 가지고있음 (혼합형)
.box3 {
width: 300px;
height: 200px;
background-color: gray;
}
.relative-parent {
width: 300px;
background-color: yellow;
}
.relative-child {
position: relative;
width: 100px;
height: 100px;
background-color: blue;
margin-top: 100px;
top: 100px;
}absolute
1.margin-top 사용시 마진병합현상 없음(x)
2.top 사용가능(브라우저기준)(o)
3.자식의 높이값 부모에게 영향없음(x)
3차원적인 특징을 가지고있음(fixed와 동일)
대신 absolute는 top값이 부모가 어떤 포지션 상태이냐 따라 좌표기준점이 달라짐
static(2차원)는 좌표기준점이 브라우저 기준, 부모가 3차원성격(fixed,absolute)이면 좌표기준점이 그 부모를 기준으로 형성됨
relative도 2,3차원 특징을 가지고있어서 부모를 기준으로 형성
.box4 {
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;
top: 100px;
}
2. 학습 중 어려웠던 점
Poistion의 종류가 생각보다 많아 이해하는데 시간이 오래걸렸다.
3. 해결방안
모르는 부분을 강의로 여러번 돌려보았고 그리고 주말을 통해 실습해 완벽하게 나의 것으로 만들 예정이다
4. 학습소감
오늘 재미있는 걸 배웠다 항상 인터넷 쇼핑몰이나 사이트들을 볼때 나를 따라다니는 바나 광고가 어떻게 떠있는건지 항상 궁금했는데 오늘에서야 그 궁금증을 해소하게되었다.
매우 긍정적인 개발자