본문 바로가기
Front-end/Web

HTML - 인라인 텍스트 & 수정

by 안녕주 2021. 2. 2.

인라인 텍스트

1. a

다른 페이지, 같은 페이지 위치(#, 해시 태그), 파일, 이메일 주소, 전화번호 등 다른 URL로 연결할 수 있는 하이퍼링크를 설정.

속성 의미 값 기본값 특징
download 이 요소가 리소스를 다운로드하는 용도로 사용됨을 의미 불린(Boolean)    
href 링크 URL URL   생략 가능
rel 현재 문서와 링크 URL의 관계(Link Types) license, prev, next…    
target 링크 URL의 표시(브라우저 탭) 위치 _self, _blank(새로운탭) _self  
type 링크 URL의 MIME 타입 text/html…     
a { display: inline; }

id는 고유한 이름

 

 

2. abbr

약어를 지정. (보통 title 속성을 사용하여 전체 글자나 설명을 제공)

  • title은 전역속성 (global)
Using <abbr title="HyperText Markup Language">HTML</abbr> is fun and easy!
abbr { display: inline; }

 

 

3. b, mark, em, string, i 

<b>

  • 문체가 다른 글자의 범위를 설정.
  • 특별한 의미를 가지지 않음.
  • 읽기 흐름에 도움을 주는 용도로 사용.
  • 다른 태그가 적합하지 않은 경우 마지막 수단으로 사용.
  • 기본적으로 글자가 두껍게(Bold) 표시됨.
b { display: inline; }

 

<mark>

  • 사용자의 관심을 끌기 위해 하이라이팅할 때 사용.
    (Mark Text, 형광펜을 사용하여 관심있는 부분을 표시하는 것과 같은 의미)
  • 기본적으로 형광펜을 사용한 것처럼 글자 배경이 노란색(Yellow)으로 표시됨.
mark { display: inline; }

 

<em>

  • 단순한 의미 강조를 표시.
  • 중첩이 가능. <em>  <em></em>  </em> 
  • 중첩될수록 강조 의미가 강해짐.
  • 정보통신보조기기 등에서 구두 강조로 발음됨.
  • 기본적으로 이탤릭체(Italic type)로 표시됨.
em { display: inline; }

 

<strong>

  • 의미의 중요성을 나타내기 위해 사용. (강조 != 중요성)
  • 기본적으로 글자가 두껍게(Bold) 표시됨.
strong { display: inline; }

 

<i>

  • <em>, <strong> <mark> <cite> <dfn> 등에서 표현할 수 있는 적합한 의미가 아닌 경우 사용.
    (평범한 글자와 구분(아이콘이나 특수기호 같은)하기 위해 사용)
  • 기본적으로 이탤릭체(Italic type)로 표시됨.
i { display: inline; }

 

4. b, mark, em, string, i 예제

Ctrl + Shift + P : 약어로 래핑, Ctrl + Alt + L : Beautify

<icon 사용하기>

1) i tag로 icon을 활용

fontawesome.com/

 

Font Awesome

The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.

fontawesome.com

2) cdn 전문 제공사이트에서 링크 get! , all.min.css 를 스크랩

cdnjs.com/libraries/font-awesome

 

font-awesome - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers

The iconic SVG, font, and CSS toolkit - Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service trusted by over 11% of all websites, powered by Cloudflare. We make it faster and easier to load library files on yo

cdnjs.com

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="./main3.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />">
</head>
<body>
    <b>- 1절 -</b>
    <i class="fas fa-signal"></i>
    <i class="fas fa-home"></i>
    <mark>동해물과 백두산이 마르고 닳도록</mark>
    하느님이 보우하사 우리나라만세.

    <b>- 2절 -</b>
    남산 위에 저 소나무, 철갑을 두른 듯
    <em>바람서리 <em>불변함은</em> 우리 기상일세.</em>

    <b>- 3절 -</b>
    <strong>가을 하늘 공활한데 높고 구름 없이</strong>
    밝은 달은 우리 가슴 일편단심일세.

    <b>- 4절 -</b>
    이 기상과 이 맘으로 충성을 다하여
    괴로우나 즐거우나 나라 사랑하세

    <b>- 후렴 -</b>
    무궁화 삼천리 화려강산
    대한 사람 대한으로 길이 보전하세
    
</body>
</html>
b{
    font-weight: normal;
}
em{
    color: brown;
}

 

5. dfn

용어를 정의할 때 사용

dfn { display: inline; }

 

6. cite

창작물에 대한 참조를 설정.

<cite>The Scream</cite> by Edward Munch. Painted in 1893.
cite { display: inline; }

 

7. q

짦은 인용문을 설정.

  • 긴 인용문을 설정할 경우 <blockquote>를 사용.
속성 의미 값
cite 인용된 정보의 URL URL 
q { display: inline; }

 

8. u

밑줄이 있는 글자를 설정. --> CSS로 커버가능 

  • 순수하게 꾸미는 용도의 요소로 사용.
  • <a>와 헷갈릴 수 있는 위치에서 사용하지 않도록 주의.
  • <span style="text-decoration: underline;">을 활용할 수 있을 경우에는 사용을 권장하지 않음.
u { display: inline; }

 

9. code

컴퓨터 코드 범위를 설정

  • 기본적으로 고정폭(Monospace) 글꼴 계열로 표시됨.
<code>document.getElementById('id-value')</code> is a piece of computer code.
code { display: inline; }

 

10. kbd

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

<p><kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>K</kbd></p>, <kbd>ESC</kbd>
kbd { display: inline; }

 

11. sup,sub

위 첨자(<sup>)와 아래 첨자(<sub>를 설정.

X<sup>4</sup> + Y<sup>2</sup>, H<sub>2</sub>O
sup, sub { display: inline; }

 

12. time

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

  • IE 지원 불가
속성 의미 값
datetime 유효한 날짜 문자 Date 
<p>The Cure will be celebrating their 40th anniversary on <time datetime="2018-07-07">July 7</time> in London's Hyde Park.</p>
time { display: inline; }

 

13. span

본질적으로 아무것도 나타내지 않는 콘텐츠 영역을 설정.

span { display: inline; }

 

14. <br />

줄바꿈을 설정.

br { display: inline; }

 

수정

1. del

삭제된(변경된) 텍스트의 범위를 지정.

속성 의미 값
cite 변경을 설명하는 리소스의 URI URI
datetime 변경이 일어난 유요한 날짜 문자 Date 
del { display: inline; }

 

2. ins

새로 추가된(변경된) 텍스트의 범위를 지정.

속성 의미 값
cite 변경을 설명하는 리소스의 URI URI
datetime 변경이 일어난 유요한 날짜 문자 Date 
ins { display: inline; }

 

 

Thanks to heropy.blog/2019/05/26/html-elements/

'Front-end > Web' 카테고리의 다른 글

HTML - 표 콘텐츠 & 양식  (0) 2021.02.02
HTML - 멀티미디어 & 내장 콘텐츠 & 스크립트  (0) 2021.02.02
HTML - 콘텐츠 구분 & 문자 콘텐츠  (0) 2021.02.02
HTML - 주요범위 & 메타데이터  (0) 2021.02.02
CSS  (0) 2021.02.01

관련글

댓글

티스토리툴바