웹프로그래밍

HTML 기본 구조

SunFly 2021. 10. 12. 17:53

※ HTML 문서

- 태그(tag)로 표기하는 요소(element)와 요소의 속성(attribute)으로 이루어짐.

 

● <!DOCTYPE>

  • 문서의 종류를 알려주는 <!DOCTYPE>으로 시작.
  • <!DOCTYPE html> : html 문서 규약

● <html> 요소

  • 문서 내용을 나타냄.
  • 문서에 대한 정보를 나타내는 <head> 요소
  • 문서 내용을 나타내는 <body> 요소

● <head>

→ <title> 요소

  • 문서 제목을 나타냄.

→ <meta> 요소

  • 웹문서에서 사용하고 있는 문자 인코딩 정보
  • 검색엔진을 위한 문서의 검색 키워드 정보

→ 기타요소

  • <script> 요소: 자바스크립트로 상호작용을 위한 스크립트
  • <style> 요소 : 웹문서의 표현에 사용되는 CSS
  • <link> 요소 : 웹 문서 외부에 기술된 자바스크립트와 CSS 파일 링크 정보

● 글자 태그

▷제목

  • <h1> ~ <h6>

▷본문 태그

  • <p> : 본문 글자 태그
  • <br>: 줄바꿈 태그
  • <hr>: 수평줄 태그

▷글자 형태 태그

  • <b> : 굵은 글자
  • <i> : 기울어진 글자
  • <small> : 작은 글자
  • <sub>/<sup> : 윗첨자/아래첨자
  • <del> : 가운데 줄이 그어진 글자

▷앵커 태그

  • <a> : 특정 위치로 이동할 때 사용하는 태그 (href 속성을 사용해 이동할 경로를 정한다.)

▷<UL> 태그

  • 규칙과 순서가 없는 목록(unordered list)를 만들기 위해 사용
  • 목록을 만들 때에는 목록 내에 포함된 항목을 나타내기 위한 하위 요소인 <li> 요소를 사용
  • <ul> 요소 안에 있는 <li> 요소는 목록의 한 항목

▷<OL> 태그

  • 규칙과 순서를 숫자로 나타내는 목록(ordered list)에 사용
  • 규칙과 순서에 관계가 있기 때문에 목록 앞에는 숫자가 옴.
  • <ol> 요소 안에 있는 <li> 요소는 목록의 한 항목.

▷<a> : 링크

  • href 속성: 이동하고자 하는 문서의 주소
  • title 속성: 말풍선 안에 나올 설명
  • <a href="파일 이름 / URL 주소" title="설명"> 연결할 텍스트</a>

▷<iframe> 태그

  • <iframe> 요소 : 한 화면에서 링크로 연결된 내용을 보기
  • 브라우저 페이지 내에 또 다른 브라우저 페이지 프레임을 삽입
  • <iframe src="내부 프레임에 출력할 파일 경로"></iframe>