728x90
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#div1 { background-color: orange;}
#div2 {
height: 100px;
background-color: skyblue;
}
span {
background-color: gray;
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<h1>요소의 크기 변경/확인하기</h1>
<!-- 블록요소는 부모의 크기만큼 가로가 늘어남, 그리고 콘텐츠 크기만큼
세로 길이가 늘어나게 된다. 또한 블록 요소는 가로길이 세로길이를 적용할 수 있다. -->
<div id="div1">Hello World</div>
<div id="div2">Hello World</div>
<!-- 인라인요소는 컨텐츠 크기만큼 가로 세로 길이를 갖는다. 가로 세로 길이를 적용할 수 없다. -->
<span>안녕하세요</span>
</body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
margin: 0;
}
div {
border: solid 1px;
}
span {
background-color: skyblue;
}
.box1 {
margin: 0;
}
.box2 {
margin: 10px;
}
.box3 {
margin: 10px 20px;
}
.box4 {
margin: 10px 20px 30px 40px;
}
.box5 {
margin-left: 100px;
}
</style>
</head>
<body>
<h1>외부여백 주기</h1>
<div class="box1">
<span>첫번째 박스</span>
</div>
<div class="box2">
<span>두번째 박스</span>
</div>
<div class="box3">
<span>세번째 박스</span>
</div>
<div class="box4">
<span>네번째 박스</span>
</div>
<div class="box5">
<span>다섯번째 박스</span>
</div>
</body>
</html>
- margin은 나와 다른 엘리먼트간의 거리를 의미하는데, 다른 엘리먼트란 body 부터 시작해서 나를 제외한 모든 element 들을 의미한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
margin: 0;
}
div {
border: solid 1px;
margin: 10px;
}
span {
background-color: skyblue;
}
.box1 {
padding: 0;
}
.box2 {
padding: 10px;
}
.box3 {
padding: 10px 20px;
}
.box4 {
padding: 10px 20px 30px 40px;
}
.box5 {
padding-left: 100px;
}
</style>
</head>
<body>
<h1>내부여백 주기</h1>
<div class="box1">
<span>첫번째 박스</span>
</div>
<div class="box2">
<span>두번째 박스</span>
</div>
<div class="box3">
<span>세번째 박스</span>
</div>
<div class="box4">
<span>네번째 박스</span>
</div>
<div class="box5">
<span>다섯번째 박스</span>
</div>
</body></html>
'[그린컴퓨터] 클라이언트 > CSS' 카테고리의 다른 글
| CSS 핵심 문법 { display, opacity } (0) | 2023.06.27 |
|---|---|
| CSS 핵심 문법 { box-sizing, overflow } (0) | 2023.06.27 |
| CSS 핵심 문법 { border 테두리 } (0) | 2023.06.27 |
| 스타일 상속, 우선순위, 우선순위점수 (0) | 2023.06.27 |
| CSS {기본문법, 주석, 선언방식, 선택자 } (0) | 2023.06.27 |