청함보리

1. Favicon + Page Title

Favicon 은 아래의 링크에서 왼쪽 작은 사이즈의 이미지를 말합니다.
Website 또는 Root Directory 에서 주로 사용하며,
<title> 이후 <link> 엘리먼트에서 이미지를 넣어 Favicon을 만들 수 있습니다.

2. Tables

rows 와 columns 으로 이루어진 표.
아래와 같이 그려볼 수 있다.

(1) Table cells
표 각각의 칸을 cell 이라고 하는데, <td>, </td>로 정의할 수 있다.

(2) Table rows
각각의 표의 row(행)은 <tr> 로 시작해서 </tr> 로 끝난다.

(3) Table header
<td> 대신에 <th>를 사용한다.
<th> 는 기본값으로 굵은체와 가운데 정렬이 들어간다.

(4) Table Borders

Border(구분선) 설정도 여러가지로 할 수 있다.
border-collapse: collapse; - 선 하나의 border 설정

table, th, td {
  border: 1px solid white;
  border-collapse: collapse;
}
th, td {
  background-color: #96D4D4;  -  백그라운드 색 설정
}

border-style 설정 가능.
border-color : 선 색상 설정 가능


(5) Table Sizes
<table>의 style 어트리뷰트를 통해 width, height 설정 가능.
width - 행 크기
height - 열 크기

(6) Table Header
- normal & vertical header

- Align Table Header : text-align (left, middle, right)
th {
  text-align: left;
}

- Header for multiple Columns : colspan

(7) Table Caption
<caption> - </caption>

(8) Table Padding & Spacing

th, td {
  padding-top: 10px;
  padding-bottom: 20px;
  padding-left: 30px;
  padding-right: 40px;
}

table {
  border-spacing: 30px;
}


(9) Table Colspan & Rowspan

행/열 합치는 기능. <th colspan="">, <th rowspan="">

1. HTML Bookmakrs (원하는 페이지 점프)

 (1) 'id' attribute 사용
<h2 id="C4">Chapter 4</h2>
 (2) 북마크 링크 추가
<a href="#C4">Jump to Chapter 4</a>
 (3) 다른 페이지에서 북마크된 링크 추가 
<a href="html_demo.html#C4">Jump to Chapter 4</a>

2. HTML Images 

(1) <img> 태그를 사용하며, 2개의 어트리뷰트가 필요.
 - src : 사진 경로
 - alt : 이미지의 설명글
<img src="url" alt="alternatetext">

(2) Width and Height
- style 어트리뷰트를 사용해서 사진의 너비, 높이 책정
<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">
- width, height 어트리뷰트로도 가능 
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">

style 어트리뷰트 사용을 추천한다. 시트가 바뀔때 이미지 사이즈가 바뀜을 방지함.

(3) 사진의 위치에 따라 src 어트리뷰트 활용
- 하위 폴더에 있을 경우
<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
- 다른 서버나 웹페이지에 있을 경우
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">

(4) HTML 에서는 gif도 바로 업로드 가능하다.
(5) 이미지를 링크로 활용할 수 있다.
<a href="default.asp">
  <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>

(6) Image Floating
- CSS 'float' 특성으로 글의  왼쪽, 오른쪽에 이미지 삽입 가능
<p><img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
The image will float to the right of the text.</p>

<p><img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">
The image will float to the left of the text.</p>

3. HTML Image Maps

<map> 태그는 이미지 맵으로, 클릭가능한 영역이다. 

사진에서 컴퓨터, 핸드폰, 커피 클릭시 각각 다른 해당 페이지로 이동한다.

(1) <img> 태그에 'usemap' 어트리뷰트 추가하기.
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
해시태그 #를 통해 이미지맵으로 이동 가능 

(2) 이미지맵 생성
<map> 엘리먼트 추가하기. 이미지맵을 만들기 위한 엘리먼트로, name 어트리뷰트를 필요로 함.
<map name="workmap">
이때 name은 앞선 <img> 에서의 usemap과 이름이 같아야 한다.

(3) Area,  클릭 가능한 영역을 설정한다.
<area> 엘리먼트를 사용하며, 영역의 모양을 아래의 values 에서 선택해야 한다.

• default - defines the entire region
• rect - defines a rectangular region / shape="rect" / 꼭지점 끝 값 입력 (x,y)
  <area shape="rect" coords="34, 44, 270, 350" href="computer.htm">
  - (x,y) = (34,44) ~ (270,350)  위치 지 
• circle - defines a circular region / shape="circle" / 원의 중심 위치 + 반지름(radius) 지정
  <area shape="circle" coords="337, 300, 44" href="coffee.htm">
  - (x,y,z) = (x좌표, y좌표, 반지름) 
• poly - defines a polygonal region / shape="poly" / 다각형, 
  <area shape="poly" coords="140,121,181,116,204,160,204,222,191,270,140,329,85,355,58,352,37,322,40,259,103,161,128,147" href="croissant.htm">
  - 점이 되는 여러 포인트들 지정.  (140,121), (181,116), ...., (128, 147)
  

  

(4) Image Map and JavaScript
자바스크립트 기능으로도 구현 가능하다.
<area> 엘리먼트에 click 이벤트 기능을 넣기.
<map name="workmap">
  <area shape="circle" coords="337,300,44" href="coffee.htm" onclick="myFunction()">
</map>

<script>
function myFunction() {
  alert("You clicked the coffee cup!");  #팝업 띄워주기
}
</script>

4. HTML Background Images

(1) <style> + CSS 'background-image'
<p style="background-image: url('img_girl.jpg');">

(2) <style> + <head> section
<style>
p {
  background-image: url('img_girl.jpg');
}
</style>

(3) <style> + <body> element
<style>
body {
  background-image: url('img_girl.jpg');
}
</style>

(4) 이미지가 작으면 화면에 반복되는데, background-repeat: no-repeat 로 조절 가능
<style>
body {
  background-image: url('example_img_girl.jpg');
  background-repeat: no-repeat;
}
</style>

(5) Background Cover:  background-size, background-attachment: fixed (전체 화면으로 고정)

(6) Background Stretch
<style>
body {
  background-image: url('img_girl.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;
}
</style>

5. HTML <picture> Element

- 각기 다른 장치나 스크린 사이즈에 각각 다른 디스플레이를 가능하게 하는 엘리먼트
- 1개 이상의 <source> 엘리먼트들을 포함하고, srcset 으로 다른 이미지들 연관.

- <picture> 엘리먼트 사용 이유 2가지

(1) Bandwidth - 사이즈에 맞는 엘리먼트 사용
(2) Format Support - 모든 포맷의 이미지 파일 사용 가능.

HTML Image Tags

TagDescription

참조: https://www.w3schools.com/

1. CSS (Cascading Style Sheets)

CSS는 다중 웹 페이지의 레이아웃을 한번에 컨트롤 할 수 있다.
CSS는 총 3 방법으로 HTML documents에 추가될 수 있다.

1. Inline - 'style' attribute inside HTML elements (엘리먼트 내에서 정의)
2. Internal - <style> element in the <head> section ( 헤더에서 정의, 일괄적 적용)
3. External - <link> element to link to an external CSS file (CSS 파일 불러오기)

Inline CSS
<h1 style="color:blue;">A Blue Heading</h1>
<p style="color:red;">A red paragraph.</p>

Internal CSS

External CSS

CSS Colors, Fonts, and Sizes (properties)

color, font-family, font-size

CSS Border

CSS Padding

CSS Margin

Link to External CSS ( full URL, style_sheet ( html folder, same folder))

<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">

<link rel="stylesheet" href="/html/styles.css">

<link rel="stylesheet" href="styles.css">

2. HTML Links 

Hyperlinks
- 하이퍼링크는 링크를 클릭 시 다른 다큐먼트(화면)으로 점프 이동한다.
- 텍스트가 아닌, 이미지나 다른 HTML 엘리먼트로 존재.

(1) Syntax
- <a> 태그가 하이퍼링크 정의
<a href="url">link text</a>

- 방문하지 않은 링크는 파란색으로 표시,
- 방문했던 링크는 보라색으로 표시
- 액티브 시 빨간줄 및 빨간색으로 표시 (클릭하고 있을때)

(2) The target Attribute
- default로, 링크 페이지는 현재 창에서 열린다. 바꾸려면 target 어트리뷰트로 가능
- target 어트리뷰트는 _self, _blank, _parent, _top values를 가짐.

• _self - (기본값, 현재창) Default. Opens the document in the same window/tab as it was clicked
• _blank - (새 창) Opens the document in a new window or tab
• _parent - Opens the document in the parent frame
• _top - Opens the document in the full body of the window

(3) Absolute URLs, Relative URLs - URL 
-  URL 절대연결(직접링크) , 상대연결 (asp, css 등)

(4) 이미지를 링크로 활용할 시
- <img> 태그를 <a>  태그 안에 넣으면 된다.

(5) Email Address
'mailto:' 를 href 에 넣기.
<a href="mailto:someone@example.com">Send email</a>

(6) Button as a Link
JavaScript 코드가 필요.
<button onclick="document.location='default.asp'">HTML Tutorial</button>

(7) Link Titles
title - 추가정보, 마우스 올렸을때 보이는 부분
<a href="https://www.w3schools.com/html/" title="Go to W3Schools HTML section">Visit our HTML Tutorial</a>

3. Links - Different Colors

(1) CSS를 활용해 링크 컬러도 바꿀 수 있다. (Default 에서 변경)

<style>
a:link {
  color: green;
  background-color: transparent;
  text-decoration: none;
}
a:visited {
  color: pink;
  background-color: transparent;
  text-decoration: none;
}
a:hover {
  color: red;
  background-color: transparent;
  text-decoration: underline;
}
a:active {
  color: yellow;
  background-color: transparent;
  text-decoration: underline;
}
</style>

(2) 링크 버튼 
<style>
a:link, a:visited {
  background-color: #f44336;
  color: white;
  padding: 15px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover, a:active {
  background-color: red;
}
</style>

* HTML Link Tags : <a>

1. HTML Comment Tag

<!--   -->  :  주석 달때 사용. 

<!-- Write your comments here -->

<p>This is a paragraph.</p>
<!--
<p>Look at this cool image:</p>
<img border="0" src="pic_trulli.jpg" alt="Trulli">
-->
<p>This is a paragraph too.</p>

2. HTML Color
- HTML은 140개의 standard 색상 이름을 갖는다.

(1) Background Color
style="background-color" - 배경색

(2) Text Color

style="color:"

(3) Border Color

style="border"   (글상자)

(4) Color Value

색상은 RGB값 ( Red, Green, Blue ), 또는 HEX, HSL value가 있고,
배경색으로는 RGBA, HSLA 가 있다.

HEX color도 있으니 참고.

1. HTML Formatting Elements

• <b> - Bold text
• <strong> - Important text
• <i> - Italic text
• <em> - Emphasized text
• <mark> - Marked text
• <small> - Smaller text
• <del> - Deleted text
• <ins> - Inserted text
• <sub> - Subscript text
• <sup> - Superscript text

(1) HTML <b> and <strong> Elements
- <b> : bold체
- <strong> : strong importance, 볼드체보다 더 강조.

(2) HTML <i> and <em> Elements
- <i> : Italic style - alternate voice or mood, etc..음성문구나 특별한 경우 사용
- <em> : emphasized text - 강조시 사용. 

(3) HTML <small> and <mark> and <del> Elements

- <small> : 보다 작은 사이즈 글자
- <mark> : marked or highlighted. (배경색)
- <del> : 제거된 문구 (가운데 줄)

(4) HTML <sub> and <sup> Element

- <sub> - Subscript text, 글씨 반 아래 ( 화학식에 유용)
- <sup> - Superscript text, 글씨 반 위 (제곱승 표시 유용)

2. HTML Quotatipon and Citation Elements

- <blockquote> : 다른 소스로 부터의 인용구 표시 (출처)

- <q> : short quotation 짧은 인용구 " " 표시.

- <abbr> : abbreviation or an aconym - 마우스 올리면 상세표시

- <address> : 주소 표시 (전체 이탤릭 블럭)

- <cite> : title 표시할때 사용 ( 이탤릭 )
- <bdo> : override,  글씨를 완전 거꾸로 표시. Bi-Directional Override.

1. HTML Headings.
글의 구조와 구분에 있어서 중요한 요소이다.

 아래와 같이 직접 폰트 사이즈 가능.  CSS : font-size
<h1 style="font-size:60px;">Heading 1</h1>

HTML Tag Reference

2. HTML Paragraphs
Paragraph <p> 는 시작점을 알리는 것으로, 브라우저에서 빈공간에 자동으로 만들어진다.

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

<p> 와 </p> 사이에 빈공간들(extra space)이 있어도 HTML에서는 자동으로 이를 채워준다.

- <hr> : horizontal rule. (수평적인 선), 컨텐츠를 주로 구분하는 용도로 사용한다.

- <br> : 문단을 나누는, Enter 와 같은 역할.
<p>This is<br>a paragraph<br>with line breaks.</p>

- <pre> : preformatted text, 
<pre> </pre> 사이에 형식 그대로 출력하게 해준다.

HTML Tag Reference

3. HTML Style
Element에 색, 폰트, 사이즈 등의 스타일을 추가하는 요소

<tagname style="property:value;">
 - CSS property and value 

Background Color
 - background-color
<body style="background-color:powderblue;">
<h1 style="background-color:powderblue;">This is a heading</h1>
<p style="background-color:tomato;">This is a paragraph.</p>
</body>

Text Color
- color
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

Font
- fond-family
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>

Text Size
- font-size
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>

Text Alignment
- text-align
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>

1. HTML (HyperText Markup Language) 이란?

웹페이지를 만드는 표준 마크업 언어로, 프론트엔드 개발의 가장 기본이 되는 언어 중 하나이다.
보통 HTML, CSS, javascript 세 언어와 함께 페이지를 코딩한다.

다른 언어들의 "Hello C world" 처럼, 가장 기본이 되는 문법은 아래와 같다.
------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>
------------------------------------------------------

• The <!DOCTYPE html> declaration defines that this document is an HTML5 document :
  이 문서는 HTML 문서다 라고 정의하는 선언문. 반드시 최상단에 위치해야 함.
• The <html> element is the root element of an HTML page
  HTML 페이지의 지붕이라고 할 수 있는 엘리먼트.
• The <head> element contains meta information about the HTML page
  HTML 페이지의 메타 정보를 포함하는 엘리먼트
• The <title> element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab)
  HTML의 제목으로, 브라우저의 타이틀바 또는 페이지탭으로 표시됨.
• The <body> element defines the document's body, and is a container for all the visible contents, such as headings,
  paragraphs, images, hyperlinks, tables, lists, etc.
  HTML의 모든 시각적 요소들을 포함하는 부분으로, 웹페이지의 몸체 엘리먼트
• The <h1> element defines a large heading 
  큰 헤드라인을 정의하는 엘리먼트 (My First Heading), h1~h6 갈수록 글자 작아진다.
• The <p> element defines a paragraph
  문단을 정의하는 엘리먼트 (My First paragraph)

- 코딩하면서 실습하는 방법

별도의 Running 프로그램 없이, 메모장(notepad)로 페이지를 확인할 수 있다.
색표시나 컬러감이 없어 밋밋하지만 그래도 별도 프로그램 없이 실행 가능한게 메리트.
"CTRL + U"  :  원하는 페이지의 HTML 페이지를 볼 수 있다.

2. HTML Basic Attributes ( 기본 어트리뷰트 )

<a> : HTML 링크를 선언할때 사용하는 태그.
href 어트리뷰트로 링크를 구체화한다.  어트리뷰트는 HTML 요소 중 추가적인 정보를 포함함.
<a href="https://www.w3schools.com">This is a link</a>

<img> : 이미지를 정의하는 태그.
 - Source file (src), alternative text (alt), 'width', 'height' 어트리뷰트 포함.
 - src : Absolute URL 또는 Relative URL.
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
- art : <img>의 태그.

<br>  :  line break, 엔터라 보면 된다
<p>This is a <br> paragraph with a line break.</p>

- style 어트리뷰트 : color, font, size 등의 스타일 요소를 더할때 사용.
<p style="color:red;">This is a red paragraph.</p>

- lang 어트리뷰트 : <html> 태그 안에 항상 있어야 함. 웹페이지의 언어를 설정
<html lang="en"> or <html lang="en-US">

- title 어트리뷰트 : 엘리먼트의 추가정보 정의 시 사용. 마우스 올리면 표시
<p title="I'm a tooltip">This is a paragraph.</p>

- Quote Attribute Values ( " " )

Chapter Summary ( https://www.w3schools.com/ )

• All HTML elements can have attributes
• The href attribute of <a> specifies the URL of the page the link goes to
• The src attribute of <img> specifies the path to the image to be displayed
• The width and height attributes of <img> provide size information for images
• The alt attribute of <img> provides an alternate text for an image
• The style attribute is used to add styles to an element, such as color, font, size, and more
• The lang attribute of the <html> tag declares the language of the Web page
• The title attribute defines some extra information about an element