* 참고 자료 : 코드잇 HTML/CSS 강의
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>border</title>
<style>
.p1 {
}
</style>
</head>
<body>
<p class="p1">
Ice cream, chillin', chillin'
Ice cream, chillin'
Ice cream, chillin', chillin'
Ice cream, chillin'
I know that my heart can be so cold
But I'm sweet for you, come put me in a cone
You're the only touch, yeah, that get me meltin'
He's my favorite flavor, always gonna pick him
You're the cherry piece, just stay on top of me, so
I can't see nobody else for me, no
Get it, flip it, scoop it
Do it like that, ah yeah ah yeah
Like it, love it, lick it
Do it like la la la, oh yeah
Look so good, yeah, look so sweet (hey)
Lookin' good enough to eat
Coldest with the kiss, so he call me ice cream
Catch me in the fridge, right where the ice be
Look so good, yeah, look so sweet (hey)
Baby, you deserve a treat
Diamonds on my wrist, so he call me ice cream
You can double dip 'cause I know you like me
</p>
</body>
</html>
|
cs |
이 코드를 바탕으로 border를 공부해보자.
border를 쓰는 방법에는 여러 가지가 있다.
1. 한 줄로 쓰는 방법
가장 일반적인 방법으로 border의 속성을 한 줄에 다쓰는 것이다.
이 방식을 사용하면 위, 아래, 왼쪽, 오른쪽 모두 같은 테두리가 생긴다.
위 문단에 적용해 보겠다.
스타일에서 실선은 solid, 점선은 dotted, 파선은 dashed이다.
.p1 {
border: 굵기, 스타일, 색;
}
2px 굵기에 실선, 색은 빨간색으로 적용해 보겠다.
|
1
2
3
|
.p1 {
border: 2px solid red;
}
|
cs |
이런식으로 코드를 적으면,
이렇게 위, 아래, 왼쪽, 오른쪽 모두 2px굵기의 빨간색 실선이 생긴 것을 확인할 수 있다.
이제, 실선말고 다른 스타일도 알아보자.
|
1
2
3
|
.p1 {
border: 2px dotted red;
}
|
cs |
코드를 dotted로 수정하면
이렇게 점선이 나타나고 dashed로 수정하면
|
1
2
3
|
.p1 {
border: 2px dashed red;
}
|
cs |
이렇게 파선이 나타난다.
2. 하나씩 쓰기
코드를 한 줄로 쓰지 않고 border-style, border-color, border-width 속성을 써서 테두리의 스타일을 하나씩 지정해 주는 것이다.
위에 한줄로 쓴 코드를
|
1
2
3
|
.p1 {
border-style: solid;
border-color: red; border-width: 2px; }
|
cs |
이렇게 각각 써주어도 결과는 같다.
3. 네면의 테두리를 다 다르게 설정하기
위의 방법들은 모든 테두리를 다 같은 스타일로 설정할 때 사용하는 방법이라면 네 면의 테두리를 다 다르게 설정하는 방법도 있다.
|
1
2
3
4
5
6
|
.p1 {
border-top: 3px dotted green;
border-bottom: 2px solid red;
border-left: 5px dashed blue;
border-right: 3px dotted pink;
}
|
cs |
코드를 이런식으로 top, bottom, left, right 각각 설정해주면,
이와 같이 4면의 테두리가 다 다르게 나오는 것을 확인할 수 있다.
'웹 > HTML&CSS' 카테고리의 다른 글
| [HTML/CSS] display 디스플레이/ 2021.08.28 (1) | 2021.08.28 |
|---|---|
| [HTML/CSS] box-sizing / 2021.08.28 (0) | 2021.08.28 |
| [HTML/CSS] Width, Height, Overflow / 2021.08.26 (0) | 2021.08.26 |
| [HTML/CSS] Padding, Margin 패딩, 마진/ 2021.08.25 (1) | 2021.08.25 |
| [HTML/CSS] 텍스트 스타일링 / 2021.08.14 (0) | 2021.08.14 |
