HTML과 함께 개발을 시작해보자
2025. 1. 8. 13:00ㆍHTML_CSS
728x90
반응형
안녕하세요. 진득코딩입니다.
HTML, CSS, JavaScript는 개발을 하는데 기본 영역을 담당하고 있습니다.
이번 시간에는 기본 뼈대를 담당하고 있는 HTML에 대해 알아보도록 하겠습니다.
HTML
- HTML은 다양한 인터넷 정보를 웹 브라우저에 보여 줄 때 사용하는 언어입니다.
- 간단히 말해 웹 문서를 만드는 언어라고 할 수 있습니다.
- HTML은 HyperTextMarkup Longuage의 줄임말입니다.
- 하이퍼텍스트(HyperText)란 문서를 서로 연결해 주는 링크를 의미합니다.
- 따라서 HTML에는 서로 연결한다는 의미가 포함되어 있습니다.
- 마크업(Markup)은 표시한다는 의미를 가지고 있습니다.
- 따라서 웹 브라우저에 내용을 보여 주는 텍스트, 이미지, 영상 등의 위치를 표시하는 것을 의미합니다.
- HTML을 작성할 때는 웹 브라우저가 어느 부분이 제목, 텍스트 또는 표인지 구별할 수 있도록 꼬리표를 붙여야 합니다.
- 이때 이 꼬리표를 태그(Tag)라고 합니다.
- HTML의 기본 기능은 웹 브라우저에 보여 줄 내용에 마크업하고 문서끼리 링크하는 것입니다.
** HTML5를 HTML로 부르는 이유
- 2014년 11월에 발표된 HTML 표준 규약은 이전 버전과 구별하기 위해 한동안 HTML5라고 불렀습니다.
- 그러나 최근 대부분의 웹 브라우저에서 HTML5를 지원하게 되면서 HTML5에서 숫자 5를 빼고 그냥 HTML이라고 부릅니다.
- 현재의 HTML은 HTML5를 의미하는 것과 마찬가지입니다.
HTML 구조
- HTML 문서는 정해진 형식에 맞추어 내용을 입력해야 합니다.
- 소스가 짧더라도 HTML 문서에는 반드시 필요한 모든 구조가 포함되어 있어야 합니다.
- <!DOCTYPE html>로 시작해 <html>, <head>, <body>라는 3개의 영역으로 구성되어 있습니다.
1. <!DOCTYPE html> : 현재 문서가 HTML5 언어로 작성된 웹 문서라는 뜻입니다.
2. <html> ~ </html> : 웹 문서의 시작과 끝을 나타내는 태그입니다. 웹 브라우저가 <html> 태그를 만나면 </html>까지 소스를 읽어 화면에 표시합니다.
3. <head> ~ </head> : 웹 브라우저가 웹 문서를 해석하는 데 필요한 정보를 입력하는 부분입니다.
4. <body> ~ </body> : 실제로 웹 브라우저 화면에 나타나는 내용입니다. 앞으로 살펴볼 HTML 태그는 대부분 <body> 태그 안에 들어 있습니다.
<!DOCTYPE html> 태그
- <!DOCTYPE html>는 웹 문서의 유형을 지정하는 선언문입니다.
- 웹 문서의 첫 부분은 문서 유형(document type)을 지정하는 <!DOCTYPE html> 태그로 시작합니다.
- 웹 브라우저에 현재 문서가 HTML5 문서라고 알려주는 역할입니다.
<html> 태그
- <html> 태그는 웹 문서의 시작을 알리는 역할을 합니다.
- <html> 태그는 HTML 파일의 시작과 끝을 표시합니다.
- <html> 태그는 웹 문서가 시작된다는 뜻이고, </html> 태그는 웹 문서가 끝났다는 뜻입니다.
** <html lang="ko">의 의미
- <html> 태그에서는 lang 속성으로 문서에서 사용할 언어를 지정할 수 있습니다.
- 검색 사이트에서 특정 언어로 제한해 검색할 때 필요하기 때문에 사용합니다.
<head> 태그
- <head> 영역의 내용은 대부분 웹 브라우저 화면에는 보이지 않습니다.
- <head> 영역은 사용자가 아닌 웹 브라우저가 알아야 할 정보를 입력하는 곳이기 때문입니다.
- 또한 문서에서 사용할 스타일 시트 파일도 이곳에서 연결합니다.
<meta> 태그
- <meta> 태그는 문자 세트를 비롯해 문서 정보가 들어 있는 태그입니다.
- 메타 정보란 데이터에 관한 데이터를 의미합니다.
- 웹 문서의 <meta> 태그도 비슷합니다.
- <meta> 태그는 웹 브라우저에는 보이지 않지만 웹 문서와 관련된 정보를 지정할 때 사용합니다.
- <meta> 태그의 가장 중요한 역할은 화면에 글자를 표시할 때 어떤 인코딩을 사용할지 지정하는 것입니다.
- 웹 서버는 영어가 기본이므로 화면에 한글로 된 내용을 표시할 때에는 UTF-8이라는 문자 세트를 사용한다고 웹 브라우저에게 알려줘야 합니다.
- <meta> 태그에서 인코딩을 명시하지 않으면 웹 브라우저에서 자동으로 인코딩을 처리하기 때문에 한글이 깨질 수도 있습니다.
- 그 밖에 <meta> 태그를 사용해서 웹 사이트의 키워드나 간단한 설명, 제작자 등의 정보를 지정할 수 있습니다.
- 이 정보는 검색 엔진에서 사이트를 검색할 때 참고하는데, 검색 엔진에 따라 참고하는 정보는 달라질 수 있습니다.
<title> 태그
- <title> 태그는 문서 제목을 나타내는 태그입니다.
- <title> 태그는 <head> 태그 안에서 가장 중요한 태그입니다.
- <title>과 </title> 사이에 웹 문서의 제목을 입력합니다.
- <title> 태그는 거의 모든 웹 브라우저의 제목 표시줄에 표시됩니다.
- 또한 해당 페이지의 방문자나 검색 엔진은 제목 표시줄의 제목을 보고 페이지의 전체 내용을 추측할 수 있습니다.
- 웹 사이트의 즐겨찾기를 지정할 때도 웹 문서 제목으로 추가됩니다.
<body> 태그
- <body>와 </body> 사이에 실제 웹 브라우저에 표시할 내용을 입력합니다.
시맨틱 태그
- HTML의 태그는 그 이름만 봐도 의미를 알 수 있어 시맨틱(semantic) 태그라고 합니다.
- 시맨틱이란 '의미론적인', '의미가 통하는'이라는 뜻이 있습니다.
- 헤더에는 사이트 제목이나 로고가 있고, 본문 영역과 그 외의 내용을 나타내는 사이드 바, 푸터 영역 등이 있습니다.
- 이런 구조를 바탕으로 HTML에는 태그 이름만 봐도 어떤 역할을 하는지 쉽게 알 수 있는 문서 구조 태그를 추가할 수 있습니다.
시맨틱 태그의 필요성
- 웹 문서는 시맨틱 태그를 사용하지 않더라도 만들 수 있지만 사용하는 이유가 몇 가지 있습니다.
- 첫째로, 시맨틱 태그를 사용하면 웹 브라우저가 HTML의 소스 코드만 보고도 어느 부분이 제목이고 메뉴이고 본문 내용인지 쉽게 알 수 있기 때문입니다.
- 두 번째로, 문서 구조가 정확히 나눠지므로 PC나 모바일의 웹 브라우저와 여러 스마트기기의 다양한 화면에서 웹 문서를 표현하기 쉽기 때문입니다.
- 마지막으로 인터넷에서 웹 사이트를 검색할 때 필요한 내용을 정확히 찾을 수 있습니다.
주요 시맨틱 태그
- <header> 태그
- <header> 태그는 해더 영역을 의미합니다.
- 사이트에서 헤더는 주로 맨 위쪽이나 왼쪽에 있으며, 검색 창이나 사이트 메뉴를 삽입합니다. - <nav> 태그
- <nav> 태그는 같은 웹 문서 안에서 다른 위치로 연결하거나 다른 웹 문서로 연결하는 링크를 만듭니다.
- <nav> 태그는 웹 문서의 위치에 영향을 받지 않으므로 헤더나 푸터, 사이드 바 안에 포함할 수도 있고 독립해서 사용할 수도 있습니다.
- 웹 문서에서 <nav> 태그를 여러 개 사용할 경우 각각 id 속성을 지정하면 내비게이션마다 다른 스타일을 적용할 수 있습니다. - <main> 태그
- <main> 태그에는 메인 컨텐츠가 들어가 있습니다.
- 또한 웹 문서마다 다르게 보여주는 내용으로 구성합니다.
- <main> 태그는 웹 문서에서 한 번만 사용할 수 있습니다. - <article> 태그
- <article> 태그는 아티클(article)의 사전적 의미인 신문이나 잡지의 기사처럼 웹에서 실제로 보여 주고 싶은 내용을 넣습니다.
- 문서 안에는 <article> 태그를 여러 개 사용할 수 있고, 이 안에는 <section> 태그를 넣을 수도 있습니다. - <section> 태그
- <section> 태그는 웹 문서에서 컨텐츠 영역을 나타냅니다.
- <section> 태그는 몇 개의 컨텐츠를 묶는 용도로 사용하고, <ariticle> 태그는 블로그의 포스트처럼 독립된 컨텐츠로 사용합니다. - <aside> 태그
- <aside> 태그는 본문 내용 외에 왼쪽이나 오른쪽, 아래쪽에 사이드 바 영역을 나타냅니다.
- 웹사이트에서 필수 요소는 아니므로 필요할 경우에만 사용합니다. - <footer>
- <footer> 태그는 웹 문서에서 맨 아래쪽에 있는 푸터 영역을 만듭니다.
- 푸터에는 사이트 제작 정보나 저작권 정보, 연락처 등을 넣습니다.
- <header> 태그를 비롯한 <section>, <article> 등 다른 시멘틱 태그를 모두 사용할 수 있습니다. - <div> 태그
- <div> 태그에서 div는 division의 줄임말로 여러 소스를 묶는 역할을 합니다.
- 시맨틱 태그가 나오기 전에 헤더나 내비게이션, 푸터 등을 구별할 때 <div> 태그를 사용했습니다.
- <div> 태그는 id나 class 속성을 사용해서 문서 구조를 만들거나 스타일을 적용할 때 사용합니다.
- 즉, 영역을 구별하거나 스타일로 문서를 꾸미는 역할을 합니다.
이번 시간에는 웹사이트의 뼈대를 담당하고 있는 HTML에 대해 알아보았습니다.
HTML은 태그로 홈페이지의 뼈대를 나타내는 것을 기억해 주시면 좋을 것 같습니다.
이번 포스팅은 여기까지입니다.
궁금하신 사항이나 문의하실 사항이 있다면 댓글로 남겨주시면 성실히 답변하도록 하겠습니다.
끝까지 봐주셔서 감사합니다.😊
728x90
반응형
LIST
'HTML_CSS' 카테고리의 다른 글
| 웹 사이트를 꾸며주는 CSS에 대해 알아보자 (0) | 2025.01.14 |
|---|---|
| HTML에서 입력 양식을 작성해보자 (0) | 2025.01.13 |
| HTML에서 미디어와 하이퍼링크를 삽입해보자 (0) | 2025.01.10 |
| HTML로 여러 가지 요소들을 입력해보자 (0) | 2025.01.09 |
| 개발을 시작할 땐 웹 개발로 시작해보자 (0) | 2025.01.07 |