CSS - 기본4 (레이아웃, Margin, Border, Padding)
CSS - 기본4 (레이아웃)
1. Margin, Border, Padding 조절
기본적인 범위는 위 그림과 같다.
-auto는 글씨나 콘텐츠 등
-auto는 내용물 사이즈에 따라 자동
-아래 사이트에서 직접 테스트 해볼수 있다.
https://www.w3schools.com/css/tryit.asp?filename=trycss_boxmodel
1) margin 배치
element간의 간격을 조절한다.
예제
test.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<link rel="stylesheet" href="test.css"/>
<div class="left">left</div>
<div class="bottom">bottom</div>
</body>
</html>
test.css
.bottom{
margin-bottom: 100px;
margin-top: 100px;
}
Output
2) border 배치
해당 태그에 테두리를 그린다.
test.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<link rel="stylesheet" href="test.css"/>
<div class="wrap">
<div class="static">static</div>
<div class="relative">relative</div>
<div class="absolute">absolute</div>
<div class="fixed">fixed</div>
</div>
</body>
</html>
test.css
.wrap > div{
border : 1px solid gray;
}
Output
3) Padding 배치
테두리와 내부 값(위 그림 auto) 사이 공백 조절
test.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<link rel="stylesheet" href="test.css"/>
<div class="wrap">
<div class="static">TEST</div>
</div>
</body>
</html>
test.css
.wrap > div{
padding: 10px;
}
Output
'BoostCourse > HTML／CSS' 카테고리의 다른 글
| CSS - 기본6 (간단한 메인화면 만들기) (0) | 2019.11.14 |
|---|---|
| css - 기본5 (float, box-sizing) (0) | 2019.11.13 |
| CSS - 기본3 (레이아웃 종류, 블록 엘리먼트) (0) | 2019.11.13 |
| CSS - 기본2 (font) (0) | 2019.11.13 |
| CSS - 기본1 (css 구조, 우선순위, 상속) (0) | 2019.11.13 |