[HTML] HTML에 대해 가장 먼저 알아야 할 것은?

in Study on Study, JavaScript
[HTML] HTML에 대해 가장 먼저 알아야 할 것은?

HTML(HyperText Markup Language)은 JavaScript와 같은 프로그래밍 언어가 아니라 웹 페이지의 뼈대를 구성하는 마크업 언어이다. 그래서 HTML로 기본 뼈대를 만들고 CSS로 스타일을 입힌 다음 JavaScript로 동적으로 움직이게 만들 수 있다. 이와 같이 웹 페이지의 뼈대역할을 하는 HTML에 대해 알아보자.

HTML 기본 구조와 문법

HTML은 tag들의 집합이다.

  • tag : 부등호(<>)로 묶인 HTML의 기본 구성 요소 ```javascript

```

  • 여는 태그 + 닫는 태그의 짝을 지어 작성한다. (: 여는태그, : 닫는태그)
  • Self-Closing Tag : 태그 내부에 내용이 없다면 닫는 태그를 사용하지 않아도 된다. ()

자주 사용하는 HTML요소

태그설명
divDivision
spanSpan
imgImage
aLink
ul & liUnordered List & List Item
inputInput(Text, Radio, Checkbox)
textareaMulti-line Text Input
buttonButton
  • div VS span
    • div태그는 한 줄을 차지한다.
    • span태그는 컨텐츠 크기만큼 공간을 차지한다.

  • img : src속성으로 이미지 주소를 가져와 삽입한다. (닫는 태그 필요없음)

  • a : 링크 삽입 href속성으로 링크 주소를 가져와 삽입한다.

  • ul : unordered list -> 숫자로 순서를 지정하지 않는 리스트

  • ol : ordered list -> 숫자로 순서를 지정하는 리스트
    • ul, ol은 직계자식요소로 li만 올 수 있다.
  • input, textarea : 다양한 입력폼이다. 아이디를 입력하거나 체크박스에 체크하는 등.
    • checkbox vs radio? : checkbox는 여러개 선택 가능하지만 radio는(name이라는 속성으로 그룹설정시) 하나만 선택 가능하다.
    • textarea : 줄바꿈이 되는 입력폼
    • button : 클릭하면 상태가 변하는, 우리가 흔히 아는 그 버튼.

시멘틱 요소

시멘틱이란 ‘의미가 있는, 의미론적인’이라는 뜻으로, 의미를 가진 요소를 사용하는 방식을 추구하는 것이다.

시멘틱 요소가 필요한 이유 및 상황

  • 모든 단락에 div만 사용한다면 나중에 수많은 div를 마주하게 되었을 때, 이게 어떤 내용을 담는 부분인지 구조적으로 파악하기 어렵고 혼란스러워질 것이다. (div를 하나하나 탐색하는 것보다 의미 있는 코드블록을 찾는 게 더 편리하고 요소 안에 채워질 데이터 유형을 예측하기 쉽다.)
  • 검색 엔진이 시멘틱요소를 더 좋아한다. 즉, 시멘틱 요소에 담긴 의미에 따라 검색 결과에 따른 상위노출이 결정될 수 있다.

시멘틱 요소의 종류

태그 이름설명
article독립적이고 자체 포함된 콘텐츠 지정
aside본문의 주요 부분을 표시하고 남은 부분을 설명하는 요소, 특별한 일이 아니면 사이드바나 광고창 등 중요하지 않은 부분에 사용됨
footer일반적으로 페이지나 해당 파트의 가장 아랫부분에 위치, 사이트의 라이센스, 주소 연락처 등이 있음
header일반적으로 페이지나 해당 섹션의 가장 윗부분에 위치하며, 사이트의 제목이 보통 들어간다. 선택적으로 상단바나 검색창 등이 안에 들어갈 수 있다
nav네비게이션(navigation)의 약자로, 일반적으로 상단바 등 사이트를 안내하는 요소에 사용됨. 보통은 안에 ul을 넣어 목록 형태로 사용
main문서의 주된 콘텐츠 표시

HTML에서 id 및 class 목적에 맞게 사용하기

id : 고유한 이름을 붙일 때
변화가 없이 고정으로 고유한 영역에는 id로 이름을 붙인다.

class : 반복되는 영역을 유형별로 분류할 때
반복되는 항목은 class로 지정한다. 같은 class값을 지정해줌으로서, 동일한 유형임을 알 수 있다.

태그와 id, class 선택자

HTML tagSelector
‘<span id=”writing-section”’>div#writing-section
‘<li class=”“comment”>’li.comment

©lunadein2022 2022. All rights reserved.