전체 방문자
오늘
어제
  • 전체 글
    • HTML
    • CSS
    • Javascript
    • React
    • Typescript
    • Next.js
    • Webpack
    • Vue.js
    • Git & GitHub
    • Error
    • Study
    • 개발 일지✨

블로그 메뉴

  • 💡
  • ⚙️
hELLO · Designed By 정상우.
하루

Home

인라인 텍스트
HTML

인라인 텍스트

2021. 12. 18. 04:08

<a>

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

속성 의미 값 기본값 특징
download 리소스를 다운로드하는 용도로 사용됨을 의미 Boolean    
href 링크 URL URL   생략 가능
hreflang 링크 URL 페이지 언어 ko, en 등    
rel 현재 문서와 링크 URL의 관계 (Link types) license, prev, next 등    
target 링크 URL의 표시 위치 _self, _blank _self  
type 링크 URL의 MIME 타입 text/html 등   생략 가능

 

<abbr>

  • 약어를 지정한다.
  • Abbreviation. 보통 title 속성을 사용하여 전체 글자나 설명을 제공한다.
  • 사용할 때 지정하고자 하는 약어를 드래그 한 다음, 랩핑하여 작성하면 편리하다. (Ctrl+Shift+P)
  • 마우스를 갖다댔을 때 약어에 대한 설명이 나타나게 한다.
Using <abbr title="HyperText Markup Language">HTML</abbr> is fun and easy!

 

강조 태그

<b>

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

 

<mark>

  • 사용자의 관심을 끌기 위해 하이라이팅할 때 사용 (Mark text)
  • 형광펜을 사용하여 표시하는 것과 같은 의미
  • 기본적으로 글자 배경이 노란색으로 표시됨
  • 관심있는 부분이라는 의미를 표현하기 보다는 시각적인 표현에 특화되어 있음 (시각>의미)

 

<em>

  • 단순한 의미 강조를 표시 (Emphasis)
  • 중첩 가능
  • 중첩될수록 강조 의미가 강해짐
  • 정보통신보조기기 등에서 구두 강조로 발음됨
  • 기본적으로 이탤릭체(Italic type)로 표시됨
  • 앞에 <b>, <mark>에서 일정 범위를 강조하는 것과는 달리 의미를 강조하는데 쓰임

 

<strong>

  • 의미의 중요성을 나타내기 위해 사용 (Strong importance)
  • 기본적으로 글자가 두껍게 표시됨
  • <em>, <strong> 차이점: 단순한 의미를 강조하는 것과 중요한 것임을 나타내는 것은 다름
  • <b>와 마찬가지로 글씨가 두껍게 표시됨

 

<i>

  • <em>, <strong>, <mark>, <cite>, <dfn> 등에서 표현할 수 있는 적합한 의미가 아닌 경우 사용
  • 아이콘이나 특수기호에 사용된다.
    • 예) 사용하려는 아이콘 사이트의 주소를 <link> 태그로 불러와서 경로에 사이트 주소를 작성하고, 넣으려는 이미지/아이콘을 html 태그에 가서 다음과 같이 작성하면 된다.
    • <i class="fas fa-home"></i>
  • 기본적으로 이탤릭체(Italic type)로 표시됨

 

<br />

  • 줄바꿈을 설정 (Break)
  • 빈 태그
  • 주의! 문장간격을 벌리는데 사용하지 말 것. 화면에 표시되어 나타나는 것을 수정하기 위해서는 CSS 작업을 통해서 표현한다!
  • 문장 간격 설정: 줄 높이를 설정하는 것은 CSS에서 line-height 속성을 통해서 나타낼 수 있다.

 

 

 

출처/참고

  • https://heropy.blog/2019/05/26/html-elements/

 

    'HTML' 카테고리의 다른 글
    • 의미론적(Semantic) 태그
    • label
    • HEAD에 포함되는 태그
    • 블록요소 / 인라인 요소 특징

    티스토리툴바