언어 자료구조 알고리즘/HTML5

[HTML5] 7. mark 태그를 이용하여 중요한 텍스트에 형광펜 효과를 주자.

언제나 휴일 언제나휴일 2016. 5. 7. 23:26
반응형

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>


mark 태그를 이용하여 형광펜 효과

 

만약 형광펜의 색을 사용자가 결정하기를 원하면 스타일을 하나 정의하세요. 그리고 스타일에  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에 스타일 지정하여 배경색과 투명도 설정

mark 태그를 이용하여 중요한 텍스트에 형광펜 효과를 주자.zip


반응형
1 2 3 4 5 6 7 8 ··· 15