HTML 기초 문법(1)

2022. 9. 1. 12:12· Language/HTML, CSS, SCSS
목차
  1. HTML(HyperText MarkUp Language)
  2. <HTML의 문법>
  3. <html의 기본 구조>
  4. <글의 내용을 정의하는 태그들>
  5. <리스트를 나열하는 태그들>
반응형

HTML(HyperText MarkUp Language)

웹 페이지의 내용을 서술하고 정의하는데 사용

더보기

- html언어에서는 태그라는 문법적 특성으로 웹 화면의 element를 표현

 

 

<HTML의 문법>

  • 마크업 언어
  • 여는 태그와 닫는 태그의 한 쌍
  • 태그는 중첩될 수 있다
<html>내용</html>

 

 

<html의 기본 구조>

  • html, head, body 태그
  • <html> : 문서의 시작과 끝
  • <head> : 문서의 메타 정보(문서정보)를 정의
  • <body> : 실제 사용자에게 보여질 화면을 구현

 

 

<글의 내용을 정의하는 태그들>

  • heading 태그 : h1, h2, h3 ... (주제)
  • paragraph 태그 : p (문단)
  • break 태그 : br (줄 바꿈)
  • italic 태그 : i (기울임)
  • strong, bold 태그 : strong, b (강조)
  • horizontal rule 태그 : hr

 

 

1. Heading 태그
제목을 구성하는 태그로 제목의 단계에 따라 h1(최상위 주제)부터 h6태그(하위 주제)로 나뉨


2. Paragraph 태그

하나의 문단을 지정할 때 사용되는 태그. 하나의 문단으로 묶여서 화면에 보여짐


3. Break 태그

줄 바꿈을 하려면 break태그를 사용하여 지정해야 함. 닫는 태그 없이 사용 가능하며, 홀태그라고 함



4. Italic 태그

특정 글자에 기울임체를 적용



5. Strong, bold 태그

특정 글자들을 강조



6. Horizontal rule 태그

문서 내 가로 선을 넣고 싶을 때 사용. 홀태그 형태

 

 

<리스트를 나열하는 태그들>

  • Ordered list 태그 : OL
  • Unordered list 태그 : ul
  • List item 태그 : li

 



1. Ordered list 태그

순서가 있는 항목들을 나열 (알아서 순번을 매겨줌)



2. Unordered list 태그

순서가 정해지지 않은 항목들을 나열할 때 사용



3. List item 태그

<li>사과</li>
<li>메론</li>

 

반응형
저작자표시 비영리 변경금지 (새창열림)

'Language > HTML, CSS, SCSS' 카테고리의 다른 글

[CSS] CSS Postition (static, relative, absolute, fixed)  (0) 2024.02.15
[CSS] 영문 자동 줄바꿈이 안될 때  (0) 2023.10.13
[HTML] iOS Safari에서 Input 태그 자동 줌 기능 비활성화하는 방법  (0) 2023.10.11
HTML 기초 문법(3)  (0) 2022.09.01
HTML 기초 문법(2)  (0) 2022.09.01
  1. HTML(HyperText MarkUp Language)
  2. <HTML의 문법>
  3. <html의 기본 구조>
  4. <글의 내용을 정의하는 태그들>
  5. <리스트를 나열하는 태그들>
'Language/HTML, CSS, SCSS' 카테고리의 다른 글
  • [CSS] 영문 자동 줄바꿈이 안될 때
  • [HTML] iOS Safari에서 Input 태그 자동 줌 기능 비활성화하는 방법
  • HTML 기초 문법(3)
  • HTML 기초 문법(2)
쓰링
쓰링
Web Front Developer🐣
반응형
쓰링
부앙단 개발로그
쓰링
전체
오늘
어제
  • 전체보기 (57)
    • Language (25)
      • Typescript (4)
      • Javascript (5)
      • HTML, CSS, SCSS (9)
      • Java (3)
      • PHP (1)
      • Dart (3)
    • Framework (8)
      • React (7)
      • Flutter (0)
    • Library (6)
    • Figma (1)
    • Git (4)
    • DB (3)
    • CS (1)
    • Algorithm (6)
      • Baekjoon (2)
      • SWEA (2)
      • 도서 후기 (2)
    • SSAFY (3)
      • SSAFYcial (1)
      • SSAFY 8기 (2)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • java시작하기
  • 싸피 합격
  • 싸피 웰컴
  • SSAFY 합격 후기
  • 백준 java 풀이
  • 싸피8기합격
  • 백준 입출력과 사칙연산
  • SSAFY 웰컴키트
  • 싸피8기
  • SSAFY 비전공
  • SSAFY8기
  • 싸피 합격 후기
  • 백준 브론즈
  • SSAFY 전공
  • java전공자
  • 웰컴키트
  • 싸피
  • ssafy
  • java 처음
  • 싸피 웰컴 키트
  • 웰컴 키트
  • java초보자
  • 백준 Java
  • 싸피 전공자
  • 백준 알고리즘 공부
  • 처음 java
  • 백준 알고리즘 풀이
  • 초보자를 위한 java
  • 백준 자바
  • 백준 자바 풀이

최근 댓글

최근 글

hELLO
쓰링
HTML 기초 문법(1)
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.