본문 바로가기

온라인 강의/HTML&CSS(네이버 부스트코스)

HTML 문법

반응형

# HTML(Hypertext Markup Language) 문법 


▶ 문법: 태그, 속성, 중첩, 빈 태그, 공백, 주석

 

■ 태그

  • 태그는 <, > 기호로 표현
  • <, > 기호 사이에 태그 이름이 들어감
  • 종료 태그는 태그 이름 앞에 '/' 기호
  • 시작 태그와 종료 태그 사이에 실제 화면에 나타나는 내용 들어감

<h1>을 사용해 'Hello, HTML'을 출력하는 코드

 속성

  • 태그에 추가적인 정보를 제공
    원하는대로 동작이나 표현을 조절할 수있는 설정값들
  • 이름과 값으로 이루어짐
    '이름 = 값'에서 =기호 말고는 어떤 공백도 들어가서는 안됨
    "로시작했으면 "로닫고 '로 시작했으면 '로 끝나야함
  • 추가되는 속성도 공백으로 구분해서 사용
    선언 순서는 중요하지 않음

<h1> 에 &nbsp;id 와 &nbsp;class 2 개의 속성을 선언한 코드

 요소

  • 내용을 포함한 태그 전체

 태그 중첩

  • 태그-중첩이 가능하며 부모태그안에 들어가야 한다.
  • <부모태그><자식태그></자식태그></부모태그>

■ 빈 태그

  • 종결태그가 없는 태그
  • <img src="images/firefox-icon.png">
  • 브라우저에서 불러옴, closing tags가 없으며 내용도 없음-> 브라우저가 내용을 대신함
  • 대체 태그 또는 <br>등의 내용이 없는 태그가 포함됨

■ 공백

  • HTML은 기본적으로 두 칸 이상의 공백을 무시
  • 1칸은 1칸 공백이 되지만 2~3칸 이상을 공백으로 해도 결국 1칸 공백

 주석

  • 주석의 시작은 <!-- 로 표시하고, --> 표시로 종료

 

 


 

■ 문서의 기본 구조

  • 문서 타입 정의는 보통 DTD(doctype)라고 함. <!doctype html>문서타입선언부, 반드시 최상단에 위치해야 하며 현재 적은 것은 html5를 의미
  • <html lang="ko"> 한국어로 작성되었다는 것을 의미
  • <html>태그 안에는 <head>태그와 <body>태그로 이루어짐
  • <head>태그는 화면에 표시되지 않고, 문서의 설정 등을 의미
  • <body>태그는 화면에 표시됨
  • <meta charset="UTF-8"> : 문자의 인코딩 방식 / <title> : 탭바에 나타나는 부분
  • <body>태그 안에는 <h1>태그 <ol>/<ul>태그 <p>태그 등을 넣을 수 있음
반응형

'온라인 강의 > HTML&CSS(네이버 부스트코스)' 카테고리의 다른 글

CSS 문법3  (0) 2022.07.21
CSS 문법2  (0) 2022.07.21
CSS 문법  (0) 2022.07.19
HTML 문법3  (0) 2022.07.19
HTML 문법2  (0) 2022.07.18