HTML Tag

HTML TAG 심화

Created	@Aug 6, 2020 7:24 PM
Lesson Date	@Aug 7, 2020
Status	In Progress
Type	ExamLesson

Reference Website

The average web page

The study data comes from 7.1 million index pages gathered from top twenty Google results, for about 30 million keywords.

https://www.advancedwebranking.com/html/#overview

 

Head Tag

• Heading Tag
• 문서 내에 제목 표현

• Paragraph Tag
  • 단락 태그

• Linebreak Tag
  • <br> : 단락 구분

   

Text Expression Tag

• <b> : bold 태그는 글자를 굵게 표현하는 태그

• <i> : italic 태그는 글자를 기울여서 표현하는 태그

• <u> : underline 태그는 글자의 밑줄을 표현하는 태그

• <s> : strike 태그는 글자의 중간선을 표현하는 태그

Anchor

• 링크 Tag : 다른 문서로 이동할 수 있는 링크를 생성한다.

• href : hyper reference - 링크의 목적지가 되는 URL을 지정

<a href="http://www.naver.com/" target="_blank">네이버</a>

• target

  • _blank : 새로운 탭으로

  • _self : 현재 화면에 표시, defualt 값

• 내부 링크 : '#이동 요소의 id 속성값'을 통해 해당 위치로 이동

<h1 id="top">네이버네이버</h1>
<a href="#top">HTML</a>

Container

의미없이 요소를 묶기 위한 태그

• <div> : block-level, 한 줄을 생성해서 내용 표현 → <p>

• <span> : inline-level, 블록 요소의 한 줄 안에서 표현되는 요소 → <b><u>

<div>
    <span>Lorem</span> ipsum dolor sit
</div>

 

List

• ex) 실시간 검색어

• UL
  • <ul> : unodered list → 순서가 없는 리스트

  <ul>
    <li>콩나물</li>
    <li>파</li>
    <li>soup soy bean</li>
  </ul>

 

• DL
  • <dl> : definition / description list → 용어와 그에 대한 정의를 표현

    <dl>
        <dt>리플리 증후군</dt>
        <dd>허구의 세계를 진실이라 믿고 거짓된 말과 행동을 상습적으로 반복하는 반사회적 성격장애를 뜻하는 용어</dd>
        <dt>피그말리온 효과</dt>
        <dd>타인의 기대나 관심으로 인하여 능률이 오르거나 결과가 좋아지는 현상</dd>
        <dt>언더독 효과</dt>
        <dd>사람들이 약자라고 믿는 주체를 응원하게 되는 현상</dd>
    </dl>

  • <dt> : 용어를 나타내는 Tag
  • <dd> : 용어에 대한 정의 또는 설명 Tag

   

Image

• <img> : 문서에 이미지를 삽입하는 Tag, 닫는 Tag없는 빈 태그

  <img src="./images/pizza.png" alt="pizza">

  • src : source, 이미지의 경로
  • alt : 이미지의 대체 텍스트 → 웹 접근성 측면에서 중요한 속성