티스토리 뷰

HTML CSS JS

HTML / 요소 - 인라인 텍스트 - ABBR

Programmers 2021. 6. 3. 14:13
반응형

1. ABBR

<abbr> abbreviation 약어를 지정
보통 title속성(전역 속성)을 사용, title에는 설명

abbr 예제

<body>
    Using <abbr title="HyperText Markup Language">HTML</abbr> is fun and easy!
</body>

HTML텍스트 아래에 점선이 그 여지는 것을 볼 수 있다. 마우스를 올리면 코드에서 설정했던 title의 내용을 볼 수 있다.

 

2. B, MARK, EM, STRING, I

<b>: bring attention 문체가 다른 글자의 범위를 설정,
특별한 의미를 가지지 않음
읽기 흐름에 도움을 주는 용도 정도로 사용
다른 태그가 적합하지 않을 때 마지막 수단으로 사용
글자를 두껍게 표시되나 이용도로 사용하면 안 된다. css를 이용해야 한다.

<mark>: mark text 사용자의 관심을 끌기 위해 하이라이팅을 할 때 사용
의미보다는 시각적인 것이 표시 → css로 사용
의미보다는 시각적인 효과

<em>: emphasis 의미의 강조
중첩 가능, 중첩되면 강조가 강해진다.
정보통신 보조기기 등에서 구두로 강조해서 발음해준다. 시각장애인들과 같은 경우 문서를 들을 때
기본적으로 이탤릭체로 표시

<strong>: strong importance 의미의 중요성을 나타내기 위해 사용
중요도를 나타낼 때, 기본적으로 두껍게 표시된다.

<i> 적합한 의미가 아닌 경우 사용한다. 평범한 글자와 구분(아이콘이나 특수기호 같은) 하기 위해 사용.
↔ <b>는 일반적인 텍스트를 다룰 때

 

B, MARK, EM, STRING, I 예제

- index.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>studying</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css">
    <link rel="stylesheet" href="./main.css">
</head>
<body>
    <p>
        <b>1절</b>
        <i class="fas fa-bars"></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>
        무궁화 삼천리 화려 강산
        대한 사람, 대한으로 길이 보전하세
    </p>
</body>
</html>

b태그: 의미 없이 사용되지만 굵은 글씨체로 나타나는 것이 기본값이다. css에서 font-weight로 보통으로 수정했다.
mark태그: 노란색으로 표시되며 시각적인 효과를 보여준다.
em태그: 기본적으로 italic체로 보인다. css에서 brown컬러를 추가했다. em태그 안에 em으로 더욱 강조했다.
보조 디바이스를 통해 듣는다면 강조되는 느낌을 받을 수 있다.
strong태그: 의미의 중요성을 나타내고 두꺼운 글씨체로 나타난다.
i태그: 이미지를 삽입할 수 있다. head에서 link태그를 통해서 url주소를 지정하고, body태그에서 사용할 수 있다.

 

- main.css

b {
    font-weight: normal;
}
em {
    color: brown;
}

 

반응형
저작자표시 비영리 변경금지

'HTML CSS JS' 카테고리의 다른 글

HTML / 요소 - 멀티미디어 - IMG, src, alt, width, height, srcset, sizes  (0) 2021.06.03
HTML / 요소 - 인라인 텍스트 - DFN, CITE, Q, U, CODE, KBD, SUP, SUB, TIME, SPAN, BR, DEL, INS  (0) 2021.06.03
HTML / 요소 - 인라인 텍스트 - A  (1) 2021.06.03
HTML / 요소 - 문자 콘텐츠 - DL, DT, DD, P, HR, PRE, BLOCKQUOTE  (0) 2021.06.03
HTML / 요소 - 문자 콘텐츠 - OL, UL, LI  (0) 2021.06.03
댓글
공지사항