코딩왕랄프👊🏻

[HTML] HTML 정리 본문

카테고리 없음

[HTML] HTML 정리

hyerm_2 2021. 7. 6. 23:57
반응형
SMALL
HTML?

Hyper Text Markup Language
웹 페이지의 구조 
여러 element로 구성

 

Element?

Start Tag + Content + End Tag
Purpose of Web Browser?

HTML문서를 읽고 보여주자!

이제 기본적으로 HTML의 Tag 설명으로 들어가보자

BASIC

<!DOCTYPE html> 문서 타입 
<head> meta 정보 포함
<h1> ~ <h6>
<title> title 지정
<body> 모든 content의 container
<h1> 큰 heading
<p> paragraph

 

PARAGRAPH

<p> 안의 내용에 엔터 쳐도 새로운줄로 변경 안됨
<hr> 수평선
empty tag
<br> 엔터, 새로운 줄
<pre> 고정된 너비의 폰트

STYLE

<tagname style="property:value;">
backgroud-color : 배경 색
color : text 색
font-family : font 색
font-size : font 크기
text-align : font 정렬

Text Formatting

<b> Bold
<strong> Strong importance
<i> 이태리체
<em> 강조
<small> 작게
<mark> highlight
<del> delete (진짜 삭제 아니고 - 줄 그어지는 것)
<ins> 밑줄
<sub> subsript text. 원래 line 보다 아래에 1/2 크기.
<sup> Superscrip text. 원래 line 보다 위에 1/2 크기.

Quotation

<blockquote> 다른 소스로부터 인용된 section
<q> 짧은 인용
<abbr> 약어/두문자어
<address> 연락정보
<cite> 창작물의 title
<bdo> bi-directional 
<blockquote cite="http://www.worldwildlife.org/who/index.html">
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
<bdo dir="rtl">This text will be written from right to left</bdo>

COMMENT

<!-- Write your comments here -->

COLOR

RGB
=> rgb(Red, Green, Blue)
=> 0~255의 값
RGBA
=> rgba(Red, Green, Blue, Alpha), 
=> Alpha : 투명도 (0.0 - 가장 투명, 1.0 - 가장 불투명)
HEX
=> rrggbb
=> #ff6347

 

HSL
=> hsl(Hue, Saturation, Lightness)
=> Hue : 색깔 (0 - red, 120 - green, 240 - blue)
=> Saturation : 채도 (0% - shade of gray, 100% - full color)
=> Lightness : 명도 (0% - black, 100% - white)
HSLA
=> hsla(Hue, Saturation, Lightness, Alpha)
=> Alpha : 투명도 (0.0 - 가장 투명, 1.0 - 가장 불투명)
CSS?

Cascading Style Sheets
웹페이지의 레이아웃을 format

 

Use

Inline
=> style attribute 사용
Internal
=> <head> section 내에 <style> element 사용 
External
=> <head> section 내에 <link> element 사용 

 

Element

Padding
=> text와 border 내 padding(space)
Margin
=> border 바깥 margin(space)

 

 

CSS

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  color: blue;
  font-family: verdana;
  font-size: 300%;
}
p {
  color: red;
  font-family: courier;
  font-size: 160%;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

LINK

<a href="LINK" title="TITLE">CONTENT</a>
target
=> 링크문서를 어디에 열지 지정
= _self : Default. 클릭할 때의 같은 윈도우 
= _blank : 새로운 윈도우Opens the document in a new window or tab
= _parent :  parent 프레임Opens the document in the parent frame
= _top :  윈도우의 full body 
Image
<a href="LINK">
<img src="IMAGE.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>
Mailto
=> 이메일 프로그램을 링크
<a href="mailto:MAIL@example.com">CONTENT</a>
Button
<button onclick="DOCUMENT LOCATION='default.asp'">CONTENT</button>
Title
=> Element에 관한 추가 정보 지정
=> 마우스 움직일 때 tooltip text로 보여짐
Color
= unvisited link : underlined and blue
= visited link : 링크 입력전, (default) underlined and purple 
= active link : 마우스 클릭하였을 때, underlined and red
= hover : 마우스 올려두었을 때
<!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>
Bookmark
=> id로 bookmark 생성
=> 다른페이지로 이동 가능
<p><a href="#C4">Jump to Chapter 4</a></p>
<h2 id="C4">Chapter 4</h2>
<a href="html_demo.html#C4">Jump to Chapter 4</a>

IMAGE

<img src="url" alt="alternatetext">
src
=> 이미지 경로 지정
alt
=> 이미지 대한 alternate text 지정
Link
=> href 사용
<a href="default.asp">
  <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>
float
=> 이미지를 좌우로 배정
<p><img src="IMAGE.gif" alt="ALT" style="float:right;width:42px;height:42px;">CONTENT</p>
<p><img src="IMAGE.gif" alt="ALT" style="float:left;width:42px;height:42px;">CONTENT</p>
format
Abbreviation File Format File Extension
APNG Animated Portable Network Graphics .apng
GIF Graphics Interchange Format .gif
ICO Microsoft Icon .ico, .cur
JPEG Joint Photographic Expert Group image .jpg, .jpeg, .jfif, .pjpeg, .pjp
PNG Portable Network Graphics .png
SVG Scalable Vector Graphics .svg
Map
=> 이미지 맵 생성
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm">
</map>

 

Background Image
<style>
div {
  background-image: url('img_girl.jpg');
}
</style>

TABLE

<table> table 생성
<tr> table row
<th> table header
<td> table data/cell
<caption> table위 title
<colgroup> table의 column의 그룹 지정
<col> column property 지정
<thread> header content 그룹 지정
<tbody> body content 그룹 지정
<tfoot> footer content 그룹 지정 
<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>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>
border
border-collapse
padding
text-align
border-spacing
colspan
rowspan
border

 

 

 

 

 

 

<a href="html_images.asp" style="">HTML Images</a>

IMAGE

TABLE

반응형
LIST