이전에 테두리(border)를 꾸며 보았는데 박스 꾸미는 다른 방법을 알아보자.
<!DOCTYPE html>
<html>
<head>
<title>Box Model</title>
<meta charset="utf-8">
<style>
.tag1 {
border: 3px solid blue;
}
</style>
</head>
<body>
<h1> CSS Box Model </h1>
<p class="tag1">All HTML elements can be
considered as boxes. In CSS, the term "box model" is used
when talking about design and layout.
The CSS box model is essentially a box that wraps around every HTML element.
It consists of: margins, borders, padding, and the actual content.
The image below illustrates the box modelAll HTML elements can be
considered as boxes. In CSS, the term "box model" is used
when talking about design and layout.
The CSS box model is essentially a box that wraps around every HTML element.
It consists of: margins, borders, padding</p>
</body>
</html>border-radius
박스 끝부분이 둥그렇게 변한 것을 볼 수 있다.
border-radius의 px를 더 높게 할 수록 더 둥그렇게 변한다.
조금 더 딱딱하지 않고 부드러운 느낌을 주기 위해 border-radius 를 사용한다.
.tag1 {
border: 3px solid blue;
border-radius: 30px
}background-color
배경색을 설정하는 코드
.tag1 {
border: 3px solid blue;
border-radius: 30px;
background-color: yellow;
}Box-shadow
그림자를 설정하는 코드
.tag1 {
box-shadow: 5px 5px;
}
만약 그림자의 색을 바꾸고 싶다면 뒤에 색을 넣어주면된다.
.tag1 {
box-shadow: 5px 5px blue;
}그리고 그림자를 약간 흐리게 하고 싶으면 색 뒷쪽에 수치를 넣으면 된다.
.tag1 {
box-shadow: 5px 5px 20px blue;
}
'IT > @HTML' 카테고리의 다른 글
| HTML/CSS 공부하기 : border (4) | 2020.03.20 |
|---|---|
| HTML/CSS 공부하기 : overflow (1) | 2020.03.15 |
| HTML/CSS 공부하기 : Margin (2) | 2020.03.12 |
| HTML/CSS 공부하기 : Padding (0) | 2020.03.10 |
| HTML/CSS 공부하기 : Box Model 의 이해 (2) | 2020.03.09 |
댓글