인터넷을 사용할 때 가장 먼저 마주치는 것이 바로 웹 페이지인데요. 우리가 매일 접하는 뉴스 사이트나 쇼핑몰 모두 HTML과 CSS로 이루어져 있다는 사실이죠. HTML은 웹 페이지의 뼈대를 이루고, CSS는 뼈대 위에 색깔과 스타일을 입혀주는 역할을 하고 있습니다. 이 두 가지 기술에 대한 기본 개념을 이해한다면 웹사이트를 직접 만들어볼 수 있겠죠. 그럼 HTML과 CSS는 무엇인지, 그리고 기본 개념에 대해 알아보겠습니다.
1.HTML이란?
HTML은 HyperText Markup Language의 약자로, 웹 페이지를 만드는 데 사용되는 언어입니다. 여기서 하이퍼텍스트는 문서와 문서를 연결하는 링크를 의미하는데요. 페이지에서 다른 페이지로 이동할 수 있는 링크를 바로 하이퍼텍스트라고 합니다. 또한 HTML은 마크업 언어라고도 불리는데요. 콘텐츠에 의미를 부여하거나 구조를 지정하는 역할을 하기 때문입니다. 한 마디로 웹 페이지의 뼈대를 만드는 언어라고 말할 수 있습니다.
그렇다면 HTML은 어떤 역할을 할까요? 앞서도 언급하긴 했지만 브라우저가 웹 페이지의 내용을 이해할 수 있도록 구조화하는 역할을 합니다. 이를 테면, HTML태그를 통해 텍스트를 제목과 단락, 리스트로 나누어 문서를 정리합니다. 이미지와 동영상을 삽입할 수도 있고요. 다른 페이지로 이동할 수 있는 링크를 추가할 때 사용됩니다.
2.HTML의 기본 구조와 개념
1.HTML 문서의 필수 요소
HTML은 웹 페이지의 뼈대 역할을 한다고 했는데요. 그 뼈대를 이루는 필수 요소들을 살펴보겠습니다. 뼈대를 구성하는 필수 요소들이기 때문에 반드시 포함되어야 하는 중요한 요소들입니다.
1)<!DOCTYPE html>
Document Type Declaration의 줄임말로, HTML문서 코드의 가장 첫 줄에 위치합니다. 현재 문서가 어떤 HTML 버전을 기반으로 작성되었는지 웹 브라우저에게 알려주는 역할을 하는데요. <!DOCTYPE>의 선언 여부에 따라 웹 브라우저가 최신 웹 표준에 따라 문서를 해석할지 말지를 결정합니다. 이를 선언해주지 않으면 최신 웹 디자인을 만들 때 문제가 발생할 수 있기 때문에 웹 표준 방식을 강제하기 위해서는 반드시 <!DOCTYPE>을 선언해주어야 합니다. 또한 한 가지 더 중요한 이유가 있는데요. 검색 엔진 크롤러가 HTML 문서를 읽어들일 때, <!DOCTYPE>이 없으면 문서가 올바르게 구조화되지 않은 것으로 해석할 수 있기 때문에 검색 엔진 최적화를 위해서라도 선언해주는 것이 필요합니다.
2)<html> 태그
HTMl 문서의 시작과 끝을 감싸는 태그인데요. 문서 구조의 최상위 요소라고 할 수 있습니다. 모든 다른 HTML의 요소가 이 태그 안에서 작성됩니다.
3)<head> 태그
웹 문서의 메타데이터를 포함하는 부분입니다. 이를 테면, 페이지의 제목이나 문자를 인코딩하는 방식, 외부의 CSS나 JS 파일을 설정합니다. 또한 검색 엔진 최적화를 위한 설정 시에 이곳에 네이버나 구글 서치 콘솔에 등록할 때 해당 태그에 코드를 삽입하여 설정할 때 사용됩니다. 필수적으로 <title>태그와 <meta charset=”UTF-8″>요소가 포함되어 들어갑니다.
4)<body> 태그
body태그 안에는 브라우저에 실제로 보이는 콘텐츠를 작성할 수 있도록 도와주는데요. 텍스트, 이미지, 링크, 버튼, 동영상이 포함됩니다.
정리해보자면, HTML 문서를 작성할 때는 위의 필수 요소들을 모두 포함해야 합니다.
- <!DOCTYPE html> : HTML5의 문서를 선언합니다.
- <html> : 문서의 시작과 끝을 지정합니다.
- <head> : 메타데이터를 설정합니다.
- <body> : 사용자에게 보이는 콘텐츠가 포함됩니다.
- <title> : 브라우저의 탭 제목을 말합니다.
2.HTML 태그와 속성 이해하기
HTML은 태그와 속성으로 이루어져 있습니다. HTML문서를 작성하고 이해하기 위해서는 태그와 속성이 무엇인지 알아야 하는데요. 그럼 HTML 태그란 무엇일까요?
1.HTML 태그란?
HTML 태그는 웹 페이지의 특정 기능을 합니다. 이를 테면, 이미지를 추가하거나, 동영상을 삽입할 때, 혹은 문단을 나눌 때 사용되죠. 각각의 기능들은 바로 태그를 통해 수행됩니다. 그리고 태그는 두 가지의 종류가 있는데요.
- 열리는 태그와 닫히는 태그입니다.
- <p>와 </p>로 말이죠. <p>는 열리는 태그로 문단이 시작된다는 것을 의미합니다. 그리고 </p>는 닫히는 태그로 문단의 끝을 의미합니다.
- 또 하나는 단일 태그입니다.
- 열리는 태그만 존재하기 때문에 닫히는 태그가 필요하지 않습니다. 예를 들어, <img src=”image.jpg” alt=”이미지 설명”>과 같이 말이죠.
2.HTML 속성이란?
HTML 속성은 태그에 추가적인 정보를 제공하거나 기능을 제어하는 역할을 하는데요. 속성은 열리는 태그 안에만 작성할 수 있고, 이름과 값으로 이루어져 있습니다. 이름=”값”의 형태로 작성됩니다. 이를 테면, 다른 페이지로 연결되는 링크를 걸어야할 때 다음의 태그와 속성을 사용합니다.
- href : 링크의 URL을 설정하는 속성입니다.
- target : 링크를 어떤 방식으로 열지를 지정하는 속성입니다. 위의 blank 속성은 새 창에서 열겠다는 의미입니다.
3.자주 사용하는 HTML 태그
자주 사용하는 주요 태그들은 다음과 같습니다.
| 주요 태그 | 설명 |
| <h1>~<h6> | 제목 표시 |
| <p> | 문단 |
| <br> | 줄바꿈 |
| <a> | 하이퍼링크 |
| <img> | 이미지 삽입 |
| <ul> | 순서 없는 목록 |
| <ol> | 순서 있는 목록 |
| <table> | 테이블 |
| <div> | 블록 컨테이너 |
| <span> | 인라인 컨테이너 |
| <form> | 사용자 입력 폼 |
| <input> | 입력 필드 |
| <button> | 버튼 |
| <audio> | 오디오 삽입 |
| <video> | 비디오 삽입 |
1.링크 태그
<a>태그는 다른 페이지나 URL로 이동하는 링크를 만들어주는 태그입니다. 그리고 주요 속성 4가지와 함께 쓰이는데요.
- href : 링크의 목적지를 설정하는 속성으로, 절대경로 혹은 상대경로로 작성할 수 있습니다.
- target : 링크를 클릭했을 때 웹 사이트를 새로운 탭으로 보이게 할지 현재 창에서 보이게 할지를 지정합니다.
- _self : 현재 창 (기본 값)에서 웹 페이지를 띄웁니다.
- _black : 새 창 혹은 새 탭에서 웹 페이지를 띄웁니다.
- rel : 링크와 사용자 간의 관계를 설명하는데요. SEO와 관련되는 속성입니다.
- nofollow : 검색엔진이 링크를 따라가지 않도록 설정합니다.
- nooperner : 새 탭에서 링크를 열 때 보안을 강화합니다.
- noreferrer : 참조 정보를 전달하지 않습니다.
- title : 링크에 대한 추가 설명을 제공하는 속성으로, 마우스를 링크 위에 올리면 팝업 메시지가 표시됩니다. 사용 예시는 다음과 같습니다.
2.이미지 태그
<img>태그는 웹 페이지에 이미지를 삽입합니다. 코드 예시는 다음과 같습니다.
- src : 이미지 파일의 경로나 URL을 입력합니다. 웹 페이지에 이미지를 불러오는 역할을 합니다.
- alt : 이미지가 표시되지 않을 때 텍스트를 대체하여 보여줄 때 사용하는 속성입니다. 이미지를 설명하는 문구를 입력합니다. SEO에 도움이 되므로 가능한 넣어주는 것이 좋습니다.
- width와 height : 이미지의 크기를 픽셀 단위로 지정하면 크기를 조정할 수 있습니다.
- title : 이미지에 마우스를 올렸을 때 표시할 팝업 텍스트를 지정합니다.
- loading : 이미지 로딩 방식을 지정할 때 사용하는 속성입니다.
- lazy : 사용자가 이미지를 볼 때만 로드하여 성능을 향상시킬 수 있습니다.
- eager : 페이지가 로드될 때 즉시 로그시킵니다.
- crossorigin : 외부 리소스를 불러올 때 보안 정책을 지정합니다.
3.목록 태그
목록 태그는 HTML에서 내용을 순서대로 정리해서 보여줄 때 사용하는 태그입니다. 번호를 매겨 순서를 정리할 수도 있고, 번호 없이 항목을 나열 할 수도 있습니다.
1)순서 없는 목록 (Unordered List)
<ul>태그를 사용합니다. 그리고 <ul>태그 안에 항목들은 <li>태그로 작성합니다.
2)순서 있는 목록 (Ordered List)
<ol>태그를 사용합니다. 항목들을 번호 순서대로 매겨 나열합니다.
3)설명 목록 (Description List)
용어와 설명을 동시에 나열할 때 사용합니다. 용어는 <dt>, 설명은 <dd>로 작성합니다.
4)속성
- type : <ol>태그에서 숫자 스타일을 변경할 때 사용할 수 있습니다.
- style : <ul>태그에서 아이콘을 변경할 때 사용합니다.
- start : <ol>태그에서 번호 시작 위치를 설정할 수 있습니다.
4.컨테이너 태그
<div>태그는 Division이라는 단어에서 유래했는데요. 컨테이너처럼 웹 페이지를 나누고 구조화하는데 사용됩니다. 크게 의미를 부여할 필요가 없는 경우 단순 스타일링을 위해 요소를 묶을 때 사용하거나 CSS, Class속성, id식별자 등 다른 HTML 요소들을 그룹화하고, 레이아웃을 구성할 때 특히 핵심적인 역할을 합니다.
다만, 본질적으로 의미가 없는 블록 컨테이너 태그이기 때문에 가능한 의미 있는 태그를 우선적으로 사용하는 것이 좋습니다. 이를 테면, <header>, <main>, <section>, <article>과 같은 태그들 말이죠. 불필요하게 많이 사용하게 되면 HTML가독성을 떨어뜨릴 수 있으니 적절히 사용하는 것이 좋습니다.
5.그 외 태그(요소)들
언급한 HTML 태그들 외에도 정말 많은 요소들이 있습니다. 그 중에는 사용했다가 현재는 사용하지 않는 태그들도 많습니다. 때문에 모든 태그들을 외우겠다는 생각보다는 하나씩 사용해보면서 어떤 태그들이 있는지 정도만 익히고, 필요할 때 찾아서 사용하면서 익히는게 좋습니다. 참고로 MDN 문서를 활용해 HTML 요소들을 하나씩 사용해보시기 바랍니다.
참고자료: MDN HTML 요소