CSS Borders property

이미지 출처

https://velog.io/@mazorika/CSS-%EB%B0%95%EC%8A%A4-%EB%AA%A8%EB%8D%B8%EA%B3%BC-%EB%B0%95%EC%8A%A4-%ED%85%8C%EB%91%90%EB%A6%AC

 

박스 모델 방향은 딱 이것 하나만 기억하세요.

12시 - top
03시 - right
06시 - bottom
09시 - left

---

---

이미지 출처

https://honarsystems.com/css-border-radius/

---

 

border-radius 방향은 딱 이것 하나만 기억하세요.

 

1030       0130

 

0730       0430

 

---

요소의 테두리를 결정하는 CSS 보더(Borders) 속성에 대해 알아보겠습니다.

보더는 박스 모델에서 패딩(Padding)과 마진(Margin) 사이에 위치하며, 요소의 경계를 시각적으로 구분 짓는 역할을 합니다.

---

1. 보더의 3대 핵심 속성

테두리를 정의할 때는 보통 두께, 스타일, 색상 세 가지를 설정합니다.

• border-width: 테두리의 두께를 지정합니다. (px, em 등의 단위나 thin, medium, thick 키워드 사용)
• border-style: 테두리의 모양을 결정합니다. (가장 중요하며, 이 속성이 없으면 테두리가 보이지 않습니다.)
  • solid (실선), dashed (파선), dotted (점선), double (이중선) 등
• border-color: 테두리의 색상을 지정합니다.

---

2. 보더 축약 속성 (Shorthand)

각각의 속성을 따로 적는 대신, 한 줄로 간단하게 표현하는 방식을 가장 많이 사용합니다.

• 구문: border: [두께] [스타일] [색상];
• 예시: border: 2px solid red;

또한, 특정 방향에만 테두리를 줄 수도 있습니다.

• border-top, border-right, border-bottom, border-left

---

3. 테두리 둥글게 하기 (border-radius)

딱딱한 직각형 박스를 부드러운 곡선형으로 바꿀 수 있는 속성입니다.

• 원 만들기: 요소의 너비와 높이가 같을 때 border-radius: 50%;를 주면 완벽한 원이 됩니다.
• 개별 설정: border-top-left-radius처럼 각 모서리마다 다른 값을 줄 수 있습니다.

---

🖥️ 실전 예제 코드: "카드 스타일 만들기"

HTML

 

<style>
  .card {
    width: 250px;
    padding: 20px;
    background-color: #fff;
    
    /* 테두리 설정: 1px 두께의 회색 실선 */
    border: 1px solid #ddd;
    
    /* 아래쪽에만 강조선 추가 */
    border-bottom: 5px solid #3498db;
    
    /* 모서리를 부드럽게 */
    border-radius: 10px;
    
    text-align: center;
  }
</style>

<div class="card">
  <h3>CSS Border</h3>
  <p>테두리 속성을 활용하면 깔끔한 카드 UI를 만들 수 있습니다.</p>
</div>

---

📋 보더 관련 주요 속성 요약표

속성	설명	주요 값 예시
border-style	테두리 모양 (필수)	solid, dashed, none
border-width	테두리 두께	1px, 0.5rem
border-color	테두리 색상	#000, transparent
border-radius	모서리 곡률	8px, 50%
outline	테두리 바깥의 외곽선	보더와 달리 공간을 차지하지 않음

---

학습 정리

• 테두리가 화면에 나타나지 않는다면 **border-style**을 빼먹지는 않았는지 가장 먼저 확인하세요.
• **border: none;**은 버튼이나 입력창의 기본 테두리를 제거할 때 자주 쓰입니다.
• 보더 역시 패딩처럼 요소의 전체 크기에 영향을 주므로, 레이아웃이 틀어지는 것을 막으려면 **box-sizing: border-box;**를 함께 사용하는 것이 좋습니다.

---

요소의 경계선을 디자인하는 보더 속성을 정복하셨습니다!

---