개발자를 꿈꾸는 여정

1. HTML 구조 (시멘틱태그) 본문

3. Front Developer/3_1. HTML

1. HTML 구조 (시멘틱태그)

아카라타 2021. 11. 23. 10:14

프로그래밍 언어 vs 마크업 언어

 

프로그래밍언어 종류: 파이썬(Python), 자바스크립트(Javascript), 자바(Java), 루비(Ruby), Go, C언어, C++ 등.

해당 언어 자체로 프로그램을 만들 수 있는 언어를 프로그래밍 언어라고 한다.
컴퓨터와 사용자(user)가 의사소통을 할 때 필요한 언어다.

 

 

html은 마크업 언어이다.

1.  HTML : Hypertext Markup Language

- 기본구조 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   
</body>
</html>

1) doctype

- 이 문서가 어떤 버전으로 작성되었는지 브라우저에 알려주는 선언문

- 반드시 문서 최상단에 선언 되어야 함

- 웹표준과 관련

​

2) <html> 태그

- lang 속성은 문서가 어느 언어로 작성되었는지를 의미

- 자식으로는 <head>태그와 <body>태그가 있음

​

3) <head> 태그

- <meta> 태그의 charset 속성은 문자의 인코딩 방식을 지정

- <head>태그에 위치하는 태그들은 브라우저 화면에 표시되지 않음

- 대신 문서의 기본 정보 설정이나 외부 스타일 시트 파일 및 js 파일을 연결하는 등의 역할

​

4) <body> 태그

- <body>태그에는 실제 브라우저 화면에 나타나는 내용이 들어감

- 태그들 대부분이 모두 여기에 해당

 

 ** WEB 개발에 있어 보이는 영역 FRONRT 부분은 HTML + CSS + Java Script를 응용한다.

2. 시멘틱 태그

레고쌓듯 한줄 한줄 블록 개념에서 흔시사용하는 <div></div> 태그가 아닌, 고유태그로 부여하여 사용한다.

표준화하는 태그를 사용함으로서 가독성이 좋다. 웹접근성에 있어서 낭독기사용에 따른 구분이 용이하다.

<header>
<head>는 <html>바로 밑에 쓰이지만 <header>는 <body>안에 있기 때문에 둘은 전혀 다르며 주로 머리말, 제목을 표현하기 위해 쓰입니다.

<nav>
HTML5에서 새롭게 생기 시맨틱 태그이고 네비게이션이라고 불립니다. 콘텐츠를 담고 있는 문서를 사이트간에 서로 연결하는 링크를 담당합니다.

<section>
<body> 영역은 콘텐츠를 <header>, <section>, <footer>의 3가지 공간에 콘텐츠를 저장하는데 그 중 <section>은 본문 콘텐츠를 담고 잇습니다

<article>
<section>이 콘텐츠를 분류한다면 이 <article> 태그안에는 실질적인 내용을 넣습니다.

<aside>
사이드바라고 불르기도 하며, 본문 이외의 내요을 담고 있는 시맨틱 태그입니다.

<footer>
화면의 구조 중 제일 아래에 위치하고, 회사소개 / 저작권 / 약관 / 제작정보 들이 들어갑니다.

<div>
<div>는 HTML5에 와서 글자나 사진등 콘텐츠들을 묶어서 CSS 스타일을 적용시킬때 사용합니다.