웹 개발/프론트엔드

비전공자를 위한 HTML/CSS - 1장. HTML 이해하기

Ocean_Onx 2024. 10. 23. 17:41
728x90
반응형

※ 본 게시물은 아래 강의를 수강하면서 학습한 내용을 정리한 게시글임

 

비전공자를 위한 HTML/CSS

부스트코스 무료 강의

www.boostcourse.org

 

Overview

 

HTML 이란?

  • HyperText Markup Language의 약자로써, 웹 페이지를 만드는 언어
  • Hypertext: 참조(하이퍼링크)를 통해 독자가 한 문서에서 다른 문서로 즉시 접근할 수 있는 텍스트[각주:1]
  • Markup Language: 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어의 한 가지로써, 데이터를 기술하는 정도로만 사용되기에 프로그래밍 언어와 구별됨[각주:2]
  • HTML은 파일 확장자로 .html을 사용함

 

HTML 문법 (본 강의에서는 6개로 나누어서 설명, 실제 이러한 분류 체계를 따르는 것은 아님)

  1. 태그
  2. 속성
  3. 태그의 중첩
  4. 빈 태그
  5. 공백
  6. 주석

 

HTML 문서 기본 구조

  • <!doctype>
  • <html>
  • <head>
  • <body>
  • <meta>

 

본 강의에서는 각 태그의 정의나 사용법에 대해서는 다루지 않고, 추후의 강의에서 상세하게 다룸

HTML 문법

1. 태그 (Tag)

<!-- 간단한 태그 예제 -->
<!-- 본 코드를 기반으로, 학습 내용들을 추가하는 방향으로 진행 -->
<h1>Hello, HTML</h1>
  • 태그는 <, > 기호로 표현하며 <, > 기호 사이에 태그의 이름이 들어감
  • 대부분의 태그는 시작 태그와 종료 태그로 이루어지며, 종료 태그는 태그 이름 앞에 '/' 기호가 붙음
  • 시작 태그와 종료 태그 사이에 실제 화면에 나타나는 내용이 위치함
  • 내용을 포함한 태그 전체를 요소(Element)라 함[각주:3]
  • 위 코드 분석
    • h1: 태그 이름
    • <h1>: 시작 태그
    • </h1>: 종료 태그
    • Hello, HTML: 내용
    • <h1>Hello, HTML</h1>: 요소
  • 태그는 HTML에서만 사용하는 것이 아니며, XML, SGML, XHTML 등 다양한 마크업 언어에서 사용됨

 

2. 속성 (Attribute)

<!-- 속성 예제 -->
<h1 id="title">Hello, HTML</h1>
  • HTML의 태그들은 속성을 가지고 있음
  • 속성은 태그에 추가적인 정보를 제공하거나, 태그의 동작이나 표현을 제어할 수 있는 설정값임
  • 속성은 이름과 값으로 구성됨
  • 시작 태그에서 태그 이름 뒤에 공백으로 구분 후 속성 이름="속성값"으로 표현
  • 속성값은 홑따옴표(') 또는 큰따옴표(")로 감싸 표현함[각주:4]
  • 종류에 따라 모든 태그에 사용 가능한 글로벌 속성과, 특정 태그에서만 사용할 수 있는 속성으로 구분됨
  • 또한, 선택적으로 사용 가능한 속성과 특정 태그에서 반드시 필요한 필수 속성으로도 구분됨
  • 위 코드 분석
    • id: 속성 이름
    • "title": 속성값
<!-- 여러 속성 사용 예제 -->
<h1 id="title" class="main">Hello, HTML</h1>
  • 하나의 태그에 여러 속성을 선언할 수 있음
  • 이러한 경우에는 공백으로 구분해서 사용
  • 속성의 선언 순서는 태그에 영향을 미치지 않음[각주:5]

 

3. 태그 중첩 (Nesting Tags)

<!-- 태그 중첩 예제 -->
<h1>Hello, <i>HTML</i></h1>

<!-- 잘못된 태그 중첩 예제 -->
<h1>Hello, <i>HTML</h1></i>
  • 태그 안에는 다른 태그를 선언할 수 있음[각주:6]
  • 이때, 중첩되는 태그는 부모 태그를 벗어나서는 안됨[각주:7]

 

4. 빈 태그 (Empty Tag)

<!-- 빈 태그 예시 -->
<br>
<img src="">
<input type="">
  • 빈 태그는 태그 내용이 없는 태그를 의미함
  • 내용이 없기 때문에, 시작 태그와 종료 태그 2개의 1쌍이 필요하지 않음(시작 태그만 필요함)
  • 내용이 없기 때문에, 빈 태그 내에 다른 태그를 중첩하는 것은 불가능
  • 내용 대신에 속성을 통해서 화면에 나타내거나, 다른 용도로 사용되는 태그임
  • 이미지나 비디오 등의 외부 리소스를 브라우저가 직접 화면에 그려줘야 하는 경우, 브라우저가 내용을 대체한다고 하여 replacement 태그라 부름[각주:8]

 

5. 공백 (Space)

<!-- HTML 공백 예제 -->
<!-- 아래 3가지 h1 태그는 모두 같은 결과를 출력함 -->
<h1>Hello, HTML</h1>
<h1>Hello,    HTML</h1>
<h1>
	Hello, 
	HTML
</h1>
  • HTML은 두 칸 이상의 공백을 무시
  • 개행은 별도의 태그 필요

 

6. 주석 (Comment Tags)

<!-- 간단한 주석 예시 -->
<!--
	여러 줄로
	작성하는 것도
	가능함
-->
<!-- <h1> 주석은 태그도 무시 </h1> -->
  • <!--: 주석의 시작 표기
  • -->: 주석 종료

HTML 문서 기본 구조

<!DOCTYPE html>
<html lang="ko">
 <head>
  <meta charset="UTF-8"
  <title>HTML</title>
 </head>
 <body>
  <h1>Hello, HTML</h1>
 </body>
</html>

 

위 코드는 기본적인 HTML 문서 구조를 따른 코드로써, 실제는 이보다 훨씬 다양한 태그가 들어감

 

 

<!DOCTYPE>

  • 문서 타입 정의로서, 보통 DTD(doctype)이라 부름
  • 해당 문서가 어떤 버전으로 작성되었는지 브라우저에 전달하는 선언문이며, 반드시 문서 내 최상단에 선언되어야 함

 

<html>

  • 문서 타입 선언 이후에 나오며, 자식으로 <head> 태그와 <body> 태그가 존재함
  • <html> 태그의 lang 속성은 문서가 어느 언어로 작성되었는지를 의미

 

<head>

  • <head> 태그에 위치하는 태그들은 브라우저 화면에 표시되지 않음
  • 대신 문서의 기본 정보 설정, 외부 스타일 시트 파일 및 js 파일 연결 등의 역할 수행
  • <title>의 경우 브라우저의 Tap bar에 표시됨

 

<meta>

  • charset 속성은 문자의 인코딩 방식을 지정

 

<body>

  • 실제 브라우저 화면에 나타나는 내용이 들어감

 

  1. 출처: 위키피디아 [본문으로]
  2. 출처: 위키피디아 [본문으로]
  3. 태그와 요소의 의미는 다르나 같은 의미로 혼용하는 경우가 다수이며, 본 강의에서도 혼용하여 사용 [본문으로]
  4. '으로 시작해서 "으로 마무리하는 것과 같이 혼용하여 사용하는 것은 불가능함 [본문으로]
  5. class를 id보다 먼저 선언해도 결과는 같음 [본문으로]
  6. 특정 상황에서는 정해진 태그만 중첩할 수 있으며, 이는 추후 "3장. 블록 vs 인라인"에서 다룸 [본문으로]
  7. 위 코드에서는 h1이 부모 태그가 됨 [본문으로]
  8. 위 코드에서 img 태그가 이미지를 삽입하는 태그로써, replacement 태그임 [본문으로]
728x90
반응형
저작자표시 (새창열림)