[데브코스/TIL] DAY1 - HTML(1)

Minha Ahn·2024년 10월 14일
2

데브코스

목록 보기
4/24
post-thumbnail

오늘은 html의 구조와 여러가지 태그들에 대해서 파헤쳐보겠다!

🔍 HTML 기본 구성

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

1. DTD(Document Type Definition)

  • 웹 브라우저가 처리할 HTML 문서가 어떤 형식을 따라야 하는지 알려주는 것
  • HTML 문서 작성 시, 제일 앞에 넣어야 함

2. html 태그

  • HTML 문서의 시작과 끝을 의미
  • 모든 태그는 html 태그 안에 작성되어야 함

3. head 태그

  • HTML 문서의 메타데이터를 정의하는 영역
    • 메타데이터 : HTML 문서에 대한 정보로 웹 브라우저에 직접 노출되지는 않음
  • meta, title, link, style, script 태그를 사용해 정의

title 태그

  • 웹 페이지의 제목 지정할 때 사용

4. body 태그

  • 웹 브라우저에 노출되는 내용을 작성하는 영역
  • 웹 브라우저에서 표시되는 모든 내용을 작성하면 됨



⚙️ HTML 특징

1. 블록 요소와 인라인 요소

블록 요소

  • 새로운 줄에서 시작하여 전체 너비 차지
  • 다음 블록 요소와는 새로운 줄에 배치
  • div / hn / p / ul, ol, li / header, footer, section, article

인라인 요소

  • 새로운 줄에서 시작하지 않으며 흐름에 따라 뱇
  • 내용에 따라 크기 결정
  • span / a / strong, b / em, i / img, input

2. 부모 & 자식 & 형제

<div>
  <a>...</a>
  <p>...</p>
</div>

부모

  • 특정 태그를 감싸고 있다면, 감싸고 있는 태그가 부모 태그
  • 위의 예시에서 <div> 태그가 <a><p> 태그의 부모 태그

자식

  • 특정 태그를 감싸고 있다면, 감싸진 태그가 자식 태그
  • 위의 예시에서 <a><p> 태그가 <div> 태그의 자식 태그

형제

  • 같은 부모 태그를 가지고 있는 태그
  • 위의 예시에서 <a><p> 태그가 서로 형제 태그



✨ HTML의 여러 태그들

1. 기본 텍스트 표현하기

hn 태그

  • <h1> ~ <h6>까지 총 6개가 존재하며, 중요한 텍스트에 사용
  • <h1> 태그는 한 페이지 당 1개만 사용하기
  • 번호가 순서대로 나오지 않아도 되나, 번호가 끊기면 안됨
  • 앞 번호 없이 중간 번호부터 나오는 것도 옳지 않음

p 태그

  • 문단 작성할 때 사용

br 태그

  • 줄바꿈 할 때 사용
  • 오픈 태그로만 사용해도 되나 빈 요소로 표기하는 걸 권장 (<br />)

blockquote 태그

  • 인용문 작성할 때 사용
  • 반드시 한 개 이상의 p 태그 포함
  • 출처 등을 표시할 때는 cite 태그를 함께 사용하거나 cite 속성을 함께 사용
    • <cite>작성자 이름</cite> ⇒ 화면에 보임 (여러 번 사용 가능)
    • <blockquote cite=”작성자 이름”> ⇒ 화면에 안 보임 (한 번만 사용 가능)

q 태그

  • 짧은 이용문을 작성할 때 사용
  • cite 속성 사용 가능

ins, del 태그

  • ins : 새로운 내용 추가할 때 사용
  • del : 기존 내용을 삭제할 때 사용

sub, sup 태그

  • sub : 아래 첨자를 나타낼 때 사용
  • sup : 윗 첨자를 나타낼 때 사용

2. 텍스트 강조하기

strong 태그

  • 굵게 표시됨
  • 보통 긴 글을 강조할 때 사용
  • <b> : 같은 기능이지만 논시맨틱 태그

em 태그

  • 이탤릭체로 표시됨
  • 보통 짧은 글이나 단어를 강조할 때 사용
  • <i> : 같은 기능이지만 논시맨틱 태그


3. 공간 분할하기

div 태그

  • 블록 요소와 인라인 요소를 그룹으로 묶을 때 사용

span 태그

  • 인라인 요소를 그룹으로 묶을 때 사용





📌 출처

수코딩(https://www.sucoding.kr)

profile
프론트엔드를 공부하고 있는 학생입니다🐌
post-custom-banner

0개의 댓글