CSS (box-model, padding, margin, border, display, form)

[ 목차 ]

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>

<head>

<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>

<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>

<head>

<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>

</body>

</html>

✔ CSS 테두리 결과

✔ CSS 마진

마진(margin)
- 테두리(border)와 이웃하는 요소들 사이의 간격
- 마진은 눈에 보이지 않음
- 세로 겹침 현상이 나타남
:두꺼운_확인_표시: 세로 겹침 현상
세로로 나열된 두 박스의 간격은 두 마진의 합이 아니라 둘 중 큰 값을 선택하는 현상

✔ CSS 마진 코드

<!DOCTYPE html>

<head>

<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>

<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>

<head>

<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>

<head>

<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>

<head>

<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>

</select></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

저장소

CSS (box-model, padding, margin, border, display, form)

'Frontend > CSS' 카테고리의 다른 글

티스토리툴바

CSS (box-model, padding, margin, border, display, form)

'Frontend > CSS' 카테고리의 다른 글

관련글

티스토리툴바