/ POSTS

HTML 기초 다지기

Note : 이 글은 지극히 주관적인 생각을 토대로 작성된 글입니다. 혹시나 잘못된 부분이 있다면 메일 또는 코멘트를 통해 알려주시면 감사하겠습니다. 😄 제 메일은 About 탭에서 확인하실 수 있습니다. 📧

P.S : 이 페이지는 웹에 최적화 된 페이지입니다. 가급적 모바일이 아닌 웹에서 보시는 것을 추천드립니다.

HTML5 문서의 구조.

DOCTYPE

  • ‘Document Type’의 줄임말로 문서 유형을 지정.

  • HTML5 태그는 아니지만 HTML5 문서라면 반드시 명세.

  • 어떤 HTML5 태그보다도 먼저 문서의 맨 앞에 선언됨.

  • 문서 선언부를 제외하고는 <html> 시작 태그로 시작해서 문서 내용들이 명세되고 마지막</html> 종료 태그로 끝남.

  • <html> 태그 안에는 <head>와 </head> 태그 쌍이 먼저 오고, <body>와 </body> 태그 쌍이 그 다음에 한번씩만 올 수 있다.

  • <!DOCTYPE html> 선언 : 웹 브라우저에게 HTML5로 작성되었음을 알림,TML5 문서 자체는 아스키(ASCII) 코드로 구성된 일반 텍스트 파일임.

  • 문서 작성은 일반 텍스트 편집기를 이용하면 가능.

  • 파일 확장자를 .html이나 .htm으로 저장.

  • 웹 브라우저로 읽어 들이면 해석하고 변환한 HTML5 문서 결과를 확인할 수 있음.

  • (ex) HTML5 문서 작성하기.

<!DOCTYPE html>                  <!-- 문서 유형 선언 -->
<html>                           <!-- HTML5 문서의 시작 -->
<head>                           <!-- 머리글(문서 설명 정보)의 시작 -->
<meta charset = "utf-8">         <!-- 문서의 인코딩 설정 -->
<title>HTML5 문서 제목</title>    <!-- 문서 제목(브라우저 상단에 표시됨) -->
</head>                          <!-- 머리글의 종료 -->
<body>                           <!-- 문서 본문 시작-->
 <h1>HTML이란?</h1>               <!-- 문서 본문(글 제목) -->
 HyperText Markup Language의 약어 <!-- 문서 본문(글 내용) -->
</body>                           <!-- 문서 본문 종료 -->
</html>                           <!-- HTML5 문서의 끝 -->
  • html 문서는 트리형태 화이트 스페이스는 블랭크로 인식해 한칸을 비우는 형식.

HTML의 5가지 기본 요소

태그(Tag) : ‘<’와 ‘>’로 둘러싸인 문자열, 시작태그(<>)와 종료태그(</>)로 구성, 문서 표현 방식을 지시.
(ex) <title>웹문서내용</title>

내용(content) : 태그로 둘러싸인 문자열
(ex) <title>웹문서내용</title>

엘리먼트(element) : 태그와 내용을 포함한 전체 문자열, HTML 문서의 기본 구성 단위 (상위)엘리먼트 안에 (하위)엘리먼트가 계층적으로 포함 될 수 있음. -> (ex) <title>웹문서내용</title>

속성(attribute) : 엘리먼트의 상세한 표현(기능) 설정 사항을 지시, 시작 태그 안에 사용. (ex) <title color="red"></title>

속성값(value) : 속성값(‘ ‘또는 “ “로 감싸야 함) -> (ex) <title color="red"></title>

엘리먼트

  • HTML5 문서는 기본적으로 엘리먼트들의 모임.

  • 하나의 웹 문서는 다양한 유형의 엘리먼트 조각으로 분리될 수 있음.

  • 엘리먼트 명세 형식.

    (ex) <시작태그 속성1="속서값1"........ 속성n="속성값n"> 내용</종료태그>

  • 혼란발생 -> 내용은 문서마다 다르지만 관련된 태그는 한정되어 반복 사용되므로 엘리먼트를 지칭할 때 태그 명을 주로 사용하기 때문.

태그(Tag)

  • 웹 브라우저가 해석해야 할 대상.

  • 엘리먼트의 시작과 같을 지정하는 엘리먼트 구성 요소 중의 하나.

  • 엘리먼트 내용에 대한 의미나 역할을 표현하는 일종의 ‘명령어’

HTML5 마크업 명세 규칙.

  • 엘리먼트의 맨 앞에 시작 태그가 위치하며 종료 태그가 맨 끝에 위치.

  • 태그는 엘리먼트 내용을 감싸는 역할.

  • 태그는 보통 시작 태그와 종료 태그의 쌍으로 명세.

  • 태그 이름은 대소문자를 구분하지 않음.

  • 엘리먼트 안에 또 다른 엘리먼트가 포함될 수 있음(엘리먼트 간에 상위 엘리먼트(태그)와 하위 엘리먼트(태그)의 계층 관계가 존재.)

  • 태그들은 서로 겹치지 않게 모든 하위 태그들이 열렸다 닫혀야만 상위 태그가 닫힐 수 있음.

  • 주석은 ‘’ 사이에 입력.

  • 속성은 시작 태그 안에 위치하며 속성이름과 속성값(큰 따옴표(“ “) 안) 명세.

  • 엘리먼트는 속성을 여러 개를 가질 수 있음.

엔티티[entity] 코드

  • ’<’나’>’처럼 HTML5에서 특별한 의미가 부여된 문자는 웹 브라우저가 정해진 규칙에 의해 자동 해석하기 때문에 그대로는 문서 정보로 입력할 수 없음.

  • 자판으로는 입력할 수 없는 특수 기호나 특수 문자를 문서 안에 포함해야 할 경우.

  • 엔티티 문자나 엔티티 숫자를 사용하여 특수 문자나 특수 기호를 입력.

  • 대표적인 엔티티 코드.

특수문자(기호) 엔티티 문자 엔티티 숫자
공백문자 &nbsp; &#160;
인용부호(‘ ’) &quot; &#34;
앤퍼센트(&) &amp; &#38;
~보다 작은(<) &lt; &#60;
~보다 큰(>) &gt; &#62;
저작권(@) &copy; &#169;

목록 태그

  • <ol> -> 순서 목록 태그, 순서화 목록(ordered list)을 표시.

  • <ul> -> 비순서화 목록(unordered list)을 표시.

  • <li> -> 목록 항목 태그

  • <ol> 또는 <ul>의 하위 태그로 목록 항목(listed item)들을 표시, 각 항목들 앞에는 글머리 기호가 자동으로 표시.

    태그 속성 속성값 의미
    <ul> type disc(기본값)
    Circle
    square    		 검은색 원 글머리 표시
    흰색 원 글머리 표시
    검은색 사각형 글머리
    <ol> type 1(기본값)
    A
    a
    l
    l    		 숫자(1,2,….) 글머리 표시
    알파벳대문자 글머리 표시
    알파벳 소문자 글머리 표시
    로마숫자대문자 글머리 표시
    로마숫자소문자 글머리 표시
    <ol> start 숫자 글머리 시작 번호를 지정.
    <li> value 숫자 특정 목록 번호 지정.

링크 태그

  • <a>

  • 링크 태그 -> 특정 위치로의 이동(하이퍼링크)을 지시.

  • 문서간 이동 -> href 속성에 URL을 포함한 파일명(절대 주소)을 지정.

   <!-- 외부 문서간 이동 -->
    <a href="http://www.google.com">구글 사이트</a>

  • href 속성에 파일 경로명(상대 주소)을 지정.

  • 문서내 이동 -> 문서 내용이 많아 문서 내에서 참조가 빈번히 발생하는 경우 지정.

  <!-- 문서내 특정 위치 이동 -->
     <a id="aaa"></a>
     <a href="#aaa">샘플 HTML 문서</a>
  • <a> 태그 속성
속성 속성값 기능
href URL주소



#아이디		 링크를 통해 이동하고자 하는 문서를 위치를 지정
절대 주소 지정 방식 : URL 주소 설정.
상대 주소 지정방식 : 파일 경로명 설정.

문서내 특정 아이디를 갖는 태그 위치를 지정.
title 문자열 하이퍼링크에 대한 설명 지정.

테이블 태그

  • <table> -> 표 태그, 표를 생성하며 하위에 <tr>, <th>, <td> 태그를 사용하며 표안에 채울 내용을 지정.

  • 속성(border) -> 기능(표의 테두리 두께를 지정.)
    (ex) <table broder = "" >

  • <tr> -> 표 행 태그, 표 안에 행(table row) 하나를 생성, 하위에 <th> 태그와 <td> 태그를 추가로 사용.

  <th> -> 제목 열 태그, 행 안에 제목 열(table header)을 표시.
  <td> -> 내용 열 태그, 표의 실제 내용(table data)을 갖는 열을 표시.
  <thead> -> 표 머리 태그, 표 머리 표시 행들을 그룹화.
  <tbody> -> 표 본문 태그, 표 내용 표시 행동을 그룹화.
  <tfoot> -> 표 꼬리 태그, 표 꼬리 표시 행동을 그룹화.
  <caption> -> 표 제목 태그, 표 제목을 표시.

이미지 태그

태그 의미 기능
<img/> 이미지 태그 웹 문서 안에 이미지(image)를 생성
속성
src->URL주소, 포함할 이미지 파일의 물리적 파일 경로명
alt ->문자열, 이미지를 선택하거나 해당 이미지가 없을 경우에 표시되는 문자열(대체 메시지)
height-> 수치, 이미지 영역의 높이(단위:px(기본),%)
width-> 수치, 이미지 영역의 너비(단위:px(기본), %)
<img src="google.jpg"alt="구글 로고“height="100"width="80"/><br/>
<figure> 그림 태그 이미지와 관련 텍스트를 묶어 하나의 독립된 그룹으로 정의
<figcaption> 그림 제목 태그 이미지 제목(내용 설명)을 표시.
<figure>
<img src="google.jpg" alt="구글 로고“ width="80"/><br/>
<figcaption>(그림)구글사이트 링크</figcaption>
</figure>

오디오 태그

  • <audio> -> 오디오 태그, 웹 표준 기술만으로 음악을 재생.
<audio 속성="속성값"속성="속성값....>
  <source src="오디오파일경로"type="인코딩유형"/>
</audio>
태그 속성 속성값
src URL 주소 재생할 음악 파일의 경로
autoplay autoplay(기본값) 음악을 자동 재생할지, 대기 상태로 시작할지 여부를 지정
preload auto(기본값)
none
metadata		 페이지 로드시 음악 파일의 자동 로드 여부를 지정
재생 전 자동 로드를 지시
재생 전 자동 로드를 방지
재생 전 오디오 메타 정보만을 로드하도록 지시
controls controls(기본값) 제어기(play, pause, sound 버튼)의 표시여부를 지정

<audio>태그

  • <img>태그와 사용 방법이 비슷

  • src 속성은 재생할 음악 파일의 물리적 파일 경로명을 지정

  • controls 속성은 화면에 제어기(player)를 표시하는 역할을 하며 브라우저마다 제어기 모양이 조금씩 다름.

  • autoplay, loop, controls 속성은 속성명과 속성 기본값이 같아 속성값을 생략하고 속성명만 명세해도 똑같이 동작한다.

<audio autoplay loop="2"src="audio.mp3"preload="auto"controls> </audio>

<audio autoplay="autoplay"loop="loop"src="audio.mp3"controls="controls">
  • 반복 횟수만 제한 없이 반복 재생되는 점을 제외하고는 앞의 예와 동일하게 실행.

오디오 소스 태그

<source>태그

  • 웹 브라우저가 지원하지 않거나 관련 코덱이 설치되지 않은 경우, 특정 오디오 파일이 재생되지 않을 수 있다.

  • <audio> 태그의 src 속성은 대신해서 사용.

  • 여러 개의 오디오 파일을 반복해서 지정

  • <source> 태그 안의 오디오 파일을 순서대로 검사하면서 지원하는 파일 형식을 만나면 더 이상 다음 파일을 확인하지 않고 바로 해당 파일을 재생.

  • <source> -> 오디오 소스 태그, 플러그인 없이 웹 브라우저에서 음악을 재생.

<audio autoplay controls>
  <source src="audio.ogg"type="audio/ogg">
  <source src="audio.mp3"type="audio/mpeg">
  브라우저에서 오디오 파일을 지원하지 않습니다.<br/>
</audio>
속성 속성값 기능
src URL 주소 재생할 오디오 파일의 경로명 지정.
type MINE 형식 재생할 오디오 파일의 MIME 형식 지정
media 미디어쿼리 재생할 오디오 파일을 위한 미디어 지정.

비디오 관련 태그

  • <video> 태그만으로 동영상도 쉽게 삽입.

비디오 태그

  • <video> -> 비디오 태그, 플러그인 없이 웹 표준 기술만으로 동영상을 재생.
<video 속성="속성값1" 속성="속성값2"..>
       <source src="동영상파일경로"type="인코딩유형"/>
</video>
속성 속성값 의미
src URL 주소 재생할 동영상 파일의 경로명을 지정.
autoplay autoplay 동영상 자동 재생 여부를 지정.
loop loop(기본값) 반복 재생 여부, 횟수를 지정.
preload auto(기본값)
none
meta data		 페이지 로드시 동영상 파일의 자동 로드 여부를 지정
재생 전 자동 로드를 지시
재생 전 자동 로드를 방지
재생 전 메타 정보만을 로드하도록 지시
controls controls 제어기(play, pause, sound 버튼)를 표시하도록 지정.
poster URL 주소 재생 준비 과정(대기상태)중 표시할 포스터 이미지 파일 경로 지정.
height 수치 동영상 재생 영역의 높이를 지정
width 수치 동영상 재생 영역의 너비를 지정

<video> 태그

<video autoplay src="video.mp4"controls width="320"height="240"poster="audio.jpg">
</video>

  • autoplay 속성을 지정함으로써 페이지를 읽어 들임과 동시에 바로 비디오 파일이 자동 재생.

  • 재생 이전에 동영상이 로딩되고 있는 동안 poster 속성값으로 지정된 이미지가 표시.

  • autoplay와 controls 속성의 경우, 속성값을 생략 가능

<video src="video.mp4"controls width="320" height"240" preload="metadata">
</video>

  • preload 속성이 ‘metadata’ : 비디오 크기, 첫 프레임, 관련 정보 등이 재생 전에 로드되기 때문에 화면에 비디오 내용이 미리 표시.

  • preload 속성이 ‘none’ : 화면에 아무 내용도 미리 표시되지 않음.

  • 사용자가 제어기를 조작해야만 내용이 표시됨.

비디오 소스 태그

  • 웹 브라우저마다 지원하는 동영상 파일 형식이 다양함.

  • 많이 사용되는 동영상 파일 형식들을 <source> 태그를 사용하여 모두 명세

  • 명세한 비디오 형식을 모두 지원하지 않는 브라우저를 위해 표시할 메시지도 마지막에 추가.

  • <source>태그는 <audio>태그와 동일하게 <video>태그에서도 하위 태그로 사용.

<video autoplay controls>
     <source src="video.webm"type="video/webm">
     <source src="video.mp4" type="video/mp4">
     <source src="video.ogg"type="video/ogg">
     브라우저에서 비디오 파일을 지원하지 않습니다. <br/>
</video>

공간 분할 태그

  • 태그 자체의 특별한 의미나 기능이 없이 단지 페이지 공간 분할의 단위로 사용.

  • 같은 공간에 위치할 엘리먼트들을 담는 컨테이너(Container)의 역할.

  • 여러 하위 태그들을 특정 공간에 그룹화하여 공간 배치를 쉽게 하도록 함.

  • 예) <div>와 <span>

<div>와 <span>태그

  • 그룹화된 공간을 하나의 단위로 하요 스타일을 적용하면 웹 문서 전체의 레이아웃을 쉽게 구성할 수 있음.

<div> 태그

  • 공간 분할을 위해 가장 많이 사용되는 태그.

  • 태그들을 묶어 그룹화하는 컨테이너로서 전체 문서를 구조화함.

  • 스타일시트와 결합하면 그룹에 속한 태그들을 한번에 모두 같은 스타일로 적용가능.

<span> 태그

  • 내용 일부를 다른 엘리먼트들과 분리하고자 할 때 사용.

  • 내용을 강조하거나 각기 다른 스타일을 적용할 수 있음.

공간 분할 태그의 표시 형식

  • 블록 형식과 인라인 형식

  • 줄바꿈 여부가 블록 형식과 인라인 형식을 구분하는 가장 큰 기준

  • 일반 태그들도 블록 형식과 인라인 형식의 공간 분할 방식을 적용 받음.

<body>
           <div>하늘</div>
           <div>바다</div>
           <div>섬</div>
           <span>봄</span>
           <span>여름</span>
           <span>가을</span>
           <span>겨울</span>
</body>

공간 분할 형식

  • 보통 블록 형식 태그들을 하나로 묶어 감쌀 때는 <div>태그를, 내부에 인라인 형식 태그들을 감쌀 때는 태그를 사용.
속성 속성값 의미
블록 형식 <div> 블록(block) 형식으로 공간을 분할하는 영역을 정의
영역 공간이 매번 줄바꿈이 되어 새로운 행에 생성되는 방식
하위에 다른 블록 형식 태그나 인라인 형식 태그를 포함할 수 있음
블록 형식 일반태그 <div>,<h1>~<h6>,<p>,<table>,<ui>,<ol>,<li>,<from>
인라인 형식 <span> 인라인(inline) 형식으로 공간을 분할하는 영역을 정의
영역 공간이 입력 내용의 길이만큼만 차지하면서 줄바꿈 없이 같은 줄에 계속 추가되는 방식
반드시 블록 형식 태그의 하위에 포함되어야 하며 하위에 블록 형식 태그를 포함할 수 없음.
인라인 형식 일반태그 <span>,<img>,<a>,<input>,<li>,<b>,<strong>,<small>,<sub>,<sup>,<ins>,<del>
(단, HTML5에서는 <a> 태그 내부에 <h1>~<h6>,<p>,<ul>,<ol> 등의 블록 형식 태그를 포함할 수 있음)

시멘틱 태그

HTML5 : 웹 페이지 구성 방식의 변화도 포함

  • 문서에 정보의 의미도 함께 고려하도록 함.

  • <div> 태그를 세분화하여 각 태그에 의미를 부여함으로써 페이지를 의미 단위로 분할.

  • 시맨틱 태그(semantic tag)

    -> 태그만으로 문서를 쉽게 이해할 수 있도록 의미를 부여한 새로운 태그.

    -> 어떤 표현이나 행위를 지시하기 보다는 웹 문서의 내용을 담고 있는 의미를 명확히 전달할 목적으로 만들어진 태그.

속성 속성값 의미
<header> 머리말 영역 페이지(혹은 내용) 상단의 머리말을 지정
페이지 제목, 소개 글이나 로고 이미지 등이 포함.
<body>,<section>,<article> 태그 안에서 여러 번 포함 가능
<nav> 메뉴 영역 페이지 이동을 위한 메뉴 영역을 지정
이전 페이지, 다음 페이지, 특정 페이지나 사이트에 대한 연결 등 네비게이션 요소로 구성
<header>, <aside>,<footer> 태그 안에도 여러본 포함 가능
<aside> 보조영역 페이지의 좌,우 측면 공간 같은 보조 영역을 지정
광고나 즐겨찾기 링크, 관련 이미지 정보 등을 제공.
<section>,<article> 태그 안의 내용과 간접적으로 관련된 내용을 포함.
<section> 형식적 구분 영역 제목을 갖는 연관된 내용 영역을 지정
하나의 제목(<h1>~<h6>)태그)을 중심으로 내용들을 그룹화.
<section> 태그안에 또 다른 <section> 태그를 포함한 다양한 태그들이 중첩되어 사용.
<article> 내용적 구분 영역 독립적인 개별 내용 영역을 지정
블로그나 댓글, 신문, 잡지의 기사 등을 제공
별도로 배포되거나 재사용 가능한 내용으로 그룹화.
<section> 태그와 <article> 태그 사이의 중첩 가능
<footer> 꼬리말 영역 페이지(혹은 내용) 하단의 꼬리말을 지정
작성자와 작성 날짜, 저작권 등 웹 페이지 관련 추가 정보들을 포함.

HTML 레이아웃의 변화.

기존 레이아웃 방식

  • 모든 레이아웃 영역을 <div> 태그를 사용하므로 세부적인 구별이 어려움.

  • <div> 태그의 id 속성값으로 의미를 표시하거나 class 속성값으로 의미를 표현.

시멘틱 레이아웃 방식

  • 레이아웃 영역을 시멘틱 태그를 이용하여 구분

  • <div> 태그를 여러 시맨틱 태그로 세분화하여 표시.

  • 아이디(또는 클래스)이름들을 표준 시맨틱 태그로 정의함으로써 문서의 의미 구조를 명확하고 간결하게 표현하도록 개선.

<!-- 기존 레이아웃 방식 -->
<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
   <title>과거 HTML 레이아웃</title>
 </head>
 <body>
   <div id ="header"> ...</div>
   <div id ="nav"> ...</div>
   <div id ="sidebar"> ...</div>
   <div id ="section1"> ...
   <div id ="article"> ...</div>
   </div>
   <div id ="section2"> 
     ...
     <div id ="section2_1">
     ...
     </div>
   </div>
   <div id="footer"> .... </div>
  </body>
</html>       

<!-- 시맨틱 레이아웃 방식 -->
<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
   <title>HTML5 레이아웃</title>
 </head>
 <body>
   <header> ...</header>
   <nav> ...<nav>
   <aside> ...</aside>
   <section id ="section1"> ...
   </article> ...</article>
   </section>
   <section id ="section2"> 
     ...
     <section id ="section2_1">
     ...
     </section>
   </section>
   <footer> .... </footer>
  </body>
</html>