프론트엔드

HTML 기초

공기반 코딩반 2022. 9. 6. 18:16
반응형

HTML 태그 기본 구조

<열린태그 속성 = "속성값"> 컨텐츠 </닫힌태그>

태그

<img> 태그: 정보성을 갖고 있는 이미지를 삽입합니다. (닫힌 태그 X)

 

<h> 태그: heading의 약자로 제목이나 부제목을 표현합니다.

 

<p> 태그: paragraph의 약자로 본문 내용을 표현합니다.

 

<ul> 태그: unordered list의 약자로, 순서가 없는 리스트 생성합니다.

 

구조 잡을 때 사용하는 태그

- 목차

<header> 태그: 웹사이트의 머리글을 담는 공간

 

<nav> 태그: 메뉴 버튼을 담는 공간 <ul> ,<li>, <a>와 함께 사용

 

- 본문

<main> 태그: 문서의 주요 내용을 담는 태그 (전체적인 본문 내용)

 

<article> 태그: main태그 안에 주로 넣음. 문서의 주요 이미지나 텍스트 등의 정보를 담고 구역을 설정할 수 있음. <h>태그가 들어가야함  (정보영역)

 

- 부록

<footer> 태그: 가장 하단에 들어가는 정보를 표기할 때 사용

 

<div> 태그: 임의의 공간을 만들 때 사용

 

 

HTML 태그의 두 가지 성격

- BLOCK 요소

Y축 정렬 형태로 출력 (줄 바꿈) 

공간을 만들기 + 상하배치 X

 

- INLINE 요소 

x축 정렬 형태로 출력(한 줄 출력)

공간을 만들기 X + 상하배치 X

 

반응형

'프론트엔드' 카테고리의 다른 글

Node.js  (0) 2022.09.26
CSS 기초  (0) 2022.09.08
Responsive Web (반응형 웹)  (0) 2022.06.09
웹개발 종합반 2주차 과제  (0) 2022.06.07
웹개발 종합반 2주차 학습  (0) 2022.06.07