TIL 01___HTML basic 1

10090 단어 elementtagwebhtmlTILTIL
  • HTML이란 무엇이며, 역할과
    HTML에서 자주 쓰이는 태그의 종류와 기능을 알아본다.

▶︎ HTML (HyperText Markup Language)

HTML(Hypertext Markup Language)는 프로그래밍 언어는 아니고, 우리가 보는 웹페이지가 어떻게 구조화되어 있는지 브라우저로 하여금 알 수 있도록 하는 마크업 언어이다.

하이퍼텍스트란 문서를 서로 연결해 주는 링크를 의미하며, 마크업은 표시한다는 뜻. HTML은 element로 구성되어 있으며, 웹 브라우저에 내용을 보여 주는 텍스트, 이미지, 영상 등의 위치를 표시하는 것을 의미한다. tag는 웹 상의 다른 페이지로 이동하게 하는 하이퍼링크 내용들을 생성하거나, 단어를 강조하는 등의 역할을 한다.

1. HTML로 웹화면의 구조를 짜고 콘텐츠를 입력할 수 있다.

기본형: <tagname> content </tagname>

  • Element : <p> my birthday </p>

  • Attributes(class="editor-note") : <p class="editor-note"> my birthday </p>

2. HTML 문서의 기본구조

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <title>HTML</title>
  </head>
  <body>
	<h1>웹 개발</h1>
    <hr>
    <p>HTML</p>
    <p>CSS</p>
    <p>JavaScript</p>
  </body>
</html>

<!DOCTYPE html>
웹 문서의 첫 부분은 문서 유형을 지정, 현재 문서가 HTML5언어로 작성된 웹 문서라는 뜻.

<html>~</html>
웹 문서의 시작과 끝을 나타내는 태그.

<head>~</head>
대부분 웹 브라우저 화면에 보이지 않으며, 웹 브라우저가 웹 문서를 해석하는 데 필요한 정보를 입력하는 부분.

⦿<meta> : 웹 문서와 관련된 정보를 지정할 때 사용.
⁃ 화면에 글자를 표시할 때 어떤 인코딩을 사용할지 지정하는 것 (웹 서버는 영어가 기본이므로 화면에 한글로 된 내용을 표시할 때에는 UTF-8이라는 문자 세트를 사용한다고 지정)
⁃ 웹 사이트의 키워드나 간단한 설명, 제작자 등의 정보를 지정한다.
∙키워드: <meta name="keywords" content="html의 구조">
∙설명: <meta name="description" content="html의 구조를 알아봅시다.">
∙소유자나 제작자: <meta name="author" content="Kyunghee Ko">

⦿<title>: 웹 문서의 제목(웹 브라우저의 제목 표시줄에 표시된다.)

<body>~</body>
실제로 웹 브라우저 화면에 나타나는 내용.

▶︎ 편리한 단축키

1. html + tab

html을 작성하기에 앞서 기본이 되는 태그를 자동완성.

<html>
<head>
    <title></title>
</head>
<body>

</body>
</html>

2. command

커서를 command 클릭하여 다수의 커서를 선택, 간격을 수정할 수 있다.

3. command + shift + D

커서가 위치한 줄의 코드를 바로 밑에 복사할 수 있다.

4. lorem + tab

Lorem ipsum의 문단(디자인에서 아직 빈칸으로 남아있는 부분들을 채워주는 용도)을 자동완성 해준다.

5. command + / (on/off)

타이핑한 코드를 주석으로 변경할 수 있다.
<!-- This is a comment. -->

▶︎ 웹 문서 구조를 만드는 시맨틱 태그

HTML의 태그는 그 이름만 봐도 의미를 알 수 있어 시맨틱 태그라고 한다.

👉 시맨틱 태그를 사용하면 웹 브라우저가 HTML의 소스 코드만 보고도 어느 부분이 제목이고 메뉴이고 본문인지 쉽게 알 수가 있다. 따라서 시각 장애인이 사용하는 화면 낭독기와 같은 보조 기기에서 더 정확한 내용을 전달할 수 있다.

👉 문서 구조가 정확히 나누어지므로 PC나 모바일의 웹 브라우저와 여러 스마트 기기의 다양한 화면에서 웹 문서를 표현하기가 쉽다.

👉 인터넷에서 웹 사이트를 검색할 때 필요한 내용을 정확히 찾을 수 있다.

1. 헤더 영역 <header>태그

말 그대로 헤더 영역을 의미한다. 사이트 전체의 헤더도 있지만 특정 영역의 헤더도 있다. 사이트에서 헤더는 주로 맨 위쪽이나 왼쪽에 있으며, 검색 창이나 사이트 메뉴를 삽입한다.

2. 내비게이션 영역 <nav>태그

같은 웹 문서 안에서 다른 위치로 연결하거나 다른 웹 문서로 연결하는 링크를 만든다.<nav>태그는 웹 문서의 위치에 영향을 받지 않으므로 헤더나 푸터,사이드 바 안에 포함할 수도 있고 독립해서 사용할 수도 있다.

그리고 웹 문서에서 <nav>태그를 여러 개 사용할 경우, 각각 id속성을 지정하면 네비게이션마다 다른 스타일을 적용할 수 있다.

3. 핵심 콘텐츠 <main>태그

웹 문서에서 핵심이 되는 내용을 담으며, 여기에 메뉴, 사이드바, 로고처럼 페이지마다 똑같이 들어간 정보는 담을 수 없고, 웹 문서마다 다르게 보여 주는 내용으로 구성한다. 웹 문서에서 한 번만 사용한다.

4. 독립적인 콘텐츠 <article>태그

아티클article의 사전적 의미인 신문이나 잡지의 기사처럼 웹에서 실제로 보여 주고 싶은 내용을 담는다. 기사의 독립적인 콘텐츠 항목을 넣으며, 문서 안에 여러 개 사용할 수 있고, 이 안에 <section>태그를 넣을 수도 있다. 주로 재사용 가능한 콘텐츠를 여러번 반복할때 사용한다.

5. 콘텐츠 영역 <section>태그

웹 문서에서 콘텐츠 영역을 나타낸다. <section>태그는 몇 개의 콘텐츠를 묶는 용도로 사용하고, <article>태그는 블로그의 포스트처럼 독립된 콘텐츠로 사용한다.

6. 사이드 바 영역 <aside>태그

<aside>본문 내용 외에 필요에 따라 왼쪽이나 오른쪽, 혹은 아래쪽에 사이드 바를 만든다.

7. 푸터 영역 <footer>태그

웹 문서에서 맨 아래쪽에 있는 푸터 영역을 만든다. 푸터에는 사이트 제작 정보나 저작권 정보, 연락처 등을 넣는다. 또한 푸터 영역에는 <header>태그를 비롯하여 <section>,<article>등 다른 시맨틱 태그를 모두 사용할 수 있다. 이렇듯 푸터 안에는 다양한 정보를 넣을 수 있다.

8. 여러 소스를 묶는 <div>태그

HTML의 <header>,<section>같은 시맨틱 태그가 나오기 전에는 헤더나 내비게이션,푸터 등을 구분할 때 <div>태그를 사용했다. 아직도 문서 구조를 만들 때 <div>태그를 사용하는 경우가 많으며,
<div>태그는 <div id="hair>나 <div class="detail>처럼 id나 class속성을 사용해서 문서 구조를 만들거나 스타일을 적용할 때 사용한다. 즉 영역을 구별하거나 스타일로 문서를 꾸민다.

[참조 링크 1] https://developer.mozilla.org/ko/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure

[참조 링크 2/ W3C 국제기구_html 공식 설명서]
https://www.w3.org/TR/html5/

🙂 시맨틱 태그를 공부하고 나서...이미 만들어본 개인 웹사이트로 달려가 코드를 다시 보니...왜 이리 창피한지...기획까지는 그런대로 좋았으나, 구조에 맞는 정확한 태그 사용이 중요했다. 역시 기본은 중요하고 또 중요하다는 것!!!

[JAVA NOTE]6. LOOP
[CS50] C언어 - 문자열

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage