본문 바로가기
LEARN/HTML | CSS

[부스트코스] 2-1 HTML 태그

by 아이엠제니 2022. 3. 12.

 

 

 

2. HTML 태그

1) HTML 태그 소개

  • 존재하는 태그는 100여개가 넘지만, 실제 사용하는 태그는 한정적임
Reference
https://www.advancedwebranking.com/seo/html-study/#overview

 

 

 

2) 제목과 단락요소

  • Heading 태그 (h1~h6)
  • paragraph 태그 (p)
  • Linebreak 태그 (br)

 

제목 (HEADING)

<h1> Hello </h1>
  • 문서 내에 제목을 표현할 때 사용
  • h1~h6
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>Heading tags</title>
  </head>
  <body>
    <h1>역사</h1>
    <h2>개발</h2>
    팀 버너스리 1980년, 유럽 입자 물리 연구소(CERN)의 계약자였었던 물리학자 팀
    버너스리가 HTML의 원형인 인콰이어를 제안하였다. 인콰이어는 CERN의 연구원들이
    문서를 이용하고 공유하기 위한 체계였다. 1989년에 팀 버너스리는 인터넷 기반
    하이퍼텍스트 체계를 제안하는 메모를 작성했다.[2] 버너스 리는 1990년 말에
    HTML을 명시하고, 브라우저와 서버 소프트웨어를 작성했다. 그 해에 버너스리와
    CERN 데이터 시스템 엔지니어 로버트 카일리아우와 함께 CERN측에 자금 지원을
    요청하였지만, 이 프로젝트는 CERN으로부터 정식으로 채택 받지 못했다.
    버너스리의 개인적인 기록[3]에 1990년부터 "하이퍼텍스트가 사용되는 여러
    분야의 일부"를 열거했고 백과사전을 그 목록의 첫 번째로 두었다.
    <h2>최초 규격</h2>
    HTML 최초의 일반 공개 설명은 1991년 말에 버너스리가 처음으로 인터넷에서
    문서를 "HTML 태그"(HTML tag)로 부르면서 시작되었다.[4][5] 그것은 머릿글자로
    이루어진 20개의 요소를 기술하였고, 상대적으로 HTML의 단순한 디자인이었다.
    하이퍼링크를 제외한 HTML 태그들은 CERN 자체의 SGML 기반 문서화 포맷인 SGML
    GUID에 강하게 영향을 받았다. 이 요소 중 13개는 HTML 4 버전에서도 여전히
    존재한다.[6] HTML은 동적인 웹 페이지의 웹 브라우저를 통한 문자와 이미지
    양식이다. 문자 요소의 대부분은 1988년 ISO 기술 보고서 9537 SGML을 이용한
    기법에서 찾을 수 있다. 하지만 SGML 개념의 일반적인 마크업은 단지 개별 효과
    보다는 요소 기반이고 또한 구조와 처리의 분리(?)(HTML은 CSS와 함께 이
    방향으로 점진적으로 이동해 왔다.) 버너스리는 SGML 응용 프로그램이 되는
    HTML을 고안해야 했고 그것은 공식적으로 IETF(국제 인터넷 표준화 기구)에
    의하여 1993년 중반, HTML 규격에 대한 최초의 제안을 간행물로 정의했다.
    (버너스리와 덴 콘놀리에 의한 문법을 규정하는 SGML 문서 형식 정의(SGML DTD)가
    포함된 "하이퍼텍스트 마크업 언어(HTML)" 인터넷 초안[7]) 이 초안은 6개월 후
    만료된다. 하지만 NCSA 모자이크 브라우저의 인라인 이미지를 내장하는 사용자
    정의 태그의 사례는 주목할 만 했고, 성공적인 프로토타입에 대한 표준을 기반한
    IETF의 철학을. [8] 마찬가지로 데이브 라그렛의 경쟁 인터넷 초안인 "HTML+
    (하이퍼텍스트 마크업 포맷)"은 1993년 말에 테이블과 기입양식 같은 요소들을
    이미 구현하여 표준화 제안을 했다.[9] 이후 1994년 초 HTML과 HTML+ 초안은
    만료되었고, IETF는 HTML 작업 그룹을 설립해 1995년에 HTML 2.0을 완성한다.
    최초의 HTML의 규격은 미래에 수행될 HTML 표준을 기반으로 간주되는 경향이
    있었다.[8]RFC 1996년에 HTML 2.0은 HTML과 HTML+ 초안의 아이디어가 포함됐다고
    발표했다.[10] HTML 2.0 지정은 이전의 초안들로부터 새로운 버전을 구별하기
    위해서였다.[11] 게다가 IETF의 후원하에 개발은 상충하는 이해 관계 때문에
    지연되었다. 1996년부터 HTML 규격은 상용 소프트웨어 제작사의 투입으로 월드
    와이드 웹 컨소시엄(W3C)에서 유지해 왔다.[12] 하지만 2000년부터 HTML 또한
    국제 표준(ISO/IEC 15445:2000)이 되었다. 현재 W3C에 의해 발표된 최신 규격은
    1999년 말에 발표된 HTML 4.01 권고안이며 2001년에 문제와 오류들이 수정되어
    발표된 안이 최종 승인되었다.
  </body>
</html>

 

단락과 개행 (PARAGRAPH, LINEBREAK)

<p>
  This is first paragraph.
</p>
<p>
  This is second paragraph. <br>
  This is second pragraph.
</p>

 

  • <p> 태그는 글의 단락을 나타냄
  • <br> 태그는 글의 줄바꿈을 생성

 

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>Heading tags</title>
  </head>
  <body>
    <h1>역사</h1>
    <h2>개발</h2>
    <p>
      팀 버너스리<br>
       1980년, 유럽 입자 물리 연구소(CERN)의 계약자였었던 물리학자 팀
      버너스리가 HTML의 원형인 인콰이어를 제안하였다. 인콰이어는 CERN의
      연구원들이 문서를 이용하고 공유하기 위한 체계였다. 1989년에 팀 버너스리는
      인터넷 기반 하이퍼텍스트 체계를 제안하는 메모를 작성했다.[2] 버너스 리는
      1990년 말에 HTML을 명시하고, 브라우저와 서버 소프트웨어를 작성했다. 그
      해에 버너스리와 CERN 데이터 시스템 엔지니어 로버트 카일리아우와 함께
      CERN측에 자금 지원을 요청하였지만, 이 프로젝트는 CERN으로부터 정식으로
      채택 받지 못했다. 버너스리의 개인적인 기록[3]에 1990년부터 "하이퍼텍스트가
      사용되는 여러 분야의 일부"를 열거했고 백과사전을 그 목록의 첫 번째로
      두었다.
    </p>
    <h2>최초 규격</h2>
    <p></p>
    <p>
      HTML 최초의 일반 공개 설명은 1991년 말에 버너스리가 처음으로 인터넷에서
      문서를 "HTML 태그"(HTML tag)로 부르면서 시작되었다.[4][5]
    </p>
    <p>
      그것은 머릿글자로 이루어진 20개의 요소를 기술하였고, 상대적으로 HTML의
      단순한 디자인이었다. 하이퍼링크를 제외한 HTML 태그들은 CERN 자체의 SGML
      기반 문서화 포맷인 SGML GUID에 강하게 영향을 받았다. 이 요소 중 13개는
      HTML 4 버전에서도 여전히 존재한다.[6]
    </p>
    <p>
      HTML은 동적인 웹 페이지의 웹 브라우저를 통한 문자와 이미지 양식이다. 문자
      요소의 대부분은 1988년 ISO 기술 보고서 9537 SGML을 이용한 기법에서 찾을 수
      있다. 하지만 SGML 개념의 일반적인 마크업은 단지 개별 효과 보다는 요소
      기반이고 또한 구조와 처리의 분리(?)(HTML은 CSS와 함께 이 방향으로
      점진적으로 이동해 왔다.)
    </p>
    <p>
      버너스리는 SGML 응용 프로그램이 되는 HTML을 고안해야 했고 그것은
      공식적으로 IETF(국제 인터넷 표준화 기구)에 의하여 1993년 중반, HTML 규격에
      대한 최초의 제안을 간행물로 정의했다. (버너스리와 덴 콘놀리에 의한 문법을
      규정하는 SGML 문서 형식 정의(SGML DTD)가 포함된 "하이퍼텍스트 마크업
      언어(HTML)" 인터넷 초안[7]) 이 초안은 6개월 후 만료된다. 하지만 NCSA
      모자이크 브라우저의 인라인 이미지를 내장하는 사용자 정의 태그의 사례는
      주목할 만 했고, 성공적인 프로토타입에 대한 표준을 기반한 IETF의 철학을.
      [8] 마찬가지로 데이브 라그렛의 경쟁 인터넷 초안인 "HTML+ (하이퍼텍스트
      마크업 포맷)"은 1993년 말에 테이블과 기입양식 같은 요소들을 이미 구현하여
      표준화 제안을 했다.[9]
    </p>
    <p>
      이후 1994년 초 HTML과 HTML+ 초안은 만료되었고, IETF는 HTML 작업 그룹을
      설립해 1995년에 HTML 2.0을 완성한다. 최초의 HTML의 규격은 미래에 수행될
      HTML 표준을 기반으로 간주되는 경향이 있었다.[8]RFC 1996년에 HTML 2.0은
      HTML과 HTML+ 초안의 아이디어가 포함됐다고 발표했다.[10] HTML 2.0 지정은
      이전의 초안들로부터 새로운 버전을 구별하기 위해서였다.[11] 게다가 IETF의
      후원하에 개발은 상충하는 이해 관계 때문에 지연되었다. 1996년부터 HTML
      규격은 상용 소프트웨어 제작사의 투입으로 월드 와이드 웹 컨소시엄(W3C)에서
      유지해 왔다.[12] 하지만 2000년부터 HTML 또한 국제 표준(ISO/IEC
      15445:2000)이 되었다. 현재 W3C에 의해 발표된 최신 규격은 1999년 말에
      발표된 HTML 4.01 권고안이며 2001년에 문제와 오류들이 수정되어 발표된 안이
      최종 승인되었다.
    </p>
  </body>
</html>

 

 

 

3) 텍스트를 꾸며주는 요소

<p>
  <b>Lorem</b> <i>ipsum</i> dolor sit amet <br />
  <u>Lorem</u> <s>ipsum</s> dolor sit amet
</p>

  • <b> : 글자를 굵게 표현 bold
  • <i> : 글자를 이탤릭체로 표현 italic
  • <u> : 글자에 밑줄을 표현 underline
  • <s> : 글자에 중간선을 표현 strike

 

시멘틱 마크업

  • 시멘틱 = 의미론적인
  • 컴퓨터(브라우저)가 잘 이해할 수 있는 코드

 

<b>굵은</b> vs <strong>중요한</strong> <br />
<i>기울어진</i> vs <em>강조하는</em> <br />
<u>밑줄친</u> vs <ins>새롭게 추가된</ins> <br />
<s>중간선이 있는</s> vs <del>삭제된</del> <br />

  • 의미에 맞는 요소를 사용
  • 문서의 구조화
  • 인간과 기계가 모두 이해할 수 있는 것이 목표

 

 

 

4) 앵커 요소

  • HTML에서 HT(Hyper Text)는 링크를 의미하는 것으로, 링크는 클릭하기만 하면 다른 페이지로 쉽게 이동할 수 있음
  • 앵커 태그는 이런 링크를 생성
    • 앵커 태그를 이용해 다른 페이지로 이동하거나 현재 페이지 내에서 특정 위치로 초점을 이동시킬 수 있음
  • a
  • 내부 링크

 

앵커 (ANCHOR)

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

네이버로 이동

  • 다른 문서로 이동할 수 있는 링크 생성
  • href: 링크의 목적지가 되는 URL을 지정

 

target 속성 (링크된 리소스를 어디에 표시할지 나타내는 속성)

  • _self : 현재 페이지에서 바로 이동 (속성이 선언되지 않으면 기본적으로 self와 같이 동작)
  • _blank :  새창 또는 새탭으로 이동
  • _parent
  • _top

 

페이지 내부 특정 요소로 이동 시에는 <a href="# id값">네이버</a>

    <h1 id="top">역사</h1>
    <h2>개발</h2>
    .
    .
    .
    <p>
      이후 1994년 초 <a href="#top">HTML</a>과 HTML+ 초안은 만료되었고, IETF는
      HTML 작업 그룹을 설립해 1995년에 HTML 2.0을 완성한다.
    </p>

HTML 클릭 시, id값 있는 부분으로 이동함.

글 맨 아래에서 맨 위로 이동시키고 싶을 때, 이 방법 사용할 수 있을 듯.

<p><a href="#top">맨 위로 이동</a></p>

이런식으로!

 

Reference
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a

 

 

 

5) 의미가 없는 컨테이너 요소

  • div
  • span

 

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

<div>
  <span>Lorem</span> ipsum dolor sit.
</div>
  • 별다른 의미없이 다른 목적으로 필요할 때 사용함
  • <div>: block-level (한 줄을 생성해서 내용을 표현)
  • <span>: inline-level (블록 레벨 요소의 한 줄 안에서 표현되는 요소

 

  • <p>는 블록 레벨 태그
  • <b>, <i>, <u>, <s>는 모두 인라인 레벨 태그

 

 

 

6) 리스트 요소

  • ul
  • ol
  • dl

 

UL

콩나물국 레시피
<ul>
  <li>콩나물</li>
  <li>파</li>
  <li>국 간장</li>
</ul>

  • <ul>: unordered list로 순서가 없는 리스트

 

OL

콩나물국 레시피
<ol>
  <li>냄비에 국물용 멸치를 넣고 한소끔 끓여 멸치 육수를 7컵(1,400ml) 만든다.</li>
  <li>콩나물을 넣고 뚜껑을 덮어 콩나물이 익을 때까지 끓인다.</li>
  <li>뚜껑을 넣고 대파, 마늘, 고춧가루를 넣고 끓인다.</li>
</ol>

  • <ol>: ordered list로 순서가 있는 리스트

 

DL

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

  • <dl>: description list 용어를 설명하는 리스트
  • <dt>: definition term 용어를 구분
  • <dd>: definition description 용어의 정의를 나타냄

 

리스트의 중첩

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>list</title>
  </head>
  <body>
    <h1>월드컵 조 편성</h1>
    <ol>
      <li>
        A조
        <ul>
          <li>러시아</li>
          <li>우루과이</li>
          <li>이집트</li>
          <li>사우디아라비아</li>
        </ul>
      </li>

      <li>
        B조
        <ul>
          <li>이란</li>
          <li>스페인</li>
          <li>포르투갈</li>
          <li>모로코</li>
        </ul>
      </li>

      <li>
        C조
        <ul>
          <li>프랑스</li>
          <li>덴마크</li>
          <li>호주</li>
          <li>페루</li>
        </ul>
      </li>

      <li>
        D조
        <ul>
          <li>크로아티아</li>
          <li>아르헨티나</li>
          <li>아이슬란드</li>
          <li>나이지리아</li>
        </ul>
      </li>
    </ol>
  </body>
</html>

 

 

 

7) 이미지 요소

이미지(IMAGE) - 빈 태그

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>image</title>
  </head>
  <body>
    <img src="./pizza.jpg" alt="피자" height="400" />
  </body>
</html>

  • 문서에 이미지를 삽입
  • src: 이미지 경로 지정
    • 상대 경로: ./~   ../~ (현재 웹 페이지를 기준으로 상대적으로 이미지의 위치를 나타내는 경로)
      • <img src="./images/pizza.png" alt="피자">
    • 절대 경로: http://~   C:/~ (실제 그 이미지가 위치한 곳의 전체 경로)
      • <img src="C:/users/document/images/pizze.png" alt="피자">
      • <img src="http://www.naver.com/pizza.png" alt="피자">
  • alt: 이미지의 대체 텍스트를 입력 (웹 접근성 측면에서 중요한 속성)
  • width/heigh: 이미지의 가로/세로 크기를 지정 (자동으로 픽셀 단위로 계산)

 

<img src="http://placehold.it/500x250" alt="" />

<img src="http://placehold.it/500x250" alt="" width="250" />

width 속성에 값을 주면, 가로 크기가 줄어든다.

 

GIF vs. JPG vs. PNG

  • gif: 256색으로 한적이지만 용량이 작고, 애니메이션과 투명 이미지가 가능
  • jpg: 높은 압축률과 자연스러운 색상 표현이 가능하여 사진이나 일반적인 그림에 사용
  • png: jpg와 비교했을 때 이미지 손실이 없고 투명과 반투명 모두 지원

 

 

 

다음 포스팅에 이어서 정리.

 

 

 

부스트코스 [비전공자를 위한 HTML/CSS] 강의 공부 기록

 

 

 

300x250

'LEARN > HTML | CSS' 카테고리의 다른 글

[부스트코스] 3 HTML 콘텐츠모델, 시멘틱마크업, 블록  (0) 2022.03.14
[부스트코스] 2-2 HTML 태그  (0) 2022.03.13
[부스트코스] 1 HTML 이해하기  (0) 2022.03.10
[CSS] 14~15 코드의 재사용 style.css 파일 생성 실습 끝  (0) 2022.01.28
[CSS] 10~13 그리드 , 미디어 쿼리  (0) 2022.01.27

관련글

티스토리툴바