안녕하세요.
이도해 개발자님의 'HTML5 독학백서'라는 책을 통해 웹개발 공부에 입문하기 시작했습니다.
도서명 : HTML5 독학백서
저자 : 이도해
출판 : 티더블유아이지 (2021.01.25)
Youtube 강의 : https://youtu.be/sG9LI1VIAhA
책에 나온 정보들을 기반으로 공부한 내용들을 정리하기 위한 목적으로 작성한 글이니 참고하시기 바랍니다.
HTML이란?
하이퍼텍스트 마크업 언어(HyperText Markup Language)의 줄임말로, 웹 페이지 화면의 뼈대(골격)을 만드는 데 사용되며, 웹 브라우저 상에서 동작하는 언어를 의미합니다.
하이퍼텍스트(HyperText)란?
텍스트(Text)는 정보를 전달하기 위해 작성된 문서를 말한다. 텍스트로 작성된 정보를 습득하기 위해서는 위에서 아래로 또는 처음에서 끝으로, 순차적으로 접근해야 합니다. 하이퍼텍스트(HyperText)는 '텍스트를 초월하다'라는 뜻으로 HTML 문서는 문서와 문서가 하이퍼링크(Hyperlink)로 연결되어 있어 비순차적 접근이 가능하다는 것이다. A를 클릭하면 A지점으로 바로 이동할 수 있습니다.
마크업 언어(Markup Language)란?
마크는 문서의 서식(굵게, 기울임 등)이나 구조 따위를 표현하기 위해 작성되는 부가적인 정보이며, 이러한 마크를 태그(Tag)라 부릅니다. 마크업 언어란 '정보에 서식이나 구조 따위를 표헌하기 위한 부가 정보를 표현한 언어', 말 그대로 정보를 기술하는 언어입니다.
웹(Web)이란?
웹이란 월드 와이드 웹(World Wide Web)을 간략히 표현한 것으로, 인터넷에 연결된 사용자들이 정보를 주고받을 수 있는 연결된 공간을 의미합니다. HTML로 작성된 문서를 웹 페이지(Web Page)라 부르며, 여러 개의 웹 페이지들을 그룹 지어 묶어놓을 것을 웹 사이트(Web Site)라 부릅니다. 즉, 웹은 무수히 많은 웹 페이지들이 링크로 연결되어 구성됩니다.
DOCTYPE 선언
웹 문서는 항상 문서 유형 정의(DTD, Document Type Definition)을 통해 어떤 버전의 HTML 언어로 작성되었는지 브라우저에 전달되면서 시작합니다. DTD는 XHTML, HTML, HTML5 세 가지 유형이 있으며, 지원되는 태그가 버전별로 상이하기 때문에 어떤 유형의 문서인지 정의를 해주어야 웹 브라우저에서 올바르게 인식할 수 있습니다.
이전의 DOCTYPE 선언은 복잡했으나 HTML5는 위와 같이 간단하게 선언할 수 있습니다.
또한 DOCTYPE 선언은 HTML 웹문서의 최상단에 위치해야 합니다.
언어(lang) 지정
HTML 페이지 소스 코드에서 언어를 설정하는 이유는 사용자에게 웹 페이지의 텍스트 콘텐츠를 정확하게 표시하기 위함입니다. 검색 엔진이 다양한 국가의 사용자에게 올바른 결과를 보여줄 수 있도록 도와줍니다. 만약 언어가 지정되어 있지 않을 경우 검색 엔진은 다른 방법으로 이를 분석하고 이게 문제가 발생할 수 있습니다.
위 사진에 사용된 en은 영어입니다. ko는 한국어, ja는 일본어 등 국가별 언어 코드가 있습니다.
언어코드는 전역속성으로 모든 요소에 사용 가능합니다.
head 태그
head 태그는 문서의 머리부분에 해당하는 정보들을 담당하는 태그입니다.
브라우저 화면에 직접적으로 보이지 않습니다. <meta> 태그를 사용해서 문서에 대한 설명을 작성하거나 파일 정보, 스크립트 정보 등을 작성합니다. 이 밖에도 각종 브라우저가 알아야 할 중요한 정보들을 작성하게 되고 브라우저나 검색엔진에 전달되는 영역입니다.
body 태그
body 태그는 사용자에게 직접 보여지는 본문 영역입니다.
태그(tag)의 구조
태그란 어떤 정보를 검색할 때 사용하기 위해 부여하는 단어 혹은 키워드를 의미한다.
HTML에서의 태그는 <>로 표현하는 명령어의 형태를 말합니다. (ex. <head>, <body> 등)
HTML 문서는 태그를 사용하여 서식이나 구조 등을 표현하며 세 가지 규칙에 따라 작성되어야 합니다.
첫째, 태그는 <태그이름 속성이름="속성값">과 같은 구조로 작성되어야 한다.
둘째, 태그는 짝을 이루는 태그(여는 태그 + 닫는 태그)와 혼자 쓰이는 태그(단일태그 혹은 싱글태그)로 구분할 수 있다.
- 짝을 이루는 태그 : <head></head>의 형태인데 <head>가 여는 태그, </head>가 닫는 태그이다.
- 혼자 쓰이는 태그 : <br />, <hr />, <img /> 등이 있다. /없이 사용해도 무방하지만 사용하여 태그의 종료를 알리는 편이 좋다.
셋째, 닫는 태그의 이름 앞에는 /(슬래시, Slash)를 붙인다.
태그(tag) 중첩 규칙
HTML의 태그들은 모두 블록 태그이거나 인라인 태그입니다.
블록 태그는 항상 전체 너비를 차지하는 덩어리 태그를 의미하고, 인라인 태그는 자기 자신으 크기만큼만 차지하는 태그입니다.
다양한 태그들을 혼합 사용해도 문제가 없는 문서를 만들기 위해서 다음과 같은 세 가지 규칙을 지켜야 합니다.
첫째, 블록 태그 내부에는 블록 태그와 인라인 태그 모두 중첩 될 수 있다.
둘째, 인라인 태그 내부에는 인라인 태그만 중첩될 수 있다.
셋째, 블록 태그 중에 <p>(문단 태그)는 블록 태그지만 내부에 인라인 태그만 중첩될 수 있다.
제목 태그
웹 페이지의 섹션이나 문단의 제목을 나타내는 블록 태그를 의미합니다.
제목 태그는 가장 큰 대제목을 표현하는 h1 태그부터 h6 태그까지 총 6개로 나누어져 있습니다. 기본적으로 굵은 볼드 스타일이 지정 되어 있고, 숫자들이 작을수록 주요한 역할을 의미하며 글자의 크기도 커집니다. 단순 디자인적인 변화만 있는 것이 아니라 컴퓨터와 검색 엔진에서 제목 태그로 작성한 텍스트를 그냥 크기가 큰 텍스트가 아닌 제목임을 알고 문서의 구조를 파악합니다. 이런 부분들이 검색 엔진 최적화와도 직결되는 부분입니다.
문단 태그
문단을 나타낼 때 사용하는 블록 태그인 p 태그입니다.
아래 사진을 보시면 2개의 블록 태그를 사용하여 문단이 2개로 나뉘어 작성된 걸 확인할 수 있습니다. 하지만 에디터에서 보이는 줄바꿈이 브라우저에서는 적용되지 않는 걸 알 수 있습니다. 브라우저의 크기에 따라 줄이 바뀌지만 문단은 유지됨을 알 수 있습니다.
에디터에서의 줄바꿈과 똑같이 표현하고 싶을 땐 어떻게 해야 할까요?
바로 <br /> 태그를 사용하면 됩니다.
서식 태그
텍스트 서식이란 텍스트에 지정할 수 있는 다양한 효과를 말하는데 HTML에서는 이렇게 텍스트를 서식화 할 수 있는 다양한 인라인 태그들이 존재합니다.
굵게 태그
텍스트를 굵게 표현하고 싶을 때는 b 태그 또는 strong 태그를 사용합니다. 두 태그 모두 텍스트를 굵게 표시하지만 storng 태그는 효과뿐 아니라 해당 텍스트가 중요한 텍스트라는 의미도 내포한다는 차이점이 있습니다. 즉, 웹 브라우저나 검색 엔진에서 받아들일 때 문서에서 중요한, 강조된 텍스트임을 알 수 있는 겁니다.
기울임 태그
텍스트를 기울이고 싶을 때는 i 태그 또는 em 태그를 사용합니다. 기울임 태그 역시 굵게 태그와 동일하게 em 태그가 더 중요한 텍스트라는 의미를 가지고 있습니다.
밑줄 & 취소선 태그
텍스트에 밑줄을 표현하고 싶을 때는 ins 태그, 취소선을 표현할 때는 del 태그를 사용합니다.
인용문 태그
q 태그는 짧은 인용문을 표현할 때 적합한 인라인 태그이고, blockquote 태그는 긴 인용문을 표현할 때 더 적합한 블록 태그입니다.
리스트(list) 태그
리스트 태그는 목록을 생성하는 블록 태그를 말합니다. ul 태그와 ol 태그 두 가지가 있습니다.
ul 태그는 순서가 없는 목록을 만들 때, ol 태그는 순서가 있는 목록을 만들 때 사용합니다. 각각의 항목은 li 태그를 사용해서 표현합니다.
링크 태그
링크 태그는 인라인 태그인 a 태그와 href라는 속성을 사용해서 이동할 링크의 주소를 입력하고, 화면에 표시될 링크의 텍스트를 a의 여는 태그와 닫는 태그 사이에 작성합니다. 추가로 target 속성을 이용하면 웹 페이지를 어떻게 열 것인지 명시할 수 있습니다. _blank 속성을 사용하면 새 창 또는 새 탭에서 열리게 됩니다. 속성을 지정하지 않으면 기본 값인 _self가 적용되어 현재 페이지에서 열리게 됩니다.
a 태그와 id라는 속성을 조합하면 같은 문서 내에서도 링크를 생성할 수 있습니다. 이동하고자 하는 위치를 id 속성을 이용해 이름을 지정해 줍니다. 지정한 후 어떤 텍스트를 눌렀을 때 이동하게 만들 것인지 a 태그를 이용해 작성하고, href 속성에 아까 지정해둔 id 속성값을 #이름 형태로 작성합니다. 예외로 #top 속성값을 사용하면 문서의 최상단으로 이동합니다.
이미지 태그
이미지 태그는 img 태그와 src 경로 속성, alt 코멘트 속성을 사용합니다. alt 코멘트 속성값은 해당 경로에 있는 이미지를 가져올 수 없을 때 대신 코멘트로 표현합니다. 또 웹 접근성을 향상 시키는 데에도 기여합니다. 이 외에도 여러 속성이 있는데요. 넓이 속성 width, 높이 속성 height, 커서를 올렸을 때 잠깐 표시되는 툴팁을 지정하는 속성 title, 웹 브라우저가 이미지 불러오는 방식을 지정할 수 있는 속성 loading 등이 있습니다.
멀티미디어 태그
멀티미디어란 이미지나 소리, 영상 등의 미디어를 디지털 식으로 표현해서 상호 작용할 수 있는 형태로 만든 것을 의미합니다. 쉽게 말해 비디오나 오디오, 애니메이션 등을 브라우저를 통해 제공하는 것을 의미합니다. 동영상은 video 태그를 사용합니다. 이미지와 동일하게 width, height, src 속성을 사용하며 추가로 controls 속성을 넣어줘야 동영상을 재생할 수 있습니다. 외에도 자동재생 속성 autoplay, 반복재생 속성 loop 등이 있습니다. 오디오는 audio 태그를 사용하며 video 태그와 거의 동일합니다.
div 태그 & span 태그
div 태그와 span 태그는 정해진 역할이나 필수적으로 요구되는 속성이 없고 태그를 적용해도 다른 태그들의 모양이나 배치를 변경하지 않는 비어있는 태그입니다. 둘의 차이점으로 div 태그는 블록 태그이고, span 태그는 인라인 태그입니다. 일반적으로 CSS나 자바스크립트와 함께 동작하기 위해서 class와 id라는 속성과 함께 사용되는데요. class와 id는 HTML 태그를 특정하기 위해 사용되는 속성으로 태그에 이름을 붙일 때 사용되는 속성입니다.
class와 id 속성을 이용해서 이름을 붙여두면 CSS나 자바스크립트에서 선택자로 사용해서 어떤 스타일을 지정하거나 동작을 지정할 수 있습니다. class는 id보다 조금 더 유연한 속성으로 한 번 선언되고 사용된 class를 다른 태그에도 중복으로 사용할 수 있다는 특징이 있습니다. 또 하나의 태그에 여러개의 class를 지정할 수 있습니다. id는 class와 다르게 문서 전체에서 딱 한 번만 사용될 수 있습니다. 사용하고 있는 id를 다른 태그에 중복으로 사용할 수 없고, 태그 당 하나의 id만 적용할 수 있습니다. 하지만 하나의 태그에 id와 class를 각각 적용하는 것은 가능합니다.
form & input 태그
form 태그는 사용자의 입력을 받아서 데이터를 웹 서버 등으로 전송할 때 사용하는 태그입니다. form 태그는 여는 태그와 닫는 태그 사이에 하나 이상의 input 위젯으로 구성이 됩니다. text, email, password, tel 등 다양한 속성이 있습니다. 버튼을 생성할 때는 submit, button, reset 타입을 사용합니다. button 타입으로 지정하면 클릭했을 때 기본 행동이 지정되지 않은 아무것도 하지 않는 버튼이 되고, submit으로 지정하면 서버로 form 내용을 제출하는 버튼이 되고, reset 타입으로 지정하면 form의 내용을 모두 초기값으로 되돌리는 버튼이 됩니다. 버튼을 만들 때는 input 태그뿐 아니라 button 태그도 사용할 수 있습니다. button 태그는 타입을 지정하지 않아도 기본적으로 submit 타입의 기능을 동일하게 구현합니다. 차이점이라고 하면 싱글태그인 input 태그와 다르게 button 태그는 여는 태그와 닫는 태그 사이에 아이콘 등을 추가로 넣을 수 있고, 스타일링 하기가 좀 더 자유롭습니다.
레이블 태그
레이블 태그는 사용자 인터페이스 항목에 라벨, 이름을 붙여주고 연결하는 역할을 합니다. 버튼 앞에 텍스트가 일반 텍스트처럼 보이지만 서로 연결되어 있어 클릭하면 옆에 박스로 커서가 이동하거나 체크가 됩니다. radio 버튼은 한가지만 선택 가능하고, checkbox 버튼은 다중으로 선택 가능합니다.
작성한 form을 서버로 전송하기 위해서는 action 속성과 method 속성을 사용합니다. action 속성은 데이터를 전송할 주소를 지정하고, method 속성은 어떤 방식으로 데이터를 서버에 전달할지 작성하는데 HTTP 방식 중에 GET 방식과 POST 방식을 지정할 수 있습니다. method 속성을 생략할 경우에는 기본적으로 GET 방식으로 데이터를 전송하게 됩니다.
HTTP : 클라이언트와 서버간 통신 방법에 대한 규칙
GET : 서버로부터 정보를 조회하기 위한 메소드
POST : 리소스를 생성하거나 변경하기 위한 메소드
의미론적 태그
HTML5 이전에는 웹 페이지를 만들고 레이아웃을 구성할 때 상단 영역, 본문 영역, 사이드바 영역 그리고 하단 영역 등을 div 태그를 사용했습니다. 예를 들면 상단 영역을 header로 본문 영역을 contents로 하단 영역을 footer로 표현했습니다. div 태그의 경우 우리가 임의로 header, contests 같은 이름을 붙여주지만 사실상 브라우저나 검색 엔진에서는 이게 뭘 의미하는지 알 수가 없습니다. 하지만 의미론적 태그를 사용하면 브라우저나 검색 엔진에서 여기가 본문 영역인지 광고 영역인지 정확하게 알 수 있습니다. 의미론적 태그 종류로는 header, section, main, footer, article 등이 있습니다.
웹 접근성, 웹 표준, 검색엔진최적화 (SEO)
웹 접근성이란 웹 사이트에서 제공하는 정보를 신체적인 조건이나 환경적인 조건에 관계없이 동등하게 접근하고 이용할 수 있도록 보장하는 것을 의미합니다. 다시 말해 다양한 디바이스와 플랫폼을 지원하고 시각장애, 청각장애가 있거나 고령자인 경우에도 웹 사이트에서 제공하는 정보를 동등하게 이해할 수 있도록 보장하는 것을 말합니다.
웹 표준이란 웹에서 표준으로 사용되는 기술이나 규칙으로 웹 문서를 구조(Markup), 표현(Style), 동작(Script)으로 구분해 사용하는 것을 말합니다. 웹 사이트 표준을 만드려면 몇 가지 항목을 준수해야 하는데요. 해당 항목에는 논리적이고 의미에 맞는 HTML과 CSS를 사용하는 것과 최신 버전 브라우저에 호환되는 것 등이 있습니다. 이는 다양한 플랫폼과 디바이스에 호환이 가능하고 웹 접근성을 향상되는 효과를 얻을 수 있습니다.
검색 엔진이란 구글, 네이버, 다음 등에서 제공되는 검색 프로그램으로 공개되어 있는 웹 문서를 검색하기 위해 사용됩니다. 이 검색 엔진들에는 웹 문서를 수집하는 봇(Bot)이 있고, 봇이 수집한 문서는 각각의 기준과 규칙에 따라 분류됩니다. 이렇게 문서를 분류하는 이유는 사용자가 어떤 키워드를 검색했을 때 분류해 놓은 문서 중에 가장 적합한 것을 결과로 보여주기 위해서 입니다. 따라서 검색 엔진 최적화란 봇이 수집하고 분류해놓은 수많은 검색 결과 중에 내 웹사이트가 상위에 노출되게 하는 것을 의미합니다. 검색 엔진 최적화의 핵심은 봇이 수집하는 것이 HTML 문서라는 점에 있습니다. 이렇게 검색 엔진에 최적화된 HTML 문서를 작성하기 위해서는 다음과 같습니다.
- 웹 접근성 및 표준을 준수하는 것이 기본입니다.
- 검색 엔진에 제공되는 head 태그 안에 정보를 간결하고 명확하게 작성해야 합니다.
- HTML5에서 제공하는 의미론적 태그를 잘 활용해야 합니다
한마디로 최신 표준의 HTML을 잘 이해하고, 의미에 맞게 사용하는 것이 가장 중요하다고 할 수 있습니다.
'IT (Information Technology)' 카테고리의 다른 글
| [IT] CSS3 독학백서 (0) | 2022.09.13 |
|---|---|
| [IT] 웹개발 프론트엔드 로드맵 (by 드림코딩 Youtube) (0) | 2022.08.24 |
| [IT] 비전공자를 위한 이해할 수 있는 IT 지식 (0) | 2022.08.21 |