11<!DOCTYPE html>
22< html lang ="en ">
3+
34< head >
45 < meta charset ="UTF-8 ">
56 < meta name ="viewport " content ="width=device-width, initial-scale=1.0 ">
7+ < link rel ="icon " href ="../day02/datas/block.webp " />
68 < title > Document</ title >
79</ head >
8-
9- < body >
10- < header >
10+ < header >
1111 < hr />
1212 < a href ="../../index.html "> 메인페이지</ a >
1313 < hr />
14- </ header >
14+ </ header >
15+
16+ < body >
1517 < h2 > 블록요소 - div, p, pre, h1~h6,</ h2 >
16- < p > 블록요소는 문서의 내용을 표시하는 구역을 설정하는 것. 시맨틱 태그(header,nav,main,article...etc), div와 거의 동일한 성격을 갖고 의미있는 단어로 표시를 단어를 사용한 것 뿐이다.</ p >
18+ < p > 블록요소는 문서의 내용을 표시하는 구역을 설정하는 것. 시맨틱 태그(header,nav,main,article...etc), div와 거의 동일한 성격을 갖고 의미있는 단어로 표시를 단어를 사용한 것
19+ 뿐이다.</ p >
1720 < p > 블록요소는 기본적으로 너비(width)는 브라우저 크기의 100%, 높이(height)는 자식요소의 크기</ p >
1821 < p > 블록요소의 크기 변경을 위해 width,height,< a style ="color: red; "> < strong > 스타일</ strong > </ a > 을 직접 설정할 것.</ p >
1922 < P > 문서 최상위 요소인 Body의 너비도 100%, 높이도 자식요소의 크기</ P >
2023 < div style ="background-color: bisque; width: 300px;height: 300px; ">
2124 Div 첫번째 테스트 - px 단위를 사용하면 항상 고정된 크기를 설정합니다. (절대값)
2225 </ div >
23- < div style = "background-color: coral; width: 45%; padding: 5%; ">
26+ < div style = "background-color: coral; width: 45%; padding: 5%; ">
2427 < p > Box Model (레이아웃과 관련된 속성)</ p >
2528 < p > Div 두번째 테스트 - % 단위를 사용하면 부모요소의 크기를 기준으로 설정합니다.< a style ="color: gray; ""> (상대값)</ a > </ p >
26- < p > 해당 Div부모요소는 body, body의 widht(너비)는 브라우저의 < a style ="color: red; "> < b > 100%</ b > </ a > </ p >
27- < p > body의 높이는 height(높이)는 자식요소의 크기만큼 설정됨.</ p >
28- < ul >
29- < li > width : 너비</ li >
30- < li > height : 높이</ li >
31- < li > padding : 안쪽 여백</ li >
32- < li > margin : 바깥 여백</ li >
33- < li > border : 테두리 부분</ li >
34- < ul >
35- < br >
36- < p > ==> 박스의 크기를 결정하는 값은? 너비(width),높이(height),패딩(padding),테두리(border)</ p >
37- < p > ex -- width 200px; height 300px; padding 30px; border 2px;</ p >
38- < a style ="font-weight: 300; "> 전체 박스크기 = [width+{(padding*2)+(border*2)}]+[height+{(padding*2)+(border*2)})</ a >
29+ < p > 해당 Div부모요소는 body, body의 widht(너비)는 브라우저의 < a style =" color: red; "> < b > 100%</ b > </ a > </ p >
30+ < p > body의 높이는 height(높이)는 자식요소의 크기만큼 설정됨.</ p >
31+ < ul >
32+ < li > width : 너비</ li >
33+ < li > height : 높이</ li >
34+ < li > padding : 안쪽 여백</ li >
35+ < li > margin : 바깥 여백</ li >
36+ < li > border : 테두리 부분</ li >
37+ < ul >
38+ < br >
39+ < p > ==> 박스의 크기를 결정하는 값은? 너비(width),높이(height),패딩(padding),테두리(border)</ p >
40+ < p > ex -- width 200px; height 300px; padding 30px; border 2px;</ p >
41+ < a style ="font-weight: 300; "> 전체 박스크기 =
42+ [width+{(padding*2)+(border*2)}]+[height+{(padding*2)+(border*2)})</ a >
3943 </ div >
4044 < div > "box-sizing: border-box ;" padding,border 포함하여 width,height를 설정가능.</ div >
4145 < div style ="background-color: yellow; width: 200px; height: 200px;margin: 20px; ">
42- < div style ="background-color: rgb(86, 91, 133); width: 50%; height: 50%; "> 부모 요소< a style ="color: orange; "> (노랑)</ a > 가 있는 div 세번째 테스트</ div >
46+ < div style ="background-color: rgb(86, 91, 133); width: 50%; height: 50%; "> 부모 요소< a
47+ style ="color: orange; "> (노랑)</ a > 가 있는 div 세번째 테스트</ div >
4348 </ div >
4449 < div style ="background-color: aqua; width: 80%; height: 80%; ">
45- < div style ="background-color: aliceblue; width: 50%; height: 50%; ">
50+ < div style ="background-color: aliceblue; width: 50%; height: 50%; ">
4651 부모 요소가 %인 네번쩨 테스트
4752 </ div >
4853 </ div >
4954 < div style ="background-color:aliceblue; width: 200px; height: 300px; padding: 30px; border: 2px; "> </ div >
5055 < hr >
5156</ body >
57+
5258</ html >
0 commit comments