html 테두리색 지정하기 css 스타일 color 사용 using html border style

html에서 테두리는 나름 중요하다. 구역을 지정하고 문단을 나누며 텍스트를 강조한다. 가독성을 위해 사용되기도 하지만 테두리를 지정함으로써 컨텐츠를 보는 사람으로 하여금 흥미와 관심을 끌 수 있다. margin과 padding과도 연관이 있기 때문에 같이 익혀두는 것이 좋다.

html 테두리색 지정하기 css 스타일 color 사용
using html border style

html을 이용하면 텍스트 주변에 효과를 주어 보는 사람으로 하여금 흥미를 주거나 관심을 유도할 수 있다.

배경색이나 글자의 텍스트색을 변경함으로써 할 수도 있지만 글자 주변의 테두리 색을 변경함으로써 단어의 구역을 나누고 관심을 끌 수도 있다.

대표적인 것이 태그들이기도 하고, 버튼이기도 하다.

css 스타일의 border 속성으로 테두리의 색을 지정할 수 있다.

테두리 색지정 border 스타일

텍스트나 또는 박스 등 html 태그 등에 테두리의 색상을 지정할 때 css 스타일의 border 요소를 사용한다.

border는 보통 선의 굵기와 선의 형태와 색상 을 지정하도록 되어 있는데 일단 여기서는 색상만 다뤄본다.

참고로 테두리와 관계 있는 것이 margin 과 padding 이다.

테두리를 중심으로 maring 은 테두리의 바깥쪽을 나타내고, padding 은 테두리의 안쪽을 가리킨다.

테두리색을 지정하는 css 스타일은 다음과 같다.

<태그명 style="border: 테두리굵기 테두리형태 색상코드;"></태그명>

<p style="border: 1px solid black;">
	테두리
</p>

html 예제

위의 예시를 이용하여 테두리 색을 지정해 보도록 한다.

일반적으로 사용되는 문단 태그를 이용하겠지만 문단 태그 이외의 span 이나 div 태그에도 적용이 가능하다.

css 스타일은 어떤 태그에도 사용될 수 있다는 것을 상기하자.

배경색이나, 글자색과 했을 때와 마찬가지로 여러가지 색상을 이용해 테두리색상을 지정해 보도록 한다.

코드를 보자.

<!-- HTML 문서임을 정의한다. -->
<!DOCTYPE html>

<!-- html 문서 시작 -->
<html>

	<!-- 문서 정보 -->
	<head>
    </head>
    <!-- // -->
    
    <!-- 문서 내용 -->
	<body>
        <div>
            <!-- 제목입니다 -->
            <h2>
                html 테두리색<br/>
                border: 테두리색
            </h2>
            <!-- // -->
            <!-- 문서 내용 -->
            <p style="border:2px solid Tomato;">
                테두리색을 Tomato로 설정
            </p>
            <p style="border:2px solid Orange;">
                테두리색을 Orange로 설정
            </p>
            <p style="border:2px solid DodgerBlue;">
                테두리색을 DodgerBlue로 설정
            </p>
            <p style="border:2px solid MediumSeaGreen;">
                테두리색을 MediumSeaGreen로 설정
            </p>
            <p style="border:2px solid Gray;">
                테두리색을 Gray로 설정
            </p>
            <p style="border:2px solid SlateBlue;">
                테두리색을 SlateBlue로 설정
            </p>
            <p style="border:2px solid Violet;">
                테두리색을 Violet로 설정
            </p>
            <p style="border:2px solid LightGray;">
                테두리색을 LightGray로 설정
            </p>
            <!-- // -->
        </div>
	</body>
    <!-- // -->

</html>
<!-- // -->

색은 배경색이나, 글자색에 사용했던 같은 색상들을 지정했다.

위의 코드는 테두리의 굵기는 2px 일반적인 선의 형태의 색상을 지정하는 코드이다.

결과화면을 보자.

여러가지 테두리색들이 잘 지정된 것을 볼 수 있다.

여기서 조금 꾸미자면 margin과 padding 등으로 간격을 주고 배경색과 글자색을 조금 지정해도 괜찮은 효과를 줄 수 있다.

'programming > web' 카테고리의 다른 글

html 스타일 rgb rgba 색상 사용하기 using html rgb rgba colors (0)	2022.04.04
html 색을 지정하는 방법 rgb hex hsl 차이 (0)	2022.04.01
html 글자색 지정하기 css 스타일 color 사용 using html font style (0)	2022.03.27
html 배경색 지정하기 css 스타일 background-color 사용 using html style (0)	2022.03.24
html 주석 사용하기 using html comment (0)	2022.03.21