HTML Tutorial 1
HTML은 Hyper Text Markup Language의 약자이며 standard markup language 로서 웹페이지를 작성하는데 사용된다.
Basic Structure
<!DOCTYPE html> : 모든 HTML문서가 이 태그로 시작한다
<html> : HTML 문서는<html> 태그로 시작하고, </html> 태그로 끝난다.
<head> : HTML 문서의 속성을 지정한다
<title> : HTML 페이지의 제목을 선언한다
<body> : 이 태그 안의 컨텐츠만 브라우저를 통해 사용자에게 보여진다
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>HTML Headings
<h[1-6]> : heading 표현시 사용한다. 숫자가 커질수록 글씨의 크기가 작아진다.
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
HTML Paragraphs
<p> : Paragraph 표현시 사용한다. 텍스트 안에 포함된 extra 공백이나 줄바꿈들은 모두 무시되며 창크기에 맞춰 줄바꿈된다.
<p>
This paragraph
contains a lot of spaces
in the source code,
but the browser
ignores it.
</p>
<p>
The number of lines in a paragraph depends on the size of the browser window. If you resize the browser window, the number of lines in this paragraph will change.
</p>
<hr> : 가로줄을 삽입한다.
<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<br> : 새로운 line으로 줄바꿈한다.
<p>This is<br>a paragraph<br>with line breaks.</p>
<pre> : 문단 안의 공백과 줄바꿈을 태그 없이 인식하여 그대로 표시한다. 고정된 글꼴로 표시되기에 다른 태그와 겹치지 않게 하는것이 좋다
<p>The pre tag preserves both spaces and line breaks:</p>
<pre>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</pre>
HTML Styles
<style> : html 파일 안에서 원하는 style로 글을 쓸 수 있다.
<tagname style="property:value;">
background-color : 배경색을 바꾼다
color : 글자색을 바꾼다
font-family : 글꼴을 바꾼다
font-size : 글자크기를 바꾼다
text-align : 텍스트를 정렬한다
border : 텍스트를 감싸는 상자를 만든다
<p style="background-color:lightgray;">This is a paragraph.</p>
<p style="color:lightslategray;">This is a paragraph.</p>
<p style="font-family:courier;">This is a paragraph.</p>
<p style="font-size:160%;">This is a paragraph.</p>
<p style="text-align:center;">This is a paragraph.
<p style="border: 2px solid tomato;">This is a paragraph.</p>
HTML Text Formatting
<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 텍스트를 위첨자로 표시
<p><b>This text is bold</b></p>
<strong>This text is important!</strong>
<p><i>This text is italic</i></p>
<em>This text is emphasized</em>
<p>Do not forget to buy <mark>milk</mark> today.</p>
<small>This is some smaller text.</small>
<p>My favorite color is <del>blue</del> red.</p>
<p>My favorite color is <del>blue</del> <ins>red</ins>.</p>
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>
HTML Quotation and Citation Elements
<blockquote> : 인용구를 블럭형태로 표현할 수 있다
<p>Browsers usually indent blockquote elements.</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For nearly 60 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by more than one million members in the United States and close to five million globally.
</blockquote>
<q> : 짧은 인용구를 쌍따옴표로 감싸 표현한다
<p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q></p>
<abbr> : 약어가 어떤 단어의 약자인지를 설명한다. 커서를 대면 설명을 읽을 수 있다.
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
<p>Marking up abbreviations can give useful information to browsers, translation systems and search-engines.</p>
<address> : 문서 작성자의 정보를 표현하는데 사용된다.
<address>
Written by John Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
<cite> : 작품의 제목을 정의하며 기울게 표시한다.
<p>The HTML cite element defines the title of a work.</p>
<p>Browsers usually display cite elements in italic.</p>
<img src="img_the_scream.jpg" width="220" height="277" alt="The Scream">
<p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>
<bdo> : Bi-Directional Override의 약자로 텍스트 방향을 바꾼다
<p>If your browser supports bi-directional override (bdo), the next line will be written from right to left (rtl):</p>
<bdo dir="rtl">This line will be written from right to left</bdo>
HTML Comments
Comment는 보여지지 않기 때문에 디버깅을 할때나 코드를 설명하는 내용 추가시 용이하다
<!-- Do not display this image at the moment
<img border="0" src="pic_trulli.jpg" alt="Trulli">
-->
HTML Colors
HTML에서 색은 이름이나 RGB, HEX, HSL, RGBA, or HSLA 값 등으로 표현될 수 있다
Color Names : 색이 이름으로 표현된다
RGB : rgb(red, green, blue) -- 각 색의 값은 0~255까지
RGBA : rgba(red,green,blue, alpha) -- 각 색의 값(0~255)과 투명도(0.0~1.0)로 색을 표현
HEX : #rrggbb -- 각각 00에서 ff 사이의 값을 갖는다 (#000000 : 검정, #ffffff : 흰)
HSL : hsl(hue, saturation%, lightness%) -- 색조 (0~360) , 포화도 (1%~100%), 밝기(1%~100%)로 색을 표현
HSLA : hsla(hue,saturation,lightness, alpha) -- 색조 (0~360) , 포화도 (1%~100%), 밝기(1%~100%), 투명도(0.0~1.0)로 색을 표현
각 값들이 같은 값을 가진다면 회색조의 색들을 표현할 수 있다. : rgb( 20, 20, 20), #a0a0a0
<h3 style="background-color:rgb(92, 105, 122);">rgb(92, 105, 122)</h3>
<h3 style="background-color:rgba(92, 105, 122, 0.5);">rgba(92, 105, 122, 0.5)</h3>
<h3 style="background-color:rgba(92, 105, 122, 0.2);">rgba(92, 105, 122, 0.2)</h3>
<h3 style="background-color:#cec0c8;">#cec0c8</h3>
<h3 style="background-color:#98b7a0;">#98b7a0</h3>
<h3 style="background-color:hsl(202, 33%, 51%);">hsl(202, 33%, 51%)</h3>
<h3 style="background-color:hsla(202, 33%, 51%, 0.5);">hsla(202, 33%, 51%, 0.5)</h3>
<h3 style="background-color:hsla(202, 33%, 51%, 0.2);">hsla(202, 33%, 51%, 0.2)</h3>
HTML Styles - CSS
HTML Links
<a href="url">link text</a>
<a> : 하이퍼링크를 정의하여 다른 사이트나 문서로 넘어갈 수 있게 한다
href : 링크 주소를 가진다
- absolute URL - a full web address
- relative URL - (without the "https://www" part)
- mailto - 입력된 유저의 이메일을 열어 새 이메일을 보낼 수 있게 만들어주는 링크를 만든다
<h2>HTML Link</h2>
<p><a href="https://www.w3schools.com/">Visit W3Schools.com!</a></p>
<h2>Absolute URLs</h2>
<p><a href="https://www.w3.org/">W3C</a></p>
<p><a href="https://www.google.com/">Google</a></p>
<h2>Relative URLs</h2>
<p><a href="html_images.asp">HTML Images</a></p>
<p><a href="/css/default.asp">CSS Tutorial</a></p>
<h2>Link to an Email Address</h2>
<p><a href="mailto:someone@example.com">Send email</a></p>
target : 링크의 문서를 어디에 열것인지 지정한다
- _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
<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>
<p>If target="_blank", the link will open in a new browser window or tab.</p>
title : 커서를 올리면 추가정보가 뜨게한다
<h2>Link Titles</h2>
<p>The title attribute specifies extra information about an element. The information is most often shown as a tooltip text when the mouse moves over the element.</p>
<a href="https://www.w3schools.com/html/" title="Go to W3Schools HTML section">Visit our HTML Tutorial</a>
<img> : 이미지를 링크로 사용할 수 있다
<h2>Image as a Link</h2>
<p>The image below is a link. Try to click on it.</p>
<a href="default.asp"><img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;"></a>
<button> : JavaScript code를 추가함으로 링크를 버튼으로 만들 수 있다
<h2>Button as a Links</h2>
<p>Click the button to go to the HTML tutorial.</p>
<button onclick="document.location='default.asp'">HTML Tutorial</button>
HTML Link Colors
기본적으로 방문하지 않은 링크는 밑줄과 파란색, 방문한 링크는 밑줄과 보라색, active link는 밑줄과 빨간색으로 표시된다
Link colors : 링크의 색을 바꿀 수 있다
<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>
<h2>Link Colors</h2>
<p>You can change the default colors of links</p>
<a href="html_images.asp" target="_blank">HTML Images</a>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>
<h2>Link Button</h2>
<p>A link styled as a button:</p>
<a href="default.asp" target="_blank">This is a link</a>
</body>
</html>
HTML Links - Create Bookmarks
긴 페이지에 북마크를 추가 할 수 있다. 먼저 북마크를 생성하고 링크를 추가해준다.
id : 북마크를 추가한다
herf : 링크를 추가한다
<p><a href="#C4">Jump to Chapter 4</a></p>
<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>
<h2 id="C4">Chapter 4</h2>
<p>This chapter explains ba bla bla</p>
HTML Images
<img> : 웹페이지에 이미지 삽입시 사용
- src - 이미지 경로 (url)
- alt - Specifies an alternate text for the image
<img src="url" alt="alternatetext">
The src, alt Attribute
<h2>Alternative text</h2>
<p>The alt attribute should reflect the image content, so users who cannot see the image gets an understanding of what the image contains:</p>
<img src="img_chania.jpg" alt="Flowers in Chania" width="460" height="345">
Image Size - Width and Height
style을 사용하여 이미지의 사이즈를 변경 할 수 있다. style은 원본 사진의 비율을 유지하는데 도움을 주기도 한다
<h2>Image Size</h2>
<p>Here we use the style attribute to specify the width and height of an image:</p>
<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">
Image Floating
float : 이미지를 오른쪽이나 왼쪽에 띄울 수 있다
<h2>Floating Images</h2>
<p><strong>Float the image to the right:</strong></p>
<p>
<img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
A paragraph with a floating image. A paragraph with a floating image. A paragraph with a floating image.
</p>
<p><strong>Float the image to the left:</strong></p>
<p>
<img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">
A paragraph with a floating image. A paragraph with a floating image. A paragraph with a floating image.
