HTML과 CSS 레이아웃
박스모델
박스 모델 구조
아래 네 종류로 이루어져있음
content
padding
border
margin
padding과 margin은 둘다 여분의 공백을 나타냄
margin-left
border 바깥쪽에서 왼쪽에 여백을 집어넣음
여백을 넣어도 기본 페이지 틀 사이즈에는 변화가 없음
padding-left
border 안쪽에서 왼쪽에 여백을 집어넣음
페이지의 사이즈가 한정되있어서
padding 사이즈가 늘어날수록
공간이 여백을 포함한 크기로 변경됨
예시) padding을 주면 컨텐츠와 border사이에 여백이 생김
보더 안에 있는 공간이 커지는 것과 동일한 효과
예시) 과대포장 - 포장 border 내용물 content
<style>
div { margin-left : 100px;
padding-left : 100px;}
</style>
또는
<style>
div { margin : 10px 0 0 10px} → div { margin : top right bottom left }
</style>
활용) height 수정
1) height 100px 일 때
Block 요소와 Inline 요소
1) Black 요소 대표 <p> 태그
2) Inline 요소 대표 <a> 태그
1) Black 요소 대표 <p> 태그
<style>
p { width : 100px;
height : 100px;
margin-top : 100px; }
</style>
→줄바꿈 현상이 나타남 = 특정 공간 차지함
→ width와 height 값 사용 = 공간 만들기 사용 가능
→ margin과 padding 값 사용 = 상하 배치 작업 가능
2) Inline 요소 대표 <a> 태그
→줄바꿈 현상이 나타지 않음 = 특정 공간 차지하지 않음
→ width와 height 값 사용 = 영향 받지 않음
→ margin과 padding 값 사용 = 영향 받지 않음
영향 받게 하려면
Inline 요소를 Block요소로 겉을 감싸서 처리해야함
예시)
마진 병합 현상
1) 형제지간
2) 부모 자식간
1) 형제지간
1번 박스에 margin bottom 값을 주고
2번 박스에 margin top 값을 주면
margin-bottom과 margin-top 중 숫자가 큰 값으로 적용
예시 )
index.html 파일 index.css파일
<div class="box1"> 구운 </div> .box1 { margin-bottom : 200px; }
<div class="box2"> 고기 </div> .box2 { margin-top : 100px; }
예상 출력 ) 실제 출력 )
구운 구운
↑ ↑
300px (bottom 200px + top 100px) 200px
↓ ↓
고기 고기
활용)
2) 부모자식간
index.html index.css
<main role="main"> article { width : 300px;
<article> height : 200px;
</article> margin-top : 100px;}
</main>
<main>이 <article>을 포함하고 있어서
article(자식)에만 margin-top을 지정했어도
main(부모)도 같이 margin-top이 적용됨
활용)
레이아웃에 영향을 미치는 속성
1) display
2) float
3) clear
1) Display
Block과 Inline 요소의 성격을 변경할 때 사용함
Inline-block 을 입력하면 두 요소 성격 모두 가짐
p { display : inline; } → p 태그는 원래는 block 요소지만 inline으로 변경
a { display : block; } → a 태그는 원래는 inline 요소지만 block으로 변경
a { display : inline-block; } → a 태그는 원래는 inline 요소지만 inline과block 모두 가짐
a { display : inline-block; } 일 때
줄바꿈은 안되고 width와 height 는 지정 가능
2) float
2-1) left 좌측정렬
2-2) right 우측정렬
→선택자를 띄워 레이어 만들기
예시 )
index.html index.css
<div class="left"> 구운 </div> .left { float : left; }
<div class="right"> 고기 </div> .right { float : right; }
출력)
구운 고기
레이어 겹치는거 방지 예시)
index.html index.css
<div class="left"> 구운 </div> .left { float : left; }
<div class="lefto"> 고기 </div> .lefto { float : left; }
출력)
구운 고기
3) Clear
float에 대한 속성을 제어할 때 사용
4) 브라우저와 공간 사이의 공백 제거하기
html과 body 태그는 margin과 padding값을 가지므로
초기화시켜서 없애버려야함
<style>
html, body { margin : 0;
padding : 0; }
</style>
또는
별(*)은 모든 html 태그 선택임
<style>
* { margin : 0;
padding : 0; }
</style>
활용)
