HTML 태그 Text-level 요소

 

Text-level 요소의 특징

• 요소안의 컨텐츠의 크기(자식 요소)만큼만 영역을 점유 → block-level요소와는 가로줄 한라인을 모두 차지 한다는 점과 다른 특성
• 자식으로 Sections, Grouping Contents를 사용 할 수 없다.
  • ex) span > div → 이러한 방식의 마크업뿐만 아니라 손자에 사용하는 것도 모두 문법오류가 된다.

 

Text-level 요소의 종류

 

<br>, <wbr> 태그

<br>

• 줄바꿈의 위한 태그

<wbr> 

• 텍스트 박스에서 한줄로 모두 표시가 안될때에만 줄바꿈이 일어나게 해줄 때 사용하는 태그
• 브라우저의 화면이 줄어들면서 공간이 좁아져 한줄로 표현이 되지 않을 때 줄바꿈을 해주는 역할

 

<wbr>와 관련된 CSS속성

work-break

• default속성값 → normal
• word-break : break-word;  → 단어단위(apple, monkey..)로 화면이 줄어줄 경우 줄바꿈 발생
  • HTML문서에서는 공백의 기준으로 문자인지 단어인지 구분
• word-break : break-all;  →  문자단위(a, 이, 야..) 등으로 화면이 줄어줄 경우 줄바꿈 발생
  • CJK(중국어,일본어,한국어)의 work-break 속성값은 break-all로 설정되어 있다.

 

white-space 

공백문자를 처리하는 스타일 속성

• white-space : nowrap;  →  <wbr>가 적용되는 곳에서 줄바꿈 발생
• white-space : pre;   →  <pre></pre>요소와 동일한 형태

 

 

<a> 태그

<a href = "경로"> </a>

<a>요소는 HTML에서 빈도 수가 굉장히 높고 하이퍼 텍스트 즉 다른 링크로 이동하기를 원할 때 사용하는 태그

 

주의사항 

• href속성을 작성하지 않고 JS로 경로를 지정할 수 있지만 웹 접근성에 위배되는 행동이기에 href속성을 사용하는 것을 권장
• <a>요소만 텍스트 레벨 요소 중에서 예외적으로 sections/grouping요소들을 자식요소 허용가능
• <a>요소 내부에 사용자 인터렉션이 있는 <a>, <button>.. 를 자식요소로 혀용 불가

 

다양한 <a> 요소 사용예시

  <a href="https://www.naver.com">click</a>

  <!-- 내부폴더로 이동도 가능하다. -->
  <a href="./index.html">click</a>

  <!-- 페이지에의 내부링크로 화면속에서 해당위치의 id값을 가지고 있는 섹션으로 움직인다. 
  스크롤 같은 일을 할때 사용을 한다 하지만 스크롤이 빠르게 되게 때문에 -->
  <a href="#one">click</a>
  <a href="#two">click</a>


  <!-- Tips -->
  <!-- html {

  scroll-behavior: smooth #html은 제일 루트요소 스크롤 할때 부드럽게 이동하는 것을 원할 때 사용한다.
  하지만 스크롤 부드러움 정도를 변경하기에는 힘들다.

  } -->

  <!-- 아이디 이름을 붙일 경우에는 #을 붙이지 말고 a태그 내부페이지 이동은 class로는 불가능하다. -->
  <section id="one">

  </section>

  <!-- download 속성을 넣어주면 .index.html을 다운로드 받을 수 있게 해준다. 
  download = "파일명" 만약 속성값을 넣지 않으면 index.html 그 자체를 파일이름으로 설정 -->
  <a href="./index.html" download>click</a>


  <!-- mac유저는 전화번호로 페이스타임으로 전화를 걸어준다.
  모바일에서는 전화를 할 수 있는 화면으로 자동으로 넘어가진다. -->
  <a href="tel :+82전화번호">facetime</a>

  <!-- 메일도 보낼 수 있게 href설정이 가능하다. -->
  <a href="mailto: 메일주소">메일</a>

주의 사항  → IE는 download속성을 지원하지 않는다.

 

 

 

<span>

• Text-level 요소 줄바꿈 없이 영역을 묶는 역할을 하는 태그
• div태그와 비슷하게 아무런 의미 없기 때문에 스타일을 위해 묶을 경우에 사용

 

<b>

• 굵은 글꼴의 스타일을 표현시 사용하는 태그
• <i>는 의미가 생겼지만 <b>는 아무런 의미가 없기에 사용하는 것을 권장하지 않는다.

 

<strong>

• 굵은 글꼴의 스타일을 표현시 사용하는 태그
• 강조의 의미를 가지고 있는 태그
• heading요소로 묶는 것을 대체하는 경우도 있다.
• <strong><strong> 매우 강조 </strong></strong> → 더 강조를 하고 싶을 경우 중첩으로 사용가능

 

<i>

• <i>태그는 기울임 글꼴을 나타낸다.
• 주언어와 다른 언어로 표현된 부분을 <i> 사용.
• 소설일 경우 등장인물의 생각이 표기되어 있는 부분을 <i> 사용

 

<em>

• <strong>와 동일하게 강조의 의미가 있는 태그 하지만 strong이 조금 더 강한 강조를 나타낸다.
• <i> 와 동일하게 스타일적으로 기울임 글꼴 나타낸다.

 

<dfn>, <aabr>, <sup>, <sub> 등 다양한 태그들이 존재

 

 

알아야 될 상식

block-level-elements는 사용하는 말이지만 inline-level-elements는 존재 하지 않는다.
display가 inline인 요소는 inline-level요소가 아니라 그냥 inline요소라고 명시해야 된다.