Part6. HTML 요소 - 인라인 텍스트 & 수정

Develop/HTML & CSS

Part6. HTML 요소 - 인라인 텍스트 & 수정

마크투비 2021. 7. 10. 22:25

나중에 내가 다시 보려고 정리하는 패스트캠퍼스 리액트 강의 중 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>

◽️ 

- 문체가 다른 글자의 범위를 설정 (Bring Attention)

특별한 의미를 가지지 않음.
읽기 흐름에 도움을 주는 용도로 사용.
다른 태그가 적합하지 않은 경우 마지막 수단으로 사용.
기본적으로 글자가 두껍게(Bold) 표시됨.

◽️  의미<시각적 효과를 위해

- 사용자의 관심을 끌기 위해 하이라이팅할 때 사용.
- Mark Text, 형광펜을 사용하여 관심있는 부분을 표시하는 것과 같은 의미

기본적으로 형광펜을 사용한 것처럼 글자 배경이 노란색(Yellow)으로 표시됨.

◽️ 

- 단순한 의미 강조를 표시. (Emphasis)

중첩이 가능.
중첩될수록 강조 의미가 강해짐.
정보통신보조기기 등에서 구두 강조로 발음됨.
기본적으로 이탤릭체(Italic type)로 표시됨.

◽️ 

- 의미의 중요성을 나타내기 위해 사용 (Strong Importance)

기본적으로 글자가 두껍게(Bold) 표시됨.

◽️ 

- 평범한 글자와 구분(아이콘이나 특수기호 같은)하기 위해 사용

- , <cite> <dfn> 등에서 표현할 수 있는 적합한 의미가 아닌 경우 사용

- 기본적으로 이탤릭체(Italic type)로 표시됨.

i tag icons fontawesome

<!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가 있음

◽️ 

- 밑줄이 있는 글자를 설정 (Underline)

- 대부분 css에서 대신 활용할 수 있으므로 태그를 쓰는 것을 권장하지 않음

- 순수하게 꾸미는 용도의 요소로 사용

- <a>와 헷갈릴 수 있는 위치에서 사용하지 않도록 주의

- 을 활용할 수 있을 경우에는 사용을 권장하지 않음

◽️ <code>

- 컴퓨터 코드 범위를 설정 (Inline Code)

- 기본적으로 고정폭(Monospace) 글꼴 계열로 표시됨

◽️ <kbd>

- 텍스트 입력 장치(키보드)에서 사용자 입력을 나타내는 텍스트 범위를 설정 (Keyboard Input)

◽️ , 

- 위 첨자()와 아래 첨자()를 설정 (Superscripted text, Subscript text)

◽️ <time>

- 날짜나 시간을 나타내기 위한 목적으로 사용.

- 속성: datetime 값: ex)2021-07-13

- IE 지원 불가

◽️ 

- 본질적으로 아무것도 나타내지 않는 콘텐츠 영역을 설정하는 역할로 <div> 태그와 비슷하게 사용

- 대표적인 inline 요소

- 텍스트를 사용할 때 특화되어 있어 막 사용할 수 있음

◽️ 

- 줄바꿈을 설정

- 빈 태그

- 글자 사이의 간격을 만들기 위해 사용하는 건 절대 하면 안됨!!! ~> 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

현재글Part6. HTML 요소 - 인라인 텍스트 & 수정

마크투비의 고 GO