HTML
HTML Tutorial 2
Breezebee
2020. 7. 21. 16:03
2020/07/20 - [html] - HTML Tutorial 1
HTML Tables
<table> : html 테이블을 정의한다
<tr> : 각 열
<th> : 테이블의 헤더. 기본적으로 텍스트는 굵게, 가운데 정렬된다
<td> : 테이블의 데이터나 셀. 기본적으로 보통 글씨, 왼쪽정렬된다
※ <td>는 모든 종류의 html 요소를 포함 할 수 있다. ( text, images, lists, other tables, etc. )
<h2>Basic HTML Table</h2>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
border : 테이블에 경계선을 표시한다
※ 테이블과 테이블의 cell 둘다에 적용시켜야한다.
<style>
table, th, td {
border: 1px solid black;
}
</style>
border-collapse : 경계선을 허물어 하나의 경계선을 만든다
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
padding: cell의 내용과 경계선 사이의 공간
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 15px;
}
</style>
text-align : 정렬방식 선택
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
}
th {
text-align: left;
}
</style>
border-spacing : cell 사이의 공간
※ collapsed borders이 적용되어 있다면 border-spacing은 아무영향이 없다
<style>
table, th, td {
border: 1px solid black;
padding: 5px;
}
table {
border-spacing: 15px;
}
</style>
colspan : 셀을 한개 이상의 행으로 병합
<h2>Cell that spans two columns</h2>
<p>To make a cell span more than one column, use the colspan attribute.</p>
<table style="width:100%">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>55577854</td>
<td>55577855</td>
</tr>
</table>
rowspan : 셀을 한개 이상의 열로 병합
<h2>Cell that spans two rows</h2>
<p>To make a cell span more than one row, use the rowspan attribute.</p>
<table style="width:100%">
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>
</table>
<caption> : 테이블에 캡션 추가
※ <caption>은 <table> 태그 바로 뒤에 와야한다
<h2>Table Caption</h2>
<p>To add a caption to a table, use the caption tag.</p>
<table style="width:100%">
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
id : 테이블에 특별한 스타일을 적용시킬 수 있다
<!DOCTYPE html>
<html>
<head>
<style>
table {
width:100%;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 15px;
text-align: left;
}
#t01 tr:nth-child(even) {
background-color: #eee;
}
#t01 tr:nth-child(odd) {
background-color: #fff;
}
#t01 th {
background-color: black;
color: white;
}
</style>
</head>
<body>
<h2>Styling Tables</h2>
<table id="t01">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>
<colgroup> Specifies a group of one or more columns in a table for formatting
<col> Specifies column properties for each column within a <colgroup> element
<thead> Groups the header content in a table
<tbody> Groups the body content in a table
<tfoot> Groups the footer content in a table
HTML Lists
<li> : 각 아이템들은 <li> tag로 시작된다
HTML Unordered Lists
<ul> : unordered HTML list
list-style-type : 리스트의 아이템 스타일을 결정
- disc : Sets the list item marker to a bullet (default)
- circle : Sets the list item marker to a circle
- square : Sets the list item marker to a square
- none : The list items will not be marked
<ul style="list-style-type:disc;"></ul>
<ul style="list-style-type:circle;"></ul>
<ul style="list-style-type:square;"></ul>
<ul style="list-style-type:none;"></ul>
<h2>An unordered HTML list</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
HTML Ordered Lists
<ol> : ordered HTML list
type : 리스트 아이템의 문자 스타일을 정한다
- type="1" : The list items will be numbered with numbers (default)
- type="A" : The list items will be numbered with uppercase letters
- type="a" : The list items will be numbered with lowercase letters
- type="I" : The list items will be numbered with uppercase roman numbers
- type="i" : The list items will be numbered with lowercase roman numbers
<h2>An ordered HTML list</h2>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ol type="1"></ol>
<ol type="A"></ol>
<ol type="a"></ol>
<ol type="I"></ol>
<ol type="i"></ol>
start : 특정 수 부터 리스트를 셀 수 있다
<ol start="50">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ol type="I" start="50">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<h2>A Nested List</h2>
<p>Lists can be nested (list inside list):</p>
<ol>
<li>Coffee</li>
<li>Tea
<ol>
<li>Black tea</li>
<li>Green tea</li>
</ol>
</li>
<li>Milk</li>
</ol>
HTML Description Lists
<dl> : description list를 정의
<dt> : description list에서 이름을 정의
<dd> : description list에서 용어를 서술
<h2>A Description List</h2>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
HTML Block and Inline Elements
<div> : block-level element. 새로운 줄에서 시작, 양쪽으로 꽉 찬 블록을 생성한다
style, class, id 를 사용하여 블록의 스타일을 정한다
<div style="border: 1px solid black">Hello World</div>
<div style="background-color:black;color:white;padding:20px;">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
<p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
</div>
<span> : line안에서 이 태그로 둘러쌓인 부분만 블록을 만든다
style, class, id 를 사용하여 블록의 스타일을 정한다
<p>This is an inline span <span style="border: 1px solid black">Hello World</span> element inside a paragraph.</p>
<h1>The span element</h1>
<p>My mother has <span style="color:blue;font-weight:bold">blue</span> eyes and my father has <span style="color:darkolivegreen;font-weight:bold">dark green</span> eyes.</p>
HTML The class Attribute
class로 스타일을 묶어서 관리하고 특정부분에만 적용되게 할 수 있다
class의 이름은 .으로 시작하고 { } 로 묶어주며 head섹션 style 부분에 정의해주면 된다
class는 여러개 정의할 수 있다
※ The class name is case sensitive
※ Different HTML elements can point to the same class name
<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}
.note {
font-size: 120%;
color: red;
}
</style>
</head>
<body>
<h2>The class Attribute</h2>
<h2 class="city">London</h2>
<p>London is the capital of England.</p>
<hr>
<h2>My <span class="note">Important</span> Heading</h2>
<p>This is some <span class="note">important</span> text.</p>
</body>
</html>
HTML The id Attribute
id 는 HTML 요소의 고유 id 를 지정하는데 사용된다
id의 값은 HTML 문서 내에서 고유해야한다
id속성의 값은 대소문자를 구분하며 HTML 책갈피 작성에도 사용된다.
class는 여러개의 HTML요소에 적용될 수 있디만 id name은 하나의 HTML 요소에 적용되어야 한다
<!DOCTYPE html>
<html>
<head>
<style>
/* Style the element with the id "myHeader" */
#myHeader {
background-color: darkgray;
color: black;
padding: 40px;
text-align: center;
}
/* Style all elements with the class name "city" */
.city {
background-color: lightsteelblue;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<h2>Difference Between Class and ID</h2>
<p>A class name can be used by multiple HTML elements, while an id name must only be used by one HTML element within the page:</p>
<!-- An element with a unique id -->
<h1 id="myHeader">My Cities</h1>
<!-- Multiple elements with same class -->
<h2 class="city">London</h2>
<p>London is the capital of England.</p>
<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>
<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</body>
</html>
JavaScript는 getElementById() 메서드를 사용해 특정 id로 어떤 요소에 액세스할 수 있다
<!DOCTYPE html>
<html>
<body>
<h2>Using The id Attribute in JavaScript</h2>
<p>JavaScript can access an element with a specified id by using the getElementById() method:</p>
<h1 id="myHeader">Hello World!</h1>
<button onclick="displayResult()">Change text</button>
<script>
function displayResult() {
document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>
</body>
</html>
HTML Iframes
HTML iframe은 웹 페이지 안에 웹페이지를 보이기 위해 사용된다
<iframe src="url" title="description">
<iframe> : inline 프레임을 만든다
height : 높이
width : 너비
title : 제목
style : style로 css height나 width이용 가능
- height, width, border
<h2>HTML Iframes</h2>
<p>You can use the height and width attributes to specify the size of the iframe:</p>
<iframe src="demo_iframe.htm" height="200" width="300" title="Iframe Example"></iframe>
Remove the Border
<h2>Remove the Iframe Border</h2>
<p>To remove the default border of the iframe, use CSS:</p>
<iframe src="demo_iframe.htm" style="border:none;" title="Iframe Example"></iframe>
Target for a Link
<h2>Iframe - Target for a Link</h2>
<iframe src="demo_iframe.htm" name="iframe_a" height="300px" width="100%" title="Iframe Example"></iframe>
<p><a href="https://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>
<p>When the target attribute of a link matches the name of an iframe, the link will open in the iframe.</p>
HTML - The Head Element
- The <head> element is a container for metadata (data about data) placed between the <html> tag and the <body> tag
- The <title> element is required and it defines the title of the document
- The <style> element is used to define style information for a single document
- The <link> tag is most often used to link to external style sheets
- The <meta> element is typically used to specify the character set, page description, keywords, author of the document, and viewport settings
- The <script> element is used to define client-side JavaScripts
- The <base> element specifies the base URL and/or target for all relative URLs in a page
HTML Layout Elements and Techniques
- <header> - Defines a header for a document or a section
- <nav> - Defines a set of navigation links
- <section> - Defines a section in a document
- <article> - Defines an independent, self-contained content
- <aside> - Defines content aside from the content (like a sidebar)
- <footer> - Defines a footer for a document or a section
- <details> - Defines additional details that the user can open and close on demand
- <summary> - Defines a heading for the <details> element
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
/* Style the header */
header {
background-color: #666;
padding: 30px;
text-align: center;
font-size: 35px;
color: white;
}
/* Create two columns/boxes that floats next to each other */
nav {
float: left;
width: 30%;
height: 300px; /* only for demonstration, should be removed */
background: #ccc;
padding: 20px;
}
/* Style the list inside the menu */
nav ul {
list-style-type: none;
padding: 0;
}
article {
float: left;
padding: 20px;
width: 70%;
background-color: #f1f1f1;
height: 300px; /* only for demonstration, should be removed */
}
/* Clear floats after the columns */
section:after {
content: "";
display: table;
clear: both;
}
/* Style the footer */
footer {
background-color: #777;
padding: 10px;
text-align: center;
color: white;
}
/* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */
@media (max-width: 600px) {
nav, article {
width: 100%;
height: auto;
}
}
</style>
</head>
<body>
<h2>CSS Layout Float</h2>
<p>In this example, we have created a header, two columns/boxes and a footer. On smaller screens, the columns will stack on top of each other.</p>
<p>Resize the browser window to see the responsive effect (you will learn more about this in our next chapter - HTML Responsive.)</p>
<header>
<h2>Cities</h2>
</header>
<section>
<nav>
<ul>
<li><a href="#">London</a></li>
<li><a href="#">Paris</a></li>
<li><a href="#">Tokyo</a></li>
</ul>
</nav>
<article>
<h1>London</h1>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
<p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
</article>
</section>
<footer>
<p>Footer</p>
</footer>
</body>
</html>