CSS 박스 모델을 공부하면서 border 테두리 부분을 잠깐 썼었다.
margin 이나 padding 도 여러가지 방법으로 스타일을 줄 수 있었는데 border도 마찬가지로
다양한 방법으로 스타일을 줄 수 있다.
아래 코드로 실습해보자! 아래 코드에서는 스타일을 전혀 주지 않은 코드.
<!DOCTYPE html>
<html>
<head>
<title>Box Model</title>
<meta charset="utf-8">
<style>
h1 {
}
.tag1 {
}
</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, and the actual content.
The image below illustrates the box model:mage 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, and the actual content.
The image below illustrates the box model</p>
</body>
</html>
Border 속성 이해하기
이전에 사용해봤던 boder 스타일은 가장 기본적인 방법으로
border : 테두리 크기; 테두리 종류; 색; 이렇게 보면된다.
만약 테두리를 점섬으로 하고 싶으면 Solid 대신 dotted/dashed를 쓸 수 있다.
아래 방법이 가장 많이 사용한다.
|
.tag1 { |
Border 다른 방법으로 스타일링(1)
아래 방법은 가독성은 좋지만 여러줄을 사용하기 때문에 잘 사용하지 않는 것 같다.
| .tag1 { border-style : solid; border-color : blue; border-width : 5px; } |
Border 다른 방법으로 스타일링(2)
border 의 테두리를 전체만 할 수 있는 게 아니라 위 아래 좌우를 다르게 줄 수 있다.
| .tag1 { border-top : 5px dotted blue; border-right : 3px solid yellow; } |
'IT > @HTML' 카테고리의 다른 글
| HTML/CSS 공부하기 : 테두리 꾸미기 (1) | 2020.03.22 |
|---|---|
| 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 |
댓글