728x90
반응형
✔ CSS 박스 모델
박스 모델(Box Model)
- 모든 HTML 요소는 박스모양으로 구성
- 박스모델은 HTML 요소를 내용, 패딩, 테두리, 마진으로 구분함✔ CSS content
내용(content)
- 텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분✔ CSS 패딩
패딩(padding)
내용과 테두리 사이의 간격
- padding-top, padding-right, padding-bottom, padding-left
- padding: 위 오른쪽 아래 왼쪽
<div id="padding">안녕하세요</div>
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
✔ CSS 패딩 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>패딩1</title>
<style>
div{
width: 200px;
height: auto;
background-color: deepskyblue;
margin: 20px;
color: white;
}
#padding1 {padding : 10px 30px 10px 30px}
#padding2 {padding : 20px 40px}
#padding3 {padding : 30px}
</style>
</head>
<body>
<h2>패딩1</h2>
<div id="padding1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident sequi dicta debitis molestias tempora, officia pariatur! Aliquam incidunt error fugit reprehenderit excepturi sed at, mollitia consectetur commodi ea natus magnam.</div>
<div id="padding2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident sequi dicta debitis molestias tempora, officia pariatur! Aliquam incidunt error fugit reprehenderit excepturi sed at, mollitia consectetur commodi ea natus magnam.</div>
<div id="padding3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident sequi dicta debitis molestias tempora, officia pariatur! Aliquam incidunt error fugit reprehenderit excepturi sed at, mollitia consectetur commodi ea natus magnam.</div>
</body>
</html>
✔ CSS 패딩 결과
✔ CSS 테두리
테두리(border)
- 내용(content)과 패딩(padding) 주변을 감싸는 테두리
- border-style(테두리 모양), border-color(테두리 색상), border-width(테두리 두께), border(한꺼번에 설정)
✔ CSS 테두리 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>테두리</title>
<style>
div {
width: 200px;
height: 100px;
margin: 15px;
border-width: 5px;
/*블록태그의 특징은 크기나 내용이 없으면 아무것도 출력되지 않는다.*/
}
#border1 {border-style: solid;}/*직선*/
#border2 { border-style: dotted;}/*점선*/
#border3 {border-style: dashed;}/*길다란 점선*/
#border4 {border-style: double;}/*두줄*/
#border5{
border-color: gold;
border-top-style: solid;
border-right-style: dashed;
border-left-style: dotted;
border-bottom-style: double;
}
</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>
</body>
</html>
✔ CSS 테두리 결과
✔ CSS 마진
마진(margin)
- 테두리(border)와 이웃하는 요소들 사이의 간격
- 마진은 눈에 보이지 않음
- 세로 겹침 현상이 나타남
:두꺼운_확인_표시: 세로 겹침 현상
세로로 나열된 두 박스의 간격은 두 마진의 합이 아니라 둘 중 큰 값을 선택하는 현상✔ CSS 마진 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>마진</title>
<style>
div{
width: 200px;
height: 100px;
background-color: deepskyblue;
}
#margin1 { margin: 30px 50px 30px 50px;}
#margin2 { margin: 30px 50px ;}
#margin3 { margin: 50px;}/*큰쪽의 마진으로 변경된다*/
#margin4 { margin: 30px 50px 10px;}
#margin5 { margin: 30px auto; }
</style>
</head>
<body>
<h2>마진</h2>
<div>
<div id="margin1"></div>
<div id="margin2"></div>
<div id="margin3"></div>
<div id="margin4"></div>
<div id="margin5"></div>
</div>
</body>
</html>
✔ CSS 마진 결과
✔ CSS 박스사이징
박스사이징(box-sizing)
- width, height 값에 padding, border 영역은 포함되지 않음
- 만약 width가 100%로 설정했을 경우 padding이나 border 속성을 추가하면 안됨
- box-sizing 속성값을 border-box로 설정하면 width와 height값에 padding과 border를 포함✔ CSS 박스사이징 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>박스사이징</title>
<style>
div {
width:300px;
height: 150px;
margin: 10px;
padding: 30px;
border: 3px solid red;
}
#boxsizing1 {box-sizing: content-box;}
#boxsizing2 {box-sizing: border-box;} /*마진은 눈에 보이는 것이 아니며 생각하지 말자 padding과 border를 포함하여 크기를 확인하자*/
</style>
</head>
<body>
<h2>박스사이징</h2>
<div id="boxsizing1">box-sizing="content-box"</div>
<div id="boxsizing2">box-sizing="border-box"</div>
</body>
</html>
✔ CSS 박스사이징 결과
✔ CSS 디스플레이
CSS display
- 웹 페이지의 레이아웃을 결정하는 속성
- block, inline, inline-block, none
:두꺼운_확인_표시: visibility: bidden; (visiable)✔ CSS 디스플레이 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<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>
</body>
<div>
<p>visibility 속성값을 hidden으로 설정</p>
<p id="hidden">visibility 속성값을 hidden으로 설정</p>
</div>
</html>
✔ CSS 디스플레이 결과
✔ CSS 폼
CSS 폼
- 폼 요소의 스타일을 설정✔ CSS 폼 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>폼</title>
<style>
.input {
box-sizing: border-box;
width: 100%;
padding: 10px 20px;
background-color: gold;
margin: 5px 0;
}
#userid {
border-radius: 15px;
}
input[type="text"]:focus{/*마우스 깜박깜박 거리는 줄 선택하면??*/
background-color: greenyellow;
border: 3px dotted black;
}
#userpw {
border:none;
background-color: white;
border-bottom: 3px solid black;
}
input[type="password"]:focus{
border-bottom: 3px dotted deeppink;
}
#userpw:focus{
border-bottom: 3px solid deeppink;
}
select {
box-sizing: border-box;
width:100%;
padding :10px;
border :2px solid deeppink;
background-color: pink;
}
textarea#content {
box-sizing: border-box;
width:100%;
height : 200px;
font-size: 20px;
resize: none;/*사이즈 못 늘리게 고정*/
}
button.btn{
width: 150px;
background-color: seagreen;
color: white;
padding: 15px 32px;
cursor : pointer;
border: none;
}
p.center{text-align: center;}
</style>
</head>
<body>
<h2>폼</h2>
<form action="#">
<p>아이디 <input type="text" id= "userid" class="input "maxlength="20" placeholder="아이디를 입력하세요"></p>
<p>비밀번호 <input type="password" id= "userpw" class="input " maxlength="20" placeholder="비밀번호를 입력하세요"></p>
<p><select>
<option value="유튜버">유튜버</option>
<option value="의사">의사</option>
<option value="학생">학생</option>
<option value="IT">IT</option>
<option value="예체능">예체능</option>
</select></p>
<p><textarea id="content"></textarea></p>
<p class="center"><button class ="btn">회원가입</button></p>
</form>
</body>
</html>
✔ CSS 폼 결과
반응형
'Frontend > CSS' 카테고리의 다른 글
| CSS( 미디어쿼리, em, rem) (0) | 2022.10.31 |
|---|---|
| CSS (레이아웃 종류, flex 종류) (0) | 2022.10.31 |
| CSS 위치지정(상대, 절대, 고정, float, clear, z-index) (0) | 2022.10.31 |
| CSS 배경 종류 (0) | 2022.10.31 |
| CSS 텍스트 종류 (0) | 2022.10.27 |