티스토리 뷰

1. 개념
<mark> - 형광펜 효과 , <span> - 텍스트 영역 감싸기
<mark> : 태그로 감싼 부분의 배경색을 노란색이 되어 형광펜으로색칠한 효과를 줌
<span> : span 태그로 감싼 텍스트에 스타일을 적용하려고 할 때사용
2. 태그
<mark> , <span>
html5 코드
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<! DOCTYPE html>
<html lang = "kr" >
<head>
<meta charset = "utf-8" >
<title> 키보드와 하루 </title>
</head>
<body>
1
<mark> 형광펜 효과를 내는 mark태그 </mark> 입니다.
<br><br>
2
span 태그입니다. <span style =' color : red ' > 아무런 의미가 없지만 이 부분만 감싸서 </span> 스타일을 낼 수 있습니다.
</body>
</html>
결과 화면
코드 설명
1
<mark> ...... </mark>
mark 태그를 감싸게 되면 자동으로 배경색이 노란색으로 되면서 형광펜으로 그은 듯한 효과를 줍니다.
만약에 노란색이 아닌 다른 색으로 하고 싶다고 하면 background-color:로 스타일을 설정하여서 다른 색으로도 설정이 가능합니다.
2
<span> ...... </span>
span은 이 태그는 자체적으로는 의미가 없습니다.
근데 이 태그가 좋은 것은 줄바꿈 없이 일부 텍스트를 감싸서 스타일을 줄 때 아주 유용합니다.
저도 블로그를 작성할 때 이 태그 많이 이용합니다.
기본적인 태그이면서도 활용도가 높은 태그입니다
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday