HTML5로 테두리 꾸미기(1)

 

오늘은 HTML5로 '테두리'의 디자인을 다뤄보겠습니다:-)

 

[테두리의 두께 & 모양과 색]

- 테두리는 패딩(padding) 혹은 여백(margin)과 달리 '두께'/'모양'/'색'을 지정하는 여러 가지의 프로퍼티를 두고 있다.

- 아래는 <p> 태그에 테두리를 꾸미는 예시 코드이다.

p{
	border-width : 3px;		/* 테두리의 두께를 3px로 설정 */
	border-style : dotted;		/* 테두리의 스타일을 도트(점)으로 설정 */
	border-color : blue;		/* 테두리의 색을 파란색으로 설정 */
}

 

- 위의 스타일을 지정하고 <p> 태그를 사용하게 되었을 때 아래와 같은 테두리를 확인할 수 있다.

 

스타일이 적용된 <p> 태그 박스의 모습

 

+ 테두리의 두께는 '3px'와 같이 정확한 수치로 할당해도 되지만, 정확한 수치가 필요 없는 'thin', 'medium', 'thick'과 같은 사전에 정의되어 있는 용어들로도 조절이 가능하다.

 

- 전체적인 테두리 말고도 한쪽의 테두리만 따로 조절하는 것도 가능하다. 아래는 그 예시 코드이다.

p{
	border-left-width : 3px;		/* 왼쪽 테두리의 두께를 3px로 설정 */
	border-left-style : dotted;		/* 왼쪽 테두리의 스타일을 도트(점)으로 설정 */
    	border-left-color : blue;		/* 왼쪽 테두리의 색을 파란색으로 설정 */
}

 

- 출력 결과는 아래와 같다.

 

왼쪽의 테두리만 효과를 적용받는 모습

 

- 위에서 알 수 있듯이 'border' 프로퍼티는 테두리의 '두께(width)', '선 스타일(style)', '선 색(color)'를 한 번에 지정할 수 있다.

- 그럼 이를 이용하여 보다 간결하게 코드를 작성해 보자.

p{
	border : 5px dotted blue;		/* 테두리의 두께, 스타일, 색 설정 */
}

 

- 아래는 한 번에 스타일을 적용받는 <p> 태그 박스의 출력 결과이다.

 

border를 통해 한 번에 효과를 적용받는 <p>태그 박스

 

 

 

 

 

 

 

 

★ 해당 게시물은 "HTML5 + CSS3 + Javascript 웹 프로그래밍"도서를 참고하여 작성되었습니다. ★