[HTML] 인라인 텍스트

<a1> anchor의 약자. 현재문서 -> 외부 문서로 하이퍼링크를 건다.

속성 download : 파일 다운로드 받게 해주진.. 않고! 그런 용도라는 것을 명시해주는 역할

속성 href :링크 URL 설정

속성 rel :관계 설정

속성 target : 링크 URL의 표시 위치/ 현재 화면에서 뜰 건지(_self), 새로운 화면에서 뜰 건지(_blank)

속성 type : 링크 URL의 MIME 타입

버튼으로 많이 사용하는 태그이기 때문에 스타일링하기 위해 display를 block으로 바꿔서 많이 쓴다.

다른 페이지로 이동, 같은 페이지내의 특정 위치로 이동, 파일 다운로드 등 가능

<abbr> abbreviation(약어)의 약어.

속성 tilte : 전체 글자나 설명을 제공. =>전역속성

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    Using <abbr title="HyperText Markup Language">HTML</abbr> is fun and easy!
</body>
</html>

 bold의 약어였는데 -> Bring Attention 문체가 다른 글자의 범위 설정

글자가 두껍게 표시하는 용도로 많이 사용했는데, css로 스타일링하게 되면서 특별한의미 없이 범위 지정

적합한 태그가 없는 마지막 경우에 사용

 mark text의 약어. 형광펜과 같이 하이라이팅 할 때 사용.

의미<시각. 배경색을 노란색으로 표현할 때 많이 쓴다. css로 충분히 대체가능

 의미 강조 표시.

브라우저, 정보 통신기기가 의미 강조 된 것으로 인식함.

중첩이 가능하며 많이 중첩될 수록 의미 강해짐. 이탤릭체로 표시 됨

 의미의 중요성 표시

글자가 두껍게 표시됨

 icon 약어. 글자가 아닌 이미지, 특수기호를 활용 할 때 사용

이탤릭체로 표시 됨. 적합한 태그가 없는 마지막 경우에 사용

https://fontawesome.com/ 사이트에서 무료로 배포하는 아이콘폰트를 사용할 수 있다

실습

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>HTML Elements</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css"/>
    <link rel="stylesheet" href="../css/tag_group_test.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{
    font-weight: normal;
}
em{
    color: brown;
}

<dfn> 용어 정의할 때 사용

<cite> 창작물의 제목 표시

이탤릭체로 표시 됨

<q> "짧은" 인용문

속성 cite : 출처 URL 담을 수 있음

긴 인용문은 <blockquote> 사용

 underline의 약어. 밑줄 칠 때 사용

순수하게 꾸미는 기능, css로 대체가능(span 태그에 css 적용)

<code> 컴퓨터 코드 부분 표시

코드를 고정된 폭의 Monospace 폰트로 나타낸다.

<kbd> keybord의 약어. 키보드 키 표시

Monospace 폰트로 나타낸다.

 superscript text의 약어. 위첨자

ex) x의 2승 등을 나타낼 때 사용

 subscript text의 약어. 아래첨자

ex) log 밑 나타낼 때 사용

<time> 날짜나 시간을 나타내기 위한 용도

속성 datetime : YYYY-MM-DD 등의 유효한 날짜 문자

IE 지원 X

 div 태그와 유사. 아무 의미를 가지지 않음.

text를 css나 js로 꾸밀 때 많이 사용할 거임

  break의 약어. 줄바꿈

+) 수정 태그

<del> delete의 약어. 특정 컨텐츠가 원래 존재했지만 제거했다고 표시해주는 역할

연필로 찍 그은 듯이 출력됨

속성 cite : 변경을 설명하는 URI

속성 datetime : 변경된 날짜 입력

<ins> insert의 약어. 새로 추가된 컨텐츠 표시

속성 cite : 변경을 설명하는 URI

속성 datetime : 변경된 날짜 입력

'Web > HTML5' 카테고리의 다른 글

[HTML] 내장 콘텐츠 (0)	2020.01.16
[HTML] 멀티미디어 (0)	2020.01.16
[HTML] 문자 콘텐츠 (0)	2020.01.13
[HTML] 콘텐츠 구분 (0)	2020.01.13
[HTML] 메타데이터 (0)	2020.01.13

+) 수정 태그

'Web > HTML5' 카테고리의 다른 글

티스토리툴바