* margin / padding / box-sizing 구조
1. margin
: 요소 밖의 영역
* margin 명령어 ( margin-top, margin-right, margin-bottom, margin-left )
-> 시계 방향이 기본
* 속기법
margin : 위, 오른쪽, 아래, 왼쪽 ; -> 기본형
margin : 위, 오른쪽, 아래 ; 왼쪽 -> 오른쪽 값 적용
margin : 위, 오른쪽 ; 아래 -> 위쪽 값 적용 왼쪽 -> 오른쪽 값 적용
margin : 위 ; 상하좌우 모두 동일값
* margin : auto; 값 활용
# 박스 가운데 정렬 3가지 방법
(1)
<style>
margin-left: auto;
margin-right: auto;
</style>-> 좌/우 일정하게 맞춤 처리
(2)
<style>
margin : auto;
</style>
(3)
<style>
margin : 0 auto;
</style>
2. padding / box-sizing
: 요소의 안쪽 영역
-> box-sizing에 영향을 줌
* box-sizing
★ box-sizing : border-box ★
-> 너비/높이 안에 패딩, 보더를 포함 (너비 사이즈 밖으로 나가지 않음)
- box-sizing: border-box는 width / height에 padding / border 값이 적용될 때만 사용
예시 1)
- width / height에 padding 혹은 border 값이 적용
<style>
.box1 {
background-color: orange;
width: 500px;
padding: 50px;
margin: 50px;
box-sizing: border-box;
}
</style>
예시2)
- width / height에 padding 혹은 border 값이 적용 X
<style>
.box2 {
background-color: tomato;
margin:30px;
padding: 30px;
box-sizing: border-box;
</style>
* padding 명령어 ( padding-top, padding-right, padding-bottom, padding-left )
-> 시계 방향이 기본
* 속기법
padding : 위, 오른쪽, 아래, 왼쪽 ; -> 기본형
padding : 위, 오른쪽, 아래 ; 왼쪽 -> 오른쪽 값 적용
padding : 위, 오른쪽 ; 아래 -> 위쪽 값 적용 왼쪽 -> 오른쪽 값 적용
padding : 위 ; 상하좌우 모두 동일값
# 요소에 따른 margin/padding 특징
<style>
1. 블럭요소
div , h1~h6, p, ul, li, dl, dd, ol, dt
dt 안에는 인라인만 넣을 수 있음
1) 너비는 부모의 크기만큼 (100%) : 한줄
2) 너비/높이 지정 가능
3) margin/ padding 설정 가능
2. 인라인 요소
a , span , b , i , em, strong
1) 컨텐츠 크기만큼인식 ( 내용만큼 )
2) 옆으로 나열
3) 너비/높이 지정 X
4) margin/padding 좌우만 (위,아래 불가능)
-> 위, 아래 늘어나긴 하지만 다른 컨텐츠 밀어내지는 못함
ex)
<style>
h2 {
background-color: pink;
width: 500px;
height: 150px;
margin: 30px;
padding: 20px;
}
p {
background-color: skyblue;
}
strong {
background-color: orange;
width: 200px;
height: 100px;
margin: 30px;
padding: 30px;
/* 위, 아래 늘어나긴 하지만 다른 컨텐츠 밀어내지는 못함 */
}
em {
background-color: lime;
}
</style>
<body>
<h2>제목2 입니다.</h2>
<p>문단입니다.</p>
<strong>강강조</strong>
<em>약강조</em>
<p>문단입니다.</p>
</body>
3. 인라인 블럭
img, button, input 등
1) 자신의 크기만큼 인식 (inline 처럼)
2) 옆으로 나열
3) 블럭처럼 너비,높이,패딩,마진.. 처리가능
4) 옆사이 공백 (읽어만 보기)
해결 : 부모에 font-size:0
자신의 요소에 font-size지정
'CSS' 카테고리의 다른 글
| [css] 단위 (0) | 2024.02.16 |
|---|---|
| [css] 다중클래스 (0) | 2024.02.16 |
| [css] text, border, font (1) | 2024.02.16 |
| [css] 선택자 우선순위 (0) | 2024.02.15 |
| [css] css 문법, 선택자 (1) | 2024.02.14 |
