01.박스 모델
(1) 박스 모델 구조
(2) margin과 padding의 차이
-
margin-left: border : 바깥쪽에서 왼쪽에 여백을 만듦.
( Top, bottom, left, right도 가능) -
padding-left: border : 안쪽에서 왼쪽에 여백을 만듦.
(공간이 여백을 포함한 크기로 변경되는 점을 유의 해야함)
<style> div{ margin-left: 100px; padding-left: 100px; } <style>
(3) margin 과 padding의 작성방법
- margin과 padding의 작성 방법은 top, right, bottom, left 순서로 시계방향 순으로 작성 할 수 있다.
<style> div{ margin: 100px 0 0 100px; // 시계방향 순으로 top, right, bottom, left 공간 부여 padding: 100px 0 0 100px; // padding도 동일함 } <style>
02 Block 요소와 Inline요소
(1) Block요소의 특징
- p 태그가 대표적 (이외에는 header, div, h1~h6)
- 줄바꿈 현상이 나타남
- width/height 값 사용 가능=>공간만들기 가능함.
- margin과 padding 값 사용가능=>상하배치 작업 가능
(2) Inline 요소의 특징
- 줄바꿈 현상 없음(a태그, span 태그)
- width, height 값 사용불가
- 상하배치 작업 불가
03 마진 병합 현상
(1) 형제지간의 마진 병합
<div class="box1">Hello World</div> <div class="box2">Hello World</div> /*style.css 문서*/ .box1{margin- bottom: 150px; .box2{margin-top: 100px;}
=>margin-bottom과 margin-top 중 숫자가 큰 값으로 적용
(2) 부모자식간의 마진 병합
<main role="main"> <article> </article> </main> /*style.css 문서 */ article{ width:200px; height: 200px; margin-top:100px; }
=>자식인 article 태그 뿐만아니라 main 태그에도 영향을 미침 .
04 레이아웃에 영향을 미치는 속성
(1) display
style.css 문서
p {display: inline;} a {display: block;} a {display: inline-block;}
=>block과 Inline 요소의 성격을 바꿀때 사용, inline-block 은 사용하면 두 요소의 성격을 모두 가진다.
(2) float
- left =>왼쪽으로부터 정렬하고 싶을 때 사용
- right=>오른쪽으로부터 정렬하고 싶을 때 사용
<div class= "left"> Hello world</div> <div class= "right"> Hello world</div>
.left { float: left;} .right{ float: right;}
=> 선택된 요소를 왼쪽 끝 혹은 오른쪽 끝에 정렬시키고자 할 때 사용한다. 이름 그래도 선택자를 띄어 새로운 레이어층을 만든다.
=> 레이어가 겹치지 않는 상태로 왼쪽에서 부터 정렬시키고 싶은 경우 float : left 를 연속적으로 입력하면 된다.
(3) clear
footer에 대한 속성을 제어 하고자 할때
<header></header> <aside class="left">Hello World</aside> <main> </main> <aside class="right">Hello World</aside. <footer></footer>
footer { clear:both }
(4) 브라우저와 공백간 사이의 공백 제거하기
방법1) html 태그와 body 태그는 margin과 padding 값을 가지므로 초기화를 해주어야 함
<style> html,body{ margin: 0; padding: 0; } </style>
방법 2) *로 모든 html 태그 선택 가능
<style> *{ margin: 0; padding: 0; } <style>
