HTML 복습-1 (html, 태그 표기, 기본 구조, block, inline)

줌인·2023년 12월 3일

html

HTML

목록 보기

1/2

📍 HTML이란

하이퍼 텍스트 마크업 언어(영어: Hyper Text Markup Language, HTML)는 웹 페이지 표시를 위해 개발된 지배적인 마크업 언어다. - 위키백과

즉, 문서나 데이터의 구조를 나타내는 마크업 언어의 일종이다.

📍 HTML 태그 표기

기본적인 표기 형태

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

컨텐츠가 없는 경우 다음과 같이도 쓸 수 있다. (! 근데 script태그에는 사용 불가능)

<열린태그 속성 = "속성값" />

📍 HTML 문서의 기본 구조

<!DOCTYPE html>
<html>
  <head>
    <meta charset = "UTF-8">
    <title>상단탭에 뜰 사이트 제목</title>
  </head>
  <body>
    <header></header>
    <main></main>
    <footer></footer>
  </body>
</html>

<!DOCTYPE html> : document type이 html이라는 것을 선언함과 동시에 이 문서가 html5로 작성되었다는 것을 알려줌. 어떻게 html버전까지 알 수 있냐면 버전별로 DOCTYPE을 쓰는 방법이 다름.

<head> : 웹사이트에 직접적으로 표시되지 않는 웹사이트에 대한 정보나 내용을 적는 태그

<meta charset = "UTF-8"> : 한글, 특수문자 등 모든 문자를 웹사이트에서 깨지지 않게 character setting 하겠다는 의미

<body> : 웹사이트에 눈으로 보이는 정보(ex. 텍스트, 이미지)들을 담는 태그

📍 Block 요소와 Inline 요소

Block 요소

공간을 가지고 있는 태그들이 가지는 성격(요소)
width, height 설정 가능
margin, padding 설정 가능
y축 정렬의 형태로 출력됨(자동 줄바꿈이 일어남)
ex) div, h1~h6, p, li, ul, ol, table, header, main, footer 등

inline 요소

공간을 따로 가지고 있지 않은 태그들이 가지는 성격(요소)
width, height 설정 불가능
margin, padding 설정 불가능
x축 정렬의 형태로 출력됨(줄바꿈이 일어나지 않음)
ex) a, img, span 등

inline-block

inline요소와 block요소를 동시에 가지고 있음
자동 줄바꿈이 일어나지 않는다는 inline요소
width, height, margin, padding을 설정할 수 있다는 block요소
css파일에서 다음과 같이 적음으로써 적용

display: inline-block;

📖 참고

엘리스 군장병 AI SW 온라인교육 [입문] 웹 개발 프로젝트