[CSS] Chapter 10. border의 속성과 사용

1. 개요 

border는 Box 모델에서 해당 태그가 가지고 있는 테두리로 태그가 가진 모양 요소 중 하나이다.

border에 부여되는 선이나 모양에 따라 화면 구성이 바뀌며, 일반적으로 화면 구성 요소가 올바르게 적용되었는지 확인하기 위해 직선을 부여하여 배치를 확인한다. 

 

2. Mark-up 확인 후 border에 입력한 속성의 초기화 

border를 사용하여 마크업 상태를 파악하는 경우, 반드시 border에 입력한 px 값을 화면 구성에서 고려해야 한다.

일반적으로 border가 0px로 사용되어야 하는 화면이라면 border 속성 1px은 화면 구성 자체에 중대한 문제점을 야기할 수 있다.

이는 html의 요소가 box 구성으로 적용되고, 각 요소가 border을 가지기 때문이다. 쉽게 말해 콘텐츠가 10개면 각 항목마다 1px의 border 값은 20px의 화면 오차를 야기한다는 것이다. (border에 라인을 그리면 위, 아래, 오른쪽, 왼쪽에 그려지므로)

 

3. border의 다양한 속성

◍ border-위치: 특정 위치에 속성 부여 

◍ border-위치-style: 특정 위치만 스타일 지정

◍ border-위치-color: 특정 위치만 색상 적용

◍ border-width: 값1; 전체 변경

◍ border-width: 값1 값2; 상하 좌우 

◍ border-width: 값1 값2 값3; 시계방향으로 적용

◍ border-radius: 사각의 꼭지점으로 부터 일정 거리 떨어진 곳에 점을 찍고 원을 그린다. 원을 그려서 해당 꼭지점을 둥근 모양으로 조정한다. 때문에 border-radius: 50%;는 정원 모양을 가진다. Mobile 환경의 UI 구성에서 원 모양을 많이 사용하여 생각보다 자주 사용한다. top-좌우, bottom-좌우 방향으로 모양을 자세히 설정할 수 있다. 

예) border-top-left-radius: 50%;

 

◍ border-hidden: border 값을 0으로 설정 

 

border에 적용하는 다양한 속성은 width에서 값이 적용되는 방식으로 동일하게 적용된다.

실제로 다양한 속성을 가지고 있지만, 실제 개발 환경에서는 solid를 통해 마크업 확인에 사용함을 기억하자.

 

4. border style의 다양한 속성

◍ solid: 직선

◍ hidden: 보이지 않는 테두리, 보더 자체의 면적이 없어진다.

◍ dotted: 점선

◍ dashed: 절취선

◍ double: 두줄겹선

◍ groove: 입체감있는 테두리

◍ inset: 음각

◍ outset: 양각

◍ ridge: groove의 반대로 입체감 있게

 

border에 그리는 선은 마크업 확인 용도이며, 모양이 이쁘지 않아 사용하지는 않는다.

만약 선을 그려야한다면 해당 tag에 이미지를 삽입하는 것이 더욱 디자인 요소를 부각하여 구성할 수 있다.