css 테두리 효과를 주는 border 속성

위 사진은 네이버를 빨간색 테두리로 구역별로 나눈 것입니다. 상단은 header, 목록은 nav, 뉴스 컨텐츠는 section1, 과학, 법률 등의 목록은 section2, 로그인부분은 aside로 나눴습니다.

네이버를 더 자세히 들여다보면 회색으로 테두리가 있는 것을 알 수 있습니다. 이는 모두 css에서 테두리 효과를 주는 border 속성을 이용한 것입니다. 그럼 지금부터 border 속성에 대해 알아보겠습니다.

border 속성 기본 구문

border 속성은 전체 테두리를 설정할 수 있고 한 곳(아래, 위, 왼쪽, 오른쪽)만 테두리를 줄 수 있습니다.

먼저 전체 테두리를 설정하는 구문입니다.

border: border-width border-style border-color;

border-width : 테두리의 두께(폭)을 설정하는 속성값 , 숫자로 설정할 수 있습니다.

border-style : 테두리의 선 스타일(사선, 점선 등)을 설정하는 속성값입니다.

※ border-style의 선 스타일
- none : 테두리가 존재하지 않음
- solid : 사선
- double : 이중 사선
- dotted : 짧은 점선
- dashed : 긴 점선

border-color : 테두리의 색상을 설정하는 속성값으로 이름, 코드로 색상을 나타낼수 있습니다.

사용자가 원하는 곳에 테두리를 설정하고 싶으면 다음과 같이 설정할 수 있습니다. 예를 들어 아래쪽에 사선으로 회색의 테두리를 설정하고 싶다면,

border-bottom: 1px solid gray;

으로 코드를 작성할 수 있습니다.