728x90
반응형
인라인요소 태그
---------위 소스코드의 결과 화면---------
<i> <em> - 아래 이미지를 보면 이태리체처럼 기울어지는 효과가 있다.
<b> <strong> - 아래사진에서 보듯이 글씨를 굵게 보이는 효과가 있다.
하지만
<i> <b> 태그는 꾸밈 효과일 뿐 (css에서 기울임 효과는 font-style:italic; font-weight:bold;)
스크린리더가 강조하며 읽지 않는다.
웹 접근성을 높이기 위해 스크린 리더기까지 생각하며 강조하는 태그를 사용하려면 <em> <strong>을 쓰는것이 맞다.
웹 문서 내에서 구분선을 그을 때 사용하는 요소 - <hr />
마지막 줄 티스토리 앞에 있는 문자는 특수문자를 사용하는 코드로 특수문자를 출력하기 위해 문자 그대로를 쓰게되면
문법적 오류가 발생할 수 있기 때문에 entity로 변화해서 입력해야 한다.
entity code에 대한 정보 ↓↓↓↓ 아래 사이트 참고
생략어 <abbr>은 LTE처럼 각 단어의 첫 문자를 하나씩 발음하는 단어를 나타내며,
<acronym>은 UNICEF처럼 각 단어의 첫 단어를 모아 마치 하나의 단어(유니세프)처럼 발음 하는 문자에 사용된다.
(title 속성을 이용하여 본래의 뜻을 설명해 줄 수 있다.)
<del>은 취소선이 그어지고 <ins>는 밑줄이 생긴다.
---------위 소스코드의 결과 화면---------
<body> <div>안녕하세요 on sunday <i>티스토리</i> 입니다.</div> <div>안녕하세요 on sunday <em>티스토리</em> 입니다.</div> <br> <div>안녕하세요 on sunday <b>티스토리</b> 입니다.</div> <div>안녕하세요 on sunday <strong>티스토리</strong> 입니다.</div> <br> <hr /> <p>안녕하세요 on sunday <span>©티스토리</span> 입니다.</p> <br><br> <p><abbr title="Long Term Evolution">LTE</abbr></p> <p><acronym title="United Nations Childre's Fund">UNICEF</acronym>(유니세프)</p> <p>정기 세일 : <del>8.30 - 9.15</del></p> <p>정기 세일 변경 : <ins>9.1 - 9.10</ins></p> <br> <h2>윗첨자와 아래첨자</h2> <p>m<sup>2</sup> co<sub>2</sub></p> </body> <style> body{font-size:40px;} i {color:blueviolet;} em {color:deeppink;} b {color:forestgreen;} strong {color:brown;} p {color:#333;} span {color:blue;} </style> | cs |
728x90
반응형
'IT > html + css' 카테고리의 다른 글
| [html] form 요소 (0) | 2019.12.27 |
|---|---|
| [html] 표 만드는 table태그 (0) | 2019.12.19 |
| [html] a 링크, a 태그 만들기 - 새창으로 이동 속성 (0) | 2019.12.18 |
| [html] 블록 요소, 인라인요소, 인라인블록 (0) | 2019.12.16 |
| [html] 기본 문서 구조 - meta태그 (0) | 2019.12.15 |
댓글