210702 개발일지
1) 학습한 내용
CSS 레이아웃
github
- box-model
Html)
<div class="box-model">
Hello World
</div>CSS)
.box-model {
box-sizing: border-box;
width: 200px;
height: 200px;
background-color: yellow;
border: solid 10px red;
/*margin: 100px 0 0 100px;*/
padding: 100px 0 0 100px;
/*
margin-left: 100px;
margin-top: 100px;
padding-left: 100px;
padding-top: 100px;
*/
}열린태그 닫힌태그 안에 있는것은 '컨텐츠'라 함
- 좌표 배치작업
border 기준으로 바깥쪽이면margin-left: 100px; , 안쪽이면 padding-left: 100px;
border가 0이어도 동일
margin/ padding으로 오브젝트 옮기고자 할때, 선택된 오브젝트가 주체가 돼서 움직이는게 아님.
margin-left/top 등 을 통해 왼쪽에 공간을 줌으로 오른쪽으로 밀려서 움직이게 되는것
{ width: 200px;
height: 200px; }위의 경우 추가로 margin을 사용하게 되면, 정사각형으로 만들어도 선택된 영역의 크기가 달라질수 있음.
padding-left: 100px; 추가로 300px이 되버림.
margin/ padding둘다 시계방향이라 보고 숫자 넣어도 사용 가능
ex)margin: 100px 0 0 100px; (순서대로(시계방향) top,right, bottom, left)
padding: 100px 0 0 100px; (순서대로(시계방향) top,right, bottom, left)
코드가 길어질수록브라우저 로딩속도가 길어짐. 짧게 적어 용량을 줄이는게 좋음
-
브라우저와 테두리의 공백 사라지게 해줌 (html, body사이에도margin/ padding이 있기때문:디폴트값)
html, body { margin: 0; padding: 0; }0 적용을 해줘야 브라우저와 테두리사이 공백 사라짐(따라서 디폴트로 넣어줘야함)
-
공간에 대한 크기는 유지한 하고싶은 채로 패딩으로 위치변경시
box-sizing: border-box; 쓰면, 속성을 적용한 영역의 크기를 기준으로 크기 안쪽으로 border와 padding값셋팅됨
[마진병합 현상]
-
형제지간의 마진병합 현상
margin-bottom, margin-top 사용시 높은값 사용, 작은값은 병합됨
margin-bottom: 100px;
margin-top: 50px;
->100px으로 나타남
cf) 값이 같으면 그 값으로 나타남. -
부모자식지간의 마진 병합 현상
Html 1)<div class="margin-child"></div> </div>
CSS 1)
.margin-parent {
width: 300px;
height: 300px;
background-color: yellow;
}
.margin-child {
width: 150px;
height: 150px;
background-color: blue;
margin-top: 100px;
} 일 때, CSS1 child값에 margin-top100 넣어도 부모도 같이 움직임
큰구역 안의 작은구역, 부모자식관계 생김, 그럼 마진병합 현상 생김
해결은 포지션에서 해결
CSS 1-2)
.margin-child {
position: absolute;
width: 150px;
height: 150px;
background-color: blue;<h1>Block</h1>
<h1>Block</h1>
<h1>Block</h1>
<span>Inline</span>
<span>Inline</span>
<span>Inline</span>block은 공간 만들수 있지만 inline은 공간 x
h1태그도 margin/ padding값을 기본적으로 가지고 있음 제거 할 필요 있음
Html 2)
<span class="inline">Inline</span>
<span class="inline-block">Inline-Block</span>
<img src="https://via.placeholder.com/200/">
<h1>Block</h1>CSS 2)
h1 {
display: inline;
width: 100px;
height: 100px;
background-color: yellow;
margin-top: 100px;
}
span {
display: block;
width: 100px;
height: 100px;
background-color: pink;
margin-top: 100px; } block은 공간 만들수 있지만 inline은 공간 x 그러나 위의 {display: inline/block} 추가로 사용하면, 진영(주어진 설정)을 바꿀수 있음
display: inline-block 은 메뉴 버튼을 쓸때 자주 사용 됨, 공간가로세로정렬 모두 사용가능하게 변경 됨
inline 도 디폴트 여백 공간 있음
<!--
<span class="inline">Inline</span>
<span class="inline-block">Inline-Block</span>
<img src="https://via.placeholder.com/200/">
<h1>Block</h1>
-->vertical-align은 inline에서만 사용가능, block은 사용 불가.
같은 선상, 형제 inline요소가 vertical-align: top; 만나면, 큰값(top)부터 최상단 배치
vertical-align: middle; 중간값(middle)을 중심으로 배치 ex) 카카오톡 이미지와 텍스트 감싸는 칸의 배치
cf)img태그는 inline-block의 성격을 가지고 있기때문에 vertical-align 사용가능
차원
1차원: 선
2차원: 평면
3차원: 우리가 사는 세상
웹사이트는 2,3차원임
position은 2,3차원을 조합해서 만들어지는 것
[4가지의 position]
<1. position: static>
.static-child {
position: static;
width: 150px;
height: 150px;
background-color: blue;
margin-top: 100px;
/*top: 100px;*/
}static 상태에서 margin-top쓰면 부모자식 병합 같이움직임,
top, bottom, left, right 사용 불가
부모가 height값을 갖고있지 않을때 자식의 height가 적용됨
모든 html은 position: static이 디폴트, 이 2차원에서부터 시작
<2. position: fixed>
.fixed-child {
position: fixed;
width: 100px;
height: 100px;
background-color: blue;
/*margin-top: 100px;*/
/*top: 100px;*/
/*left: 100px;*/}
작은 파란 상자가 화면에 고정으로 어디든 따라다님(사실은 화면에 고정된것)
margin-top: 100px;추가해도 부모자식 병합 현상이 일어나지 않음(작은 파란 상자만 내려감)
top: 100px;는 사용 가능, 브라우저 왼쪽 상단기준으로 작은파란상자가 움직임
자식 height값이 부모 height값에 영향을 주지못하므로, 부모가 사라짐, 3차원임
<3. position: relative>
.relative-child {
position: relative;
width: 100px;
height: 100px;
background-color: blue;
margin-top: 100px;}
margin-top을 사용했을때 부모자식 병합 일어남
top: 100px 최초 파란색 위치 기준으로 움직임, 자기자신이 주체
top사용 가능하지만 제일 처음 작은 파란상자 위치 기준으로 움직임.
margin/ padding(공간이 밀려서 이동)과는 다르게 자기가 주체가 돼서 움직임
자식 height값이 부모의 height 값을 가지고 있지 않으면 부모에게 영향을 미침
2,3차원 특징 모두 가지고 있음, 혼합형
<4. position: absolute>
파란색만 이동됨, 부모자식 margin병합현상 일어나지 않음
top: 100px;는 사용 가능, 좌표 기준점이 브라우저(fixed처럼)를 기준으로 움직임
자식의 height값이 부모의 height값에 영향 줄수 없음(fixed와 동일) (노란색사라짐)
3차원적 특징 가지고 있음
추가로, position: absolute의 top값은 부모가 어떤 position상태 이냐의 따라 좌표기준점이 달라짐
.absoulte-parent {
position: static;
width: 300px;
height: 300px;
background-color: yellow;
}부모가 .absoulte-parent { position: satatic (디폴트)으로 2차원 특징이면 .absoulte-child {
position: absolute;의 top값은 브라우저 기준으로 좌표형성
부모가 .absoulte-parent { position: absolute로 3차원적 특징 가지면 부모를 기준으로(파란색 원래 위치)좌표 형성(fixed,relative를 넣어도 동일 결과값)
부모의 position에 따라 자식의 top/bottom/left/right값 달라짐
2) 학습내용 중 어려웠던 점
position사용시 top/bottom/left/right 사용에 따라 좌표의 위치가 달라지는 기준 및 이동 된 위치 예측
3) 해결방법
2,3차원의 이해와 좌표를 다양하게 변경해 옮겨진 위치를 확인해 보았다.
4) 학습소감
실습을 통해 좌표사용하는 법이 더 익숙해지도록 해야겠다.
