[WEB] HTML 기초

  • 0
  • 0
0
0

1. 기본문법

A. 관용적으로 사용

  • 이 문서는 html이다라는 뜻

<!doctype html>

B. HTML 태그

  • head 태그와 body 태그를 감싸는 태그

<html> </html>

C. head 태그

  • head

    • 본문(body)을 설명하는 태그를 묶음
    
    <head> </head>
    
    
  • 타이틀

    • 웹 페이지의 제목을 사용자에게 명시적으로 알려줌
    • 검색엔진은 타이틀 정보를 책 표지처럼 사용한다.
    
    <title>WEB1 - html</title>
    
    
  • 한글이 깨진다면

    • meta 태그를 사용한다.
    
    <meta charset="utf-8">
    
    

D. body 태그

  • 태그

    • 문법을 설명하는 것.
      • strong은 진하게 표시하는 것을 설명하는 것.
  • body

    • 본문을 묶음
    
    <body> </body>
    
    
a. 기초
  • 강조

    
    <strong> </strong>
    
    
  • 언더라인

    
    <u> </u>
    
    
  • 제목

    
    <h1> </h1>
    <h2> </h2>
    <h3> </h3>
    <h4> </h4>
    <h5> </h5>
    <h6> </h6>  
    
    
  • 줄바꿈

    
    
  • 문단 바꿈

    • 정해져있는 여백만큼만 줄이 바뀜
    
    <p> </p>
    
    
    • CSS
      • 시각적으로 부족한 부분은 css로 채울 수 있기 때문에 의미에 맞는 태그를 사용하는 것이 좋다.
    
    <p style="margin-top:45px;"> </p>
    
    
  • 이미지

    
    <img src="coding.jpg" width="100%">
    
    
  • 링크 (anchor)

    
    <a href="http://www.naver.com">Markup</a>
    
    
    • 속성 - 새탭으로 열기

      
      target="_blank"
      
      
    • 속성 - 힌트

      
      title="naver로 이동"
      
      
b. 속성
  • 속성 (Attribute)
    • 태그가 태그의 이름만으로는 정보가 부족할 때 속성을 통해서 더 많은 의미를 표현함.
    • <img> 태그 안에 있는 width="100%", src="coding.jpg"를 속성이라고 한다.
    • 속성의 순서는 상관이 없다.
c. 부모, 자식 태그
  • ol - li (Ordered List - List Item)

    
    <ol>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ol> td
    
    
  • ul - li (Unordered List - List Item)

    
    <ul>
      <li>egoing</li>
      <li>mildsalmon</li>
      <li>414</li>
    </ul>
    
    
  • table - tr - td (Table - Table Row - Table Cell)

    
    <table border="1">
      <tr>
        <td>head</td>
        <td>92.1%</td>
      </tr>
      <tr>
          <td>body</td>
          <td>98.9%</td>
      </tr>
      <tr>
        <td>html</td>
        <td>87.2%</td>
      </tr>
    </table>
    
    

참고 문헌

[1] HTML5 (w3.org). (accessed Sep 26, 2021)

[2] 이고잉. WEB1 - HTML & Internet - 생활코딩 (opentutorials.org). opentutorials. (accessed Sep 26, 2021)

0분전
작성된 댓글이 없습니다. 첫 댓글을 달아보세요!
    댓글을 작성하려면 로그인이 필요합니다.