나중에 내가 다시 보려고 정리하는 패스트캠퍼스 리액트 강의 중 HTML & CSS
강의자료: 한 눈에 보는 HTML 요소 총정리
강의영상: 패스트캠퍼스 프론트엔드 개발 올인원 패키지 with React Online https://fastcampus.co.kr/
1. 인라인 텍스트 태그
◽️ <a>
- Anchor, 외부로 내보내기
- 다른 페이지, 같은 페이지 위치(#, 해시 태그), 파일, 이메일 주소, 전화번호 등 다른 URL로 연결할 수 있는 하이퍼링크를 설정
- 같은 페이지 내에서 위치를 이동하려면 href="#(id값)"을 추가
속성 | 의미 | 값 |
href(생략 가능하긴 함) | 링크 URL | URL |
rel | 현재 문서와 링크 URL의 관계 | license, prev, next… |
target | 링크 URL의 표시(브라우저 탭) 위치 | _self(현재 탭), _blank(새로운 탭) |
download | 이 요소가 리소스를 다운로드하는 용도로 사용됨을 의미 | 불린(boolean) (download) |
✔️ <a> 태그를 이용해서 버튼을 만들려고 할 때는 a 태그가 인라인 요소이므로 반드시 블록요소로 바꿔야 한다! (display: block;)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML Elements</title>
<link rel="stylesheet" href="./main.css">
</head>
<body>
목차
<ul>
<li><a href="#title1">제목1</a></li>
<li><a href="#title2">제목2</a></li>
</ul>
<h2 id="title1">제목1</h2>
<h2 id="title2">제목2</h2>
<h2 id="title3">제목3</h2>
</body>
</html>
◽️ <abbr>
- 약어를 지정
- Abbreviation, 보통 title 속성은 전역 속성으로 전체 글자나 설명을 제공
<body>
Using <abbr title="Hyper Text Markup Language">HTML</abbr> is fun and easy!
</body>
◽️ <b>
- 문체가 다른 글자의 범위를 설정 (Bring Attention)
- 특별한 의미를 가지지 않음.
- 읽기 흐름에 도움을 주는 용도로 사용.
- 다른 태그가 적합하지 않은 경우 마지막 수단으로 사용.
- 기본적으로 글자가 두껍게(Bold) 표시됨.
◽️ <mark> 의미<시각적 효과를 위해
- 사용자의 관심을 끌기 위해 하이라이팅할 때 사용.
- Mark Text, 형광펜을 사용하여 관심있는 부분을 표시하는 것과 같은 의미
- 기본적으로 형광펜을 사용한 것처럼 글자 배경이 노란색(Yellow)으로 표시됨.
◽️ <em>
- 단순한 의미 강조를 표시. (Emphasis)
- 중첩이 가능.
- 중첩될수록 강조 의미가 강해짐.
- 정보통신보조기기 등에서 구두 강조로 발음됨.
- 기본적으로 이탤릭체(Italic type)로 표시됨.
◽️ <strong>
- 의미의 중요성을 나타내기 위해 사용 (Strong Importance)
- 기본적으로 글자가 두껍게(Bold) 표시됨.
◽️ <i>
- 평범한 글자와 구분(아이콘이나 특수기호 같은)하기 위해 사용
- <em>, <strong> <mark> <cite> <dfn> 등에서 표현할 수 있는 적합한 의미가 아닌 경우 사용
- 기본적으로 이탤릭체(Italic type)로 표시됨.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML Elements</title>
<script src="https://use.fontawesome.com/releases/v5.2.0/js/all.js"></script>
<link rel="stylesheet" href="./main.css">
</head>
<body>
<cite>The Scream</cite> by Edward Munch. Painted in 1893.
<p>
<b>1절</b>
<i class="fas fa-bars"></i>
<mark>동해물과</mark> 백두산이
하느님이
<b>2절</b>
남산 위에 저 소나무
<em><em>바람서리</em> 불변함은</em>
<b>3절</b>
<strong>가을 하늘 공활한데</strong>
밝은
<b>4절</b>
이 기상과
이 맘으로
<b>(후렴)</b>
무궁화 삼천리 화려강산
대한사람 대한으로
</p>
</body>
</html>
◽️ <dfn>
- 용어를 정의할 때 사용 (Definition)
◽️ <cite>
- 창작물에 대한 참조를 설정
- 책, 논문, 영화, TV 프로그램, 노래, 게임 등의 제목
- 기본적으로 이탤릭체로 표시됨
◽️ <q>
- 짦은 인용문을 설정 (Inline Quotation)
- 긴 인용문을 설정할 경우 <blockquote>를 사용
- 인용된 정보의 URL 값을 담고 있는 속성 cite가 있음
◽️ <u>
- 밑줄이 있는 글자를 설정 (Underline)
- 대부분 css에서 대신 활용할 수 있으므로 <u>태그를 쓰는 것을 권장하지 않음
- 순수하게 꾸미는 용도의 요소로 사용
- <a>와 헷갈릴 수 있는 위치에서 사용하지 않도록 주의
- <span style="text-decoration: underline;">을 활용할 수 있을 경우에는 사용을 권장하지 않음
◽️ <code>
- 컴퓨터 코드 범위를 설정 (Inline Code)
- 기본적으로 고정폭(Monospace) 글꼴 계열로 표시됨
◽️ <kbd>
- 텍스트 입력 장치(키보드)에서 사용자 입력을 나타내는 텍스트 범위를 설정 (Keyboard Input)
◽️ <sup>, <sub>
- 위 첨자(<sup>)와 아래 첨자(<sub>)를 설정 (Superscripted text, Subscript text)
◽️ <time>
- 날짜나 시간을 나타내기 위한 목적으로 사용.
- 속성: datetime 값: ex)2021-07-13
- IE 지원 불가
◽️ <span>
- 본질적으로 아무것도 나타내지 않는 콘텐츠 영역을 설정하는 역할로 <div> 태그와 비슷하게 사용
- 대표적인 inline 요소
- 텍스트를 사용할 때 특화되어 있어 막 사용할 수 있음
◽️ <br/>
- 줄바꿈을 설정
- 빈 태그
- 글자 사이의 간격을 만들기 위해 사용하는 건 절대 하면 안됨!!! ~> css에서 line-height 지정
2. 수정 태그
◽️ <del>
- 삭제된(변경된) 텍스트의 범위를 지정
속성 | 의미 | 값 |
cite | 변경을 설명하는 리소스의 URI | URL |
datetime | 변경이 일어난 유효한 날짜 문자 | Date |
◽️ <ins>
- 새로 추가된(변경된) 텍스트의 범위를 지정
속성 | 의미 | 값 |
cite | 변경을 설명하는 리소스의 URI | URL |
datetime | 변경이 일어난 유효한 날짜 문자 | Date |
'Develop > HTML & CSS' 카테고리의 다른 글
Part8. HTML 요소 - 표 콘텐츠 & 양식 (0) | 2021.07.16 |
---|---|
Part7. HTML 요소 - 멀티미디어 & 내장콘텐츠 & 스크립트 (0) | 2021.07.16 |
Part5. HTML <body> 요소 - 콘텐츠 구분 & 문자 콘텐츠 (0) | 2021.07.10 |
Part4. HTML 요소 - 주요범위 & 메타데이터 (0) | 2021.07.10 |
Part3. HTML & CSS 첫걸음/CSS (0) | 2021.07.04 |