HTML+CSS/CSS
웹개발(9)-박스 모델(Box Model)
두설날
2024. 4. 9. 16:04
*이 글을 읽기전에 작성자 개인의견이 있으니, 다른 블로그와 교차로 읽는것을 권장합니다.*
박스 모델(Box Model)
- 모든 HTML 요소는 박스 모양으로 구성됩니다.
- 박스 모델은 HTML 요소를 내용(content), 안쪽여백(padding), 테두리(border), 바깥여백(margin)으로 구분합니다.
내용(content)
- 텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분입니다. ( 파란색 부분)
안쪽여백(padding)
- 내용과 테두리 사이의 간격 또는 여백입니다.
- padding-top, padding-right, padding-bottom, padding-left
-padding: 위 오른쪽 아래 왼쪽 순으로 설정합니다.
HTML
<div id='padding'>안녕하세요</div>
CSS
div#padding { padding: 20px 50px 30px 10px; }
위 20px, 오른쪽 50px, 아래 30px, 왼쪽 10px (시계방향)
div#padding { padding: 20px 50px 30px; }
위 20px, 오른쪽 왼쪽 50px, 아래 30px
div#padding { padding: 20px 50px; }
위 아래 20px, 오른쪽 왼쪽 50px
div#padding { padding: 20px; }
위 아래 오른쪽 왼쪽 20px
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>패딩</title>
<style>
div {
width: 200px;
height: auto;
background-color: deeppink;
margin: 20px;
color: white;
}
#padding1 {padding: 10px 30px 20px 40px;}
#padding2 {padding: 30px 20px 40px;}
#padding3 {padding: 30px 20px;}
</style>
</head>
<body>
<h2>패딩</h2>
<div id="padding1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo odit rem facere non porro dicta, cupiditate, dolores explicabo perspiciatis quasi suscipit illo earum magnam maxime. Ipsam harum facere exercitationem mollitia.</div>
<div id="padding2">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laborum, repellendus quos? Libero, perferendis autem sit dolor blanditiis placeat? Minima nemo natus iusto sit vitae sequi ipsum error tempore pariatur corporis.</div>
<div id="padding3">Lorem ipsum dolor sit, amet consectetur adipisicing elit. At quisquam nemo sunt et eligendi praesentium magni vel modi. Commodi recusandae soluta deserunt illo eligendi magni deleniti reprehenderit inventore laborum earum?</div>
</body>
</html>
테두리(border)
- 내용(content)과 안쪽여백(padding) 주변을 감싸는 프레임입니다.
- border-style(테두리 모양), border-color(테두리 색상), border-width(테두리 두께)
- border로 한꺼번에 설정합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>테두리</title>
<style>
div {
width: 200px;
height: 100px;
margin: 15px;
border-width: 5px;
color: black;
border-style: solid;
}
#border1 {border-style: solid;}
#border2 {border-style: dotted;}
#border3 {border-style: dashed;}
#border4 {border-style: double;}
#border5 {
border-color: gold;
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dashed;
border-left-style: double;
}
#border6 {border: 3px dotted red;}
</style>
</head>
<body>
<h2>테두리</h2>
<div id="border1"></div>
<div id="border2"></div>
<div id="border3"></div>
<div id="border4"></div>
<div id="border5"></div>
<div id="border6"></div>
</body>
</html>
바깥여백(margin)
- 테두리(border)와 이웃하는 요소들 사이의 간격입니다.
- 마진은 눈에 보이지 않습니다.
- 세로 겹침 현상이 일어납니다. (세로로 나열된 두 박스의 간격은 두 마진의 합이 아니라 둘 중 큰 값을 선택하는 현상)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>마진</title>
<style>
* {padding: 0; margin: 0;}
div {
width: 200px;
height: 100px;
background-color: deeppink;
}
#margin1 {margin: 30px 50px 30px 50px;}
#margin2 {margin: 30px 50px;}
#margin3 {margin: 50px;}
#margin4 {margin: 30px 5px 10px;}
#margin5 {margin: 30px auto;}
</style>
</head>
<body>
<h2>마진</h2>
<div id="margin1"></div>
<div id="margin2"></div>
<div id="margin3"></div>
<div id="margin4"></div>
<div id="margin5"></div>
</body>
</html>
박스사이징(box-sizing)
- 모바일 웹문제
- width, height는 padding, border 영역을 포함하지 않습니다.
- 만약 width가 100%로 설정되는 경우 padding, border 속성을 추가하면 안됩니다.
- box-sizing 속성값을 border-box로 설정하게 되면 width와 height값에 padding과 border를 포함합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>박스사이징</title>
<style>
* {padding:0; margin:0;}
div {
width: 300px;
height: 150px;
padding: 30px;
border: 3px solid red;
}
#boxsizing1 {box-sizing: content-box;}
#boxsizing2 {box-sizing: border-box;}
</style>
</head>
<body>
<h2>박스사이징</h2>
<div id="boxsizing1">box-sizing = 'content-box'</div>
<div id="boxsizing2">box-sizing = 'border-box'</div>
</body>
</html>
CSS 디스플레이
- 웹 페이지의 레이아웃을 결정하는 속성입니다.
- block, inline, inline-block, none, flex ...
visibility: hidden <-> visibilityL visible;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>디스플레이</title>
<style>
div {
background-color: deepskyblue;
border: 3px solid red;
margin-bottom: 30px;
}
p#none {display: none;}
p#hidden {visibility: hidden}
</style>
</head>
<body>
<h2>디스플레이</h2>
<div>
<p>display 속성값을 none으로 설정</p>
<p id="none">display 속성값을 none으로 설정</p>
</div>
<div>
<p>visibility 속성값을 hidden으로 설정</p>
<p id="hidden">visibility 속성값을 hidden으로 설정</p>
</div>
</body>
</html>
CSS 폼
- w3schools mdn 참고
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>폼</title>
<style>
@font-face {
font-family: 'TTLaundryGothicB';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2403-2@1.0/TTLaundryGothicB.woff2') format('woff2');
font-weight: 700;
font-style: normal;
}
.fontface { font-family: 'TTLaundryGothicB'}
html {
background: url(./bridge.jpg) no-repeat fixed center bottom/cover;
}
div {
text-align: center;
width: 100px;
height: 50px;
border-width: 5px;
color: black;
border-style: solid black;
}
#padding1 {
background-color: white;
padding: 10px 30px 20px 40px;
padding-block: white;
border-style: solid;
border-color: black;
margin: 3px 50px 30px 50px;
}
.input {
box-sizing: border-box;
width: 100%;
padding: 10px 20px;
margin: 5px 0;
}
input [type='text']{
border-radius: 15px;
}
input[type='text']:focus {
background-color: greenyellow;
border: 3px dotted black;
}
input[type='password']{
border: none;
background-color: white;
border-bottom: 3px solid black;
}
input[type='password']{
border-bottom: 3px dotted deeppink;
}
select {
box-sizing: border-box;
width: 100%;
padding: 10px;
margin: 5px 0;
background-color: pink;
border: 2px solid deeppink;
}
#content {
box-sizing: border-box;
width: 100%;
resize: none;
height: 200px;
font-size: 20px;
}
button {
width: 150px;
background-color: forestgreen;
color: white;
padding: 12px 22px;
cursor: pointer;
}
p.center {text-align: center;}
</style>
</head>
<body>
<h2>폼</h2>
<div></div>
<form id="padding1" action="#" class="fontface">
<p>아이디: </p>
<p>
<input type="text" id="userid" class="input" maxlength="20" placeholder="아이디를 입력하세요">
</p>
<p>비밀번호: </p>
<p>
<input type="password" id="userpw" class="input" maxlength="20" placeholder="비밀번호를 입력하세요">
</p>
<p>직업: </p>
<p>
<select name="job" id="job">
<option value="프로그래머">프로그래머</option>
<option value="의사">의사</option>
<option value="법조인">법조인</option>
<option value="학생">학생</option>
<option value="유튜버">유튜버</option>
</select>
</p>
<p><textarea name="content" id="content"></textarea></p>
<p class="center"><button class="btn">회원가입</button></p>
</form>
</div>
</body>
</html>