1. HTML
HTML은 (Hyper Text Markup Language로, 웬사이트 표시를 위해 개발된 마크업 언어이다. 문서의 내용을 태그로 사용하여 구성한다. Hyper Text는 하이퍼링크를 통해 한 문서에서 다른 문서로 즉시 접근할 수 있도록 하는 것이다.
2. Semantic Tag
Semantic Tag는 포함된 콘텐츠의 특정 의미를 정의하고 목적을 갖는 태그이다. 시맨틱 태그를 사용하면 접근성 및 가독성 측면에서 다양한 이점을 얻을 수 있다고 한다. 시맨틱 태그는 웹 페이지에 보이는 것 그 이상의 정보를 제공하며, 시맨틱 태그 요소로는 <header>, <nav>, <article>, <setcion> 등이 있다.
결론적으로 보면 시맨틱 태그는 HTML의 구조를 설계할 때 태그에 의미를 부여함으로써 웹사이트의 구조를 팡가하기 쉽도록 도와주는 역할을 수행한다.
2-1. div 태그로만 페이지를 구조화하는 것이 좋을까?
div: 구역을 나누는 상자로, 웹 페이지를 구역이나 섹션으로 나누고 싶을 때 사용하는 태그이다.
div만 사용해서 구조화를 할 수 있지만, div는 아무 의미가 없는 박스이기 때문에 검색 엔진이나 화면을 읽는 프로그램이 볼 때, 이게 메뉴인지 본문인지 알 기 어렵다.
결국, div만 사용하는 것보다 HTML이 제공하는 누가 봐도 알 수 있는 태그들을 사용하는 것이 더 좋다. <header>, <nav>, <article>, <section>, <aside>, <footer> 등이 이에 해당한다.
<div>
<div>메뉴</div>
<div>본문 내용</div>
<div>꼬리말</div>
</div><header>메뉴</header>
<main>본문 내용</main>
<footer>꼬리말</footer>위의 두 코드를 비교했을 때, 첫 번째 코드는 모두 <div>로 되어있어 어떤 것이 어떤 역할을 수행하는지 알기 어렵다. 반면 두 번째 코드의 경우 다양한 태그로 구성되어 있어 한 눈에 알아볼 수 있다.
2-2. 여러가지 태그들
<h1> ~ <h6>: 제목 글자
<h1>가장 큰 제목</h1><p>: 문단
<p>여기에 본문을 써요.</p><strong>: 진하게 강조
<strong> 중요한 단어는 강조! </strong><em>: 기울기 강조
<em> 기울여서 강조! </em><br>: 줄바꿈
한 줄<br>두 줄<hr>: 가로선 (구분선)
<hr> 을 작성하면 구분이 생김!<form>: 입력 폼 전체 감싸기
<form action="/submit" method="post">
<input type="text" name="이름">
<button type="submit">보내기</button>
</form><button>: 버튼 만들기
<button type="submit">전송</button><label>: 입력칸 설명
<label for="id">아이디</label>
<input type="text" id="id">3. HTML 구성 요소
HTML 문서는 HTML 요소들로 구성되어 있다.
1. html 요소는 태그 한 쌍으로 이뤄진다.
<p> 안녕하세요! </p>위와 같이 시작과 종료 태그를 꼭 입력해줘야 한다.
2. 속성이 들어갈 수 있다.
<태그 속성1='값 1'>컨텐츠 내용</태그>위와 같이 시작 태그 안에 명시를 해주면 된다.
3. 태그 안에 태그를 넣을 수도 있다.
<p>Hello <strong>World!</strong></p>위와 같이 중첩해서 요소를 사용할 수 있다.
4. 컨텐츠가 없는 태그도 사용할 수 있다.
<img src="image.png" alt="profile" />태그 안에 텍스트나 다른 요소가 없어도 그 자체로 의미 있는 태그가 될 수 있다는 뜻이다.
4. <head>에 대해 알아보자
<head>는 웹 페이지에서 눈에 보이지 않는 정보를 담는 곳이다. 브라우저나 검색엔진이 이해할 수 있도록 웹 페이지의 설정, 정보, 연결을 넣는 부분이라 생각하면 된다.
<head>
<meta charset="UTF-8"> <!-- 문자 인코딩 (글자가 깨지지 않게 설정) -->
<meta name="description" content="맛있는 레시피를 소개하는 사이트입니다."> <!-- 설명 -->
<meta name="keywords" content="요리, 레시피, 음식"> <!-- 키워드 -->
<meta name="author" content="홍길동"> <!-- 작성자 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 반응형 웹 설정 -->
</head>4-1. <head>에서 주로 사용하는 태그들
-
<!DOCTYPE html>: 이 문서는 HTML 파일이라는 뜻이다. -
<html lang='ko'>: 주로 사용하는 언어를 정의한 것이다. -
<body> 문서의 구성 요소들 </body>: 화면에 보여질 내용들을 태그 내부에 작성하면 된다.
5. <body>에 대해 알아보자
body 태그에는 웹 사이트의 내용이 들어가 있다. 어떻게 웹 사이트를 구조화할 것인지에 따라서 다르게 나타낼 수 있다.
5-1. Element Level
Element Level은 각각의 요소(태그)를 말한다.
-
하나의 태그나 요소가 어떻게 동작하는지에 초점을 둔다.
-
CSS에서는 텍스트 크기, 색상, 여백과 같은 요소 자체의 속성이라 볼 수 있다.
-
<h1>,<p>,<div>등이 이에 해당한다.
5-2. Container Level
Container Level은 요소들을 담는 박스와 같은 역할을 한다.
-
여러 요소를 묶어서 어떻게 배치하고 관리하는지에 초점을 둔다.
-
CSS에서는 레이아웃, 정렬, 간격 배분을 결정하는 것이라 볼 수 있다.
-
<div>,<section>,<main>등이 이에 해당한다.
집 안의 가구가 Element Level에 해당하고, 방 안에 가구를 배치하는 것이 Container Level이라고 생각하면 쉽다.
5-3. Block VS Inline
Block 요소는 요소가 한 줄을 꽉 차지한다. 이와 다르게 Inline 요소는 본인의 크기만큼 딱 차지한다. 본인의 크기만큼 남는 공간이 없을 경우에는 다음 줄로 넘어간다.
5-4. Inline-Block
Inline-Block은 줄에 맞춰 나란히 배치되면서, 박스처럼 크기 조절도 가능하다. 글자처럼 붙지만 가로 및 세로 크기 조절이 가능하다는 점에서 Block과 Inline의 장점만 합친 것이라 볼 수 있다.
-
Block은 박스가 세로로 나란히 있고, 너비와 높이 조절이 가능하다. -
Inline은 글자처럼 한 줄에 붙어 있으나, 크기 조절이 불가능하다. -
Inline-Block은 옆으로 나란히 붙어 있을 수 있고, 크기 조절도 가능하다.
