Notice
Recent Posts
Recent Comments
Link
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | |||||
| 3 | 4 | 5 | 6 | 7 | 8 | 9 |
| 10 | 11 | 12 | 13 | 14 | 15 | 16 |
| 17 | 18 | 19 | 20 | 21 | 22 | 23 |
| 24 | 25 | 26 | 27 | 28 | 29 | 30 |
Tags
- 코딩테스트
- 선택자
- Pseudo
- CSS
- 친해지기
- display
- 코드일기
- tailwindcss
- 가상클래스
- row-gap
- JavaScript
- 코딩퀴즈
- HTML
- column-gap
- regexp
- frontend
- vscode
- DOM
- scss
- CLASS
- js
- Coda
- 코딩일기
- 코딩문제
- sass
- 정규식표현
- property
- 코드다이어리
- Grid
Archives
- Today
- Total
< Code diaries />
TAG 02 - 제목과 글자를 다루는 태그, 기타 태그 본문
HTML(Hyper Text Markup Language)
<body>안에 사용하는 HTML TAG를 공부해 봅시다.
01. 제목과 글자를 다루는 태그
| Tag | Description | Meaning |
| <h1>~<h6> | 헤딩요소. 문서의 내용중 제목을 나타낼 때에 사용하며, 보통 문서의 가장 큰제목은 '로고 - 사이트 제목' 로 분류되어 <h1>태그는 로고를 묶거나, 사이트명을 적을때에 한번만 사용하는 것이 대부분 입니다. |
Heading |
| <br> | 이 요소가 있는 부분에서 강제 줄바꿈 처리되며 빈요소 이다. | Line break |
| <wbr> | 긴 단어인 경우에 브라우저에서 공간이 부족할 때에 우리가 원치않는 곳에서 줄바꿈을 해버리는 경우가 종종 있다. 그걸 원하는 곳에서 단어의 줄바꿈 위치를 잡는 역할을 하는데 한글에서는 지원되지 않는다. 예를 들어 : 단어내의 줄바뀜 부분을 처리하는 방법은 아래와 같다. 1. templates 단어 중간에 줄바꿈을 하고싶으면 tem<wbr>plat<wbr>es 이렇게 하면 총 3가지의 단어처럼 나누어져서 필요시 줄바꿈을 한다. 2. tem­plates 이렇게 처리할 경우에는 tem-이렇게 줄 바꿈이 된다. |
Word Break Opportunity |
| <p> | 문단, 문장을 표현 | Paragraph |
| <strong> | 주의, 또는 강한 강조 | Strong |
| <em> | <strong>태그보다는 약하지만 강조의 의미 | Emphasis |
| <b> | 문맥상의 살짝 강조하는 느낌에 사용 HTML5이전에는 시각적인 역할을 담당하는 태그였지만, 웹표준이 중요시 되면서 시각적인 분류태그들이 많이 없어졌는데, 그때 살아남은 태그 ^^ 큰 의미를 두지는 않습니다. |
Bold |
| <i> | <b>와 동일 | Italic |
| <sup>,<sub> | 위첨자, 아래첨자 | superscript, subscript |
| <del>,<ins> | 정보를 지우고 다시 넣는 의미 예를 들면 59,900 -> 9,900 으로 정정할때, 또는 일정변경시 변경전, 후를 나타낼 때에 적절 |
delete, insert |
| <time> | 날짜, 시간정보 <time datetime="2024-03-04T11:20:00">3월 4일 11:20</time> <time datetime="2024-03-04">3월 4일</time> |
datetime 속성과 같이 쓴다. |
| <mark> | 텍스트에 형광펜 효과 - 시각적인 요소로 생겨남 |
02. 기타 태그
| Tag | Description | Meaning |
| <blockquote> | 인용문장 긴글 | Block |
| <q> | 인용문 짧은 글 | Inline, " |
| <abbr> | 줄임말, title 보조속성과 같이 사용한다. 스펠링으로 읽는 줄임말 또는 줄임말이 한단어로 사용되는 것또한 둘다 허용된다. |
<acronym>은 파기됨 |
| <pre> | 공백병합이 일어나지 않는다. | 코드 넣을때 <code>태그와 같이 사용 |
| <code> | monotype 글꼴로 표시된다. | |
| <address> | 일반적인 우편물 주소가 아닌, 저작권자와 연락할 수 있는 정보를 표시하는 것으로서 보통 <footer>에 적으며, 이메일주소, 전화번호, 팩스번호등을 넣는다. |
본 문서는 제가 오랫동안 일해왔던 내용을 강의와 책편집을 위해 정리해둔 내용입니다.
힘들게 만든 만큼 공부하시는 분들께 도움이 되면 좋겠습니다.
제 피드를 공유하거나 링크를 해주시는것은 감사합니다~
하지만, 출처없이 이미지나 내용만을 카피해서
포스트를 쓰신다거나 하는것은 하지말아주세요 ^^
감사합니다.
반응형
'Html' 카테고리의 다른 글
| TAG 05 - 폼에 관련된 태그와 <datalist> (0) | 2024.06.06 |
|---|---|
| TAG 04 - 표를 만드는 태그 (0) | 2024.06.06 |
| TAG 01 - 영역을 분리하는 태그(Semantic Tags) (2) | 2024.06.06 |
| 우리가 공부할 HTML tag list (0) | 2024.06.06 |
| HTML Markup 방법과 DOM 트리구조 (2) | 2024.06.06 |
'Html' Related Articles
more
