[CSS] Borders

안녕하세요 동기 여러분! 오늘은 경계(Border)에 대해 알아보도록 합시다.

 

Borders

경계의 생김새는 아래와 같이 생겼습니다.

 

CSS에서의 코드는 아래와 같이 생겼습니다.

p {
  border: 3px solid red;
}

위 코드를 보시면 3가지 종류의 값들을 넣는데 width와 style 그리고 color입니다.

 

---

 

Width

border에서의 width는 경계선의 굵기를 의미합니다. 아래의 예시는 15px의 굵기입니다.

값	설명
thin	좁은 굵기
medium	중간 굵기 - 기본값
thick	굵은 굵기
숫자 + px	가장 많이 사용하는 픽셀단위 이밖에도 in, pt, cm, em 등등 무수히 많은 단위들이 있다.

※ 만약 width의 값을 정하지 않고 공백으로 둔다면 기본값인 medium으로 설정이 된다.

 

 

---

 

Style

스타일	생김새
dotted
dashed
solid
double
groove
ridge
inset
outset
none
hidden

 

 

---

 

Color

색은 아래의 링크에서 확인하실 수 있습니다!

색 표현 방법 : https://dongi-coding.tistory.com/124

[HTML & CSS] color

 

---

 

오늘의 느낌

아침에 일어나서부터 계속 피곤한데도 불구하고 운동을 하러 갔더니 사람이 많아서 그냥 집에 돌아왔다. 이 포스팅을 마치고 다시 가야지... 과연 내가 운동을 갔을까?? 졸려 죽겠는디ㅠㅠ - 결과는 다음 포스팅에...