Post

HTML | HyperText Markup Language

Posted
By 탱
28 min read

KT 에이블스쿨 6기 HTML에 진행한 강의 내용 정리한 글입니다.

웹 개발 이해

웹 표준 & 마크업 언어

웹 표준

웹에서 표준적으로 사용되는 기술이나 규칙

  • 표준화 단체인 W3C가 권고한 표준안에 따라 웹사이트를 구성하는 HTML, CSS, JS등에 대한 규정이 담겨 있음
  • 브라우저 종류 및 버전에 따른 기능 차이에 대하여 호환이 가능하도록 제시된 표준
  • 궁극적인 목적으로는 사용자가 어떠한 브라우저를 사용하더라도 동일한 결과를 보이게 하는 것

마크업 언어

웹에서 사용된 문서가 어떻게 구조화되는지 나타내는 언어

  • 대표적으로는 HTML, XML, SGML, SVG 등이 있음
  • HTML은 사용하기 편리하고 단순한 구조를 가지고 있어 폭발적인 인터넷 보급에 기여한 언어

웹 개발자의 역할

웹 개발자 인터넷에서 사용되는 웹사이트나 웹 어플리케이션을 만드는 사람

  • 웹 페이지를 디자인하고 개발하며, DB(Database)에 연동하여 사용자의 데이터를 저장하거나 요청에 대한 응답을 처리함
  • 프론트엔드 개발과 백엔드 개발을 나눠서 개발을 진행

백엔드

  • 사용자가 볼 수 없는 환경을 구성하는 영역
  • 프론트엔드에서 구현된 기능들이 서버에서 동작하는 기능을 구현
  • 주로, 서버 분야로 서버가 터지지 않게 하고, 응답 시간을 최적화하거나 데이터를 저장 및 관리함

프론트엔드 개요

프론트엔드 개념

프론트엔드

  • 프론트엔드는 사용자가 볼 수 있는 화면, 즉 사용자 인터페이스(User Interface, UI)
  • 화면상 보이는 디자인과 이미지, 텍스트 등을 포함하며, 사용자와 웹이 직접 상호작용하는 부분
  • 웹 개발자는 사용자의 경험에 맞춰 서비스를 최적의 인터페이스로 갖추는 것이 중요
  • 사용하는 언어로는 HTML, CSS, JavaScript 등이 있음

프론트엔드 개발자의 역할

프론트엔드는 주로 사용자의 인터페이스(User Interface, UI)와 사용자 경험(User Experience, UX)을 디자인하고 구현

  • 사용자와 직접적으로 상호작용 하는 부분을 담당하여 개발
    • 반응형 웹 디자인: 다양한 장치와 화면 크기에 맞게 콘텐츠를 적절하게 표시하기 위한 디자인
    • 프론트엔드 성능 최적화: 로딩 시간을 줄이고 효율적인 코드를 작성하여 사용자 경험을 개선
    • 크로스 브라우징 호환성: 다양한 브라우저에서 웹 사이트나 애플리케이션이 개발자의 목적에 맞게 작동
    • 웹 표준 및 접근성 준수: 웹 표준을 준수하여 사용자와 장치에서의 접근성이 높은 사이트를 구축

사용자 인터페이스 & 사용자 경험

사용자 인터페이스

  • 반응형 웹 디자인: 다양한 장치와 화면 크기에 맞게 콘텐츠를 적절하게 표시하기 위한 디자인
  • 프론트엔드 성능 최적화: 로딩 시간을 줄이고 효율적인 코드를 작성하여 사용자 경험을 개선
  • 크로스 브라우징 호환성: 다양한 브라우저에서 웹 사이트나 애플리케이션이 개발자의 목적에 맞게 작동
  • 웹 표준 및 접근성 준수: 웹 표준을 준수하여 사용자와 장치에서의 접근성이 높은 사이트를 구축

사용자 경험

  • 사용자가 제품, 시스템, 서비스를 이용하면서 경험하는 전반적인 감정과 반응을 뜻함
  • 사용자가 해당 플랫폼을 얼마나 쉽고 편하게 효과적으로 사용할 수 있는지를 포함
    • 사용성: 직관적인 인터페이스, 명확한 지침 등 서비스가 사용하기 쉬워야 함
    • 접근성: 모든 사용자 특히 장애를 가진 사용자도 서비스에 쉽게 접근하고 사용할 수 있어야 함
    • 효율성: 사용자의 목표를 빠르고 효과적으로 달성해야 함

HTML 문서의 구조

웹 페이지를 생성하기 위한 표준 마크업 언어

  • 웹 페이지의 구조를 설명
  • 웹 페이지의 콘텐츠를 정의
  • 일련의 요소(Element)로 구성
  • 요소들은 브라우저에 콘텐츠를 표시하는 방법을 알려줌
  • 요소는 콘텐츠의 레이블을 지정
  • 초기 웹의 응용 분야에서 추가로 필요한 기능을 구현하기 위해 HTML5가 출현

HTML5의 특징

  • 구조적 설계: 콘텐츠의 본문과 이외의 부분을 분류하였고, header, section, footer, nav, aside등으로 구분
  • CSS3: 스타일을 적용하기 위해 사용하는 언어로, CSS1에서 기능을 추가한 CSS3을 지원
  • JavaScript: 동적인 웹 페이지를 제작하기 위해 활용되는 언어
  • 다양한 API 제공: 드래그 앤 드롭, 웹 스토리지, 웹소켓 API 등 다양한 API를 제공
  • 멀티미디어 기능 강화: video, audio, canvas 등의 태그를 활용할 수 있고 플래시 같은 플러그인을 설치하지 않아도 동작
  • 모바일 웹 지원: 아이폰이나 안드로이드에서도 동일하게 구현

HTML 문서 기본 구조

1
2
3
4
5
6
7
8
9

<!DOCTYPE html>
<html>
    <head>
        <title>제목</title>
    </head>
    <body>
        <p>콘텐츠 내용</p>
    </body>
</html>
  • <!DOCTYPE html>과 <html>, <head>, <title>, <body> 4개의 기본 태그가 있음
  • 문서 형식 선언 <!DOCTYPE html>
    • 문서가 어떤 마크업 언어 형식으로 작성되었는지 명시
    • ‘HTML5로 작성되었다’는 의미
  • 문서의 시작과 끝 <html>
    • 실제 문서 내용 표시
    • lang 속성 추가 가능
    • 한국어는 ko, 영어는 en 등을 속성값으로 입력
    • 여는 태그는 문서 시작, 닫는 태그는 문서 끝
  • 문서의 제목 <title>
    • 입력한 제목이 웹 브라우저의 탭에 표시
  • 화면에 표시된 콘텐츠 <body>
    • HTML5 문서 본문 작성 공간
    • <body> 태그 안에 텍스트, 이미지, 미디어 요소 등 다양한 태그 추가 가능

HTML 문서 작성 규칙

  • 태그 이름은 대소문자 구분 없음
    • <body>, <BODY>, <Body> 모두 같은 태그
  • W3C는 소문자 사용 권장
  • 연속된 공백과 줄바꿈은 하나의 공백으로 처리
  • 들여쓰기로 태그 포함 관계 표현
  • 시작 태그와 종료 태그 쌍이 겹치지 않게 작성, 종료 태그 반드시 사용
  • 주석은 <!--로 시작하고 -->로 끝내야 함

기본 태그

태그의 속성(Attribute)

  • 태그의 종속적 정보 표현
  • 하나의 태그에 같은 속성은 한 번만 사용 가능
  • 속성에 값이 없으면 속성 이름만 작성 가능
  • 태그의 동작이나 표현 제어
  • 각 태그마다 고유한 속성 존재
속성설명
id문서에서 유일한 식별자 설정, CSS나 JS에서 요소 찾을 때 사용
class요소의 클래스 설정, CSS에서 스타일 적용 또는 JS에서 요소 선택시 사용
style요소에 인라인 스타일 적용, CSS 속성들을 ‘속성: 값’ 형식으로 설정
title요소에 추가 정보 제공하는 텍스트 설정
href<a> 태그에서 링크 대상 URL 설정
src<img>, <audio>, <video>, <script> 태그에서 외부 리소스 경로 설정
alt<img>에서 이미지 설명 대체 텍스트 제공
type요소의 타입 설정
value<input>, <option>, <button> 등에서 요소 값 설정
placeholder<input>, <textarea>에서 입력 전 표시되는 안내 텍스트 설정
selected<select> 요소 내 <option>에서 기본 선택된 옵션 표시
checked체크박스나 라디오 버튼에서 체크된 상태 표시
disabled체크박스나 라디오 버튼에서 비활성화된 상태 표시

태그 분류

  • HTML 태그는 미리 정의된 태그와 사용자 정의 태그로 나뉨
    • 미리 정의된 태그
      • 구조 기술 태그: 문서의 구조를 정의하는 태그
      • 멀티미디어 태그: 이미지, 비디오, 오디오 등을 처리하는 태그
    • 사용자 정의 태그
      • 의미적 태그: 특정 의미를 가지는 태그
      • 비의미적 태그: 의미가 없는 태그, 스타일이나 구조만 지정

구조 기술 태그

HTML 문서의 기본 구조를 만들기 위한 태그들

태그설명
<!DOCTYPE html>문서가 HTML5 버전임을 선언
<html>HTML 문서의 루트 요소
<head>문서의 메타데이터 포함
<title>웹 브라우저 탭에 표시되는 문서의 제목 정의
<meta>문자 인코딩, 뷰포트, 저자, 키워드 등 문서의 메타데이터 정의
<link>외부 리소스를 문서에 연결
<script>클라이언트 측 스크립트(JS)를 문서에 포함하거나 참조
<body>실제 내용과 화면에 표시될 요소들이 위치하는 부분

사용자 정의 태그

  • 태그 간의 관계는 포함 관계 또는 동등 관계를 고려하여 만들어야 함
  • CSS나 제이쿼리 등에서 사용자 정의 태그가 중요함
  • 의미가 없는 비의미적 요소도 만들 수 있음

텍스트 관련 태그

태그설명
<i>이탤릭체로 변환
<em>강조하여 표시
<b>볼드체로 표시
<strong>중요한 내용 표시
<small>글씨 크기를 작게 표시
<sub>아래첨자 표시
<sup>윗첨자 표시
<mark>하이라이트 표시
<code>컴퓨터 코드 표시
<ins>삽입된 콘텐츠, 의미 강조 밑줄 표시
<u>단순 시각적 밑줄 표시
<del>텍스트에 취소선 표시
<s>텍스트에 취소선 표시
<blockquote>인용문을 나타내는 태그

공간 분할 태그 <div>와 <span>

  • <div>와 <span>은 HTML에서 레이아웃과 스타일을 정의하는 기본 요소
    • <div>
      • 웹 브라우저 전체 공간을 ‘block’ 형식으로 분할
      • 블록 레벨 요소, 새로운 줄에서 시작
    • <span>
      • 웹 브라우저의 일부 영역을 ‘inline’ 형식으로 분할
      • 인라인 요소, 텍스트나 콘텐츠 내에서 사용

공간 분할 태그 <iframe>

  • <iframe>은 HTML 문서 내에 또 다른 HTML 문서를 내장하는 요소
    • 현재 문서 안에 독립적인 다른 페이지를 표시 가능
    • 주로 비디오, 맵, 다른 웹 사이트 페이지 등을 삽입할 때 사용

하이퍼링크 태그

  • <a> 태그는 다른 사이트나 같은 문서 내 다른 위치로 이동하는 링크를 생성
    • 링크는 텍스트일 필요 없음, 이미지나 다른 HTML 요소도 링크로 사용 가능
    • <a href="URL"> 형식으로 사용, URL에는 대표적으로 5가지 유형이 있음
유형예시
절대 경로 (Absolute URL)<a href="https://www.example.com/page.html">절대 URL</a>
상대 경로 (Relative URL)<a href="page.html">상대 URL</a>
루트 상대 (Root-relative URL)<a href="/folder/page.html">루트 상대 URL</a>
프래그먼트 (Fragment URL)<a href="#section">프래그먼트 URL</a>
이메일 링크 (Mailto URL)<a href="mailto:someone@example.com">이메일 보내기</a>

<a> 태그의 target과 rel 속성

  • target: 링크를 클릭 했을 때 웹 사이트가 열릴 곳을 지정하는 역할
  • rel: 현재 문서와 링크된 문서 간의 관계를 명시
속성설명
_blank새로운 웹 브라우저 창에 열기
noopener링크된 페이지가 원본 페이지와의 관계를 유지하지 못하도록 함
_self현재 웹 브라우저 창에 열기 (기본값)
noreferrerHTTP 참조자 정보를 전송하지 않음
_parent부모 웹 브라우저 창에 열기
nofollow검색 엔진이 이 링크를 따라가지 않도록 함
_top웹 브라우저 전체 영역에 열기
external링크가 외부 사이트로 연결됨을 나타냄

목차(list) 태그

  • HTML에는 목록을 나타내는 <ol>, <ul>, <dl> 태그가 있음
    • <ol>
      • 순서가 있는 목록
      • 내부 태그로 <li> 사용
    • <ul>
      • 순서 없이 불릿으로 표시
      • 내부 태그로 <li> 사용
    • <dl>
      • 각 항목은 <dt>로 정의
      • 항목에 대한 설명은 <dd>로 나타냄

<ul> 속성 기호

속성기호
list-style-type: disc●
list-style-type: circle○
list-style-type: square■
list-style-type: none없음

<ol> 속성 기호

속성기호
11, 2, 3…
AA, B, C…
aa, b, c…
II, II, III…
iⅰ, ⅱ, ⅲ…

테이블과 폼

주요 테이블 태그

테이블 태그를 사용하여 표를 만들 수 있음

태그설명
<table>표의 시작과 끝을 나타냄
<tr>표의 각 행을 나타냄 (Table Row)
<th>표의 머리글 셀을 나타냄 (Table Header)
<td>표의 일반 셀을 나타냄 (Table Data)

테이블의 시맨틱 태그

테이블의 시맨틱 태그를 사용하면 웹 페이지의 접근성과 가독성을 높일 수 있음

태그설명
<thead>테이블의 헤더 부분을 나타냄
<tbody>테이블의 본문 부분을 나타냄
<tfoot>테이블의 바닥글 부분을 나타냄

테이블 속성

  • 테이블을 생성할 때 특정한 상황이나 스타일에 따라 다양한 속성을 활용 가능

<table>의 속성

속성설명
border테이블의 테두리 두께를 지정함
width테이블의 너비를 설정함
height테이블의 높이를 설정함
cellpadding셀 내부의 여백을 설정함
cellspacing셀 사이의 간격을 설정함
align테이블의 정렬을 설정함
bgcolor테이블의 배경색을 설정함

align의 속성값

속성값설명
center테이블을 가운데 정렬함
left테이블을 왼쪽 정렬함
right테이블을 오른쪽 정렬함
justify테이블을 양쪽 정렬함
initial브라우저의 기본값을 사용함

테이블 병합

  • rowspan 속성: 세로 방향(행)으로 셀을 병합
  • colspan 속성: 가로 방향(열)으로 셀을 병합

폼(Form)

  • <form> 태그는 사용자로부터 데이터를 수집하기 위한 양식을 만듦
    • 다양한 입력 요소들을 위치시킬 수 있음
    • 수집된 데이터를 서버에 제출할 수 있음

<form>

태그설명
<form>폼의 시작과 끝을 정의
<input>사용자 입력을 받을 수 있는 입력 필드
<textarea>여러 줄의 텍스트 입력을 위한 영역
<label>input 요소에 레이블 추가
<select>드롭다운 선택 메뉴 생성
<datalist>드롭다운 선택 메뉴 생성
<option><select>, <datalist>에서 선택 가능한 옵션 정의
<button>사용자가 클릭할 수 있는 버튼 생성

<form>의 속성

속성설명
action폼 데이터를 보낼 URL 지정
methodget: URL 쿼리 문자열로 전송
post: HTTP 요청 본문에 포함되어 전송

폼의 목적

  • HTML에서 사용자 입력을 위한 드롭다운 메뉴를 생성할 때 사용됨
  • 목적과 방식에 차이가 있음

폼 <input> 태그

  • <input> 태그는 사용자가 입력을 받을 수 있는 입력 필드를 생성

<input>의 속성

속성설명
type입력 필드의 유형을 지정
name폼 데이터와 함께 전송될 필드의 이름을 지정
value입력 필드의 초기값 또는 버튼의 라벨을 지정
placeholder필드에 표시될 힌트나 설명을 제공
required필수 입력 필드임을 지정
readonly필드의 값을 읽기 전용으로 설정
disabled필드를 비활성화

<input type>의 유형

유형설명
text기본 텍스트 입력 필드 생성
password비밀번호 입력 필드 생성
submit폼을 제출하는 버튼 생성
radio라디오 버튼 생성
checkbox체크박스 생성

멀티미디어 태그

임베디드 콘텐츠 태그

  • 임베디드 콘텐츠 태그는 멀티미디어 데이터를 웹 문서에 포함시킬 수 있는 태그임
  • 멀티미디어 파일을 웹 문서에 삽입할 때는 웹 문서와 같은 폴더에 있어야 함
  • 같은 폴더에 있지 않으면 파일의 절대 경로를 모두 입력해야 함
태그설명
<canvas>그래픽 그리기
<img>이미지 파일 삽입
<audio>오디오 파일 삽입
<video>비디오 파일 삽입
<source>미디어 소스 삽입
<embed>객체 삽입

이미지 삽입

<img> 태그를 사용하여 이미지를 웹 페이지에 삽입

속성설명
src이미지의 경로를 지정
alt이미지가 로딩되지 않을 때 대체 텍스트
width이미지의 너비를 지정
height이미지의 높이를 지정

비디오 삽입

  • <video> 태그를 사용하여 동영상을 웹 페이지에 삽입
  • 최근 브라우저는 사용자 보안을 위해 자동 재생에 제한을 둠
속성설명
src경로 지정
controls재생 컨트롤 바를 추가
autoplay페이지가 로딩될 때 자동 재생
loop동영상이 끝나면 다시 반복
muted영상 음소거
width비디오의 너비를 지정
height비디오의 높이를 지정

오디오 삽입

  • <audio> 태그를 사용하여 오디오 파일을 웹 페이지에 삽입
  • 최근 브라우저는 사용자 보안을 위해 자동 재생에 제한을 둠
속성설명
src경로 지정
controls재생 컨트롤 바를 추가
autoplay페이지가 로딩될 때 자동 재생
loop오디오가 끝나면 다시 반복
muted오디오 음소거

반응형 웹

메타 태그와 뷰포트 설정

  • 반응형 웹 디자인은 다양한 디바이스와 화면 크기에 맞게 적절하게 보여지도록 만드는 디자인 접근법
  • 주로 메타 태그의 뷰포트 설정과 CSS 미디어 쿼리를 사용
  • <meta> 태그 중 viewport 속성은 모바일 브라우저에게 웹 페이지의 화면 크기와 초기 확대 수준을 설정하는 역할
속성설명
width=device-width화면 너비에 맞게 뷰포트 너비를 설정
initial-scale=1.0초기 확대/축소 수준을 1로 설정

메타 태그

  • 문서에 대한 메타데이터를 제공
  • 웹 페이지의 설명, 키워드, 문서의 저자, 마지막 수정일 등과 같은 정보를 포함
  • SEO와 브라우저의 동작 방식에 영향을 줄 수 있음
  • <head> 태그에 위치
메타 태그설명
<meta charset="UTF-8">문서의 문자 인코딩을 UTF-8로 설정
<meta name="description">웹 페이지의 내용에 대한 짧은 설명 제공
<meta name="keywords">웹 페이지와 관련된 키워드를 나열
<meta name="author">문서의 저자를 지정
<meta http-equiv="refresh" content="30">30초마다 새로고침을 함

메타 태그 예시

1
2
3
4
5
6

<!-- 검색 엔진을 위한 키워드(keyword)를 정의할 때 -->
<meta name="keyword" content="강아지, 강아지사료, 강아지간식, 강아지집">
<!-- 웹 페이지에 대한 설명(description)을 정의할 때 -->
<meta name="description" content="강아지 용품을 판매하는 쇼핑몰">
<!-- 문서의 저자(author)를 정의할 때 -->
<meta name="author" content="쁘띠하루">

미디어 쿼리

  • CSS3에서 도입된 기술로, 미디어의 유형과 특정 조건에 따라 다른 스타일 규칙을 적용
  • 주로 브라우저 창의 너비에 따라 다른 스타일을 적용하는 데 미디어 쿼리를 사용
    • 브레이크 포인트 설정: 특정 스타일을 적용하고 싶을 때 사용
    • 최소 너비 및 최대 너비
      • min-width: 최소너비
      • max-width: 최대 너비
    • 장치별 스타일: 모바일, 태블릿, 데스크탑에 맞는 스타일 지정
    • 방향(가로/세로)에 따른 스타일: 화면의 방향에 따른 다른 스타일을 적용
    • 다중 쿼리 조합: and나 쉼표(,)를 사용하여 여러 조건을 결합
Bootcamp, KT Aivle School
Bootcamp KT Aivle School HTML Front-end
This post is licensed under CC BY 4.0 by the author.