오봉이와 함께하는 개발 블로그

HTML의 구조와 태그 본문

FE/HTML

HTML의 구조와 태그

오봉봉이 2021. 12. 2. 16:14
728x90

FrontEnd_day1 정리 (2021.12.02 목요일)

HTML(Hyper Text Markup Language)

  • 웹 브라우저에서 하이퍼텍스트 기능을 구현하는 웹 페이지 작성 언어
  • 하이퍼텍스트
    • 문서간에 서로 링크가 되어 있어 링크를 클릭하면 해당 문서로 이동하는 기능
  • HTML 문서의 구성
    • 태그
    • 출력하고자 하는 문서 내용

태그(Tag)

  • HTML에서 사용하는 명령어(문자열 기호)
  • 원하는 모양과 형태로 브라우저에게 명령을 내림
  • <html>, <body>, <p>

  • 태그 사용 형식
    • 대부분 시작 태그(<태그명>)와 종료 태그(</태그명>)를 함께 사용
    • <태그명>출력내용</태그명>
      • <title>문서 제목</title>
      • <p>문단 형식으로 출력</p>
    • <태그명 속성명=”속성값”>출력 내용</태그명>
      • <a href=”a.html” target=”iFrame”>이동
  • 종료 태그 없이 혼자 사용하는 태그도 있다.
    • <br> : 줄바꿈
    • <img> : 이미지 삽입
    • <hr> : 수평선 삽입
  • 태그는 대/소문자 구분 없이 사용한다.

HTML 문서 구조

  • <head>와 <body>로 구성
  • 화면에 출력하고자 하는 모든 내용은 <body> 태그 안에 포함
  • <head> 부분
    • 문서의 정보를 작성하는 부분
    • 문자 세트 설정
      • <meta charset="UTF-8">
      • 문자열 처리 방식
    • 문서의 제목 설정 <title>Hello World!</title>
    • 외부 파일 연결
    • CSS 정의
    • 자바스크립트 정의(필요한 경우 body에도 포함)
    • 등등...
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World!</title>
</head>

기본 태그

  • HTML 문서 구조 태그
  • 텍스트 관련 태그
  • 하이퍼링크 태그
  • 목록 태그
  • 테이블 태그
  • 이미지 / 이미지 맵 태그
  • 문서 삽입 태그
  • 오디오 / 비디오 태그
  • 입력 양식 태그
  • 공간 분할 태그
  • HTML5 시멘틱 구조 태그
728x90
저작자표시

'FE > HTML' 카테고리의 다른 글

테이블 태그  (0) 2021.12.02
목록태그  (0) 2021.12.02
하이퍼링크 태그  (0) 2021.12.02
텍스트 관련 태그  (0) 2021.12.02
문서 구조 태그  (0) 2021.12.02
'FE/HTML' Related Articles more
Comments