| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 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 | 31 |
- C
- greedy
- HTML
- 문자열
- 꾸준히
- 알고리즘
- 구현
- 파이썬
- 초보
- 10807
- 백준
- 입문
- Implemention
- 심화1
- Python
- VS
- 10926
- 정리
- implement
- 문제풀이
- C Programming
- 그리디
- Beakjoon
- 친절한 설명
- Baekjoon
- CSS
- 코드엔진
- c언어
- C 언어
- 설명
- Today
- Total
안경잡이 구루루
HTML Tag(태그) , attributes(속성) 자세한 설명 모음 1 (+ 23.8.5 uppdate ) 본문
HTML Tag(태그) , attributes(속성) 자세한 설명 모음 1 (+ 23.8.5 uppdate )
구루루(gururu) 2023. 7. 3. 21:12
모든 tag를 외우고 살 수 없어서 필요할 때마다 찾기 편하게 사용하기 위해 만든 글입니다.
다들 도움이 되면 좋겠습니다. ctrl + f를 눌러서 <tag>를 적어 바로 찾을 수 있습니다.
아래 글은 특히 yalco(얄코)님 강의를 참고로 작성했습니다.
- <p>(paragraph)
사용법 )
<p> content </p>
설명 )
1. p태그 속content가 하나의 문단을 나타낸다.(띄어쓰기 단위)
2. 보통우리가 사용하는 문서들은 여백, 들여쓰기를 통해 문단을 구분하지만 html에서는 아래와 같이 따로 태그를 사용해야 만 문단이 구별된다.
예시)
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<p>first
second
</p>
<p>first</p>
<p>second</p>
</body>
</html>
출력결과
first second
first
second
- <q> (qoute)
사용법)
- <mark>
사용법)
<mark> content </mark>설명)
1. 현재 맥락에 관련이 깊거나 중요해 표시 또는 하이라이트로 표현
2. 일반적인 <mark> 의 사용법은 다음과 같다.
인용문(<q>, <blockquote>)에서는, 원본엔 별도 표시가 없으나 특별히 봐야 하는 부분을, 그리고 원저자는 특별히 중요하다고는 생각하지 않았으나 주시해야 할 필요가 있는 부분을 표시
다른 경우, <mark>는 문서 콘텐츠에서 사용자의 현재 행동과 관련 있는 부분을 나타낼 때 사용합니다. 예를 들어, ctrl+f 로 현재 검색 키워드를 찾아 강조표시할 때 사용.
그래서 <mark>를 표시만을 위한 용도로 사용하면 안됨.
(추가자료) https://developer.mozilla.org/ko/docs/Web/HTML/Element/mark
<mark> - HTML: Hypertext Markup Language | MDN
HTML <mark> 요소는 현재 맥락에 관련이 깊거나 중요해 표시 또는 하이라이트한 부분을 나타냅니다.
developer.mozilla.org
예시)
<q cite="https://developer.mozilla.org/ko/docs/Web/HTML/Element/mark"
><mark>인용문</mark>에서는, 원본엔 별도 표시가 없으나 특별히 봐야 하는 부분을,
그리고 원저자는 특별히 중요하다고는 생각하지 않았으나 주시해야 할 필요가 있는
부분을 표시합니다.</q
>
라고 되어있습니다.
출력결과
- <abbr> (abbreviation)
사용법)
<abbr> content </abbr>설명)
1. 준말 또는 머리글자를 나타냄.. 선택 속성인 title을 사용하면 준말의 전체 뜻이나 설명을 보통 마우스 커서를 올렸을 때 나타나는 툴팁으로 제공.
이때 <abbr> 요소는 서로 독립적이므로 각 title별 준말의 뜻, 설명을 제공해야함.
2. <dfn>과 같이 사용하면 준말이나 머리글자를 그 정의와 연결
이떄 <dfn> 요소에 id 특성을 지정하면 <a> 요소로 <dfn>을 가리킬 수 있음. 그래서 사용자가 용어 뜻을 잘 모를 경우, 링크를 클릭해 빠르게 정의를 확인
(추가자료)https://developer.mozilla.org/ko/docs/Web/HTML/Element/abbr
<abbr> - HTML: Hypertext Markup Language | MDN
HTML <abbr> 요소는 준말 또는 머리글자를 나타냅니다. 선택 속성인 title을 사용하면 준말의 전체 뜻이나 설명을 제공할 수 있습니다. title 속성은 전체 설명만을 가져야 하며 다른건 포함할 수 없습
developer.mozilla.org
예시)
<p>ex1 <abbr title="HyperText Markup Language">html</abbr></p><br>
<p>ex2 <dfn id="def_html">html</dfn> 이란 웹사이트의 모습을 기술하기 위한 마크업 언어.</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<p>그래서 우리는 </p><a href="#"def_html">html</a>을 사용한다</p>
<br><br>
<p>ex3 <dfn><abbr title="HyperText Markup Language">html</abbr></dfn> <abbr title="HyperText Markup Language"> html</abbr></p>
출력결과
예시1)
예시2)
예시3)
목록을 나타내는 태그들
● <ul> (unordered list) , <ol> (ordered list), <li> (list)
사용법)
<ul> content </ul>
<ol> content </ol>
<li> content </li>
설명)
1. <ul> 요소는 정렬되지 않은 목록, <ol> 요소는 정렬된 목록을 나타냄. 그래서 항목의 순서를 바꿨을 때 의미도 바뀐다면 <ol>을 사용
2. <ul>과 <ol>은 필요한 만큼 중첩할 수 있고, 서로 교차할 수도 있음.
3. <ol>, <ul> 태그 사이에 필요한 목록 개수만큼 <li>를 추가하는 방식으로 해야함을 주의
4. <ol> 태그는reversed , start, type 처럼 순서와 관련된 속성(attributes) 사용
5. 들여쓰기를 하기 위한 목적으로 <ol> (또는 <dl>) 요소를 사용하면 안됨. 작동할 수는 있으나 좋지 않은 방법이고, 설명 목록의 원래 목적을 흐립니다.
(추가설명)
https://developer.mozilla.org/ko/docs/Web/HTML/Element/ul https://developer.mozilla.org/ko/docs/Web/HTML/Element/ol https://developer.mozilla.org/ko/docs/Web/HTML/Element/li
예시)
ex1.
<h1>계란볶음밥 만들기</h1>
<ol>
재료 준비
<ul>
밥
</ul>
<ul>
계란
</ul>
<ul>
파
</ul>
<ul>
간장
</ul>
</ol>
출력결과1
ex2.
<h1>계란볶음밥 만들기</h1>
<ol>
<li>재료 준비</li>
<ul>
<li>밥</li>
<li>계란</li>
<li>파</li>
<li>간장</li>
</ul>
</ol>
출력결과2
용어와 정의 나열하기
● <dl> (definition list), <dt> (definition term), <dd> (definition discription)
사용법)
<dl> tag </dl>
<dt> content </dt>
<dd> content </dd>
설명)
1. <dl> 요소는 설명 목록을 나타냄. 주로 용어사전 구현이나 메타데이터(키-값 쌍 목록)를 표시할 때 사용
2. <dl>은<dt>로 표기한 용어와<dd>요소로 표기한 설명 그룹의 목록을 '감싸서' 설명 목록을 생성 . 그래서 <dt>,<dl>은 <dl> 요소 안에 위치
3. <dt> 요소는 설명 혹은 정의 리스트에서 용어를 나타냄. 보통 <dd> 요소가 뒤따르지만, 여러 개의 <dt> 요소를 연속해 배치하면 바로 다음 <dd> 요소 대신 서술가능.
4. 들여쓰기를 하기 위한 목적으로<dl>(또는<ul>) 요소를 사용하면 안됨. 작동할 수는 있으나 좋지 않은 방법이고, 설명 목록의 원래 목적을 흐립니다.
(추가설명)
https://developer.mozilla.org/ko/docs/Web/HTML/Element/dl https://developer.mozilla.org/ko/docs/Web/HTML/Element/dt https://developer.mozilla.org/ko/docs/Web/HTML/Element/dd
예시)
<dl>
<dt>HTML</dt>
<dd>
프로그래밍 언어가 아니라 마크업 정보를 표현하는 마크업 언어로 문서의
내용 이외의 문서의 구조나 서식 같은 것을 포함한다.
</dd>
</dl>
출력결과
● <img> (image)
사용법)
<img> content
설명)
1. <img> 요소는 문서에 이미지를 넣음. 다양한 속성을 사용함
주로 <img src="(이미지 파일 경로)" alt="(대체 텍스트)" title="(툴팁 텍스트)"> 형태로 사용됨
<img> 에서 자주사용하는 속성(attributes)
| 속성( attributes) | 설명 | 비고 |
| src (source) | 이미지로의 경로를 지정 | |
| alt (alternative) | 이미지를 텍스트로 설명 | 스크린 리더가 alt의 값을 읽어 사용자에게 이미지를 설명. 네트워크 오류, 콘텐츠 차단, 죽은 링크 등 이미지를 표시할 수 없는 경우에도 이 속성의 값을 대신 보여 |
| title | 튤팁( 즉 사용자가 커서를 이미지 위에 올리고 가만히 있으면 짧은 시간 뒤에 나타나는 형태로 표현) | alt의 값을 title에도 반복하는 것을 피해야함. 왜냐하면 같은 값을 지정할 경우 일부 스크린 리더가 설명을 두 번씩 읽게 되므로 사용자가 혼란 내용을 넣지않더라도 alt=''으로 공백을 넣어햐함. 그렇지 않으면 스크린리더가 src값을 읽음 |
| width | 너비 | 픽셀 기준 고유 너비. 단위 없는 정수로 작성 |
| height | 높이 | 픽셀 단위의 이미지의 고유 크기. 단위 없는 정수로 작성 |
| importance | 리소스의 상대적인 다운로드 중요도 표현 | auto: 설정 안함. 이때는 브라우저가 자체 휴리스틱을 사용해 이미지의 우선순위를 결정. high: 이미지가 높은 우선순위를 지님. low: 이미지가 낮은 우선순위 |
2. img는 src속성은 필수로 사용. src 관련 자세한 내용은 이래 글 참고
2023.07.20 - [프론트 엔드 (front-end)/HTML] - 태그 src 속성(attributes) 이미지 파일 경로 지정 방법 (+미완)
+) 이미지를 링크로 바꾸는 방법은 단순히 <img> 태그를 <a> 안에 넣으면 가능
(추가자료) https://developer.mozilla.org/ko/docs/Web/HTML/Element/img
<img>: 이미지 삽입 요소 - HTML: Hypertext Markup Language | MDN
HTML <img> 요소는 문서에 이미지를 넣습니다.
developer.mozilla.org
예시)
<img src="favicon144.png"
alt="MDN logo">
출력결과
표 만들기
● <table>. <caption>, <thead>, <tbody>, <tfoot>, <tr>, <th>, <td>
사용법)
<table> tag </table>
<caption> content </caption>
<thead> tag </thead>
<tbody> tag </tbody>
<tfoot> tag </tfoot>
<tr> tag </tr>
<td> content </td>
설명)
1. 표 만들기에선 사용되는 태그들의 순서가 중요하기 때문에 사용되는 태그의 위계가 같거나 작아지는 방향으로 작성
| 태그 | 설명 | 비고 |
| <table> | 행과 열로 이루어진 표 선언 | 표를 만든다는 것을 선언하는 태그로 이 태그 사이에 표와 관련된 태그,속성 넣음 |
| <caption> | 표의 설명 또는 제목 | 꼭 사용할 필요는 없지만 사용한다면 <table> 요소의 첫 번째 자식이 되함 |
| <thead> | 테이블의 헤더부분 선언 | 무조건 <caption> 또는 <colgroup> 요소 뒤에 (암시적으로 정의된 경우에도) 위치해야 하지만, <tbody>, <tfoot> 과 <tr> 요소의 앞에 위치 |
| <tbody> | 테이블의 본문을 선언 | <caption>, <colgroup>, <thead> 요소가 존재하는 경우, 그 뒤에 위치. 다수의 <tbody>를 연속적으로 사용할 수 있고 이를 통해 커다란 표의 행을 구획으로 나눌 수 있어. 필요한 경우 각 구획에 서로 다른 서식을 적용. |
| <tfoot> | 테이블의 푸터 부분 | 무조건 <caption>, <colgroup>, <thead>, <tbody>, 또는 <tr> 요소 뒤에 위치 |
| <tr> | 테이블의 행 | |
| <th> | 열 또는 행의 헤더 | scope 속성으로 row(행), col(열) 중 선택 <th scope='col(열) row(행)' > |
| <td> | 테이블의 데이터 셀 |
예시1)
2. 복잡한 표의 경우는 <td> 태그에 속성 colspan, lowspan 이 들어간 경우다
| 속성 (attributes) | 설명 |
| colspan | 열 병합 |
| rowspan | 행 병합 |
<td colspan='합칠개수' rowspan='합칠개수'> 형식을 이용. 이때 colspan , rowspan 동시에 사용 가가능
예시2)
<head>
<link
rel="stylesheet"
href="https://showcases.yalco.kr/html-css/01-06/table.css"
/>
</head>
<body>
<table>
<tr>
<td>1</td>
<td colspan="2">2</td>
<td>1</td>
</tr>
<tr>
<td rowspan="3">3</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td colspan="2" rowspan="2">4</td>
</tr>
<tr>
<td>1</td>
</tr>
</table>
</body>
출력결과
(추가자료)
https://developer.mozilla.org/ko/docs/Web/HTML/Element/table https://developer.mozilla.org/ko/docs/Web/HTML/Element/caption https://developer.mozilla.org/ko/docs/Web/HTML/Element/thead https://developer.mozilla.org/ko/docs/Web/HTML/Element/tbody https://developer.mozilla.org/ko/docs/Web/HTML/Element/tfoot https://developer.mozilla.org/ko/docs/Web/HTML/Element/tr https://developer.mozilla.org/ko/docs/Web/HTML/Element/th https://developer.mozilla.org/ko/docs/Web/HTML/Element/td
<td> - HTML: Hypertext Markup Language | MDN
Table cell HTML 요소 (<td>) 는 데이터를 포함하는 표의 셀을 정의합니다. 이것은 표 모델에 참여합니다.
developer.mozilla.org
● <a>
사용법)
<a> content </a>
설명)
1. <a href="(연결할 주소)" target="(링크를 열 곳 옵션)"> 이떄 링크를 열 곳 옵션은 _self, _blank, _parent, _top 구별
| target 속성(attributes) 값 | 설명 |
| _self | 현재 창 |
| _blank | 새로운 창 |
| _parent | 부모 프레임 |
| _top | 최상위 프레임 |
2. href 이용 특정요소로 이동 by 속성 id값 : 속성인 id= "고유값" 으로 설정 후 사용할 때 <a href = #고유id값> </a> 구조로 사용
(추가자료) https://developer.mozilla.org/ko/docs/Web/HTML/Element/a
예시)
ex1.
<p><a href="https:google.com" target="_blank">구글</a>로 이동하기</p>
출력결과1
ex2.
<p><a href="#target_70">target_70</a> 으로 이동하기</p>
p#target_${id: target_$}*100
<!-- 위 2번째 줄의 emmet표현은 아래와 같다.
<p id="target_1">id: target_1</p>
<p id="target_2">id: target_2</p>
<p id="target_3">id: target_3</p>
....... -->위 코드는 vsc의 emmet을 이용해 간단하게 표현.
#은 고유 id를 쓸때 앞에 붙이고, $는 연속적인 숫자, {}는 태그속 content입력
출력결과2
+) <href>의 id 와< lable>의 for 값을 같게해 input의 클릭 영역 확장시켜 편리
● <address>
사용법)
<address> content </address>
설명)
1. 태그 속 content에 사람, 단체, 조직 등에 대한 연락처 정보를 나타냄.
반드시 포함해야 하는 정보는 연락처가 가리키는 개인, 조직, 단체의 이름을 넣어야 함.
연락처 정보는 현재 맥락에 적절한 아무 형태나 취할 수 있으며, 물리적 주소, URL, 이메일 주소, 전화번호, SNS 식별자, 좌표 등 어떠한 정보라도 포함할 수 있음.
2. mailto: , tel: 이용해서 코드 작성시 누르면 해당 메일,전화로 연결가
예시)
<address>
<p>이름: 김아무개</p>
<p>나이: 만23세</p>
<p>전공: 인공지능학과</p>
<p>소속: 전남대학교</p>
<a href="tel:01012345678">
<p>전화번호: 01012345678</p>
</a>
<a href="mailto:kimeverybody@gmail.com">
<p>이메일: kimeverybody@gmail.com</p>
</a>
</address>
출력결과
사용자한테 입력받기 1 (tags ver.)
● <filedset>, <form>, <input>, <label>, <button>
사용법)
<filedset> tags </fieldset>
<form> tags </form>
<input> content </input>
<label> content </label>
<button> content </button>
설명)
태그별 사용되는 대표적인 속성
(표 밑으로 내려갈 수록 위계가 같거나 작아짐)
| 태그 | 자주 사용되는 속성, 태그 | 설명 |
| <form> | autocomplete, method(HTTP method 4가지중 하나를 속성값으로 씀) action |
autocomplete(자동완성)은 기본값으로 이 속성값을 'off'로 할 경우 꺼짐. <form>사용 없이 아래 태그들과 속성을 사용할때 적용이 안되는 경우가 있으니 입력관련 태그들과 반드시 사용하기 action 속성은 <form양식 속 데이터를 처리할 프로그램의 URI. <button>, <input type="submit"> , <input type="image">등 요소의 formaction 특성으로 재정의( ex. 폼 데이터(form data)를 서버로 보낼 때 해당 데이터가 도착할 URL을 명시) |
| <filedset> | disabled, <legend> | 이 태그를 사용하는 이유는 disabled를 이용해 입력요소를 비활성화 시키기 위함. <legend> 그 <fieldset> 부요소의 제목 또는 설명을 표현가능 |
| <input> | type,placeholder, maxlength, minlength ; name, value,checked ; autofocus |
type 속성값으로는 text, password, search, tel, number, range, date , checkbox, radio, submit file 등 존재. placeholder는 입력 전 빈칸에 보이는 안내문 maxlength, minlength는 입력 가능한 최대,최소 글자길이 name, value는 type의 radio 속성값일 때도 사용할 수 있는 속성으로 name은 radio의 속성인 같은 범위 중 하나만 선택을 위한 범위를 정함 value는 입력값이 서버로 넘어갈 때 실제로 넘겨질 값 +) radio없을 때는 입력값을 미리 지정으로 위의 placeholder와는 다름 주의 checked는 radio 속성값일 때만 사용가능하고 체크박스들 중 웹 사이트 접속시 자동으로 체크되게 만듦 file이란 type의 속성값에서 accpet 속성으로 받아들일 수 있는 파일 형식을 지정하고, multiple 속성으로 여러개의 파일을 받을 수 있게 함. autofocus는 웹페이지 첫 접속시 가리킬 입력칸을 지정 |
| <label> | for | |
| <button> | type | type의 속성 값으로 summit(제출), reset(초기화) , button(동작없음) 존재. |
+) <input> 과 <label> 을 같이 쓰면 이점이 존재.
첫번 째로 웹사이트 상 lable을 클릭해도 input의 클릭영역을 확장시킬 수 있음. 그방법은 아래와 같다.
<input> 에 id 속성값을 넣고 <label> 에 id 와 같은 값의 for 속성을 넣는다. 또는
<label> 안에 <input> 을 중첩시켜서 for 및 id속성을 사용하지 않고 연관지을 수 있다.
(추가자료)
https://developer.mozilla.org/ko/docs/Web/HTML/Element/form https://developer.mozilla.org/ko/docs/Web/HTML/Element/fieldset https://developer.mozilla.org/ko/docs/Web/HTML/Element/Input https://developer.mozilla.org/ko/docs/Web/HTML/Element/label https://developer.mozilla.org/ko/docs/Web/HTML/Element/button
예시)
ex1
<form action="">
<fieldset>
<legend>훈련병</legend>
<label for="solider_1">중대장 훈련병 이름</label
><input id="solider_1" type="text" />
<button type="submit">제출</button>
<button type="reset">초기화</button>
<label for="solider_2">소대장 훈련병 이름</label
><input id="soldier_2" ="text" />
<button type="submit">제출</button>
<button type="reset">초기화</button>
</fieldset>
<fieldset disabled>
<legend>간부</legend>
<label for="general_1">중대장 이름</label
><input id="general_1" type="text" />
<button type="submit">제출</button>
<button type="reset">초기화</button>
<label for="general_2">소대장 이름</label
><input id="general_2" type="text" />
<button type="submit">제출</button>
<button type="reset">초기화</button>
</fieldset>
</form>
출력결과1
ex2. input 속성들 이용
<form action="">
<label for="">text</label>
<input type="text" placeholder="5자 이하" maxlength="5" />
<label for="">password</label
><input
type="password"
placeholder="5자리이상"
minlength="5"
/><br /><br /><br />
<label for="">search</label>
<input type="search" />
<label for="">tel</label><input type="tel" />
<label for="">number</label><input type="number" /><br />
<button type="summit">제출</button><br />
<label for="">range</label><input type="range" /><br />
<label for="">date</label><input type="date" />
</form>
출력결과2
ex3. 체그박스(checkbox) 이용예제
<label for=""><h2>제20대 대통령 선거 후보</h2></label><br />
<input type="radio" name="candidate" value="num1" checked />윤셕열
<input type="radio" name="candidate" value="num2" />이재명
<input type="radio" name="candidate" value="num3" />심상정
<input type="radio" name="candidate" value="num4" />안철수 <br /><br />
<label for="">radio 없는 value</label
><input type="text" value="value는 입력값을 지정" />name은 대통령 후보를 의미하는 candidate , value는 당시 기호번호에 따라 num$으로 성
출력결과3
● <br>
3.
사용법)
<br>
설명)
p태그와 마찬가지로 줄바꿈의 기능을 갖고 있어 br을 대신 사용할 수 있지만 구조와 특성을 쉽게 파악하기 위해서는 br 태그를 남용하기보다 적절히 p태그와 섞어서 사용하는 것이 바람직하다
- <hr>
<hr>
- <title>
<title> content </title>웹 페이지 본문에 나타나지 않는 <head> tag에 속하는 태그
브라우저의 제목 표시줄이나 페이지 탭에 보이는 문서 제목을 정의
title 태그를 사용하지 않으면 브라우저는 html 문서로 인정하지 않기 때문에 반드시 사용해야함. 이때 그 html 문서에서 딱 한번만 사용 가능함.
- <meta>
<meta attributes />웹 페이지에 대한 추가적인 정보인 메타데이터(metadata)를 제공하고자 할 때 사용.
<meta> 요소는 <base>, <link>, <script>, <style>, <title> 요소와 같은 다른 메타데이터 관련 요소들이 나타낼 수 없는 다양한 종류의 메타데이터를 제공할 때 사용되며, 이렇게 제공된 정보는 브라우저나 검색 엔진, 다른 웹 서비스에서 사용
<head> 태그 내에서만 사용 가능함
추가적인 특성(attributes)를 사용( ex. charset, keywords, date, location )
meta 태그는 자체 닫기 태그(self-closing-tag)로 다른 tag와 형식이 다른게 특징
- <link>
<link attributes />해당 문서와 외부 소스(external resource) 사이의 관계를 정의
<head> 요소 내부에만 위치
추가적인 특성(attributes)를 사용( ex. sizes, rel, href)
- <form>
<form attributes> content </form>
- <b>
사용법)
<b> content </b>
설명)
1. 특별한 중요성을 갖지 않지만 텍스트를 그저 굵은 글씨체로 강조하고 싶을 때 사용.
그래서 중요하다고 여기는 것들은 CSS font-weight를 사용해 굵은 글씨체를 적용하거나, <strong> 태그를 사용해 특별히 중요한 텍스트를 나타내는 것이 바람직하다.
아무런 의미도 갖지 않으므로 이와 비슷한 <b>요소로만 제목을 만들어선 안된다. 그래서 제목은 <h1>에서<h6>태그로 표현해야함.
2. 과거에 <b> 요소는 굵을 글씨를 만들 때 사용했음. 그래서 새로 나오는 혹은 업데이트 될 브라우저에서는 <b>태그가 적용 안될 수 있기 때문에 반드시 CSS를 사용해 굵은 글씨체를 적용시킨다.
(참고) https://developer.mozilla.org/ko/docs/Web/HTML/Element/b
예시)
<p>i am <b> gay</b></p>
출력결과
- <strong>
사용법)
<strong> content </strong>
설명)
1. 전체 페이지에서 매우 중요한 문장 혹은 주변 콘텐츠에 비해 더 중요하다는 점을 강조할 때 사용.
2. 기본적으로 굵은 글꼴 두께를 사용하여 표현됩니다.
3. <b> 와 마찬가지로 브라우저에서 똑같이 굵은 글꼴로 표현되지만 <strong>는 더 중요한 내용을 표현하기 위한 것이고 요소 <b>는 텍스트에 주의를 끌기 위해 사용
4. 단순히 장식을 위해 텍스트를 굵게 표시하려면 대신 CSS font-weight속성을 사용해야 함.
(추가자료) https://developer.mozilla.org/ko/docs/Web/HTML/Element/strong
예시)
<p>i am <b> gay</b> </p>
<p>i am <strong>gay</strong> </p>
출력결과
- <i> (italic)
사용법)
<i> content </i>설명)
1. 특별한 중요성을 갖지 않지만 텍스트를 기울임꼴로 표시하고 싶을 때 사용
2. 초기 HTML 명세의 <i> 요소는, <b> 요소가 굵은 글씨 적용에 그쳤던 것과 마찬가지로, 글자를 기울이기만 하는 단순한 시각적 요소였지만
지금은 글자 외형에 그치지 않고 아이콘을 만들기, 다른폰트 사용, 분위기나 음성을 위한 텍스트 영역을 정의하는 것과 같은 특정한 의미를 지니기 때문에 시각적인 강조에 그치지 않는다. 그래서 단순히 기울임꼴을 적용하기 위한 용도로 사용해서는 안됨.
즉, css를 적용시키기 위한 content 임을 알려주는 용도로 이용
(추가자료) https://developer.mozilla.org/ko/docs/Web/HTML/Element/i
예시)
<p>
르네상스 화가들로는 <i>레오나르도 다빈치, 도나텔로, 카라바조</i>가 존재했습니다.
</p>
출력결과
- <em>(emphasized text)
사용법)
<em> content </em>
설명)
1. 내용을 강조하며 기울임꼴을 표현할 때 사용. 그래서 단순히 기울임꼴이 필요해서 <em>을 사용하면 안됨.
2. 기울임꼴과 관련해 쓰는 경우를 정리하자면 저작물(책, 연극, 음악 등등)의 제목은 <cite>, 학명 등 과학적인 이름이나 다른 언어의 단어 등, 주변과 다른 톤을 가진 텍스트에는 <i>를 사용
이처럼 html은 요소 선택은 상황에 따라 달라야 하며, 순수하게 꾸밈을 위한 요소는 없음. 스타일은 반드시 CSS에 맡겨야함.
(추가자료) https://developer.mozilla.org/ko/docs/Web/HTML/Element/em
예시)
<p>그의 이름은 <em>볼드모트</em>다.</p>
출력결과
- <sup> (superscript)
사용법)
<sup> content </sup>
설명)
1. 일반 텍스트 라인보다 윗쪽에 절반 크기의 작은 문자로 표현되며 지수나 서수, 프랑스어의 superior letter를 위한 위 첨자를 표시할 때 사용
2. 반드시 타이포그래피적인 이유에 맞춰서만 사용해야함. 즉 기존의 관례나 표준이 위 첨자로 나타내는 경우를 말하며, 단순히 작은 글자를 위로 올려야 할 때는 사용해서는 안됨.
3. 위 첨자와 아래 첨자를 나타내는 <sub> 태그가 같이 사용할 수 없음. 따라서 화학의 질량수/원자 번호 표기 등을 구현하려면MathML이 필요
(추가자료) https://developer.mozilla.org/ko/docs/Web/HTML/Element/sup
예시)
<p>
x<sup>3</sup> <br /><br />
"mademoiselle"는 축약해서 "M<sup>lle</sup>" 로 표현 <br /><br />
4<sup>th</sup>
</p>
출력결과
- <sub> (subscript)
사용법)
<sub> content </sub>
내용)
1. 일반 텍스트 라인보다 아래쪽에 절반 크기의 작은 문자로 표현되며 각주, 변수, 화학식 을 위한 아래첨자를 표시할 때 사용
2. 반드시 타이포그래피적인 이유에 맞춰서만 사용해야 함. 즉 기존의 관례나 표준이 아래 첨자로 나타내는 경우를 말하며, 단순히 작은 글자를 아래로 올려야 할 때는 사용해서는 안됨.
3. 위 첨자를 나타내는 <sup> 태그와 아래 첨자가같이 사용할 수 없음. 따라서 화학의 질량수/원자 번호 표기 등을 구현하려면 MathML이 필요
(추가자료) https://developer.mozilla.org/ko/docs/Web/HTML/Element/sub
예시)
<p>
이재용<sub>1</sub> 에 대한 자세한 설명은 각주 참고 <br /><br />
x <sub>1</sub> ... x <sub>n</sub> <br /><br />
C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>
</p>
출력결과 (수정 사진 다시 넣기)
- <u>
사용법)
<u> content </u>
설명)
1. 예전에는 밑줄 용도로 사용 되었으며 지금도 밑줄을 추가 할 목적으로 남용되고 있다. 그러나 밑줄을 이용하기 위해서는 css text-decoration 속성을 underline 대신 이용해야함.
2. 현재 css 와 함께 사용하면 빨간색 물결모양의 철자 오류 표시를 표현할 수 있음.
3. <u> 의 유효한 사용처는 철자 오류 강조, 중국어의 고유명사 표시 등이 있음. <u>를 사용해 밑줄만 추가하거나, 책 제목 등을 강조하면 안됨. 아무런 의미를 나타내지 않고 밑줄만 추가할 경우 <span> 를 사용하고, css 의 text-decoration 속성의 값은 underline으로 지정
4. <u>와 하이퍼링크 둘 다 기본 스타일이 밑줄이므로, <u>를 기본 스타일로 사용하는건 피해
(추가자료) https://developer.mozilla.org/ko/docs/Web/HTML/Element/u
예시)
<p>
You could use this element to highlight <u>speling</u> mistakes, so the writer
can <u>corect</u> them.
</p>
출력결과
- <s>
사용법)
<s> content </s>
설명)
1. 글자에 취소선, 즉 글자를 가로지르는 선을 그림. <s> 태그를 사용해 이제 관계 없거나 더 이상 정확하지 않은 부분을 나타냄
2. <s>는 문서의 편집 기록을 나타내는 용도로는 적합하지 않음. 상황에 따라 <del>과 <ins> 태를 대신 사용
3. CSS content속성과::before,::after 의사 요소를 사용하면 소리내어 읽도록 할 수 있습니다.
(추가자료) https://developer.mozilla.org/ko/docs/Web/HTML/Element/s
예시)
<p><s>꿀수박</s>SOLD OUT!</p>
출력결과
인용문과 관련된 태그들
● <blockquote> , <q>, <mark>
사용법)
<blockquote> content </blockquote>
<p> content </p>
<mark> content </mark>
설명)
1. <blockquote> 태그는 안쪽의 텍스트가 긴 인용문임을 나타냅니다. 주로 들여쓰기를 한 것으로 그려짐.그리고 인용문의 출처 URL은 cite 특성으로, 출처 텍스트는 <cite> 태그로 제공
참고로 cite 특성은 인용문의 출처 문서나 메시지를 가리키는 URL. 인용문의 맥락 혹은 출처 정보를 가리킬 용도로 쓰임
2. <q>태그는 둘러싼 텍스트가 짧은 인라인 인용문이라는것을 나타냅니다. 대부분의 브라우저에서는 앞과 뒤에 따옴표를 붙여 표현. <q>는 줄 바꿈이 없는 짧은 경우에 적합.
3. <mark>태그는 현재 맥락에 관련이 깊거나 중요해 표시 또는 하이라이트한 부분. 그리고 ctrl +f 로 검색할때 알려주는 형광색과 같은 색상.
이때 <mark>를 표시만을 위한 용도로 사용x . <span>과 적절한 CSS를 대신 사용
+)참고: <mark>와 <strong> 요소의 차이점을 기억!. 텍스트에서, <mark>는 연관성을 가진 부분을, <strong>은 중요도를 가진 부분을 나타낼 때 사용
(추가자료)
https://developer.mozilla.org/ko/docs/Web/HTML/Element/blockquote#attr-cite https://developer.mozilla.org/ko/docs/Web/HTML/Element/q https://developer.mozilla.org/ko/docs/Web/HTML/Element/mark
예시)
ex1.
<body>
들여쓰기x
<blockquote cite="https://www.couponpx.com/qna/9736">
<p>
길이 이끄는 대로 가지마라. 대신 길이 없는 곳으로 가서 발자국을 남겨라
</p>
<cite>Ralph Waldo Emerson</cite>
</blockquote>
출력결과1.
ex2.
들여쓰기x
<p>
눈앞에서 금메달을 놓친 나는 무릎에 피가 계속 나고 있었지만 내 눈물도 계속
흘렀다. 이때 코치께서
<q
cite="https://post.naver.com/viewer/postView.nhn?volumeNo=27759017&memberNo=27904625"
>연은 순풍이 아니라 역풍에 가장 높이 난다.</q
>라고 말씀하셨다.
</p>출력결과2
ex3.
들여쓰기x
<p>돌아올때 <mark>우유</mark>사는거 잊지마!</p>
출력결과3
이 이상의 글 작성시 렉이 많이 걸려서 더 많은 정보는 아래 2탄을 참고해주세요.
HTML Tag(태그) , attributes(속성) 자세한 설명 모음 2 (+ 23.8.5 uppdate )
head 에 들어가는 태그(tag)들 ● ● ----> 얄코 문자 인코딩 참고 / 웹페이지에서 문자가 깨지면 vsc 애서 인지 확인/ 속성중 name의 값인 viewpoint는 꼭 넣어서 모바일에서의 가독성 높이고 viwpoint와 관
gururuglasses.tistory.com
'프론트 엔드 (front-end) > HTML' 카테고리의 다른 글
| HTML Tag(태그) , attributes(속성) 자세한 설명 모음 2 (+ 시멘틱태그 추가 ) (0) | 2023.08.05 |
|---|---|
| <img> 태그 src 속성(attributes) 이미지 파일 경로 지정 방법 (+미완) (0) | 2023.07.20 |
| html 특수문자 모음 (Entity Code References) (0) | 2023.07.12 |
| ( + 미완성) 에밋(Emmit)과 약어(Abbreviation)를 이용한 html code 쉽게 작성하는 방법 모음 (0) | 2023.07.10 |
| (+ 미완성) VSC (visual studio code) 유용한 단축키 모음 (0) | 2023.07.03 |
