코드스테이츠 프론트엔드 부트캠프

코드스테이츠 프론트엔드 부트캠프 2일차 후기

2023. 2. 14. 21:36
목차
  1. html이란?
  2. 시맨틱 태그의 중요성

오늘은 본격적으로 부트캠프 수업이 있던 날이었다.

html을 배우는 시간이었는데, 짧고 굵게 그동안 배웠던 것들을 점검해 볼 수 있었다.

 

html이란?

html은 HyperText Markup Language의 줄임말로, 웹페이지의 구조를 이루는 마크업 언어이다.

html을 건물에 비유하면 뼈대를 세우는 과정이라고 할 수 있다.

 

<div>와 <span>

<div>는 대표적인 block element로 웹페이지의 한 줄을 전부 차지하는 태그인 반면,

<span>은 inline element로 컨텐츠만큼의 공간만을 차지한다.

 

시맨틱 태그의 중요성

시맨틱 태그(Semantic tag)란 의미를 부여한 태그다.

<div>나 <span>처럼 단순히 구역을 구분하는 의미만 가진 태그는 자유도가 높아서

큰 제약 없이 어디에나 활용할 수 있다는 장점이 있지만,

반면에 해당 태그가 문서 내에서 어떤 역할을 하는지를 알기 어렵다.

 

반면에 시맨틱 태그는 그것이 담고 있는 내용을 정의해 주기 때문에

코드를 봤을 때 전체 구조 내에서 그 태그가 하는 역할을 한눈에 파악할 수 있다.

 

또, 검색 엔진에서 시맨틱 태그를 기반으로 검색 결과를 보여주기 때문에

시맨틱 태그를 문서의 키워드를 담은 부분에 적절히 사용하면 검색 엔진에 노출될 가능성이 높아진다.

 

뿐만 아니라 시맨틱 태그를 사용하면 웹 접근성의 측면에서도 좋다.

장애인이 웹 보조 기구들을 이용해 어디가 제목이고 어디가 내용인지 알 수 있기 때문이다.

 

시맨틱 태그의 종류

  • <article> : 문서의 컨텐츠에서 하나의 독립된 내용을 담는 태그.
  • <aside> : 필수 요소가 아닌 나머지 부분을 담는 태그로, 광고 등을 넣을 때 사용한다.
  • <footer> : 웹페이지의 가장 아랫부분에 들어가는 태그로, 라이선스, 주소, 연락처 등을 넣을 때 사용한다.
  • <header> : 한 구역의 가장 윗부분에 위치하며 제목이나 상단바, 검색창 등을 넣을 수 있다.
  • <nav> : 내비게이션(navigation)의 약자로, 사이트를 안내하는 요소에 사용된다. 안에 <ul>을 넣어 목록 형태로 사용한다.
  • <main> : 문서의 주된 부분을 나타낸다.

'코드스테이츠 프론트엔드 부트캠프' 카테고리의 다른 글

[CLI] CLI(Command-Line-Interface) 다루기  (0) 2023.02.24
[CSS] flex의 활용(서로 다른 column에 있는 item 어긋남 해결하기)  (0) 2023.02.16
[CSS] 자기소개 페이지 만들기  (0) 2023.02.15
코드스테이츠 프론트엔드 부트캠프 1일차 후기  (0) 2023.02.13
코드스테이츠 프론트엔드 부트캠프 44기 합격 후기  (0) 2023.02.06
  1. html이란?
  2. 시맨틱 태그의 중요성
'코드스테이츠 프론트엔드 부트캠프' 카테고리의 다른 글
  • [CSS] flex의 활용(서로 다른 column에 있는 item 어긋남 해결하기)
  • [CSS] 자기소개 페이지 만들기
  • 코드스테이츠 프론트엔드 부트캠프 1일차 후기
  • 코드스테이츠 프론트엔드 부트캠프 44기 합격 후기
JeanneLee57
JeanneLee57
공부하고 기록을 남기는 개발자 Jeanne
JeanneLee57
코딩은 진리
JeanneLee57
전체
오늘
어제
  • 분류 전체보기 (115)
    • Javascript (15)
    • React (15)
    • Next.js (8)
      • Next.js 베타 문서 번역 (5)
    • 프로젝트 (34)
      • 미니 프로젝트 & 과제 (25)
      • SEB 44 pre-project (1)
      • SEB 44 main-project (8)
    • 알고리즘 (12)
    • 부트캠프 준비 (6)
    • 기술면접 (3)
    • CS (7)
    • 코드스테이츠 프론트엔드 부트캠프 (12)

블로그 메뉴

  • 홈
  • 태그

공지사항

인기 글

태그

  • 프로그래머스
  • react
  • 고차함수
  • 부트캠프
  • 회고
  • 유데미
  • Next.js
  • 구조분해할당
  • codestates
  • 번역
  • 프리코드캠프
  • HTML
  • useEffect
  • 프론트엔드
  • 알고리즘
  • JavaScript
  • 코드스테이츠
  • CSS
  • 부트캠프준비
  • RTK

최근 댓글

최근 글

hELLO · Designed By 정상우.
JeanneLee57
코드스테이츠 프론트엔드 부트캠프 2일차 후기
상단으로

티스토리툴바

단축키

내 블로그

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

블로그 게시글

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

모든 영역

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

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