HTML

Min Seong Kim·2022년 6월 30일

HTML

HTML(Hypertext Markup Language)은 웹 페이지와 그 내용을 구조화하기 위해 사용하는 코드이다.
HTML 은 프로그래밍 언어가 아니다. 컨텐츠의 구조를 정의하는 마크업 언어이다.

HOW to use html?

html은 tag들의 집합
Tag: 부등호(<>)로 묶인 html의 기본구성 요소이다.

HTML 트리구조

<!DOCTYPE html>              //이 문서가 html 문서임을 명시
<html>                       //html 시작 태그로 문서 전체의 틀을 구성
<head>                       //head 태그는 문서의 메타데이터를 선언
  <title>Page title</title>  //문서의 제목, 브라우저의 탭에 보여진다.
</head>                      //</태그이름>은 해당태그가 끝났음을 의미
<body>                       //body 태그는 문서의 내용을 담는 곳
  <h1>Hello world</h1>       //heading을 의미하며 크기에 따라 h1부터 h6 까지 있다.
  <div>Contets here          //content division을 의미하며 줄바꿈 된다.
    <span>Here too!</span>   //줄바꿈이 없는 content 컨테이너
  </div>                     //div 태그가 끝났음을 의미한다.
</body>                     //body 태그가 끝났음을 의미한다.
</html>                     //html 태그가 끝났음을 의미한다.

Self-Closung Tag

태그 내부에 내용이 없다면 (와 같이 표현되는 경우) 와 같이 표현 가능하다.

<img src="codestates-logo.png"></img>
<img src="codestates-logo.png" />

Most use tags in HTML

div VS span

<div>div 태그는 한줄을 차지합니다.</div>
<div>division 2</div>
<span>span 태그는 컨텐츠 크기만큼 공간을 차지합니다.</span>
<span>span 2</span>
<span>span 3</span>
<div>division 3</div>

div 태그는 한 줄을 차지 한다. (division 2)
span 태그는 컨텐츠 크기만큼 공간을 차지한다. (span 2, span 3, division 3)

img: 이미지 삽입

<img src="http://i.imgur.com/JVAto.jpg>

이미지 태그는 닫는 태그가 없다.

a:링크삽입

<a href="http://abcdef.com" target="_blank">abcdef</a>

만약 새탭, 새창으로 열고 싶으면 target="_blank" 입력하면 된다.

ul, li: 리스트

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3 has nested list
    <ul>
      <li>Item 3-1</li>
    </ul>
  </li>
</ul>

ul : 순서가 없는 목록
ol : 순서가 있는 목록
li : 목록을 만드는 태그 이며 단독으로 쓰이지 않고 ul, ol 태그 내부에 들어간다.

input, textarea: 다양한 입력폼

<input type="text" placeholder="type here">
<div>
  <input type="radio" name="choice" value="a"> a
  <input type="radio" name="choice" value="b"> b
</div>
<textarea></textarea>
<div>
  <input type="checkbox" checked> checked
  <input type="checkbox"> unchecked
</div>

radio 박스는 둘 중에 하나 checkbox는 자유롭게 선택 가능하다.
textarea는 특이하게 여는태그 닫는태그 꼭 넣어줘야하고 줄바꿈이 되는 입력 form이다.

button: 버튼

<button>submit</button>

시맨틱 요소란?

시멘틱(semantic) 요소란 그 자체에 의미를 가지고 있는 요소를 말한다. 즉 요소가 자기 스스로 브라우저와 개발자 모두에게 자신이 사용된 의미를 명확히 전달해 주는 요소를 의미한다.
시멘틱 요소가 아닌 div, span 요소 등은 해당 요소가 무슨 내용인지는 내부 코드를 봐야 알 수 있다. 그에 비해 시멘틱 요소인 form, table, img 요소는 코드를 보지 않아도 해당 요소가 이름만 봐도 바로 알 수가 있다.

시맨틱 요소를 사용해야 하는 이유??

여러 개발자가 함께 작업할 때 div 요소를 탐색하는 것보다 의미 있는 코드 블록을 찾는 것이 훨씬 더 편리하다.
요소 안에 채워질 데이터 유형도 예측하기 쉽다.
HTML 요소를 작성할 때 항상 작성할 데이터를 가장 잘 설명할 수 있는 요소는 무엇일지 고려해야한다.

시맨틱 요소의 종류

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

태그에 속성을 정해줄때

id : 고유한 이름을 붙일때
class: 반복되는 영역을 유형별로 분류할 때. 즉 비슷한 태그들을 같은 class로 지정해 줄 수 있다. 하나의 태그에 2개 이상의 class를 부여하고 싶을 때는 스페이스바로 구분 짓는다. 아래 예시에서 input은 2개의 class를 가진다.