HTML Tutorial

web

HTML Tutorial

코딩하는 둥아 2020. 7. 21. 01:20

728x90

HTML (Hyper Text Markup Language)

웹페이지의 구조를 표현해주는 언어
<tagname> Content </tagname>

<HTML tag>

<h1> ~ <h6>

<p> : 본문
- 태그 안에서의 줄바꿈이나 여러개의 스페이스는 자동으로 무시함
- 자동으로 줄바꿈 일어남
<pre> : 줄바꿈과 여러개의 스페이스도 그대로 적용되어 보여줌

<a> : 설정한 주소로 이동할 수 있는 링크
<img src="" alt=""> : src에 이미지가 있는 경로를 입력한다
<br> : 줄바꿈
<hr> : horizontal line, 수평으로 line break 제공
각 태그마다 attribute를 가지고 있음
- ex) <a href=""></a>
- ex) <img src=""> - src, width, height, alt(이미지가 없을 때 대체 텍스트)
- <p style=""></p> : style attr를 사용하면 모든 스타일을 적용할 수 있다
- <p title=""></p> : 마우스 커서를 올렸을 때 나오는 tooltip을 생성함

<HTML Styles>

property
- background-color: 배경색 변경
- color: 글자 색 변경
- font-size: 폰트 크기 변경
- font-family : 폰트 변경
- text-align: text 정렬 변경

[HTML Text Formatting]

b / strong tag : bold 텍스트
i / em tag : 기울어진 Italic체 제공
small: 원래 글씨보다 작은 텍스트
mark: highlight 효과
del: 텍스트의 중간에 줄을 그어줌
ins: 텍스트 밑줄
sub: 밑에 첨자로 글자를 작게 내려줌
sup: 위 첨자로 글자를 작게 올려줌

[HTML Quotation and Citation Elements]

blockquote : 인용구 전체에 indent를 넣어준다
q : 짧은 문장 인용시 주로 사용, 따옴표 찍어줌
abbr: 줄임말 단어에 마우스를 올리면 전체 단어 보여줌
address: contanct information을 명시할 때 주로 사용
cite : 고유명사나 작품 이름 같은거 명시할 때
bdo: 텍스트가 적히는 방향을 설정할 수 있음 (오른쪽에서 왼쪽으로 쓰이도록..)

[HTML Comments]

: HTML에서 주석처리는

이렇게 처리함

[HTML Color]

background, text, border color 변경 가능

Color 나타내는 방법
- RGB: rgb( red, green, blue)
  - rgb의 값을 똑같이 주면 gray scale을 표현할 수 있음
- RGBA: rgba(r,g,b,투명도)
- HEX: #RRGGBB
- HSL: hsl(hue, saturation, lightness)
  - hue: 0~360, 색깔 의미함
  - saturation: 0%는 gray scale, 100%는 full color, 퍼센트가 낮을수록 탁해짐
  - lightness: 0%는 black, 100%는 white
- HSLA

[HTML Styles - CSS]

inline
- HTML element안에 style attribute의 형식으로 스타일 추가
internal
- html의 <head>안에 <style>안에 스타일 추가하기
external
- 외부 css파일을 link를 통해 참조하기
- <link rel="stylesheet" href="/css/master.css">
padding: text와 border사이의 여백, 내부 여백
margin: border 밖의 여백 추가, 외부 여백

[HTML Links]

<a> tag
- <a href="url" target="_blank">link text</a>
- href attr에 설정한 url로 이동 가능
- target attribute: default로 링크된 페이지가 현재 브라우저에 바로 띄워진다. 링크된 document가 어디에 열릴지를 정하는 것
  - _self : default value, 현재 윈도우에 띄워짐
  - _blank : 새 윈도우 창에 열림
  - _parent : parent frame에 열림
  - _top
- href에 들어가는 url은 절대 경로와 상대경로가 있음
  - 절대경로: 전체 웹 주소, https://~~
  - 상대경로: 현재의 홈디렉토리를 중심으로 움직일 수 있음 (/css/default.asp)
이미지를 링크로 사용하기
- title attr를 추가하면 hover했을 때 타이틀이 나옴

<a href="https://www.w3schools.com/html/html_links.asp" title="Go to W3Schools Tutorial!">
      <img src="./image/smile.png" width="100px" alt="스마일">
</a>

이메일 보내기

    <a href="<a href="mailto:000000@naver.com?subject=feedback">email보내기</a>

버튼 누르면 링크로 이동

    <button type="button" onclick="document.location='https://www.w3schools.com/html/html_links.asp'" name="button">HTML Tutorial</button>

css style을 통해 링크의 색깔을 변경할 수 있다.
- 원래 default 색깔은 방문하지 않은 링크는 파란색, 방문한 링크는 밑줄 보라색, active일 때는 밑줄 빨간색이다.
- 아래의 설정을 통해 각 경우의 색을 변경할 수 있다.

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;
    }

[HTML Bookmark]

a tag를 이용해서 원하는 위치로 이동하기

<h2 class="title" id="color">[HTML Colors]</h2>

...

<p><a href="#color">색깔 파트로 이동하기</a></p> //color라는 id를 가진 부분으로 이동함
<p><a href="index.html#start">index.html로 이동</a></p> // 다른 페이지로도 이동 가능

[HTML Images]

<img src="url" alt="alternatetext" style="" width="" height="">

움직이는 이미지도 불러올 수 있음

image map

usemap을 해서 원하는 이미지에 map을 사용할 수 있다
map tag안의 area에서 설정한 좌표의 구간을 클릭하면 지정한 곳으로 이동한다.
- area: clickable area
- area의 shape: rect, circle, poly, default(entire region)
- rect: 좌측 상단 좌표의 x,y , 우측 하단 좌표의 x,y
- circle: 원의 중심 x,y 좌표, 반지름
- poly: 찍고자 하는 모든 점들의 x,y좌표를 순서대로 기입함

<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">

<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="Cup of coffee" href="coffee.htm">
</map>

javascript를 통해 클릭했을 때의 이벤트를 설정할 수 있다.
- 저 원을 클릭하면 You clicked the coffee cup이라는 경고창이 뜬다.

<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">

<map name="workmap">
  <area shape="circle" coords="337,300,44" onclick="myFunction()">
</map>

<script>
function myFunction() {
  alert("You clicked the coffee cup!");
}
</script>

background image

: style attribute에서 background-image property를 통해 배경을 지정한다.

background-image: url()
background-repeat: no-repeat;
- x, y축으로의 이미지 반복을 없앰
background-size
- cover: element를 x축을 기준으로 가득 채움
- 100% 100% : x,y축 모두 element를 가득 채우도록 설정
background-attachment: fixed
- 비율은 깨지더라도 x,y축 모두를 기준으로 element를 무조건 가득 차게 만들어줌.

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

<picture> Element

source tag에 설정한 min-width에 따라 이미지 src가 바뀌면서 이미지가 변한다.
화면 크기에 맞게 다양한 이미지를 띄울 수 있다.

<picture>
  <source media="(min-width: 650px)" srcset="img_food.jpg">
  <source media="(min-width: 465px)" srcset="img_car.jpg">
  <img src="img_girl.jpg">
</picture>

[HTML Table]

기본적인 table tag 구조

<tr> : 하나의 row를 의미함
<th> : table header, default로 진한 글씨와 가운데 정렬
<td> : table data, default로 일반 글씨 두께와 왼쪽 정렬
<caption>: table tag안에 위치, 테이블의 중앙 상단에 테이블의 이름처럼 caption을 지정함
colspan과 rowspan property를 통해 두개 이상의 cell을 하나로 합칠 수 있음
table style
- border-spacing: 경계선 사이의 여백 설정
- border-collapse: collapse: 두 개의 border 하나로 합치기
- border: 테두리 만들기

<table>
      <tr>
        <th>Name</th>
        <th>Telephone</th>
        <th>Address</th>
      </tr>
      <tr>
        <td>Bill Gates</td>
        <td>55577854</td>
        <td>55577855</td>
      </tr>
    </table>

// colspan 예시
<table>
      <tr>
        <th>Name</th>
        <th colspan="2">Telephone</th>
      </tr>
      <tr>
        <td>Bill Gates</td>
        <td>55577854</td>
        <td>55577855</td>
      </tr>
    </table>
    
   // rowspan 예시
   <table>
      <caption>table example</caption>
      <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>

[HTML LIsts]

Unordered Lists
- ul tag안에 li tag로 구성됨
- ul안에 ul이 포함된 nested list도 가능함
- style중 list-style-type property를 통해 bullet의 모양 변경 가능
  - disc, square, none, circle

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Ordered List
- ol tag안에 li tag로 구성됨
- type property로 나타내는 형식 변경
  - 1, A, i, a, I
- start attr로 시작점을 설정할 수 있음

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Description List
- dl tag안에 dt tag(term, name) 과 dd 상세 설명 태그로 이루어짐

<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>

[HTML Block and Inline Elements]

Block Element

: 항상 new line으로 시작. full width를 가짐

ex) div, p, h1

Inline Element

: 자신이 필요한 구역만 차지함, new line으로 시작하지 않음

inline은 block element를 포함할 수 없음! 그 반대는 당연히 성립함.

ex) span tag

[HTML The class Attributes]

Class

class를 사용해서 style을 body의 밖에서 적용할 수 있다.
다른 HTML Element들이 동일한 class를 함께 사용할 수 있다
javascript에서도 활용 가능함
하나의 HTML Element에 여러개의 클래스를 적용할 수 있다

    .city {
      background-color: #cfe9fa;
      color: white;
      border: 2px solid white;
      margin: 20px;
      padding: 20px;
    }
    .main{
      text-align: center;
    }
    
    ...
    
    <div class="city main">
      <h2>London</h2>
      <p>London is the capital of England.</p>
    </div>

    <div class="city">
      <h2>Paris</h2>
      <p>Paris is the capital of France.</p>
    </div>

    <div class="city">
      <h2>Tokyo</h2>
      <p>Tokyo is the capital of Japan.</p>
    </div>

    <p class="city">Paris is the capital of France.</p>


    <h4>Javascript에서의 사용</h4>
    <p>Click the button to hide all elements with class name "city":</p>
    <button onclick="myFunction()">Hide elements</button>
    
    
    ...
    
    //버튼을 누르면 city 클래스를 가진 element들의 display가 none으로 설정됨
    <script>
    function myFunction() {
      var x = document.getElementsByClassName("city");
      for (var i = 0; i < x.length; i++) {
        x[i].style.display = "none";
      }
    }
    </script>

[HTML The id Attributes]

: class와 id는 거의 유사하지만, class는 여러개의 HTML Element에 적용할 수 있지만 id는 오직 한 개의 HTML element에만 적용할 수 있다는 특징이 있다.

위에서 다룬 Bookmark도 id를 활용한 기능이다

...
#myHeader {
      background-color: lightblue;
      color: black;
      padding: 40px;
      text-align: center;
}
...

<h1 id="myHeader">My Header</h1>
<button onclick="displayResult()">Change text</button>

...

function displayResult() {
	document.getElementById("myHeader").innerHTML = "Have a nice day!";
}

[HTML Iframe]

기본 구조

<iframe src="" width="" height="" title=""></iframe>

: 웹페이지 안에 웹페이지를 넣는 것

똑같이 style 모든 것 적용 가능
- background, border, width, height
a link에 target으로 iframe을 설정해주면, 링크를 눌렀을 때 그 링크가 iframe의 src로 변경됨

<iframe src="./index.html" style="background: white; border:none;" height="200" width="300" title="Iframe Example"></iframe>

<iframe src="./index.html" 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>

[HTML JavaScript]

뒤에서 상세하게 다룰 예정

맛보기만!

ex)

document.getElementById("demo").innerHTML = "Hello JavaScript!"; // demo라는 id를 가진 element의 내용 변경

document.getElementById("demo").style.fontSize = "25px"; // demo라는 id를 가진 element의 fontSize변경, css 변경

document.getElementById("image").src = "picture.gif"; // image id를 가진 element의 src attribute 설정

HTML <head> Element

<title>
<style>
<meta>
<link>
<script>
<base>

모든 내용은 W3School을 참고하여 작성되었습니다.

728x90