HTML은
요소(element)로 구성되어 있다.
요소는태그(Tag)라는 표기법으로 작성하고, 이를 통해 요소의 역할과 문서의 구조를 결정한다.
① 가장 기본적인 구조 (필수)
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>-
<!DOCTYPE html>태그
html문서를 사용한다고 브라우저에게 알려주기 때문에.html문서 맨 앞에 꼭 넣어줘야 한다. -
<html>태그
웹 브라우저가 읽을 수 있는 문서임을 의미하며, 태그 내에는 사용자에게 보여주고자 하는 내용을 작성한다. -
<head>태그
- HTML 파일의 기본적인 정보(css, js, 제목 등)을 적어주는 공간이다.
- 브라우저는
<body>의 내용을 읽기 전에, 필요한 정보를 수집하기 위해서 먼저 방문하는 곳이다. - 추가적으로
<head>:문서 메타데이터(헤더) 요소를 참고하기
<body>태그
- 개발자가 사용자에게 보여주고자 하는 내용을 작성하는 공간이다.
- 추가적으로
<body>: 문서 본문 요소를 참고하기
② 태그(Tag)란?
HTML 문서 내에서 콘텐츠들의 문서 구조를 표현하기 위한 용도로 사용된다.
1️⃣ 태그(Tag) 작성하기
⭐️ 용어 알아가기
- 여는 태그(
Opening tag) - 요소의 시작을 알린다.- 닫는 태그(
Closing tag) - 요소의 종료를 알린다.- 요소(
element) - 여는 태그부터 닫는 태그까지의 모든 것을 요소라고 부른다.
< 태그 작성 방법 >
꺽쇠<를 열고 태그이름을 작성하고 />로 닫는 것이다.
<p> <!-- 여는 태그 -->
작성하고자 하는 콘텐츠(내용)들
</p> <!-- 닫는 태그 -->여는 태그와 닫는 태그 사이에 우리가 웹 사이트에서 보고자 하는 콘텐츠를 작성하면 된다.
2️⃣ Tag 사이의 Tage
𝗤. 태그 사이에는 작성하고자 하는 콘텐츠만 들어가는가?
𝐀. 태그 사이에 또 다른 태그를 작성할 수 있다.
<div>
예시를 보자.
<p>문단1</p>
<p>문단2</p>
</div>이러한 구조를 요소 안에 다른 요소가 있기 때문에 포함 관계가 성립이 되고 , 이를 요소의 중첩이라 부르기도 한다.
3️⃣ Self-Closing Tag
𝗤. 그렇다면 태그는 매번 닫아야 하는 건가?
𝐀. 태그 내에 내용이 필요없는 경우에는 여는 태그에 바로 닫는 태그를 작성한다.
❓ 태그 내에 내용(Content)이 없다면?
빈 요소(Empty Element)라고 부른다.- 또는
셀프 클로징(self-closing) 태그라고 한다.
부르는 용어는 다양하나 두 개를 가장 많이 사용하는 듯..!
<img/> 태그의 경우에는 이미지를 가져오기 위한 정보만 담고 있기 때문에, 따로 태그 내에 무언가를 작성할 필요가 없다.
<img src='이미지_경로' alt='이미지_이름'/>이러한 태그는 닫는 태그를 작성하지 않아도 되지만, 안전성을 위해 넣는 걸 추천한다.
③ 태그의 구조
태그의 구조는 앞에 잠깐 언급한 문서 구조와 연관되어 있다.
‘문서 구조는 계층적으로 이루어져 있다’고 생각되는 것처럼 태그도 계층적으로 이루어져 있다.
body는 바로 다음에 오는 태그인 div의 부모 태그이다.
div는 body의 자식 태그이자, 바로 다음에 오는 태그인 p의 부모 태그이다.
💡 여기에서 더 자세히 살펴보면, 부모 태그는 자식 태그가 닫는 태그를 사용하기 전까지 끝나지 않은 것을 확인할 수 있다.
반대로 자식 태그는 부모 태그가 끝나기 전에 닫아야 한다.
이러한 계층 구조를 이용해서 HTML 문서를 파악할 줄 알아야 하며, 웹 페이지의 구획을 나누어 계층적으로 구현할 줄 알아야 한다.
✔️ 블록(Block)과 인라인(Inline) 스쳐가기
어떤 태그인지에 따라 웹 페이지 내에서 해당 요소가 공간을 어떻게 차지하는지 달라진다. 이를 두 가지로 구분할 수 있다.
1. 블록(Block)
- 블록 요소는 좌우로 최대한의 너비를 차지한다.
- 왼쪽 상단부터 공간을 차지하게 된다.
2. 인라인(Inline)
- 인라인 요소는 요소의 내용만큼의 너비를 차지한다.
- 왼쪽 상단부터 공간을 차지하지만, 앞의 요소가 블록인지 아닌지에 따라 위치가 달라진다.
- 인라인 내에 블록 요소를 포함할 수 없다. (포함 관계 성립 X)
이 두 가지는 페이지 레이아웃을 구성하는 부분에서 매우 중요한 역할을 하기 때문에, 꼭 알아두고 넘어가야 한다.
④ 태그의 속성
여는 태그에서 태그의 속성을 적용할 수 있다.
앞에서 살펴본 이미지 태그의 src와 alt도 속성에 해당되지만, 일반적인 태그에는 사용할 수 없다.
그렇다면 어떤 속성이 있는가❓
<p class="" id="">
들어가는 내용이랍니당.
</p>class와 id가 있으며, 두 개의 속성은 선택자라는 개념으로 불린다.
선택자란?
HTML 요소(태그)에 이름을 붙여주고, 이름을 통해 스타일이나 어떠한 동작을 부여하기 위한 것이다.
선택자인class와id는 요소를 선택할 수 있다는 공통점을 가지고 있다.
𝗤. 그렇다면 차이점은 무엇인지?!
𝐀. class는 한 페이지 내의 여러 요소에 중복된 이름을 붙여줄 수 있지만, id는 한 페이지 내에서 한 개의 이름만 가질 수 있기 때문에 고유한 값이어야 한다.
1️⃣ 필수 태그
필수 태그란?
태그 내에 필수적인 속성을 작성해야 하는 태그를 의미한다.
이는 태그의 역할에 따라 요구되는 조건이 달라지며, 각 태그의 역할을 잘 파악해두어야 한다.
대표적인 예시로 <a> 태그는 콘텐츠를 클릭했을 때, 지정한 링크로 이동시켜주는 태그이다.
즉, 사용자의 현재 URL을 이동시켜 주는 역할을 담당한다.
<a href="링크">콘텐츠</a>
<a href="https://google.com/">구글</a>2️⃣ Style 속성
Style 속성을 알아보기 전에, CSS를 간단하게 알아보자.
CSS는 웹 페이지의 HTML 요소에 스타일을 입혀주는 것이며, 이러한 CSS를 적용하는 방법으로는 세 가지가 존재한다.
< CSS를 적용하는 방법 >
.html파일의<body>에 있는 요소에style속성을 부여한다..html파일의<head>에<style>태그를 사용한다..html파일의<head>에<Link>태그로.css파일을 불러온다.
① .html 파일의 <body>에 있는 요소에 style 속성을 부여한다.
HTML에 직접적인 방식으로 스타일을 적용해보려 한다. 참고로 HTML 내에 직접적으로 스타일을 적용하는 방식을
lnline방식이라고 한다.
<p style="font-size: 40px; color: skyblue">안녕하세요</p>
여기에서 사용된 스타일 속성
1. font-size
2. color
⭐️ 속성 사이에 콜론이 아닌 세미콜론을 적어줘야 하나의 속성이 끝났다는 걸 브라우저에 알려준다.
여기에서는 글자 크기를 40px로 글자의 색상은 skyblue로 적용하였다.
② .html 파일의 <head>에 <style> 태그를 사용한다.
위의 결과와 같은 결과가 나오도록 출력해보자.
<head>
<!--
태그의 이름을 작성하고, 중괄호 사이에 속성을 작성하면 된다.
-->
<style>
p {
font-size: 40px;
color: skyblue;
}
</style>
</head>
<body>
<p>안녕하세요</p>
</body>𝗤. style 태그는 왜 head 태그 안에 넣는가?
𝐀. 브라우저에서 HTML 파일을 읽을 때, 스타일 → 콘텐츠 순으로 실행되어야 하기 때문이다.
➡ 선택자를 이용하여 스타일 태그를 사용해보자.
뒤죽박죽 적용해보았다.
.title이p를 이기고 적용되었다..subTitle이.title을 이기고 적용되었다.
💡 스타일 적용에도 우선 순위가 있다는 것을 알 수 있었다. 기준은 모르겠으나, 공부하면서 차근히 알아볼 예정이다.
③ .html 파일의 에 태그로 .css 파일을 불러온다.
기존 스타일을 style.css 에 넣어서 HTML 문서와 분리시킨다.
𝗤. 분리하면 적용이 안 되잖아요!
𝐀. link 태그를 사용하여 파일을 불러오면 됩니다! 참고로 link 태그는 파일을 가져올 때 사용하는 태그이다.
<head>
<link rel="stylesheet" href="style.css" />
</head>여기에서 rel란? link 태그가 파일을 불러올 때, 가져오는 파일이 어떤 파일인지 작성해주는 속성이다.
href는 가져올 파일의 경로를 작성해준다.
실행해보면 똑같은 결과를 확인할 수 있다.
