Practice Makes Perfect

HTML 기본

by Hey-D

HTML

기본 문법

1. 태그

콘텐츠를 설명함.

<strong> World Wide <u>WEB</u> </strong>
  • 링크
    • hyper text 라고도 함 : 링크를 고급지게 표현
    • 최계 최초의 웹페이지 : http://info.cern.ch/
    <a href="http://info.cern.ch">First web</a>
  • title
    • 일반적으로 head 태그 아래에 위치함. <title>WEB1</title>
    • 사이트의 이름을 지정해 줄 수 있음

title

  • heading
    • 본문 내의 제목을 의미함.
      • <h1>This is heading 1</h1>
      • <h2>This is heading 2</h2>
      • <h3>This is heading 3</h3>
      • <h4>This is heading 4</h4>
      • <h5>This is heading 5</h5>
      • <h6>This is heading 6</h6>

heading

 

  • list
    • 목록을 표현함.
    • 순서가 있는 경우 ol(ordered list)
    • 순서가 없는 경우 ul(unordered list)

  • <a href = ‘index.html’>
    • 기본 홈페이지로 돌아오는 링크 삽입

 

2. 속성

부가적인 정보를 추가함

<img src ="<https://a.com/b.jpg>", width="200" height="200" alt="오잉">

alt : 이미지를 보여줄 수 없을 때 해당 이미지를 대체할 텍스트를 명시함!


기본 구조

  • <!doctype html> 이 문서가 html이라고 선언
  • <html> </html> html 내용을 적는다고 알려줌 (정보)
  • <head> </head> 헤드 단락을 나눠줌
    • <title></title> : 창에 뜨는 문구
    • <meta charset = “utf-8”> : 한글 깨지지 말라고 인코딩 해주는 작업
  • ⇒ 타이틀 부분은 head로 묶어주기
  • <body> </body> : 내용에 해당하는 부분
    • 내용에 해당하는 부분은 바디로 묶어주기


  • 꿀팁! vscode에서 li*3 + tab 하면 세개 한번에 생성

 

 

 

 

 

이 글의 태그

블로그의 정보

완벽주의보다는 완료주의

Hey-D

활동하기