글자를 다양한 모습으로 나타내는 태그들
시작 태그와 종료 태그 사이에 서식을 지정할 텍스트를 넣어서 사용한다.
<b>태그 : 텍스트를 굵게 표시함
<strong>태그 : 텍스트를 굵게 표시함
<i>태그 : 텍스트를 이탤릭체로 표시함
<em>태그 : 텍스트를 이탤릭체로 표시함
<u>태그 : 텍스트에 밑줄을 표시함
<mark> : 텍스트를 강조함
<small> : 텍스트를 조금 작게 표시함
<del> : 삭제된 텍스트를 표시함 (취소선)
<ins> : 추가된 텍스트를 표시함 (밑줄)
<sub> : 텍스트를 아랫첨자로 표시함
<sup> : 텍스트를 윗첨자로 표시함
<kbd> : 키보드 입력으로 표시함
<code> : 컴퓨터 코드로 표시함
<samp> : 컴퓨터 프로그램의 샘플 출력을 표시함
<var> : 변수를 표시함
* 브라우저 상에서 <strong>은 <b>와 같이, <em>은 <i>와 같이 보여지지만 의미상으로는 다르다. <strong>과 <em>은 표시하는 텍스트가 중요하다는 뜻을 추가적으로 담고 있다.
* <strong>, <em>, <kbd>, <code>, <samp>, <var>태그들은 구문 태그로, CSS 사용 시 효과적으로 사용이 가능하다.
코드
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <b>Bold text</b> <br> <strong>Important text</strong> <br> <i>Italic text</i> <br> <em>Emphasized text</em> <br> <u>Underline text</u> <br> <mark>Marked text</mark> <br> <small>Small text</small> <br> <del>Deleted text</del> <br> <ins>Inserted text</ins> <br> <sub>Subscript text</sub> <br> <sup>Superscript text</sup> <br> <kbd>Keyboard input</kbd> <br> <code>Computer code</code> <br> <samp>Sample output</samp> <br> <var>Variable</var> <br> </body> </html> | cs |
결과
공백과 특수 문자 표현
1. 공백 표현
웹 페이지 작성 시 스페이스 바를 아무리 많이 입력해도 브라우저 상에서는 한번 입력한 것처럼만 보이게 된다.
때문에 공백 문자를 많이 입력해야 할 상황이 생긴다면, 스페이스 바 대신에 ' '를 입력해준다.
nbsp란 no-break space를 의미한다.
1 2 3 4 5 6 7 8 9 10 11 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> 공백을 표시하는 법 (X) <br> 공백을 표시하는 법 (O) <br> </body> </html> | cs |
2. 특수 문자 표현
'<', '>', '&'등의 웹 페이지 작성 시에 사용되는 기호들은 태그를 나타낼 때 사용된다.
만약 이 기호들을 브라우저 상에 출력시키고 싶다면 명령어로 인식되지 않도록 다른 방법으로 입력해줘야 한다.
↓ 자주 사용되는 문자들
특수 문자 |
코드 값 |
코드 명 |
< |
< |
< |
> |
> |
> |
& |
& |
& |
" |
" |
" |
' |
' |
' |
© |
© |
© |
'프로그래밍 > 웹표준' 카테고리의 다른 글
| [CSS] 2.CSS에서 색상 표현하기 (0) | 2017.06.24 |
|---|---|
| [CSS] 1.CSS 소개와 사용방법 (0) | 2017.06.18 |
| 13. 양식 만들기 <form> (0) | 2017.02.27 |
| 12. <table>태그로 표 만들기 (0) | 2017.02.03 |
| 11. 내부 프레임 <iframe> (0) | 2017.01.23 |
댓글,
