[학교수업] 03. Introduction to HTML5 (2)

1. HTML Head

What is Head
HTML <title> Element
HTML <style> Element
HTML <link> Element
HTML <meta> Element
- name Attribute
- http-equiv Attribute
- charset Attribute
HTML <script> Element

▪️ What is Head - <head>

<head>란 <html>태그와 <body>태그 사이에 위치하는 element로, 메타데이터를 담는 컨테이너 역할을 수행한다.

(HTML)메타데이터란 (HTML)문서 전체에 사용되는 다량의 데이터를 구조화한 데이터를 말한다.
메타데이터는 주로 문서의 title, character set, styles, script 그리고 다른 메타 정보 등을 정의한다.
메타데이터는 디스플레이 되어지지 않는다

▪️ HTML <title> Element

<title>이란 문서의 제목을 정의하는 element 요소로, 텍스트만 가능하며 브라우저의 툴 바에 디스플레이 된다.

<title>은 브라우저 툴바의 타이틀을 정의하며, 필수 작성은 아니나 권장된다.
<title>은 해당 설정을 페이지를 즐겨찾기에 추가시 기본 타이틀 이름으로 제공한다.
<title>은 해당 설정을 검색 엔진에서도 보여지게끔 제공한다.

▪️ HTML <style> Element

▪️ HTML <link> Element

▪️ HTML <meta> Element

- name Attribute

name attribute란 메타데이터의 이름에 대해 명시하는 속성으로, 세부 종류의 예는 아래와 같다.

description : 문서 설명을 명시해, 검색 결과에 표시되는 문자를 지정한다.
keyword : 키워드의 나열을 명시해, 검색 엔진에 의해 검색되는 단어를 지정한다.
author : 문서의 작성자를 명시해, 페이지를 작성한 제작자명을 지정한다.

- http-equiv Attribute

http-equiv attribute란 HTTP 헤더를 제공하고, 웹 브라우저가 서버에 명령을 내리도록 하는 속성을 말한다.

http-equiv Attribute를 사용시 name Attribue는 사용 X (→name 속성 대신 사용됨)
HTML 문서가 응답헤더와 함께 웹 서버로부터 웹 브라우저에 전송되었을 때에만 의미를 가짐.
name Attribute와의 차이점은 브라우저에 직접적 영향을 미친다는 점이다.

- charset Attribute

charset Attribute란 HTTP 문서의 character encoding을 명시하여, 웹 브라우저가 문자 코드의 종류를 설정하도록 하는 속성을 말한다. (!= lang Attribute : '언어'의 종류를 명시하는 속성)

▪️ HTML <script> Element

2. HTML Block/Inline

HTML Block-level Elements
HTML Inline-level Elements

▪️ HTML Block-level Elements

block-level element란 항상 새 개행에서 시작함을 보장받는 요소를 말하며, 다음과 같은 특징을 가진다.

block-level element는 가능한 최대의 가로폭을 취하고자 한다.
block-level element는 상/하단에 여백(margin)을 가진다.
block level element의 대표적인 예로는 <div>,<p>,<hr>등이 있으며 그 외는 아래의 사진과 같다.

▪️ HTML Inline-level Elements

inline-level element란 새 개행에서 시작하지 않는 요소를 말하며, 다음과 같은 특징을 가진다.

inline-level element는 필요한 최소한의 가로폭을 취하고자 한다.
inline-level element는 여백(margin)을 가지지 않는다.
inline level element의 대표적인 예로는 <span>,<a>,<b>,<br>등이 있으며 그 외는 아래의 사진과 같다.

3. HTML Semantic Elements

What are Semantic Elements
Semantic Elements in HTML
Style Attributes
Formatting Attributes
List Tags
Table Tags

▪️ What are Semantic Elements

Semantic elements란 의미를 가진 element로, 브라우저와 개발자 양쪽에게 의미를 명백히 전달하는 기능을 제공한다.

semantic elements는 명백히 내용을 제공하는 요소로, 예로는 <form>, <table>, <article> 등이 있다.
non-semantic elements는 내용을 제공하지 않는 요소로, 예로는 <div>, <span> 등이 있다.

▪️ Why use Semantic Elements

Semantic element를 사용하기 전, HTML4에서의 경우 개발자 개별로 style elements를 네이밍 하여 사용하였다.

이 경우 검색 엔진들이 정확한 웹 페이지의 내용을 인식하기 어려우며, 개발자 간 코드 공유가 어렵다는 단점이 있다.

따라서 HTML5에서부터는 style element(<header>,<footer>,<nav>,<section>,<article>)의 도입을 통해 이를 해결하고 어플리케이션을 넘어 회사나 커뮤니티 단위에서 코드를 공유하고 재사용할 수 있도록 하였다.

▪️ Semantic Elements in HTML

▪️ HTML <section> Elements

<section>이란 문서의 섹션을 알려주는 요소를 말한다.
→ (In W3C의 HTML5 문서) section은 내용의 주제에 따라 그룹핑을 하며, 주로 heading과 쓰이는 요소.

<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is....</p>
</section>

▪️ HTML <article> Elements

<article>이란 독립된 내용임을 알려주는 요소를 말하며, 다음과 같은 특징을 지닌다.

<article>은 항상 그 자체로 의미를 가져야한다.
<article>은 웹 사이트로부터 독립적으로 읽을 수 있어야 한다.
<article> element의 사용 예로는 '포럼 글', '블로그 포스트', '신문 기사' 등이 있다.

<article>
<h1>What Does WWF Do?</h1>
<p>WWF's mission is to stop the degradation of our planet's natural environment,
and build a future in which humans live in harmony with nature.</p>
</article>

<article> element는 독립된 내용임을 알려준다. (=self-contained content)
<section> element는 문서 안의 섹션을 알려준다.

따라서 <article> 안에 <section>이 있든, 그 반대이든 이는 사용자가 활용하기 나름이므로 상관이 없다.
(Ex. 스포츠 섹션 안에 있는 스포츠 <article>은 아마 각 <article>에 기술적 섹션이 있을 것.)

▪️ HTML <header> Elements

<header>란 문서/섹션의 머릿말을 말하며, 다음과 같은 특징을 지닌다.

<header>는 서두의 내용을 위해서 사용되어야 한다.
<header>는 한 문서에서 여러개일 수 있다. (↔여러 article이 존재할 수 있기 때문)

<article>
<header>
<h1>What Does WWF Do?</h1>
<p>WWF's mission:</p>
</header>
<p>WWF's mission is to stop the degradation of our planet's natural environment,
and build a future in which humans live in harmony with nature.</p>
</article>

▪️ HTML <footer> Elements

<footer>란 문서/섹션의 꼬릿말을 말하며, 다음과 같은 특징을 지닌다.

<footer>는 항상 포함된 요소에 대한 정보를 담고 있어야 한다.
<footer>는 주로 문서의 저자, 저작권 정보, 사용법을 위한 링크, 연락처 정보 등을 포함한다.
<footer>는 한 문서에서 여러개일 수 있다. (Ex. 저자 이름, 이메일을 따로 footer 생성)

<footer>
<p>Posted by: Hege Refsnes</p>
<p>Contact information: <a href="mailto:someone@example.com">
someone@example.com</a>.</p>
</footer>

▪️ HTML <nav> Elements

<nav>란 네비게이션 링크의 집합을 말한다.

→ 모든 문서의 링크가 <nav>에 존재해야 하는 것 X. 중요한 블록의 네비게이션 링크를 위함 O.

<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>

▪️ HTML <aside> Elements

<aside>란 위치한 내용과 벗어난 곳에 위치한 내용을 말하며, 해당 내용은 주변 내용과 연관된 내용이어야 한다.

<p>My family and I visited The Epcot center this summer.</p>
<aside>
<h4>Epcot Center</h4>
<p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>

▪️ HTML <figure>,<figcaption> Elements

<fig caption>이란 이미지에 설명을 추가해주기 위한 목적의 캡션으로, <img>와 함께 <figure>로 묶여 사용된다.

<figure>
<img src="pic_trulli.jpg" alt="Trulli">						<!-- <img>: 이미지 -->
<figcaption>Fig1. - Trulli, Puglia, Italy.</figcaption>		<!-- <figcaption>: 캡션(=이미지 설명) -->
</figure>

4. HTML Entities

HTML Entities
Useful HTML Character Entities

▪️ HTML Entities

HTML Entity란 HTML 예약어를 예약된 의미가 아닌, 기존 의미로 사용하기 위해 별도로 만든 문자셋을 말한다.

→ 'HTML 예약어(reserved characters)'란 HTML에서 미리 의미를 약속한 예약된 몇몇 문자들을 말한다. (Ex. <, >, ", ' 등)

<!--사용법 1-->
&엔티티이름;

<!--사용법 2-->
&#엔티티숫자;

<!--사용예시 1-->
&nbsp;

<!--사용예시 2-->
&#160;

▪️ Useful HTML Character Entities

5. HTML File Paths

File Paths
Absolute File Paths
Relative File Paths

▪️ File Paths

File Path란 웹사이트에서 파일을 활용하기 위해, 해당 파일의 위치를 설명하는 요소이다.

→ File Path는 주로 Web pages, Images, Style sheets, JavaScripts 등의 외부 파일을 링킹(linking)할 때 사용된다.

▪️ Absolute File Paths

Absolute File Path, 즉 절대 경로란 인터넷에 존재하는 소스파일을 사용하기 위해 활용하는 Full URL path를 말한다.

<!DOCTYPE html>
<html>
<body>
    <h2>Using a Full URL File Path</h2>
    <img src="https://wwww.w3schools.com/images/picture.jpg" alt="Mountain" style="width:300px">
</body>
</html>

▪️ Relative File Paths

Relative File Path, 즉 상대 경로란 현재 페이지 위치를 기준으로 사용하고자 하는 파일의 경로를 설명하는 방식의 path를 말한다.

<!DOCTYPE html>
<html>
<body>
    <h2>Using a Full URL File Path</h2>
    <img src="./images/picture.jpg" alt="Mountain" style="width:300px">
</body>
</html>

6. HTML Links

HTML Links - Syntax
HTML Links - The Target Attribute
HTML Links - <iframe> element
HTML Links - Bookmark

▪️ HTML Links - Syntax

HTML Link란 하이퍼링크(HyperLink)를 말하며, 해당 링크를 클릭시 다른 문서로 이동(jump)하게하는 링크를 말한다.

하이퍼링크는 아래와 같은 문법 및 특징을 지니며 사용된다.

하이퍼링크는 <a> 태그를 통해 정의된다.
하이퍼링크의 텍스트는 visible part이다.
하이퍼링크의 'href' attribute는 해당 링크의 목적지 주소를 명시한다.

<!DOCTYPE html>
<html>
<body>
<h1>HTML Links</h1>
<p><a href="https://www.w3schools.com/">Visit W3Schools.com!</a></p>
</body>
</html>

▪️ HTML Links - The target Attribute

Target Attribute란 어디에서 링크된 문서를 열지 명시하는 속성을 말하며, 해당 속성의 사용법과 종류는 아래와 같다.

<!DOCTYPE html>
<html>
<body>
<h2>The target Attribute</h2>
<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>
</body>
</html>

속성값	설명
_blank	링크된 문서를 새로운 윈도우나 탭(tab)에서 오픈함.
_self	링크된 문서를 링크가 위치한 현재 프레임에서 오픈함. (=default값)
_parent	링크된 문서를 현재 프레임의 부모 프레임에서 오픈함.
_top	링크된 문서를 현재 윈도우 전체에서 오픈함.
프레임 이름	링크된 문서를 명시된 프레임(<iframe>)에서 오픈함.

▪️ HTML Links - <iframe> element

<iframe>의 속성(Attributes)에는 src, name, height, width 등이 있다.
<iframe>의 문법(Syntax)은 <iframe src="url" title="description">이다.
<iframe>의 name attribute와 링크에서의 target="name값"을 통해 구현된다.

<h2>Iframe - Target for a Link</h2>
<iframe src="demo_iframe.htm" name="iframe_a" height="300px" width="100%" title="IframeExample"></iframe>
<p><ahref="https://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>

▪️ HTML Links - Bookmark

Bookmark란 해당 웹페이지 내부에서 특정 부분으로 이동(jump)하기 위해 사용되는 요소로, 아래의 특징을 지닌다.

Bookmark의 링크가 클릭되면, 해당 페이지는 위/아래로 스크롤 되어 특정 위치로 이동하게 된다.
Bookmark는 웹페이지의 길이가 너무 길 때 유용하게 사용이 가능하다.
Bookmark는 일반적인 id attribute와 링크에서의 href ="#id값"를 통해 구현된다.

<p><a href="#C2">Jump to Chapter 2</a></p>
<p><a href="#C4">Jump to Chapter 4</a></p>

<h2>Chapter 1</h2>
<p>This chapter explains ba blabla</p>
<h2 id="C2">Chapter 2</h2>
<p>This chapter explains ba blabla</p>
<h2>Chapter 3</h2>
<p>This chapter explains ba blabla</p>
<h2 id="C4">Chapter 4</h2>
<p>This chapter explains ba blabla</p>

7. HTML Responsive

What is Responsive Web Design
Setting The Viewport
Without viewport vs With viewport
Formatting Attributes
List Tags
Table Tags

▪️ What is Responsive Web Design

반응형 웹 디자인(Responsive Web Design)이란, HTML과 CSS를 사용해 전자기기의 종류에 따른 화면 비율에 알맞게 자동으로 사이즈를 맞추는 디자인을 말한다.

▪️ Setting The Viewport

화면이 작은 스마트폰에서 PC와 동일하게 표현이 된다면 글자가 매우 작아 확대하여 보는 등 매우 불편할 것이다. 이를 모바일 페이지를 별도로 제작하여 사용함을 통해 해결할 수 있으나 유지관리, 새로운 페이지를 제작 등에서 이는 비효율적이다. 이러한 문제를 해결하기 위한 방법 중 하나가 반응형 웹이며, 이의 가장 기본이 되는 핵심이 바로 viewport이다.

viewport를 사용하는 방법은 매우 간단하다. <head> ~ </head> 태그 사이에 작성하며, 기본 형식은 아래와 같다.

<meta name="view port" content="속성=값, ....."/>

▪️ Without viewport vs With viewport

<!-- Without Viewport -->
<!DOCTYPE html>
<html>
<head>
</head>
<body><img src="https://www.w3schools.com/css/img_chania.jpg" alt="Chania" width="460" height="345">
</body>
</html>

<!-- With Viewport -->
<!DOCTYPE html>
<html>
<head><meta name="viewport" content="width=device-width, initial-scale=1.0"></head>
<body>
<img src="https://www.w3schools.com/css/img_chania.jpg" alt="Chania" width="460" height="345">
</body>
</html>

▪️ Responsive Images

▪️ Show Different Images Depending on Browser Width

▪️ Resposive Text Size

728x90

저작자표시 비영리 변경금지 (새창열림)

'Computer Science > Internet & Web' 카테고리의 다른 글

[학교수업] 03. Introduction to HTML5 (1) (0)	2022.03.26
[학교수업] 01. Introduction to Internet (1) (0)	2022.03.06
[학교수업] 00. Syllabus slide (0)	2022.03.06