7월 2일 금요일
학습한 내용
실습 전 작업 파일 정리, html 문서 이름은 index.html style.css 사용 권장
나만의 팁 : 서브라임텍스트에서 html 입력 후 tap 더블 입력하면 독타입과 html head body 등 기본 입력이 이루어진다.
오늘 수업 주제 : 박스 모델
박스 모델 : 각 레이아웃 빠르게 파악할 수 있게 도와주는 옵션
박스 모델의 종류
1. margin
2. border
3. padding
4. contents
contents는 태그 사이에 있는 텍스트를 의미한다. <태그>컨텐츠</태그>
사이즈를 조절하는 명령어는 이렇다.
예)
margin-left: 100px;
margin-top: 100px;
margin-right: ;
margin-bottom: ;
padding-left: 100px;
padding-top: 100px;
padding-bottom: ;
padding-right: ;
연습을 할 때는 이렇게 left, top, right, bottom 구분을 하여 쓰는 것을 권장하셨다.
실무에서는 같은 기능이라도 최대한 코드가 짧을 수록 로딩 시간을 줄여주기 때문에 줄임말을 써야한다고 한다.
예)
margin: top, right, bottom, left 순서로
margin: 100px 0 0 100px; 이렇게 입력하면 된다. 시계 처럼 12시 방향으로 돌아가는 것을
생각하면 된다.
마진병합 문제
박스모델의 사용할 때 주의할 점으로 마진병합 문제에 대해서 학습하였다.
크게 2가지로 나뉜다.
1. 형제 태그 간의 문제
2. 부모 태그 문제
부모 태그 문제가 가장 많이 발생한다고 한다.
앞전에 배운 Inline/Block 특성에 따라 공간을 조절할 수 있고 없고 차이가 있다.
기본적으로 블록 요소는 공간 조절이 가능하고 인라인 요소는 공간 조절이 불가능하다.
하지만. display:명령어로 그 조건을 변경할 수가 있다.
display: inline;
display: block;
display: inline-block;
css에 위 명령어를 사용하면 인라인이든 블록 특성이든 관계 없이 강제로 조절할 수가 있다.
그리고 동시에 인라인과 블록의 특성을 넣을 수도 있다. 이런 경우에는 주로 메뉴 버튼을 사용할 때 display: inline-block;를 사용한다고 한다.
vertical-align: middel; <-명령어는 inline요소만 사용가능 함.
차원
1차원 // 2차원 // 3차원
레이아웃을 잘 다루기 위해서 2차원과 3차원의 특성을 잘 이해해야 한다고 한다.
2차원은 빨강&초록사각형이 함께 움직이는 형태이고 3차원은 각각의 사각형이 따로 움직일 수가 있다.
차원의 개념을 이용하여 공간을 조절하는 명령어들을 정리한 그림이다.
마진 병합 현상의 유무 : 2차원 O, 3차원 X
top, right, bottom, left : 2차원 X, 3차원 O
자식의 top 값이 부모의 top 값에 영향을 주는 지 유무 : 2차원 O, 3차원 X
학습한 내용 중 어려웠던 점 또는 해결못한 것들
개념이 크게 어려운 것 같지는 않다.
그런데 어떻게 써야할 지 감이 잘 안온다.
여러 번 반복하면서 익숙해져야 할 것 같다,
해결방법 작성
반복만이 살길인듯하다.
학습 소감
어려운 내용은 아닌데 헷갈리는 것 같다. 오늘 배운 부분이 매우 중요한 부분이라고 하시니 강의를 반복하면서 학습하는 수 밖에 없는 것 같다.
html
<!-- <div class="box-model">
Hello World
</div> -->
<!-- <div class="margin-one"></div>
<div class="margin-two"></div> -->
<!-- <div class="margin-parent">
<div class="margin-child"></div>
</div> --> <!-- <div class="box1"></div> <div class="box1"></div>css
html, body {
margin: 0;
padding: 0;
}
/*.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;
margin-right: ;
margin-bottom: ;
padding-left: 100px;
padding-top: 100px;
padding-bottom: ;
padding-right: ;
*/}
/*
.margin-one {
width: 100%;
height: 100px;
background-color: yellow;
margin-bottom: 100px;}
.margin-two {
width: 100%;
height: 100px;
background-color: blue;
margin-top: 50px;}
*/
.margin-parent {
width: 300px;
height: 300px;
background-color: yellow;
}
.margin-child {
position: absolute;
width: 150px;
height: 150px;
background-color: blue;
margin-top: 100px;}
h1 {
display: inline-block;
width: 100px;
height: 100px;
background-color: yellow;
margin-top: 100px;}
span {
display: block;
width: 100px;
height: 100px;
background-color: pink;}
.inline-block {
display:inline-block;
width: 100px;
height: 100px;
background-color: yellow;}
.inline, .inline-block, img {
vertical-align: middel;
}
.static-patent {
width: 300px;
height: 300px;
background-color: yellow;
}
.staci-child {
position: static;
width: 150px;
height: 150px;
background-color: blue;
/*margin-top: 100px;*/
/*top: 100px;*/}
.box1 {
width: 300px;
height: 200px;
background-color: gray;
}
.fixed-parent{
width: 300px;
height: 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;
}
.box1 {
width: 300px;
height: 200px;
background-color: gray;
}
.relative-parent{
width: 300px;
height: 300px;
background-color: yellow;
}
.relative-child {
position: fixed;
width: 100px;
height: 100px;
background-color: blue;
/*margin-top: 100px;*/
top: 100px;}
.box1 {
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;
margin-top: 100px;
top: 100px;}
