HTML 텍스트 장식-HTML 튜토리얼-php.cn

HTML에서 텍스트 장식은 어떻게 작동하나요?

HTML 텍스트 장식의 예

예 #1 – 없음

예 #2 – 밑줄

예 #3 – 윗줄

예 #4 – 라인스루

예시 #5

결론

집

웹 프론트엔드

HTML 튜토리얼

HTML 텍스트 장식

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 04, 2024 pm 04:40 PM

html html5 HTML Tutorial HTML Properties HTML tags

HTML의 텍스트 장식은 다양한 방식으로 텍스트를 장식하는 데 사용됩니다. text-design은 텍스트 장식에 사용되는 속성입니다. text-장식 속성은 underline, overline, line-through, underline overline 값을 사용하여 텍스트를 다양한 방식으로 장식합니다.

실시간 예: 텍스트 장식 윗줄, 밑줄, 줄바꿈 값은 로그인 사용자가 인간인지 로봇인지 확인하는 동안 보안 문자를 생성하는 데 사용됩니다. 왜냐하면 텍스트 위에 있는 줄은 로봇이 완벽하게 인식할 수 없기 때문입니다.

유형:

텍스트 장식: 없음;
텍스트 장식: 윗줄;
텍스트 장식: 줄 관통;
텍스트 장식: 밑줄;

HTML에서 텍스트 장식은 어떻게 작동하나요?

텍스트 장식 속성은 없음, 윗줄, 줄바꿈 및 밑줄을 기반으로 작동합니다

1. 없음

구문:

text-decoration: none;

로그인 후 복사

설명: 텍스트에 어떠한 장식도 주지 않습니다. 일반 텍스트와 같습니다.

2. 윗줄

구문:

text-decoration: overline;

로그인 후 복사

설명: 텍스트 위에 1px 크기로 한 줄을 줍니다.

3. 라인스루

구문:

text-decoration: line-through;

로그인 후 복사

설명: 텍스트 중앙부터 1px 크기로 줄을 그어줍니다.

4. 밑줄

구문:

text-decoration: underline;

로그인 후 복사

설명: 텍스트 하단에 1px 크기로 한 줄을 줍니다.

5. 깜박임

구문:

text-decoration: blink;

로그인 후 복사

설명: 불투명도 0%에서 100%까지 다양한 색상으로 텍스트를 깜박이게 합니다.

참고: 최신 브라우저의 깜박임 기능은 더 이상 사용되지 않습니다. 이제는 전혀 사용되지 않습니다.

텍스트 장식 속성은 점선, 물결선, 실선, 홈 등과 같은 기본 스타일 외에 색상을 사용하여 윗줄, 선 통과, 밑줄을 다른 스타일로 만들 수도 있습니다. 아래 구문을 보실 수 있습니다.

구문:

text-decoration: underline dotted red;

로그인 후 복사

HTML 텍스트 장식의 예

다음은 HTML 텍스트 장식의 예입니다.

예 #1 – 없음

코드:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-align:center;
color:green;
}
.none {
text-decoration: none;
font-size:20px;
}
}
</style>
</head>
<body>
<h1>Demo for text-decoration:none</h1>
<p class="none">
Executed and contributed to full-stack web development projects, with an emphasis on front end
features, browser manipulation, and cross-browser compatibility. Wrote templates and front-end code for ECM app to meet WebTop application compatibility.
Assisted in the development of back end features in Spring MVC with Hibernate. Developed importing models and logic in the Office Note app to store spreadsheet data and deployed
to host.
</p>
</body>
</html>

로그인 후 복사

출력:

HTML 텍스트 장식

설명: 보시다시피 text-장식: none은 단락 텍스트에 줄 장식을 줄 수 없습니다.

예 #2 – 밑줄

코드:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-align:center;
color:green;
}
.underline {
text-decoration: underline;
font-size:20px;
}
}
</style>
</head>
<body>
<h1>Demo for text-decoration:underline</h1>
<p class="underline">
Executed and contributed to full-stack web development projects, with an emphasis on front end
features, browser manipulation, and cross-browser compatibility. Wrote templates and front-end code for ECM app to meet WebTop application compatibility.
Assisted in development of back end features in Spring MVC with Hibernate. Developed importing models and logic in Office Note app to store spreadsheet data and deployed
to host.
</p>
</body>
</html>

로그인 후 복사

출력:

HTML 텍스트 장식

설명: 보시다시피 text-design: underline은 텍스트 아래에 줄을 표시합니다.

예 #3 – 윗줄

텍스트 장식: 윗줄 예:

코드:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-align:center;
color:green;
}
.overline{
text-decoration: overline;
font-size:20px;
}
}
</style>
</head>
<body>
<h1>Demo for text-decoration:overline</h1>
<p class="overline">
Executed and contributed to full-stack web development projects, with an emphasis on front end
features, browser manipulation, and cross-browser compatibility. Wrote templates and front-end code for ECM app to meet WebTop application compatibility.
Assisted in development of back end features in Spring MVC with Hibernate. Developed importing models and logic in Office Note app to store spreadsheet data and deployed
to host.
</p>
</body>
</html>

로그인 후 복사

출력:

HTML 텍스트 장식

설명: 보시다시피 text-design: overline은 텍스트 위에 줄을 표시합니다.

예 #4 – 라인스루

텍스트 장식:줄 통과 예:

코드:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-align:center;
color:green;
}
.through {
text-decoration: line-through;
font-size:20px;
}
}
</style>
</head>
<body>
<h1>Demo for text-decoration:line-through</h1>
<p class="through">
Executed and contributed to full-stack web development projects, with an emphasis on front end
features, browser manipulation, and cross-browser compatibility. Wrote templates and front-end code for ECM app to meet WebTop application compatibility.
Assisted in development of back end features in Spring MVC with Hibernate. Developed importing models and logic in Office Note app to store spreadsheet data and deployed
to host.
</p>
</body>
</html>

로그인 후 복사

출력:

HTML 텍스트 장식

설명: 보시다시피 text-design: line-through는 텍스트 중간부터 줄을 그어줍니다.

예시 #5

단선, 이중선, 물결 모양 밑줄, 통과선, 윗선을 사용한 텍스트 장식 예:

코드:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-align:center;
color:green;
}
.p1 {
text-decoration:solid overline brown;
font-size:18px;
}
.p2 {
text-decoration:double line-through blue;
font-size:18px;
}
.p3 {
text-decoration:wavy underline red;
font-size:18px;
}
}
</style>
</head>
<body>
<h1>Demo for text-decoration:solid overline brown</h1>
<p class="p1">
Executed and contributed to full-stack web development projects, with an emphasis on front end
features, browser manipulation, and cross-browser compatibility. Wrote templates and front-end code for ECM app to meet WebTop application compatibility.
Assisted in development of back end features in Spring MVC with Hibernate. Developed importing models and logic in Office Note app to store spreadsheet data and deployed
to host.
</p>
<h1>Demo for text-decoration:double line-through blue</h1>
<p class="p2">
Executed and contributed to full-stack web development projects, with an emphasis on front end
features, browser manipulation, and cross-browser compatibility. Wrote templates and front-end code for ECM app to meet WebTop application compatibility.
Assisted in development of back end features in Spring MVC with Hibernate. Developed importing models and logic in Office Note app to store spreadsheet data and deployed
to host.
</p>
<h1>Demo for text-decoration:wavy underline red</h1>
<p class="p3">
Executed and contributed to full-stack web development projects, with an emphasis on front end
features, browser manipulation, and cross-browser compatibility. Wrote templates and front-end code for ECM app to meet WebTop application compatibility.
Assisted in development of back end features in Spring MVC with Hibernate. Developed importing models and logic in Office Note app to store spreadsheet data and deployed
to host.
</p>
</body>
</html>

로그인 후 복사

출력:

HTML 텍스트 장식