[HTML]HTML 1
HTML 예제
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
<p>
<h1> ~ <h6>
<a> : 링크를 걸때 사용한다.
ex) <a href = "링크를 걸 주소"> text </a>
<img> : 이미지를 정의할 때 사용한다.
ex) <img src = "이미지의 경로나 주소" alt = "이미지를 대체할 텍스트" width = "너비" height = "높이">
* 이미지는 태그를 닫지 않아도 되는 듯
HTML tags are not case sensitive HTML은 대소문자 구별이 엄격하지 않다. 소문자 사용가능
Attribute
HTML요소들은 attribute를 가진다.
ex) <HTML lang = "en-kr">
<p title= "툴팁에 표시될 텍스트">
| Specifies an inline CSS style for an element |
모든 attribute 목록을 알고 싶다면
http://www.w3schools.com/tags/ref_attributes.asp
HTML heading
<h1> ~ <h6>
heading은 검색엔진들이 웹 페이지의 내용의 구조를 인덱스하는데 사용하기 때문에 중요해요
Note: Use HTML headings for headings only. Don't use headings to make text BIG or bold.
HTML Horizontal rules
<hr> 가로로 선을 그어줍니당
<head>에는 주로 메타데이터, 문서제목, 캐릭터셋, 스타일, 링크, 스크립트 등이 들어갑니다
<br> : line breaker. 엔터랑 같은 효과
<pre> preformatted text.
<pre>태그 안의 텍스트들의 고정폭 글꼴로 그대로 표시됨 엔터키 같은것도
<style> attribute
<tagname style="property:value;">
property is a CSS property, The value is a CSS value.
ex) <body style="background-color:powderblue;">
배경색
ex) <h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>글자색
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
폰트
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>
글자크기
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
문자정렬
- <b> - Bold text
- <strong> - Important text
- <i> - Italic text
- <em> - Emphasized text
- <mark> - Marked text
- <small> - Small text
- <del> - Deleted text
- <ins> - Inserted text
- <sub> - Subscript text
- <sup> - Superscript text
그리고 잘 닫아줘야 합니다
<q> for Short Quotations
<blockquote> </bockquote>
<blockquote cite="인용한곳 주소">
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
축약형
<address>주소 글자체로 바뀜
<cite> 인용체로 바뀜
<bdo dir="rtl"></bdo>
<bdo dir="rtl">This text will be written from right to left</bdo>
텍스트 거꾸로 출력해줌
| <code> | Defines programming code |
| <kbd> | Defines keyboard input |
| <samp> | Defines computer output |
| <var> | Defines a variable |
| <pre> | Defines preformatted text |
HTML 주석
<!-- 주석내용 -->
COLOR
<h2 style = "background-color:rgb(255,0,0)"></h2>
이런식이나
rgb()자리에 바로 red, yellow, blue 가능 혹은 #FFFFFF같은 16진수 색상코드가능
rgba(255,255,255,0~1) 0~1은 투명도
| <style> | Defines style information for an HTML document |
| <link> | Defines a link between a document and an external resource |
id
<p id="p01"> dfdf</p>
#p01 {
color: blue;
}
Class Attribute
<p class="error">I am different</p>
p.error {
color: red;
}
HTML Links - The target Attribute
The target attribute specifies where to open the linked document.
The target attribute can have one of the following values:
- _blank - Opens the linked document in a new window or tab
- _self - Opens the linked document in the same window/tab as it was clicked (this is default)
- _parent - Opens the linked document in the parent frame
- _top - Opens the linked document in the full body of the window
- framename - Opens the linked document in a named frame
/* unvisited link */
a:link {
color: green;
}
/* visited link */
a:visited {
color: green;
}
/* mouse over link */
a:hover {
color: red;
}
/* selected link */
a:active {
color: yellow;
}
- Use the <a> element to define a link
- Use the href attribute to define the link address
- Use the target attribute to define where to open the linked document
- Use the <img> element (inside <a>) to use an image as a link
- Use the id attribute (id="value") to define bookmarks in a page
- Use the href attribute (href="#value") to link to the bookmark
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
| 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 |
<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
'이런식입죠
간단한 메뉴바를 살펴보자면
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover {
background-color: #111111;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
이런식임여 개꿀 이쁘당
Block-level Elements
<div>
<h1>~<h6>
<p>
<form>
| <div> | Defines a section in a document (block-level) |
| <span> | Defines a section in a document (inline) |
Iframe - 아마 한페이지 내에서 새로고침을 할수 있게 해주는? 그러니깐 내가 구현해야할 게시판폼에 가장 알맞는? ㅇㅋ 굿
<iframe src = "URL주소" height="숫자나 %, px를 붙여야 하는지 잘 모르겠다", width = ""></iframe>
<iframe src="demo_iframe.htm" style="border:none;"></iframe>
<iframe src="demo_iframe.htm" style="border:2px solid grey;"></iframe>
<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>
HTML Layout Elements
Websites often display content in multiple columns (like a magazine or newspaper).
HTML5 offers new semantic elements that define the different parts of a web page:
 |
|
HTML head까지