1) 학습한 내용
웹사이트 레이아웃에 필요한 CSS 주요속성
<.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>
</.body>
<./html>
마진병합형상(형제지간)
<.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>
<spen<Inline<./spen>
<spen<Inline</.spen>
<spen<Inline</.spen>
(인라인요소에서만 사용가능)
버티컬언라인 속성
<.spen class="inline">Inline<./spen>
<.spen class="inline-block">Inline-Block<./spen>
<.img src="https://viaplaceholder.com/200">
<.h1>block<./h1>
포지션 속성
1. margin-top 사용시 부모 자식 지간에 발생하는 마진 병합 현상이 일어나는지
2. top. right, bottom, left 속성을 사용할 수 있는지
3. 자식의 높이 값이 부모에게 영향을 주는지
4가지 속성 중 1. static
<.div class="static-parent">
<.div class="static-dhild"><./div>
<./div>
4가지 속성 중 2. fixed
<.div class="fixed-parent">
<.div class="fixed-child"><./div>
<./div>
<.div class="box2"></.div>
4가지 속성 중 3. relative
<.div class="relative-parent">
<.div class="relative-child"><./div>
<./div>
4가지 속성 중 4. absolute
<.div class="absolute-parent">
<.div class="absolute-child"><./div>
<./div>
제트인덱스
<.div class="z-one"><./div>
<.div class='z-two"><./div>
주석영역 처리 ctrl + / , Alt + /
박스모델css
마진속성, 패딩속성 한번에 처리하는 법 시계방향
margin 탑px 라이트px 바텀px 래프트px
padding 탑 라이트 바텀 레프트
style.css
html, body {
margin: 0;
padding: 0;
}
.box-model {
box-sizing: border-box;
width: 200px;
height: 200px;
background-color: yellow;
boder: solid 10px red;
margin-left: 100px;
margin-top: 100px;
padding-left: 100px;
pedding-top: 100px;
}
마진병합형상(형제지간)
margin top, bottom 둘이 공유함
.margin-one {
width: 100%;
height: 100px;
background-color: yellow;
margin-bottom; 100px;
}
.margin-two {
width: 100%;
height; 100px;
background-color: blue;
margin-top: 50px;
}
마진병합형상(부모지간)
position 큰 구역에서 작은 구역나눔
.margin-parent {
width: 300px;
height; 300px;
background-color: yellow;
}
.margin-child {
position: absolute;
width; 150px;
height; 150px;
background-colot: blue;
}
디스플레이
h1 {
display: inline-block;
width: 100px;
height: 100px;
background-color: yellow;
margin-top: 100px;
}
spen {
width: 100px;
height: 100px;
background-color: pink;
margin-top: 100px;
}
(인라인요소에서만 사용가능)
버티컬언라인 속성
.inline-block {
display: inline-block;
width: 100px;
height: 100px;
background-color: yellow;
}
.inline, inline-block, img {
vertical-align: middle ;
}
포지션속성 중 1.static
.static-parent {
width: 300px;
height: 300px;
background-color: yellow;
}
.static-child {
width: 150px;
height: 150px;
background-color: blue;
margin-top: 100px;
}
포지션 속성 중 2.fixed
.box1 {
width: 300px;
height: 200px;
background-color: gray
}
.fixed-parent {
width: 300px;
height: 300px;
background-color: yellow;
}
.fixed-child {
width: 100px;
height: 100px;
background-color: blue;
.box2{
width: 300px;
height: 2000px;
background-color: green;
}
포지션 속성 중 3.relative
.box1 {
width: 300px;
height: 200px;
background-color: gray
}
.relative-parent {
width: 300px;
height: 300px;
background-color: yellow;
}
.relative-child {
position: relative
width: 100px;
height: 100px;
background-color: blue;
margin-top: 100px;
}
포지션속성 중 4.absolute
.box1 {
width: 300px;
height: 200px;
background-color: gray
}
.absolute-parent {
position: static;
width: 300px;
height: 300px;
background-color: yellow;
}
.absolute-child {
position: absolute;
width: 100px;
height: 100px;
background-color: blue;
margin-top: 100px;
}
제트인덱스
.z-one {
width: 200px;
height: 200px;
background-color: yellow;
}
.z-two {
position: absolute;
width: 200px;
height: 300px;
background-color: blue;
}
2) 학습내용 중 어려웠던 점
어려웠던 점이요? 다요 다 어려웠는데요...
3) 해결방법
해결방법은 뭐 한결같죠 복습하면서 공부 해야죠..
4) 학습소감
어제 모의고사를 쳤는데 모의고사가 이거 보단 어렵겠지 했는데 역시나 코딩이 더 어렵네요 이번껀 더 어려운 거 같고요 이걸 제가 한다고 생각하니까 좀 앞날이 캄캄하네요 .. 초등학생들은 이거보다 쉬운 거 배워서 벽돌깨기 놀이 한다는데 저도 그거 하고싶어요
