과정 일정

CSS 고급 강의

• CSS 추가 교재
• CSS 개요
• CSS 기본 문법
• CSS 고급 문법
• CSS 파생 선택자
• CSS id 선택자
• CSS 클래스 선택자
• CSS 생성
• CSS 배경
• CSS 텍스트
• CSS 글꼴
• CSS 목록

CSS 박스 모델

• CSS 레이아웃 모델 개요
• CSS 내간격
• CSS 경계선
• CSS 외간격
• CSS 외간격 결합

CSS 정위치

• CSS 위치 개요
• CSS 상대 위치
• CSS 절대 위치
• CSS 부浮

CSS 선택자

• CSS 요소 선택자
• CSS 선택자 그룹
• CSS 클래스 선택자 상세 설명
• CSS ID 선택자 상세 설명
• CSS 속성 선택자 상세 설명
• CSS 자손 선택자
• CSS 자식 요소 선택자
• CSS 동일 형제 선택자

선택 과정

과정 추천：

• CodeW3C.com 보물상자

요소의 경계선(border)는 요소의 내용과 내경계선을 둘러싸는 하나나 여러 개의 선입니다.

CSS border 속성은 요소의 경계선 스타일, 너비, 그리고 색상을 정의할 수 있게 합니다.

CSS 경계선

HTML에서는 텍스트 주위에 경계선을 만들기 위해 테이블을 사용하지만, CSS 경계선 속성을 사용하면 훌륭한 경계선 효과를 만들고, 어떤 요소에도 적용할 수 있습니다.

요소의 외경계 내면은 요소의 경계선(border)입니다. 요소의 경계선은 요소의 내용과 내경계선을 둘러싸는 하나나 여러 개의 선입니다.

각 경계선은 세 가지 측면이 있습니다: 너비, 스타일, 그리고 색상. 아래에서는 이 세 가지 측면을 자세히 설명할 것입니다.

경계선과 배경

CSS 표준은 경계선이 '요소의 배경 위에' 그려진다고 지적합니다. 이는 중요합니다. 왜냐하면 일부 경계선은 '끊기는' 경계선(예: 점선 경계선 또는 부드러운 선 경계선)이 있기 때문입니다. 요소의 배경은 경계선의 보이는 부분 사이에 나타나야 합니다.

CSS2는 배경이 내경계선까지만 확장된다고 지적합니다. 그러나 CSS2.1에서는 더 수정되었습니다: 요소의 배경은 내용, 내경계선, 경계선 영역의 배경입니다. 대부분의 브라우저는 CSS2.1을 따르지만, 일부 오래된 브라우저는 다른 표현을 할 수 있습니다.

경계선의 스타일

스타일은 경계선에서 가장 중요한 측면 중 하나입니다. 이는 스타일이 경계선의 표시를 제어하는 데 있지 않기 때문입니다. (물론, 스타일은 경계선의 표시를 제어합니다.), 그러나 스타일이 없으면 경계선이 전혀 없을 것입니다.

CSS의 border-style 속성10개의 다른 non-inherit 스타일을 정의했습니다. 그 중에는 none이 포함됩니다.

예를 들어, 한 장의 이미지의 경계선을 outset로 정의하여 '부상 버튼'처럼 보이게 할 수 있습니다：

a:link img {border-style: outset;}

여러 가지 스타일 정의

한쪽 경계선에 여러 스타일을 정의할 수 있습니다. 예를 들어：

p.aside {border-style: solid dotted dashed double;}

위의 규칙은 클래스 이름이 aside인 문단에 네 가지 경계선 스타일을 정의합니다: 실선 상단 경계선, 점선 오른쪽 경계선, 부드러운 선 하단 경계선, 그리고 두 줄 좌측 경계선.

여기서의 값이 top-right-bottom-left 순서로 사용되고 있음을 다시 보았습니다. 여러 값으로 다른 내경계선을 설정할 때도 이 순서를 본 적이 있습니다.

단면 스타일 정의

요소 브라운스의 한쪽 경계선 스타일을 설정하려면 모든 4개의 경계선 스타일을 설정하는 대신 아래의 단면 경계선 스타일 속성을 사용할 수 있습니다：

• border-top-style
• border-right-style
• border-bottom-style
• border-left-style

따라서 이 두 방법은 동일합니다:

p {border-style: solid solid solid none;}
p {border-style: solid; border-left-style: none;}

주의:두 번째 방법을 사용하려면, 단일 경계선 속성을 간단한 속성 다음에 위치해야 합니다. 그렇지 않으면 border-style 앞에 단일 경계선 속성을 위치시키면 간단한 속성의 값이 단일 경계선 값 none를 덮어씁니다.

경계선 너비

다음과 같이 border-width 속성경계선 너비를 지정합니다.

경계선 너비를 지정하는 방법은 두 가지입니다: 길이 값을 지정할 수 있습니다. 예를 들어 2px나 0.1em과 같이; 또는 thin, medium(기본 값)과 같은 3개의 키워드 중 하나를 사용할 수 있습니다.

주의사항：CSS는 thin, medium, thick와 같은 3개의 키워드의 정확한 너비를 정의하지 않기 때문에, 하나의 사용자代理는 thin, medium, thick를 각각 5px, 3px, 2px로 설정할 수 있고, 다른 사용자代理는 각각 3px, 2px, 1px로 설정할 수 있습니다.

따라서, 경계선 너비를 이렇게 설정할 수 있습니다:

p {border-style: solid; border-width: 5px;}

또는:

p {border-style: solid; border-width: thick;}

단일 경계선 너비 정의

top-right-bottom-left 순서로 요소의 각 경계선을 설정할 수 있습니다:

p {border-style: solid; border-width: 15px 5px 15px 5px;}

위의 예제는 다음과 같이 간단히 쓸 수도 있습니다. (이와 같은 작성 방식은)값 복사）：

p {border-style: solid; border-width: 15px 5px;}

또한 다음 속성을 통해 각 경계선의 너비를 별도로 설정할 수 있습니다:

• border-top-width
• border-right-width
• border-bottom-width
• border-left-width

따라서, 아래의 규칙은 위의 예제와 동일합니다:

p {
  border-style: solid;
  border-top-width: 15px;
  border-right-width: 5px;
  border-bottom-width: 15px;
  border-left-width: 5px;
  }

경계선 없음

이전 예제에서 보셨듯이, 특정 경계선을 표시하려면 경계선 스타일을 설정해야 합니다. 예를 들어 solid이나 outset와 같습니다.

그렇다면 border-style을 none으로 설정하면 어떤 일이 일어날까요:

p {border-style: none; border-width: 50px;}

경계선 넓이가 50px이지만 경계선 스타일이 none로 설정되어 있습니다. 이 경우, 경계선 스타일만 없어지지 않고, 넓이도 0으로 설정되어 경계선이 사라집니다. 왜 이렇게 될까요?

이는 경계선 스타일이 none인 경우, 경계선이 존재하지 않기 때문에 경계선은 넓이가 없을 수 없기 때문입니다. 따라서, 원래 정의했던 것보다 경계선 넓이는 자동으로 0으로 설정됩니다.

이 점을 기억하는 것은 매우 중요합니다. 사실, 경계선 스타일을 선언하지 않는 것은 자주 발생하는 오류입니다. 다음 규칙에 따르면, 모든 h1 요소는 어떤 경계선도 없으며, 20픽셀 넓이도 없습니다：

h1 {border-width: 20px;}

border-style의 기본 값이 none이므로, 스타일이 지정되지 않으면 border-style: none와 같습니다.따라서, 경계선이 나타나려면 경계선 스타일을 선언해야 합니다.

경계선 색상

경계선 색상을 설정하는 것은 매우 간단합니다. CSS는 간단한 border-color 속성하나의 경계선 색상 속성은 최대 4개의 색상 값을 받을 수 있습니다.

이름이나 십육진수 또는 RGB 값과 같은 모든 유형의 색상 값을 사용할 수 있습니다：

p {
  border-style: solid;
  border-color: blue rgb(25%,35%,45%) #909090 red;
  }

색상 값이 4개 미만이면 값 복사가 작동합니다. 예를 들어 아래의 규칙은 문단의 상하 경계선이 블루이고,左右的 경계선이 빨간색임을 나타냅니다：

p {
  border-style: solid;
  border-color: blue red;
  }

주의사항：기본 경계선 색상은 요소의 전경색상입니다. 경계선 색상이 경계선에 지정되지 않으면, 경계선의 텍스트 색상과 동일합니다. 또한, 요소에 텍스트가 없는 경우(예: 이미지만 포함된 테이블), 그 테이블의 경계선 색상은 부모 요소의 텍스트 색상이 됩니다(color는 상속됩니다). 이 부모 요소는 body, div 또는 다른 table일 가능성이 높습니다.

단면 색상 정의

또한 단면 경계선 색상 속성이 있습니다. 이들의 원리는 단면 스타일과 넓이 속성과 동일합니다：

• border-top-color
• border-right-color
• border-bottom-color
• border-left-color

h1 요소에 일반적인 검은색 단일선 경계선을 지정하고, 오른쪽 경계선을 단일선 빨간색으로 지정하려면 다음과 같이 지정할 수 있습니다：

h1 {
  border-style: solid;
  border-color: black;
  border-right-color: red;
  }

투명 경계선

저희가 언급했듯이, 경계선이 스타일이 없으면 넓이가 없습니다. 그러나 일부 경우에만 보이지 않는 경계선을 생성하고 싶을 수 있습니다.

CSS2는 투명한 경계선 색상 값을 도입했습니다. 이 값은 넓이가 있는 보이지 않는 경계선을 만들기 위해 사용됩니다. 아래의 예제를 참조하세요：

<a href="#">AAA</a>
<a href="#">BBB</a>
<a href="#">CCC</a>

위의 링크에 대해 다음과 같은 스타일을 정의했습니다:

a:link, a:visited {
  border-style: solid;
  border-width: 5px;
  border-color: transparent;
  }
a:hover {border-color: gray;}

직접 시도해 보세요

투명을 사용하면 경계선은 추가적인 내쪽 여백처럼 사용될 수 있으며, 또한 필요할 때 그를 보이게 할 수 있는 이점이 있습니다. 이 투명 경계선은 내쪽 여백처럼 사용됩니다. 요소의 배경이 경계선 영역에 이어질 수 있습니다 (보이는 배경이 있을 경우).

중요 사항:IE7 이전에는 IE/WIN이 투명한 것에 대한 지원을 제공하지 않았습니다. 이전 버전에서 IE는 요소의 color 값에 따라 경계선 색상을 설정했습니다.

CSS 경계선 속성

도구함

CSS 참조 가이드

CSS 예제

CSS 테스트

CSS 교본

스폰서 링크