mark 태그를 이용하여 중요한 텍스트에 형광펜 효과를 주자.
HTML5에서 새롭게 텍스트에 효과를 내는 태그 중에 <mark>는 형광펜을 그은 듯한 효과를 줄 때 사용합니다. 예제를 통해 알아보기로 해요.
<!DOCTYPE html>
<html>
<head>
<title>중요한 곳에 mark로 형광펜 효과주기</title>
<meta charset="utf-8" />
</head>
<body>
<pre>
안녕하세요. 언휴예요.
2016년 5월 17년간 실무와 강의를 마칩니다.
그리고 이제까지 축적한 노하우와 지식을 온라인을 통해 공유할 계획이예요.
C, C++, C#, Java, Python 등의 <mark>프로그래밍 언어와 다양한 기술 및 무료 동영상 강의</mark>를 배포할 거예요.
<a href="http://ehclub.co.kr">언제나 휴일 메인 사이트 </a>
</pre>
</body>
</html>
만약 형광펜의 색을 사용자가 결정하기를 원하면 스타일을 하나 정의하세요. 그리고 스타일에 background-color 속성으로 색상을 정합니다.
투명도까지 정하고자 한다면 background-color:rgba(#r,#g,#b,#a) 를 사용하세요. 투명도는 0에서 1사이의 수를 사용합니다.
<!DOCTYPE html>
<html>
<head>
<title>중요한 곳에 mark로 형광펜 효과주기2(색상 및 투명도)</title>
<meta charset="utf-8" />
<style>
mark{
font-weight:bold;
background-color:rgba(255,0,0,0.2);
}
</style>
</head>
<body>
<pre>
안녕하세요. 언휴예요.
2016년 5월 17년간 실무와 강의를 마칩니다.
그리고 이제까지 축적한 노하우와 지식을 온라인을 통해 공유할 계획이예요.
C, C++, C#, Java, Python 등의 <mark>프로그래밍 언어와 다양한 기술 및 무료 동영상 강의</mark>를 배포할 거예요.
<a href="http://ehclub.co.kr">언제나 휴일 메인 사이트 </a>
</pre>
</body>
</html>
mark 태그를 이용하여 중요한 텍스트에 형광펜 효과를 주자.zip
'언어 자료구조 알고리즘 > HTML5' 카테고리의 다른 글
| [HTML5] 10. HTML 문서를 작성하는 사람 입장에서는 보기 불편한 특수 문자 (0) | 2016.05.31 |
|---|---|
| [HTML5] 9. time 태그로 날짜와 시각 정보를 표시하는 습관을 기릅시다. (1) | 2016.05.09 |
| [HTML5] 8. 굵게 표시하는 태그 <strong>은 강조 <b>는 그냥 굵게 (0) | 2016.05.07 |
| [HTML5] 6. 안전한 구조를 위해 br 태그에 종료를 표시하자. (0) | 2016.05.05 |
| [HTML5] 5. 소스 코드를 본문에 포함할 때는 pre 태그를 사용! (0) | 2016.05.05 |
| [HTML5] 4. 주석으로 가독성을 높이자. (0) | 2016.05.05 |
| [HTML5] 3. 글자가 이상하게 보일 때 깨지지 않게 meta태그에 인코딩 설정 (0) | 2016.05.04 |
| [HTML5] 2. 간단해진 HTML 문서 형식 선언 <!DOCTYPE html> (0) | 2016.05.04 |
| [HTML5] 1. 첫 번째 만드는 HTML 문서, "Hello, HTML" (0) | 2016.05.04 |
| [HTML5] 이미지 (0) | 2016.04.09 |