1.학습한 내용
오늘은 레이아웃을 구성하는 CSS 박스모델에 대해 학습하였다. 웹 문서 안에서 여러 요소를 원한느 위치에 배치하려면 CSS 박스모델을 잘 알고 있어야 한다. 그래야만 한 줄에 배치할지, 줄을 바꾸어 배치할지, 요소와 요소 사이의 간격을 어떻게 조절할지 결정할 수 있다.
박스 모델은 
이렇게 구성이 된다.
코드를 입력하기전 이번 파트에서 가장 중요하게 인지해야 할 부분은 바로 마진 중첩(마진 병합 현상)을 이해하는 것인데, 부모자식간의 관계 형제 지간의 병합을 잘 이해 하여야 한다. 사실은, 아직도 이해를 제대로 못하고 있어서 주말에 보완을 해서 정리를 하여야 할 부분이다.
우선 학습한 코드를 넣으면,
**## html**
<<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<!--
<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>
-->
<!--
<h1>block</h1>
<h1>block</h1>
<h1>block</h1>
<span>Inline</span>
<span>Inline</span>
<span>Inline</span>
-->
<!--
<span class="inline">Inline</span>
<span class="inline-block">Inline-Block</span>
<img src="https://via.placeholder.com/200">
<h1>Block</h1>
-->
<!-- position
1. margin-top 사용시 부모 자식 간에 발생하는 마진 병합 현상이 일어나는지..
2 top, right, bottom, left 속성을 사용할수 있는지
3. 자식의 높이 값이 부모에게 영향을 주는지
-->
<!--
<div class="static-parent">
<div class="static-child"></div>
</div>
-->
<!--
<div class="box1"></div>
<div class="fixed-parent">
<div class="fixed-child"></div>
</div>
<div class="box2"></div>
-->
<!--
<div class="box1"></div>
<div class="relative-parent">
<div class="relative-child"></div>
</div>
-->
<div class="box1"></div>
<div class="absolute-parent">
<div class="absolute-child"></div>
</div>
</body>
</html>
코드를 입력하세요html, body{
margin: 0;
padding: 0;
}
.box-model {
box-sizing: border-box;
박스 모델의 너비와 높이를 어떻게 결정할 것인가에 따라 border-box와 content-box 중에서 선택할수 있다.
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;
css의 분량이 많아질수록 페이지 로딩 속도가 느려진다.
margin-left: 100px;
margin-top: 100px;
padding-left: 100px;
padding-top: 100px;
*/
}
.margin-one {
width: 100%;
height: 100px;
background-color: yellow;
margin-bottom: 100px; # 숫자가 큰 값이 우선순위가 높다.
}
.margin-two {
width: 100%;
height: 100px;
background-color: blue;
margin-top: 100px;
}
.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;
margin-top: 100px;
}
*/
.inline-block {
display: inline-block;
inline-block은 메뉴 버튼을 만들때 사용된다.
width: 100px;
height: 100px;
background-color: yellow;
}
.inline, .inline-block, img {
vertical-align: middle;
}
.static-parent {
width: 300px;
/*height: 300px;*/
background-color: yellow;
}
.static-child {
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: 200px;*/
background-color: yellow;
}
.fixed-child {
position: fixed;
width: 100px;
height: 100px;
background-color: blueviolet;
/*margin-top: 100px;*/
/*top: 100px;*/
/*left: 100px;*/
}
.box2 {
width: 300px;
height: 2000px;
background-color: green;
}
.box1 {
width: 300px;
height: 200px;
background-color: gray;
}
.relative-parent {
width: 300px;
/*height: 200px;*/
background-color: yellow;
}
.relative-child {
position: relative;
position: fixed;
width: 100px;
height: 100px;
background-color: blueviolet;
/*margin-top: 100px;*/
top: 100px;
}
.box1 {
width: 300px;
height: 200px;
background-color: gray;
}
.absolute-parent {
position: static;
width: 300px;
height: 200px;
background-color: yellow;
}
.absolute-child {
position: absolute;
position: fixed;
width: 100px;
height: 100px;
background-color: blueviolet;
/*margin-top: 100px;*/
top: 100px;
}position 속성값은 크게 4가지가 있다.
1. static : 문서의 흐름에 맞춰 배치함. default값
2. relative : 위치값을 지정할 수 있다는 점을 제외하면 static과 같다.
3. absolute : relative값을 사용한 상위 요소를 기준으로 위치를 지정해 배치한다.
4. fixed : 브라우저 창을 기준으로 위치를 지정해 배치한다.
position에서는 3가지 경우의 수를 고려하여야 하는데,
1. margin-top 사용시 부모 자식같에 발생하는 마진병합현상이 일어나는지..(2차원ㅇ, 3차원 X)
2. top, right, bottom, left로 위치 변경 가능한지
(2차원X, 3차원 ㅇ)
3. 자식의 높이값이 부모에게 영향을 주는지(2차원ㅇ, 3차원 X)
각각의 속성값은 2차원 혹은 3차원의 특성을 가지는데,
모든 경우의수를 고려하면 다음과 같다.
부모와 자식의 각각 static relative fixed, absolute 요소들과 고려하여야할 3가지 요소
부모 자식 3가지 요소
4 × 4 × 3 = 48가지를 전부 다룰수 있어야 한다.
2. 학습한 내용중 어려웠던 점 또는 해결못한 것들
지금 사실 완전히 이해하지 못한 상태에서 글을 쓰는것이라 대폭 수정이 필요하다. 일지를 쓰는것도 중요하지만, 오늘 학습한 내용은 특히 계속 직접 하나하나 쳐보고 실행해보아야 이해가 될텐데 웹프로그래밍 학습을 한지 5일만에 고비가 온 느낌이다. 이번 학습은 모든 내용이 어렵다. 단순히 어려웠던 점 몇가지를 꼽기가 어렵다. 머릿속에 혼재된 개념정립이 없어서 더 혼란인것 같다. 가장 문제는 앞서 배웠던 문법과 용어들도 까먹어 가고 있는데 총체적인 난국이다.
3. 해결방법 작성
강의 배속을 1.5배속으로 빠르게 들으면서 최대한 일시정지를 하지 않고 진행해 나가고 있는데, 시간이 걸리더라도 일시정지를 하고 정리하고 다시 나가는 방식으로 하여야 할것 같다. 주말에는 필히 5일간의 강의 정리를 하여야 할것 같다. 그렇지않으면, 다음주에 진도나가는게 의미가 없을듯하다.
4.학습 소감
머릿속에 지식이 섞이고 있다. 제일 위험한 것이 완전치 않은 지식들이 짬뽕이 되는 것이다. (아는것만 못한 상황)
이 어설프게 조리된 짬뽕탕을 다시 원재료로 분리하여야 한다.
