HTML 태그 정리

dhffkvm_718·2021년 1월 4일
1

2021웹캠프정리

목록 보기
2/23

HTML(Hyper Text Markup Language)

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
> 
<h1>My First Heading</h1>
<p>My first paragraph.</p>
>
</body>
</html>

!DOCTYPE html: 이 문서가 HTML5 문서임을 정의
html: HTML page의 근본 요소
head: 해당 HTML 페이지에 대한 상위의 정보를 제공
title: HTML 페이지의 제목
body: 페이지를 이용하는 사람에게 보이는 부분

HTML은 p 태그를 'P'태그로 적더라도 이해한다.


hn, p, br, pre 태그

  • h 뒤에 붙는 n의 숫자가 커질 수록 글자의 수는 작아진다
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
  • p에서 시작해서 /p 가 나올 때까지 줄바꿈이나 스페이스가 통하지 않는다
<p>This is a paragraph.</p>
<p>This is 
a paragraph.</p>
<p>This is        a paragraph.</p>

This is a paragraph.

This is a paragraph.

This is a paragraph.

  • br을 넣어야 줄 바뀜이 실행된다
<p>This is<br>a paragraph<br>with line breaks.</p>

This is
a paragraph
with line breaks.

<

  • pre 태그는 br 이 없어도 줄바뀜과 스페이스바를 모두 인식한다.
<pre>
    'pre'태그는 br을 쓰지 않아도
    이렇게 줄바꿈이 된답니다.
</pre>


a, img, title 태그

  • a로 열어서 /a로 닫는다
    • 여는 a 안에 'href'로 링크를 건다
<a href="https://www.w3schools.com">Visit W3Schools</a>

Visit W3Schools

  • img 태그 안에 src="(링크)"를 적는다 (닫는 태크 없음)
    • alt="" : 이미지가 깨질 때 사진 설명이 들어간다
<img src="img_girl.jpg" width="500" height="600" alt="a girl">
  • title="" : ""에 들어간 내용이 해당 태그 위에 마우스 커서를 올리면 내용이 나온다
<p title="I'm a test">test</p>

test


style

* <tagname style="css property:css value;">
  • background-color: 배경색
  • color: 글자 색
  • font-family: 폰트
  • font-size: 글자 크기
  • text-align: 글자 정렬
<p>I am normal</p>
<p style="color:red; font-family:courier;">I am red</p>
<p style="color:blue;background-color:powderblue;">I am blue</p>
<p style="font-size:50px; text-align:center;">I am big</p>


HTML Text Formatting

  • b: 볼드체
  • em: 강조체
  • i: 이탈릭체
  • small: 글씨 작게
  • strong: 글씨 두껍게
  • sub: 보통 글씨보다 밑쪽으로
  • sup: 보통 글씨보다 위쪽으로
  • ins: 밑줄
  • del: 글씨 중간에 줄 긋기
  • mark: 글씨에 마킹하기
<p><b>This text is bold</b></p>
<p><strong>This text is important!</strong></p>
<em>This text is emphasized</em>
<p><i>This text is italic</i></p>
<small>This is some smaller text.</small>
<p>Do not forget to buy <mark>milk</mark> today.</p>
<p>My favorite color is <del>blue</del> red.</p>
<p>My favorite color is <ins>red</ins>.</p>
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>


HTML 인용

  • q: 짧을 때
  • blockquote: 어느 부분을 정해서 그 안에 인용한 것을 쓸때 사용한다.
  • abbr: 약칭이나 준말을 설명할 때 많이 사용
  • address: 개인 정보 인용시 사용 (italic체)
  • cite: 보통 고유명사 쓸 때 사용(italic체)
  • bdo: 글씨 쓰는 방향 조정 (원래 default 값은 ltr으로 왼쪽에서 오른쪽이고, dir="rtl"로 하면 오른쪽에서 왼쪽으로 써진다.)

주석달기

주석 달기는 !-- -- 로 합니다.

 <!-- 주석입니다. -->

CSS 종류

  1. inline: 태그 안에 스타일을 입힘
  2. internal: head안에 스타일을 구분하여 작성
  3. external: 외부에서 끌어와서 스타일을 적용
  • target: 해당 링크가 어디에 새로 열려야하는지
    • _blank: 새로운 탭에 열린다
    • _self: 기존 탭에 열린다
    • _parent: 부모창에서 열림
    • _top: 가장 상위의 창에서 열림
   <a href="https://velog.io/@dhffkvm_718" target="_blank" style="color:Violet">_blank로 링크걸기</a><br>
    <a href="https://velog.io/@dhffkvm_718" target="_self" style="color:Violet">_self로 링크걸기</a><br>
    <a href="https://velog.io/@dhffkvm_718" target="_parent" style="color:Violet">_parent로 링크걸기</a><br>
    <a href="https://velog.io/@dhffkvm_718" target="_top" style="color:Violet">_top로 링크걸기</a><br>

_blank로 링크걸기

_self로 링크걸기

_parent로 링크걸기

_top로 링크걸기


div vs span

div입니다

span은 이렇게 부분적으로 하는 것입니다


HTML table

  • table: 표
    • tr: table row
    • td: table data 값
<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>

list

  • ul
  • ol
  • li
  • dl
  • dt
  • dd

-순서 없는 리스트

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul> 
  • Coffee
  • Tea
  • Milk
  • -순서 있는 리스트

    <ol>
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ol>
  • Coffee
  • Tea
  • Milk
  • -설명 리스트

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

    Block & Inline

    • div: 컨텐츠를 필요에 따라 하나도 묶을 때 사용
    • span: div와 의미는 같음
      • div vs span : div는 “block level element(줄 바꿈o)”/ span은 “inline level element(줄 바꿈 x)”

    class, id

    • class: 한 페이지에 반복적으로 사용되는 스타일을 적용하기 위해
    • id: 특정 부분을 스타일을 입히려고 할 때 사용

    iframe

    • 웹페이지 안에 웹사이트를 따로 보여줄 때 사용
    <iframe src="https://velog.io/@dhffkvm_718/" name="myvelog" height="300px" width="100%" title="myvelog"></iframe>

    Javascript

    <p>JavaScript can change the content of an HTML element:</p>
    
    <button type="button" onclick="myFunction()">Click Me!</button>
    
    <p id="demo">This is a demonstration.</p>
    
    <script>
    function myFunction() { 
      document.getElementById("demo").innerHTML = "Hello JavaScript!";
    }
    </script>
    
    • 'This is a demonstration.'이 버튼을 클릭하면 'Hello JavaScript!' 로 바뀐다.
    <button type="button" onclick="document.getElementById('demo').innerHTML = Date()">
        Click me to display Date and Time.</button>
        <p id="demo"></p>
    Click me to display Date and Time.</button>
    <p id="demo"></p>
    • 원래는 버튼을 클릭하면 날짜와 시각이 나온다.

    Responsive web

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    veiwport를 통해 화면을 보는 사용자의 기기에 맞게 너비를 조절한다.

    profile
    초보자가 기록하는 곳

    0개의 댓글