동영상 강좌는 유튜브 채널 '웹학교'를 이용하시기 바랍니다.
동영상 강좌보기
CSS border속성을 사용하면 요소 테두리(경계)의 스타일, 너비 및 색상을 지정할 수 있습니다.
테두리 스타일
border-style속성은 어떤 종류의 테두리를 표시할 지 지정합니다.
border-style속성은 1~4개의 값(위쪽, 아래쪽, 왼쪽, 오른쪽)을 설정할 수 있습니다.
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
** border-style속성이 설정되어 있지 않으면 아래에 설명되는 다른 CSS테두리 속성중 아무 것도 효과가 없습니다.
테두리 너비
border-width속성은 네 개(위쪽, 아래쪽, 왼쪽, 오른쪽)의 테두리의 너비를 지정합니다.
속성의 값은 PX, PT, cm, EM, 등으로 설정할 수 있습니다.
p.one {
border-style: solid;
border-width: 5px;
}
p.two {
border-style: solid;
border-width: medium;
}
p.three {
border-style: solid;
border-width: 2px 10px 4px 20px;
}
테두리 색
border-color속성은 네 개의 테두리 색상을 설정하는데 사용됩니다.
색상은 다음과 같이 설정할 수 있습니다.
border-color속성은 1~4개의 값(위쪽, 아래쪽, 왼쪽, 오른쪽)을 지정할 수 있습니다.
border-color를 설정하지 않으면 상속을 받습니다.
p.one {
border-style: solid;
border-color: red;
}
p.two {
border-style: solid;
border-color: green;
}
p.three {
border-style: solid;
border-color: red green blue yellow;
}
테두리 - 개별 적용
위의 예를 통해 각면(위, 아래, 왼쪽, 오른쪽)에 다른 테두리를 지정할 수 있음을 알았습니다.
CSS에는 각 테두리를 지정하는 속성도 있습니다.
p {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
위의 예는 다음과 같은 결과를 제공합니다.
p {
border-style: dotted solid;
}
그래서 그것이 작동하는 방법은 다음과 같습니다.
border-style속성 값이 네개인 경우
border-style: dotted solid double dashed;
border-style속성 값이 세 개인 경우
border-style : dotted solid double;
border-style속성 값이 두 개인 경우
border-style : dotted solid;
border-style속성 값이 한 개인 경우
border-style : dotted;
테두리 - 속기 속성
위의 예제에서 볼 수 있듯이 테두리를 처리할 때 고려해야 할 많은 속성이 있습니다.
코드를 단축하기 위해 하나의 속성에 모든 개별 테두리 속성을 지정할 수도 있습니다.
border속성은 border-width, border-style, border-color에 대한 속기 속성입니다.
p {
border: 5px solid red;
}
한면에 대한 모든 개별 테두리 속성을 지정할 수도 있습니다.
왼쪽 테두리
p {
border-left: 6px solid red;
background-color: lightgrey;
}
아래쪽 테두리
p {
border-bottom: 6px solid red;
background-color: lightgrey;
}
둥근 테두리
border-radius속성은 둥근 테두리를 요소에 추가하는데 사용됩니다.
p {
border: 2px solid red;
border-radius: 5px;
}
** border-radius속성은 IE8 및 이전 버전에서 지원되지 않습니다.
등록된 댓글이 없습니다.