유튜브 T아카데미
코딩 자율학습
HTML5 + CSS3 웹 표준의 정석 책 참고
- HTML이란?
- HTML 문서 기본 구조
- HTML 태그와 속성
- HTML 특징
HTML (HyperText Markup Language) 이란?
- HTML은 HyperText Markup Language의 약자이고, 웹 페이지를 만들기 위한 표준 마크업 언어이다.
- 웹 페이지 구조, 뼈대
- 웹에서 HTML 문법에 따라 소스 코드를 작성하면 웹 브라우저는 이 소스 코드를 해석해 화면에 보여준다.
HTML5
- XHTML의 쇠퇴에 따른 대안으로 HTML5를 W3C에서 채택했다.
- HTML5는 내용과 디자인을 분리하여 유지보수에 장점이 있다.
- 멀티미디어를 직접 재생할 수 있다.
- 서버와 통신할 수 있다.
- ⭐시멘틱 태그가 추가되어, 검색엔진의 검색 능력을 극대화할 수 있다.
📜 HyperText(하이퍼텍스트)?
웹 페이지를 다른 페이지로 연결하는 링크의 모음으로 구성된 문서, 하이퍼링크를 통해 한 문서에서 다른 문서로 연결
📑 Markup(마크업)?
문서의 구조와 정보를 분류할 수 있도록 문서에 추가하는 정보 혹은 행위를 의미한다. 글의 제목을 지정하고 문단을 나누는 일 등을 의미하고, 문서에 이런 정보를 추가하는 게 바로 마크업 언어이다. 웹 브라우저에 표시되는 글, 이미지 등의 다양한 콘텐츠를 표시하는 것이다.
🌐 웹?
Web이란 사전적인 의미로 거미줄이란 뜻으로 IT에서는 WWW(world wide web) 말의 줄임말로써 사용된다. 세계의 컴퓨터들을 연결하여 정보 공유를 하는데 주 목적이고 이렇게 연결되어 있는 상태를 네트워크에 연결되어 있다고 한다.
🌐 웹 표준?
- 모든 브라우저에서 웹 서비스가 정상적으로 보여질 수 있도록 하는 것
- W3C에서 HTML5를 웹 표준으로 권고하고 이를 따른다.
🌐 웹 브라우저?
웹 브라우저는 소스 코드가 작성된 HTML 문서를 해석하여 웹 브라우저 화면에 보여주는 역할을 수행한다. 구글의 크롬, 애플의 사파리 등이 있다.
🌐 문서의 제목과 웹 접근성 ?
'인터넷 웹 콘텐츠 접근성 지침 2.0' 중 '운용의 용이성' 부문의 '(쉬운 네이게이션) 콘텐츠는 쉽게 내비게이션할 수 있어야 한다.'는 원칙에는 페이지마다 제목을 제공하는지 여부를 검사하는 항목이 있다. 사용자가 화면 낭독기(스크린 리더) 같은 보조 기기를 이용해 웹 페이지를 읽을 때 제목을 듣고 어떤 내용이 들어 있을지 짐작할 수 있다. 따라서 웹 접근성을 준수하기위해서라도 <title> 태그는 반드시 사용해야 한다. 제목은 페이지의 내용을 쉽게 짐작할 수 있는 주요 단어들을 넣어야 한다.
🌐 FTP란?
실제 서버에 웹 문서를 업로드 해서 어디서나 브라우저를 통해서 출력이 가능하게 만들어 주는 프로토콜이다.
1. HTML 문서 기본 구조
- <!DOCTYPE html>: 현재 문서가 HTML5 문서임을 정의
- <html></html>: HTML 문서의 시작과 끝으로 HTML 문서의 최상단(root) 요소
- <head></head>: HTML 문서의 메타데이터(metadata) 정의
- <meta charset='utf-8'>: 이 문서가 utf-8 문자셋을 사용한다는 것을 웹 브라우저에 알리는 역할
- <title></title>: 웹 브라우저 상단 탭에 나타나는 문서 제목
- <body></body>: 웹 브라우저에 출력되는 영역으로 화면에 보이는 내용
* 메타데이터란?
웹 브라우저에 직접적으로 표현되지 않는 정보를 의미한다. 데이터를 설명하는 데이터로 정의된다. 즉, 메타데이터는 스타일, 스크립트, 브라우저의 탐색 및 렌더링을 도와줄 데이터 등 페이지에 대한 정보를 가진다.
<title>, <style>, <meta>, <link>, <script>, <base>태그 등
<head>와 <body> 를 채우는 태그
- <head> 태그 : 주로 웹 문서의 정의가 기술, 메타데이터
meta, title, link, style, base
- <body> 태그 : HTML 문서의 내용, 실제로 브라우저를 통해서 나타나는 내용 대부분이 body 태그 내용
head요소
<title></title>
<head>
<title>문서의 제목</title>
</head>
브라우저의 제목 표시줄이나 페이지 탭에 보이는 문서 제목을 정의한다. <title> 태그 작성은 검색 최적화(SEO)에도 매우 중요한 요소가 된다.
<link>
<head>
<link rel="stylesheet" href="style.css">
</head>
현재 문서와 외부 리소스(resource)와의 관계를 명시하고 연결한다. 보통 css style sheets를 첨부하는 데 사용하지만, 웹 폰트를 임베드하거나 사이트 아이콘 연결 등 여러가지로 쓰일 수 있다. 대표적인 빈 요소로 닫는 태그를 작성하지 않는다. <link> 태그를 사용하기 위해 꼭 알아야 하는 속성은 'rel' 과 'href'이다.
* rel: 연결된 문서와의 관계(relationship)
* href: 연결하려는 리소스의 URL 지정, URL은 절대 경로와 상대 경로 모두 가능
<style></style>
<head>
<style>
h1 {
color: green;
}
</style>
</head>
<body>
<h1>i love you</h1>
</body>
HTML 문서 내에 CSS 스타일링 코드를 작성할 때 사용한다. <head> 안에 <style> 태그로 <h1>의 글자 색상을 지정하는 스타일링 코드를 작성한 경우, i love you로 나올 것이다. 하지만 일반적으로 스타일 코드는 외부 스타일 시트(style.css)에 작성하고, <link> 요소로 연결하는 것이 좋다.
<meta>
<head>
<meta charset="UTF-8"> //문자셋 지정
<meta name="viewport" content="width=device-width, initial-scale=1.0"> //모바일 기기 고려
<meta name="keywords" content="HTML5, 웹 표준"> //해당 문서의 키워드
<meta name="description" content="html5를 통해 웹 표준 공부"> //해당 문서의 설명
<meta name="author" content="daramjieun"> //해당 문서의 소유자 또는 제작자
</head><title>, <link>, <style> ,<script>과 같은 HTML 메타 관련 요소로 나타낼 수 없는 메타데이터를 나타낸다. 웹 페이지에 추가 정보 전달.
- 기본적인 속성
- HTML 표준 메타데이터 이름은 다음과 같이 정의한다.
* MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
2. HTML 태그와 속성
<tag>content</tag>
<tag attribute="value">content</tag>
<tag attribute1="value1" attribute2="value2">content</tag>태그?
- HTML 문법을 이루는 가장 작은 단위
- HTML 뼈대는 html, head, body 태그로 구성
- 텍스트, 이미지 등 다양한 구성 요소를 정의하는 역할
- <태그명>
속성?
- 태그에 어떤 의미나 기능을 보충하는 역할
- 옵션과 같기 때문에 사용해도 되고 안해도 되고, 여러 개를 사용해도 된다.
- <태그명 속성명="속성값">
문법?
콘텐츠가 있는 문법
- <시작 태그></종료 태그>
- 시작 태그와 종료 태그, 콘텐츠를 합쳐서 요소(element)라고 한다.
콘텐츠가 없는 문법
- 빈 태그(empty)
- 콘텐츠가 없는 문법은 앞뒤로 감싸야 할 콘텐츠가 없으므로 시작 태그만 사용한다.
- 콘텐츠가 없는 문법은 시작 태그가 곧 요소
- HTML5부터는 슬래시로 종료 태그를 표시하지 않아도 된다. 하지만 통상적으로 슬래쉬를 붙인다.
- <img>, <input>, <meta>, , <br>, <hr> 등
주석?
- <!-- 주석 내용 -->
- 코드에 어떤 메모나 설명을 남기고 싶을 때 사용한다.
- 주석을 사용하면 웹 브라우저에는 아무것도 표시되지 않지만, 웹 브라우저의 소스 보기로 볼 수 있으므로 보안상 중요한 내용을 넣으면 안된다.
- 어느 정도 규모가 되는 프로젝트에서 많은 문서를 제작할 때 필요성을 느끼게 해준다.
- 추후 발생되는 디버깅 또는 유지보수를 생각한다면 주석은 아주 중요한 요소 ⭐
3. HTML 특징
- 블록 요소와 인라인 요소
- 부모, 자식, 형제 관계
- 줄 바꿈과 들여쓰기
1) 블록 요소와 인라인 요소
웹 브라우저의 공간 유무와 상관 없이 hn태그나 p태그 처럼 사용할 때마다 줄 바꿈되는 태그가 있다. 이런 태그로 작성한 코드를 블록 요소(block element)라고 한다. 반대로 a태그나 span태그처럼 공간이 부족할 때만 줄 바꿈되는 태그를 인라인 요소(inline element)라고 한다.
2) 부모, 자식, 형제
<head>
<title>Title</title>
</head>
<body>
<h1>Heading</h1>
<p>paragraph</p>
</body>부모와 자식?
- 부모 태그를 상위 태그, 자식 태그를 하위 태그라 한다.
- 부모 요소는 해당 요소를 포함하는 가장 가까운 상위 요소를 말하고,
- 자식 요소는 해당 요소가 포함하는 직계 하위 요소를 말한다.
- <html>태그의 자식 요소는 <head>와 <body>
- <head>태그의 자식 요소는 <title>
- <body>태그의 자식 요소는 <h1>과 <p>
- <title>,<h1>,<p>는 <html>의 자식 요소가 아니다.
조상과 자손?
- 조상은 부모의 부모 태그를 말하고 자손(후손)은 자식의 자식 태그를 말한다.
- 자손은 해당 요소가 포함하고 있는 모든 하위 요소를 말한다.
- <html>의 자손 요소는 <head>, <body>, <h1>, <p> 모든 요소
- <html>은 부모이면서 조상이라 할 수 있다.
- <head>와 <body>는 자식이면서 자손이라 할 수 있다.
- <title>, <h1>, <p>도 <head>와 같은 조상 요소를 가진다.
형제?
- 형제 요소는 같은 부모를 가진 요소들을 말한다.
- <head>와 <body>, <h1>과 <p>
3) 줄 바꿈과 들여쓰기
암묵적인 규칙. 줄 바꿈과 들여쓰기를 하는 이유는 코드의 가독성 때문이다.
가독성은 얼마나 쉽게 읽히는가를 나타내는 정도를 뜻한다. 좋은 HTML 문서는 코드의 가독성도 좋아야 한다. 일기 좋은 코드는 나중에 다시 코드를 확인하거나 수정해야 할 때 코드 전체 내용을 금방 파악할 수 있다. 줄 바꿈과 들여쓰기만 잘해도 HTML 문서의 가독성은 확실하게 차이가 난다.
<script>
<body>
<script src="./app.js"></script>
</body>
HTML은 동적인 콘텐츠와 웹 어플리케이션을 위해 JavaScript를 지원한다. <script> 태그는 HTML 문서 내에 JavaScript 파일을 첨부, 작성할 때 사용한다. <script> 태그는 <head> 안에 작성해도 되지만 <body> 안에 작성하는 것 좋다.
🌐 왜냐하면
-> 웹 브라우저는 HTML 문서의 위에서 부터 아래로 한 줄씩 읽어 내려가며 작동한다. <head> 안에 <script> 태그를 작성할 경우, 브라우저는 <script> 태그가 나오는 순간 HTML 문서 읽기를 멈추고 JavaScript 파일의 코드를 읽기 시작한다. JavaScript 코드를 모두 로딩한 후에 다시 HTML 문서를 읽고 작동한다. 따라서 <head> 태그에서 <script> 코드를 로딩이 완료될 때까지 잡고 있으면 그만큼 사용자의 렌더링이 길어진다. 어떤 페이지를 열었는데 아무것도 뜨지 않고 로딩만 되고 있는 상황을 방지하기 위해 <script>태그는 <body> 내에서도 가장 마지막에 작성하는 것이 좋다. 사용자에게 먼저 정보 콘텐츠를 제공해 정보를 읽는 사이 동적 콘텐츠를 불러오는 것이다.
* MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script
'기술 > HTML' 카테고리의 다른 글
| [HTML] 폼 (0) | 2022.10.07 |
|---|---|
| [HTML] 하이퍼링크, 이미지 (0) | 2022.10.07 |
| [HTML] 멀티미디어 (0) | 2022.09.28 |
| [HTML] 텍스트 태그 (0) | 2022.09.27 |
| [HTML] 시맨틱 태그란? (0) | 2022.09.27 |