|
스타일 시트 CSS 테두리를 지정하는 border 속성 알아보기 |
|
환경: Eclipse Mars, Chrome |
border 속성은 태그를 둘러싼 개체의 테두리를 만들어 주는 속성입니다. 테두리는 두께, 색상, 선종류 옵션을 가지고 있습니다. 3가지 옵션은 한번에 표현이 가능합니다. 또는 3가지 특성을 각각 분리해서 정의할 수도 있습니다. 예제를 통해서 어떤 형태로 표현이 되는지 알아 보겠습니다.
▼ 문법은 2가지 형태입니다. 테두리를 지정하는 3가지 속성을 합친 형태와 분리해서 지정하는 방법입니다. 문법은 아래와 같습니다. 1번의 형태는 두께, 선종류, 색상을 띄어쓰기로 구분해서 입력해야 합니다. 2번 형태는 세 가지 속성을 각각 분리해서 표시합니다. 두께와 색상은 일반적인 속성값 입력 형태와 동일합니다. 단지 선 종류는 상수 값을 사용하는데 3가지가 있습니다. “solid”, “dashed”, “dotted” 이며, 어떤 형태인지는 아래 샘플 소스로 확인해 보시기 바랍니다.
|
1. 선택자 { border : 두께 선종류 색상;} 2. 선택자 { border-width : 두께 border-style : 선종류 border-color : 색상 } |
▼ 아래 샘플에서 구분을 위해 첫 번째, 두 번째 ID는 1번 문법으로 사용하고 세 번째 ID는 3가지 특성을 따로 분리해서 지정했습니다. 그리고 3가지 특성 중 선의 종류가 빠지면 속성이 적용되지 않습니다. 선 두께와 색상값은 입력하지 않아도 기본값이 들어갑니다.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>정렬</title>
<style type="text/css">
body {
background-color: #e7e7e7;
}
#border1{
background-color: #cc5b88;
width: 300px; height: 80px;
margin: 10px;
border: 1px solid;
}
#border2{
background-color: #4e539a;
width: 300px; height: 80px;
margin: 10px;
border: 2px dotted white;
}
#border3{
background-color: #2a7a0a;
width: 300px; height: 80px;
margin: 10px;
border-width: 2px;
border-style: dashed;
border-color: #fbd700;
}
</style>
</head>
<body>
<div id="border1">
border display 1<br/>1px solid
</div>
<div id="border2">
border display 2<br/>2px dotted white
</div>
<div id="border3">
border display 3<br/>2px dashed #fbd700
</div>
</body>
</html>
'웹 프로그래밍 > 스타일시트 CSS' 카테고리의 다른 글
| 스타일 시트 CSS 안쪽 여백 설정하는 padding 속성 알아보기 (1) | 2018.06.15 |
|---|---|
| 스타일 시트 CSS clear 속성, float 기능을 제거하는 방법 (0) | 2018.05.21 |
| 스타일 시트 CSS float 속성, 이미지와 텍스트를 배치 시키는 속성 (1) | 2018.05.11 |
| 스타일 시트 CSS px(pixel) -> em 단위 변환 표 (0) | 2018.04.30 |
| 스타일 시트 CSS 글꼴을 적용할 수 있는 font-family 속성 이용하는 방법 (0) | 2018.03.23 |
| 스타일 시트 CSS 태그 요소를 보이게 하거나 숨기는 visibility 속성 알아보기 (0) | 2018.03.03 |
| 스타일 시트 CSS 텍스트, 글자 크기를 조절하는 font-size 사용하는 방법 (1) | 2018.01.31 |
| 스타일 시트 CSS 글자 색을 지정하는 color 속성 사용하기 (0) | 2018.01.23 |
