<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div style="width:400px">
<div style="background-color:yellow;">
아메리칸 항공 11편 테러 사건(영어: American Airlines Flight 11 Terror Incident, AA11)은 2001년 9월 11일 알카에다 소속 테러리스트 5명이 미국 국내선 항공편 '아메리칸 항공 11편'을 납치하여 9·11 테러를 일으킨 사건이다.[2] 이 테러의 주도범인 모하메드 아타는 항공기를 뉴욕 세계 무역 센터 북쪽 타워에 충돌시켰다. 그로 인해 탑승객 92명과 충돌 지점에 있던 사람 다수가 사망했다.[3] 이 항공기는 아메리칸 항공 소속 보잉 767-223ER 기종으로, 원래 미국 매사추세츠주 보스턴 로건 국제공항에서 이륙하여 캘리포니아주 로스앤젤레스 국제공항에 착륙할 예정이었던 아침 미국 대륙 횡단 항공편이었다.[4]
</div>
</div>
</body>
</html>위 상태에서 노란 상자의 크기와 바깥 위치를 조정할 수 없을까?
이를 위해 존재하는 것이 padding(안쪽 여백) margin(바깥여백) 조정이다.
안쪽 여백, 바깥 여백 말로 들으면 이해가 잘 가지 않는 것이 현실이다. 하나씩 해보자.
이는 안쪽 여백을 24px를 늘리는 것이다.
<div style="background-color:yellow;padding:24px">적용해 보면 아래와 같이 나온다.
처음과 다르게 노란색 상자 안쪽으로 24px의 여백이 생긴 것을 확인할 수 있다.
이는 바깥 여백을 24px를 늘리는 것이다.
<div style="background-color:yellow;margin:24px">노란색 상자는 작아지고 바깥쪽 여백이 증가함을 알 수 있다.
추가로 사용법은
padding: 4 px : 상하좌우 4px만큼 안쪽 여백을 만든다.
padding: 4 px 10px : 상하는 4px만큼 좌우는 10px만큼 안쪽 여백을 만든다.
padding: 4 px 10px 20px : 상은 4px, 좌우는 10px, 하는 20px만큼 안쪽 여백을 만든다.
padding: 4 px 10px 20px 15px : 상은 4px 좌는 10px, 하는 20px, 우는 15px만큼 여백을 만든다.
"그렇다면 padding을 오른쪽만 15px 넣고 싶으면 padding: 0px 0px 0px 15px을 해야 하나요?"라고 질문이 있을 수 있는 데 이를 해결하기 위해 다른 태그가 존재한다.
padding-right
padding-top
padding-bottom
padding-left
는 각각의 위치에서 픽셀을 입력해줄 수 있다. margin의 경우는 padding을 margin으로 바꾸면 똑같이 작동한다.
margin의 경우, 추가 사용법이 있는데 가로의 위치를 가운데로 정렬하고 싶으면
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div style="width:400px;margin: 10px auto">
<div style="background-color:yellow">
아메리칸 항공 11편 테러 사건(영어: American Airlines Flight 11 Terror Incident, AA11)은 2001년 9월 11일 알카에다 소속 테러리스트 5명이 미국 국내선 항공편 '아메리칸 항공 11편'을 납치하여 9·11 테러를 일으킨 사건이다.[2] 이 테러의 주도범인 모하메드 아타는 항공기를 뉴욕 세계 무역 센터 북쪽 타워에 충돌시켰다. 그로 인해 탑승객 92명과 충돌 지점에 있던 사람 다수가 사망했다.[3] 이 항공기는 아메리칸 항공 소속 보잉 767-223ER 기종으로, 원래 미국 매사추세츠주 보스턴 로건 국제공항에서 이륙하여 캘리포니아주 로스앤젤레스 국제공항에 착륙할 예정이었던 아침 미국 대륙 횡단 항공편이었다.[4]
</div>
</div>
</body>
</html>margin: 세로px auto를 하자. 자동으로 가운데로 정렬해 준다. 단, width가 정해져 있어야 한다.
추가로 body에는 기본 margin이 적용되어 있기 때문에 보기 싫은 사람들은 body에 margin: 0를 추가하길 바란다.
'HTML, CSS > CSS' 카테고리의 다른 글
| [CSS] CSS 파일 (0) | 2023.08.26 |
|---|---|
| [CSS] CSS 규칙, id, class (0) | 2023.08.26 |
| [CSS] 너비, 높이 (1) | 2023.08.26 |
| [CSS] 정렬 (0) | 2023.08.26 |
| [CSS] 글자 크기, 굵기, 줄 높이 (0) | 2023.08.26 |
