[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 6회차 미션

인라인 텍스트

<a>

• 다른 페이지, 같은 페이지 위치(#, 해시 태그), 파일, 이메일 주소, 전화번호 등 다른 URL로 연결할 수 있는 하이퍼링크를 설정
• 속성
  • download : 이 요소가 리소스를 다운로드 하는 용도로 사용됨을 의미 (값 : Boolean), 클릭 시 파일 다운로드
  • href : 링크 URL, 생략 시 링크로서의 기능 상실
  • herflang : 링크 URL(페이지) 언어
  • rel : 현재 문서와 링크 URL의 관계
  • target : 링크 URL의 표시(브라우저 탭) 위치 (
    • _self : 현재 창에 페이지 띄움, 기본값
    • _blank : 새로운 창에 페이지 띄움)
  • type : 링크 URL의 MIME 타입, 생략하는 경우가 많음
• inline 요소

<!-- 링크 -->
<a href="https://www.google.co.kr/">Google</a>

<!-- 새 탭으로 열기 -->
<a href="https://www.google.co.kr/" target="_blank"></a>

<!-- 파일 다운로드 -->
<a href="photo.png" download="download">사진 다운로드</a>

<!-- 같은 페이지 내 이동 -->
<ul>
    <li><a herf="#title1">제목1</a></li>
    <li><a herf="#title2">제목2</a></li>
</ul>

<h2 id="title1">제목1</h2>
<h2 id="title2">제목2</h2>
<h2 id="title3">제목3</h2>

<abbr>

• 약어를 지정
• 태그 사용 시 점선으로 밑줄이 쳐지고, 글자에 마우스를 올리면 title 속성 값이 나타남
• 속성
• title : 약어의 전체 글자를 명시 (전역 속성)
• inline 요소

<abbr title="Single Page Application">SPA</abbr>

< b >

• 문체가 다른 글자의 범위를 설정
• 특별한 의미를 가지지 않는 곳에 사용해야함
• 읽기 흐름에 도움을 주는 용도
• 다른 태그가 적합하지 않은 경우 마지막 수단으로 사용
• 글자가 두껍게 표시 (BUT 글자를 두껍게 하려고 쓰면 안됨)
• inline 속성

< mark >

• 사용자의 관심을 끌기 위한 하이라이팅 (형광펜) 할 때 사용

• 관심있는 부분 이라는 용도로 사용

• 의미 강조 보다는 시각적 강조에 초점

• inline 속성

< em >

• 단순한 의미 강조를 표시
• 중첩 가능, 중첩할수록 강조 의미가 강해짐 (시각적인 부분이 달라지진 않음)
• 정보통신보조기기 등에서 구두 강조로 발음됨
• 기본적으로 이텔릭체 (Italic type)로 표시 (기대고 있는 글자)

<!-- 중첩 -->
<em><em>강조!</em></em>

< strong >

• 의미의 중요성을 나타내기 위해 사용

강조 != 중요성

<em> != <strong>

• 글자가 두껍게(Bold) 표시
• inline 속성

< i >

• <em>, <strong> , <mark> , <cite> , <dfn> 등에서 표한할 수 있는 적합한 의미가 아닌 경우 사용
• 평범한 글자와 구분하기 위해 사용 ex ) 아이콘, 특수기호
• 기본적으로 이텔릭체 (Italic type)로 표시
• inline 속성

< dfn >

• 용어를 정의할 때 사용 (특정한 용어 하나를 정의)
• inline 속성

<p><dfn id="def-budget-line">예산선은</dfn> 주어진 소득 또는 예산을 다 사용해서 구입할 수 있는 상품의 여러 가 지 조합을 나타내는 직선이다.</p>

< cite >

• 창작물에 대한 참조 설정 ex) 책, 논문, 영화, 노래, 게임 등의 제목
• 기본적으로 이텔릭체 (Italic type)로 표시
• inline 태그

<cite>남몰래 거울</cite> 백해영 글 이갑규 그림

글씨를 다루는데 쓰이는 태그는 대부분 inline 태그이다. (<h1> ~ <h6> , <p> 등 제외)

< q >

• 짧은 인용문을 설정 (긴 인용문은 <blockquote>)
• 속성
  • cite : 인용된 정보의 URL
• inline 요소

< u >

• 밑줄이 있는 글자를 설정
• 의미 없음, 순수하게 꾸미는 용도로 사용 (되도록이면 CSS 사용하는게 좋음)
• <a> 와 헷갈릴 수 있는 위치에서 사용 X (밑줄이 있어서 클릭의 유인이 됨)
• <span> 을 활용할 수 있는 경우에는 사용 권장하지 않음
• inline 요소

< code >

• 컴퓨터 코드 범위를 설정, 코드 부분을 가독성이 좋게 표시
• 기본적으로 고정폭(Monospace, 가로길이와 세로길이가 동일한) 글꼴 계열로 표시
• inline 속성

< kbd >

• 텍스트 입력 장치(키보드)에서 사용자 입력을 나타내는 텍스트 범위를 설정
• 키보드 자판 처럼 보이게 스타일링 가능
• inline 속성

<p><kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>K</kbd></p>, <kbd>ESC</kbd></p>

< sup >, < sub >

• 윗 첨자 : <sup> / 아래 첨자 : <sub>
• inline 요소

X<sup>4</sup> + Y<sup>2</sup>, H<sub>2</sub>O

< time >

• 날짜나 시간을 나타내기 위한 목적으로 사용
• 속성
  • datetime : 유효한 날짜 문자 (Date, YYYY-MM-DD)
• IE 지원 불가
• inline 속성

<p>The Cure will be celebrating their 40th anniversary on <time datetime="2018-07-07">July 7</time> in London's Hyde Park.</p>

< span >

• 본질적으로 아무것도 나타내지 않는 콘텐츠 영역을 설정
• <div> 가 레이아웃을 다룬다면, <span> 은 텍스트를 다룰 때 사용
• inline 속성

< br />

• 줄바꿈을 설정
• 빈 태그
• inline 속성

HTML은 어디까지나 구조를 나타내기 때문에, 구조를 정확히 쌓는데 집중해야 한다.

따라서 </br>을 간격을 만들어내는 용도로 여러번 사용하는 것은 절대 하지 않아야 한다.

수정과 관련된 태그

< DEL >

• 삭제되거나 변경된 텍스트의 범위를 지정 (위키백과 등)
• 속성
  • cite : 변경을 설명하는 리소스의 URI
  • datetime : 변경이 일어난 유효한 날짜 문자 (YYYY-MM-DD)
• 중앙선이 추가됨
• inline 요소

< ins >

• 새로 추가되거나 변경된 텍스트의 범위를 지정
• 속성
  • cite : 변경을 설명하는 리소스의 URI
  • datetime : 변경이 일어난 유효한 날짜 문자 (YYYY-MM-DD)
• 밑줄이 추가됨
• inline 요소

<p>내가 좋아하는 색은 <del>하늘색</del> <ins>민트색</ins> 이야!</p>

프론트엔드 올인원 패키지 바로가기 -> https://bit.ly/3m0t8GM