박스 모델
margin과 padding의 차이
- 각 요소 간 border 간격을 margin, border와 요소 간 간격(콘텐츠 안쪽 여백)을 padding
예시)
<style>
div {
margin-left: 100px;
padding-left: 100px;
}
</style>- .margin-left: border 바깥쪽에서 왼쪽에 여백을 만듦
- .padding-left: border 안쪽에서 왼쪽에 여백을 만듦
- top, right, bottom, left 여백을 만들 수 있다
top right bottom left 순서로 한 줄에 작성 가능 (시계 방향)
<style>
div { margin: 100px 0 0 100px; }
</style
Block 요소와 Inline 요소
Block 요소의 특징
<style>
p {
width: 200px;
height: 200px;
margin-top: 100px;
}
</style>
- <p> 태그가 대표적
- 줄 바꿈 현상
- 공간 만들기 가능 (width, height 값 사용 가능)
- 상하 배치 작업 가능 (margin, padding 값 사용 가능)
Inline 요소의 특징
- 줄 바꿈 현상 없음
- width/height 값 적용 불가
- margin /padding /bottom 값 적용 불가
마진 병합 현상
형제지간의 마진 병합
<div class="box1">Hello World</div>
<div class="box2">Hello World</div>
- margin-bottom과 margin-top 공간이 충돌했을 때 숫자가 큰 값으로 적용
.box1 { margin-bottom: 150px; } /* 적용값 */
.box2 { bottom-top: 100px; }
부모 자식 간의 마진 병합
<main role="main">
<article>
</article>
</main>
<style>
article {
width: 200px;
height: 200px;
margin-top: 100px;
}
- 자식인 <article>뿐만 아니라 부모인 <main>에도 영향을 미친다
레이아웃에 영향을 미치는 속성
display
p { display: inline; }
a { display: block; }
a {display: inline-block; }
- Block과 Inline 요소의 성격을 바꿀 때 사용
- inline-block을 사용하면 두 요소의 성격을 모두 가짐
float
<body>
<div class="left"> Hello World </div>
<div class="right"> Hello World </div
<style>
.left { float: left; }
.next {float: left; }
- 선택된 요소를 왼쪽 끝 혹은 오른쪽 끝에 정렬시키고자 할 때 사용. 이름 그대로 선택자를 띄워 새로운 레이어층을 만드는 것
clear
<body>
<header></header>
<aside class="left">Hello World</aside>
<main></main>
<aside class="right">Hello World</aside>
<footer></footer>
<style>
footer { clear: both; }
- float에 대한 속성을 제어하고자 할 때 사용
브라우저와 공간 사이의 공백 제거하기
<style>
html, body {
margin: 0;
padding: 0;
}
</style>
- <html>과 <body> 태그는 margin과 padding 값을 가지므로 초기화
<style>
* {
margin: 0;
padding: 0;
}
</style>
- *로 모든 html 태그 선택 가능
'Web > HTML&CSS' 카테고리의 다른 글
| [HTML&CSS] 반응형 웹 - 미디어쿼리 Media Query (0) | 2022.04.07 |
|---|---|
| [CSS] CSS3 애니메이션 - Transform, Transition, Animation (0) | 2022.04.07 |
| [CSS] CSS 개념 및 구성 요소 (0) | 2022.04.05 |
| [HTML] HTML 기본 구조 및 태그 (0) | 2022.04.05 |
댓글