스타일 시트 CSS 테두리를 지정하는 border 속성 알아보기

스타일시트 CSS

스타일 시트 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 : 색상

}

 

아래 샘플에서 구분을 위해 첫 번째, 두 번째 ID1번 문법으로 사용하고 세 번째 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 테두리를 지정하는 border 속성 알아보기

Posted by 녹두장군