[css] border

border는 테두리를 만들어주는 속성이다. border를 사용하는 방식에는 여러가지가 있다.

 

1. 한줄에 적기

/* css */
.p0 {
  border: 2px solid #4d9fff;
}

.p2 {
  border: 2px dotted #4d9fff;
}

.p3 {
  border: 2px dashed #4d9fff;
}

<!-- html -->
<p class="p0">Hello World!</p>
<p class="p2">Hello World!</p>
<p class="p3">Hello World!</p>

Hello World!

Hello World!

Hello World!

 

이 방식을 사용하면 위, 아래, 왼쪽, 오른쪽 모두 같은 테두리가 생긴다.

 

 

2. 나눠서 적기

border-style, border-color, border-width 등의 속성을 써서 테두리의 스타일을 하나씩 지정해주는 방법이다.

/* css */
.p4 {
  border-style: dotted;
  border-color: red;
  border-width: 5px;
}

<!-- html -->
<p class="p4">Hello World!</p>

Hello World!

 

 

3. 4면이 모두 다른 테두리

4면의 테두리를 모두 다르게 설정해주고 싶다면 이 방법을 사용하면 된다.

/* css */
.p1 {
  border-top: 3px dotted #4d9fff;
  border-bottom: 2px dashed red;
  border-left: 5px solid green;
}

<!-- html -->
<p class="p1">Hello World!</p>

Hello World!

 

 

5. 테두리 없애기

어떤 요소들에는 <input>태그가 기본적으로 설정되어있다. 이 요소들의 테두리를 없애고 싶다면 border에 직접 속성을 지정해주면 되는데, 아래와 같이 두 가지 방법이 있다.

border: none;
border: 0;

 

border-radius

둥근모서리를 만드는 속성이다.

/* css */
.div1 {
  border: 1px solid green;
  border-radius: 5px;
  margin-bottom: 20px;
}

.div2 {
  border: 1px solid green;
  border-radius: 30px;
}

<!-- html -->
<div class="div1">
	This is div1
</div>

<div class="div2">
	This is div2
</div>

This is div1

This is div2

 

px값이 커질수록 모서리는 더욱 둥글어진다.

 

아래와 같은 방법으로 네 개의 모서리를 모두 따로 지정해줄 수도 있다.

/* css */
h2 {
  border: 1px solid green;
  border-top-left-radius: 50px; /* 왼쪽 위 */
  border-top-right-radius: 5px; /* 오른쪽 위 */
  border-bottom-right-radius: 0px; /* 오른쪽 아래 */
  border-bottom-left-radius: 20px; /* 왼쪽 아래 */
}

<!-- html -->
<h2>Hello World!</h2>

Hello World!

 

background-color

이 속성을 이용하면 배경색을 지정해 줄 수 있다.

/* css */
h3 {
  background-color: #4d9fff;
}

<!-- html -->
<h3>Hello World!</h3>

Hello World!

 

• 페이지 전체의 배경색을 지정해주고 싶으면, body태그에 background-color를 주면된다.
• 배경을 투명하게 하고 싶다면 transparent 를 사용하면 되고, 이것은 default값이다.

/* css */
body {
  background-color: #4d9fff;
}

h4 {
  background-color: white;
}

h5 {
  background-color: transparent
}

<!-- html -->
<h4>Hello World!</h4>
<h5>Background Colors!</h5>