CSS outline-width

outline-width 속성은 아웃라인의 너비를 지정하며 다음 값 중 하나를 가질 수 있다:

thin(일반적으로 1인치)
medium(일반적으로 3인치)
thick(일반적으로 5인치)
특정 크기(px, pt, cm, em 등)

CSS outline-width thin

p.ex1 {
  border: 1px solid black;
  outline-style: solid;
  outline-color: red;
  outline-width: thin;
}

CSS outline-width를 thin으로 설정한 예제는 아래 표와 같다.

<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
  border: 1px solid black;
  outline-style: solid;
  outline-color: red;
  outline-width: thin;
}
</style>
</head>
<body>

<h2>outline-width 속성</h2>

<p class="ex1">A thin outline.</p>

</body>
</html>

outline-width를 thin으로 설정한 결과 화면은 아래 그림과 같다.

CSS outline-width medium

p.ex1 {
  border: 1px solid black;
  outline-style: solid;
  outline-color: red;
  outline-width: medium;
}

CSS outline-width를 medium으로 설정한 예제는 아래 표와 같다.

<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
  border: 1px solid black;
  outline-style: solid;
  outline-color: red;
  outline-width: medium;
}
</style>
</head>
<body>

<h2>outline-width 속성</h2>

<p class="ex1">A medium outline.</p>

</body>
</html>

outline-width를 medium 으로 설정한 결과 화면은 아래 그림과 같다.

CSS outline-width thick

p.ex1 {
  border: 1px solid black;
  outline-style: solid;
  outline-color: red;
  outline-width: thick;
}

CSS outline-width를 thick으로 설정한 예제는 아래 표와 같다.

<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
  border: 1px solid black;
  outline-style: solid;
  outline-color: red;
  outline-width: thick;
}
</style>
</head>
<body>

<h2>outline-width 속성</h2>

<p class="ex1">A thick outline.</p>

</body>
</html>

outline-width를 thick으로 설정한 결과 화면은 아래 그림과 같다.

CSS outline-width special size

p.ex1 {
  border: 1px solid black;
  outline-style: solid;
  outline-color: red;
  outline-width: 4px;
}

CSS outline-width를 4px로 설정한 예제는 아래 표와 같다.

<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
  border: 1px solid black;
  outline-style: solid;
  outline-color: red;
  outline-width: 4px;
}
</style>
</head>
<body>

<h2>outline-width 속성</h2>

<p class="ex1">A 4px outline.</p>

</body>
</html>

outline-width를 4px으로 설정한 결과 화면은 아래 그림과 같다.

지금까지 CSS outline-width의 thin, medium, thick, 특정크기 설정 등에 대한 예제를 살펴보며 outline-width 속성에 대해 실습해 보았다.

모두 꼭 실습하기를 추천합니다.

모두 화이팅입니다.!!!

출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.

저작자표시 비영리 변경금지

'HTML > CSS문법' 카테고리의 다른 글

CSS outline 단축 속성 (0)	2023.07.26
CSS outline-color (0)	2023.07.25
CSS outline (0)	2023.07.23
CSS box model (0)	2023.07.22
CSS height, width, max-width 속성 (0)	2023.07.21

enjoyCoding

CSS outline-width