HTML

HTML

마크업 언어로, 태그를 사용하는 언어이다.

html 태그는 <태그 이름>태그를 적용할 내용</태그이름>과 같은 문법으로 사용한다. <div></div> 앞은 열리는 태그, 뒤는 닫히는 태그라고 불린다. 각 태그는 고유 속성을 지니고 있으며 속성은 태그 이름 뒤에 속성 이름 = "속성 값" 형태로 사용한다.

태그의 종류

태그는 홑태그와 쌍태그로 나뉜다. 홑태그는 태그 이름 뒤에 속성을 붙이지 않는 태그이다. 쌍태그는 태그 이름 뒤에 속성을 붙이는 태그이다.

홑태그는 hr, br, img, input, meta, link, audio, video 등이 있다. html5 이후로 홑태그는 단축 끝태그도 안써도 되게 되어 기존의 <br/>이 아닌 <br>과 같은 형태로 사용할 수 있게 됐다. (하지만 정석대로 /> 로 끝맺음 시키는것이 직관적이고 좋다.)

또한 차지하는 공간에 따라 크게 블록태그와 인라인 태그로 나뉜다. 블록태그는 차지하는 공간이 한 행이며, 인라인태그는 차지하는 공간이 해당 요소의 크기만큼 차지한다. 대표적인 예시로 div, p는 블록태그이고, a, span은 인라인 태그이다.

세부적으로 분류해보자면 다음처럼 분류할 수 있다.

텍스트 태그 - h1~h6(heading), p(paragraph), br(line break), hr(horizontal rule), span 등이 있다.

h1 32px 최상위 제목

h2 24px 두번째 제목

h3 20px 세번째 제목

h4 18px 네번째 제목

h5 16px 다섯번째 제목

h6 14px 여섯번째 제목
앵커 태그 - a태그는 href(hyper reference) 속성을 사용해 링크를 지정한다. 이때, 절대경로와 상대경로를 잘 구분해야한다.

페이지 내의 특정 지점으로 이동하기 위해서는 아이디 경로를 사용한다. 아이디 경로는 특정 글자를 눌렀을때 그 곳으로 이동시켜준다. <a href="#id"></a>라면 <div id="id">이 있어야 한다. #top이나 #을 넣으면 페이지 최상단으로 이동시켜준다. 만약 임시 링크가 페이지 내 이동시키는 것을 방지하고 싶다면, #void를 사용한다.

target속성을 통해 링크를 열 때 새로운 창을 열지 아니면 현재 창에서 열지를 지정할 수 있다. target="_blank"는 새로운 창을 열어주고, target="_self"는 현재 창에서 열어준다. (기본값은 _self)

✅ 앵커태그의 href속성에 mailto:이메일주소을 붙이면 이메일 링크를 만들 수 있다. 이메일 링크를 누르게 되면 바로 이메일을 전송할 수 있다.
```
<a href="mailto:example@example.com">이메일 보내기</a>
```
글자 모양 태그 - strong, b(bold), em, i(italic), u(underline), small, sub(아래첨자), sup(위첨자), ins(밑줄), del(취소선), mark(형광펜 효과) 등이 있다.

이때, strong과 b는 둘다 굵은 글씨를 지정하는데 무엇이 다른걸까?

이는 사실 뉘앙스의 차이로, i와 em도 마찬가지이다. strong은 본문 내 중요한 글자를 강조하기 위해 사용되며, b는 타이틀이나 소제목에 볼드체를 사용하기 위해 사용된다.

글자 모양 태그 내부에 블록태그는 넣을 수 없다. 이는 웹 표준에 위반되는 것이므로 주의해야한다. 태그는 아니지만   공백문자를 의미하는 HTML엔티티가 존재한다.

© HTML 엔티티로 왼쪽의 아이콘을 띄울 수도 있다.
아이콘 태그 - i태그는 아이콘 태그이다. 본래는 이탤릭체를 위한 태그였으나, em태그가 나오면서 아이콘 사용시 사용되는 태그로 용도가 변경되었다.
미디어 태그 - 자세한건 여기를를 참고하자.
목록 태그 - ul(unordered list), ol(ordered list), dl(definition list), li(list item)등이 있다.

순서가 없는 목록인 ul태그는 목록 앞에 불릿이 찍히고 네비게이션 바에 주로 사용된다. 순서가 있는 목록인 ol태그는 목록 앞에 순서를 의미하는 숫자가 찍힌다. dl태그는 정의 목록을 나타내며, 사전처럼 설명하는 목록에 사용된다.

이러한 목록태그들에는 list-style, list-style-position 등의 자체 스타일 속성이 존재한다. list-style은 불릿의 모양을 지정해주는 속성이며 주로 none을 사용하여 불릿을 없애는 경우가 많다. list-style-position은 불릿의 위치를 지정해주는 속성이다. 불릿을 없애는 경우애는 자동적으로 들여쓰기가 적용되어 이를 없애기 위해 padding-left 속성을 0으로 줘서 사용하기도 한다.

dl태그는 dt(definition term)태그와 dd(definition description)태그를 사용해 사전처럼 사용된다. dt태그는 정의되는 용어를 지정하고, dd태그는 용어에 대한 설명을 지정한다.
표 태그 - table, tr(table row), td(table data), th(table header) table은 표를 삽입하는 태그이고, tr은 표의 행을 삽입하는 태그이며, td는 표의 셀을 삽입하는 태그이다. tr은 공간을 나누는 척도라, 스타일을 잘 적용하지 않는다.

table은 왼쪽에서 오른쪽으로 데이터가 삽입되며, 다음 행으로 넘어갈 때 tr을 사용하면 된다.

table태그에는 테두리의 두께를 지정해주는 border 속성이 존재한다. th, tr, td에는 align속성으로 글자 정렬을 지정해줄 수 있으며, th와 td는 colspan, rowspan과 같이 셀의 너비와 높이를 지정해 병합시켜주는 속성이 존재한다. rowspan은 원래 가로지만 세로로 병합이 되며, colspan 또한 원래 세로지만 가로로 병합이 된다.

colspan이나 rowspan대신 colgroup태그를 사용해 셀의 너비와 높이를 지정할 수도 있다. colgroup태그는 표의 열을 그룹으로 묶어주는 태그이다. 다음과 같은 형태로 사용할 수 있다.
```

<colgroup>
  <col span="2" style="background: #f00" />
</colgroup>
```
table태그에는 border속성으로 border를 줄수도 있지만, border-collapse 속성을 사용해 테두리를 합칠 수도 있다. collapse값을 주면 테두리를 합치고, separate값을 주면 테두리를 따로 둔다. > thead, tbody, tfoot은 원래 생략해도 되지만 표의 구조를 명확하게 하기 위해 사용한다. 이때문에 스타일링을 할때 선택자를 tbody를 넣어야 적용된다.

시맨틱 태그 - header, footer, section, article, aside, nav, main, figure, figcaption등이 있다. 시맨틱 태그는 태그 자체가 의미를 가지고 있는 태그이다. 예를 들어 header태그는 헤더를 의미하며, footer태그는 푸터를 의미한다. 이러한 태그들은 웹 페이지의 구조를 명확하게 하기 위해 사용된다. header | form태그를 활용해 검색 창을 넣거나, nav태그를 사용해 사이트 메뉴를 넣어 주로 페이지 맨 위쪽에 삽입됨. 주로 로고, 메뉴, gnb와 같은 것들이 들어간다.

nav 메뉴를 지정해주는 태그이다. 같은 사이트 안의 문서나 다른 사이트의 문서로 연결하는 링크를 나타내며, footer에 있는 사이트맵 등에서도 주로 사용되기도 함. gnb(Global Navigation Bar), lnb(Local Navigation Bar)에 주로 사용됨.

main 문서의 주요 내용을 지정하는 태그이다. 주로 문서의 내용을 구분하기 위해 사용된다.

section 주로 문서에서 주제별로 콘텐츠를 묶을 때 사용된다.

article 주로 section내의 소단락/세부영역이 들어간다.

aside 주로 문서의 본문 외에 삽입되는 내용이 들어간다.사이드 측면의 영역의 배너 역할을 하는 경우가 많다. 주로 광고나 링크 등이 들어간다.

footer 제작자의 연락처 정보 / 저작권 정보를 표시하며, 페이지 맨 아래쪽에 삽입됨.

address 주로 문서에서 제작자의 연락처 정보를 지정할 때 사용된다.

figure 주로 문서에서 이미지나 동영상 등을 삽입할 때 사용된다. figure태그 내에 미디어 태그를 넣는 형식으로 사용한다. figure태그 안에는 반드시 figcaption태그가 들어가야 한다. figcaption 태그 내에 문구를 넣고, figure 태그 내에 설명 문구를 부여하고자 하는 요소를 넣는다.

figcaption 주로 문서에서 이미지나 동영상 등의 설명을 지정할 때 사용된다.

address 주로 문서에서 제작자의 주소 및 연락처 정보를 지정할 때 사용된다. 기본적으로 기울임체가 적용된다.

입력 양식 태그

입력 양식 태그는 사용자가 입력한 데이터를 서버로 전송하기 위해 사용된다. 각 태그들을 자세히 알아보자.

input 태그 - input태그는 다양한 유형이 존재한다. 이러한 유형은 type속성으로 지정하여 사용한다. 대표적인 유형으로 text, password, number, email, tel, search, date, time, datetime-local, month, week, url, color등이 있다.

input태그에는 name속성과 value속성이 존재하는데, name속성은 입력 양식의 이름을 지정하는 속성이며 서버로 전송할 때 사용된다. value속성은 입력 양식의 값을 지정하는 속성이다. text같은 경우에는 사용자가 직접 입력하기 때문에, value가 추가적으로 필요하지 않다.

type이 submit || reset || button일 경우 value속성은 버튼에 표시되는 글자를 지정해줄 수 있다. 자세한 type 속성에 대한 것은 input 태그를 참고하자.

checkbox나 radio는 반드시 같은 name속성을 가져야 한다. 같은 이름을 가진 입력 양식들은 하나의 그룹으로 묶이기 때문이다. 이때문에 다른 input타입은 name이 같아서는 안된다.

name속성은 앞서 말했듯이 서버로 값을 보낼때 지정되는 이름이므로, 사용자에게 보여져서는 안되는 데이터를 서버로 전송할때 사용되는 hidden type의 input태그에서 name속성이 유용하게 사용된다. 접속일시, 회원가입일시, 상태값을 전송할때 hidden이 사용된다.
label 태그 - 입력 양식의 이름을 지정하는 태그이다. <label for="id">이름</label><input type="text" id="id" name="name">와 같은 형식으로 사용한다. label태그는 클릭 시 해당 input 입력 양식이 포커싱되는 기능을 가지고 있다. for속성으로 연결된 input태그의 id속성을 지정해줘야 한다. label안에 input태그를 넣어 두 태그를 연결할 수도 있다.
form 태그 - 대다수의 input태그들이 이 form태그 내에서 사용된다. <form><input type = "text" name = "search"></form>과 같은 형식으로 사용하며, method속성을 통해 데이터 전송방식을 알 수 있는데, GET, POST, PUT, DELETE 등이 존재한다. action 속성으로 submit이 발생하면 action속성값으로 페이지를 이동하며, 생략이 가능하다. 여타 다른 input태그처럼 name속성도 받을 수 있다.

GET방식은 값을 가져오는 것으로, 흔히 검색창에 무엇을 검색할 때 www.naver.com?search=eoisvh9w834 과 같은 식으로 주소에 데이터를 직접 입력해 전달해준다. 이 때문에 보안에 상당히 취약하다. 따라서 회원가입, 금융정보, 주소 등등과 같은 정보를 입력할 때는 서버에 값을 입력하는 POST방식을 사용한다. (유저의 credentials를 드러나게하면 안됨.) GET과 POST, 그리고 기타 방식에 관한 내용은 REST API를 다룰때 더 자세히 알아보자.
select 태그 - 선택 양식을 삽입하는 태그이다. <select><option value="1">1</option><option value="2">2</option></select>와 같은 형식으로 사용하며, 다중 선택을 원할 경우 multiple속성을 사용할 수 있다. 선택 옵션은 option태그를 사용해 삽입한다. option태그에서 selected속성으로 처음에 나올 옵션을 지정해줄 수 있다. 옵션들을 그룹으로 묶기 위해서는 <optgroup label="그룹이름">과 같은 형식으로 사용할 수 있다.
textarea 태그 - 여러줄의 텍스트를 입력할 수 있는 태그이다. <textarea cols="30" rows="10"></textarea>와 같은 형식으로 사용하며, cols와 rows는 텍스트 영역의 너비와 높이를 지정해준다.
fieldset 태그 - 여러 입력 양식을 그룹으로 묶는 태그이다. <fieldset><legend>그룹이름</legend><input type="text" name="name"><input type="text" name="name"></fieldset>와 같은 형식으로 사용한다. legend태그는 그룹의 이름을 지정해주는 태그이다.
button 태그 - 버튼을 삽입하는 태그이다. <button>전송</button>와 같은 형식으로 사용한다.

보일러 플레이트

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

해당 코드는 모든 html 파일의 기본 형태이다. 이러한 형태를 보일러 플레이트(boilerplate)라고 한다.

<!DOCTYPE html>: 현재 document의 형식이 HTML5 문서임을 선언
<html lang="ko">: 문서의 루트 요소, lang 속성으로 언어 지정(ko=한국어). 만약, 쿠팡 같은 페이지가 lang이 en으로 설정되어 있다면 우리가 접속할때 번역 여부를 물어본다.
<head>: 메타데이터 영역
- meta charset="UTF-8": 문자 인코딩 방식 지정, 해당 속성이 없다면 글자가 모두 깨지게 된다.
- meta viewport: 반응형 웹을 위한 뷰포트 설정, content 속성으로 뷰포트의 너비와 초기 확대 배율을 지정한다. 해당 속성이 없다면 반응형이 적용되지 않는다.
- title: 브라우저 탭에 표시되는 제목 ~~(현재 페이지의 title은 HTML | 툰로그)~~
<body>: 실제 화면에 표시되는 콘텐츠 영역
주석 : 개발자용 설명문 (화면에 표시되지 않음)

보일러플레이트 형식 외에 html의 head태그 내에 다양한 태그들이 있는데, 하나씩 알아보자.

meta - 메타데이터 지정, 오픈그래프 등과 같은 메타데이터를 지정할 때도 사용한다.
link - 외부 리소스 연결, rel(relation) 속성으로 리소스의 종류를 지정한다.
script - 자바스크립트 추가
style - CSS 추가

스타일시트

스타일시트는 크게 인라인, 내부, 외부 방식이 있다.

인라인 방식 - 태그 내에 style 속성을 사용하는 방식
```
<p style="color: red;">텍스트</p>
```

내부 방식 - head태그 내에 style태그를 사용하는 방식

<head>
  <style>
    body {
      background-color: #f0f0f0;
    }
  </style>
</head>

외부 방식 - 외부 파일을 불러와 사용하는 방식

외부 스타일시트는 스타일 시트를 별도로 생성해서 link태그의 href 속성을 사용해 불러오는 것으로, CSS 파일을 별도로 생성해서 사용하는 것이 일반적이다.

<link rel="stylesheet" type="text/css" href="style.css" />

스크립트

스크립트 또한 스타일시트와 마찬가지로 인라인, 내부, 외부 방식이 있다.

인라인 방식 - 태그 내에 script 속성을 사용하는 방식, on 이벤트 핸들러 들을 사용할 수 있다.
내부 방식 - head태그 내에 script 태그를 사용하는 방식
외부 방식 - 외부 파일을 불러와 사용하는 방식

외부 스크립트는 스크립트를 별도로 생성해서 script태그의 src 속성을 사용해 불러오는 것으로, Javascript 파일을 별도로 생성해서 사용하는 것이 일반적이다.

<script src="script.js"></script>

⚠️ Head태그 내에 CDN 혹은 SDK 사용시 주의사항

직접 제작한 커스텀 스크립트 혹은 스타일시트 보다 외부 CDN, SDK 등을 먼저 불러오는 것이 좋다. 이는 외부 스크립트 혹은 스타일시트가 먼저 불러와지지 않으면 커스텀 스크립트 혹은 스타일시트가 적용되지 않을 수 있기 때문이다.

<head>
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
  <!-- 마지막에 커스텀 스타일시트 & 스크립트를 불러오기-->
  <link rel="stylesheet" href="custom.css" />
  <script src="custom.js"></script>
</head>

웹 표준

웹 표준은 웹 표준화 기구인 W3C에서 제정한 표준이다. 웹 표준을 준수하면 브라우저 호환성 문제를 해결할 수 있고, 검색 엔진 최적화(SEO)에 도움이 된다.

웹표준을 위한 준수 방법 몇가지를 알아보자.

사이트의 헤더에 위치한 로고는, h1으로 만들고 반드시 링크가 연결되어 있어야 한다.
사이트의 메뉴는 nav태그로 만들어야 한다.
사이트의 메뉴는 반드시 목록태그로 만들어야 한다.
인라인 요소내에 블럭요소 사용을 최대한 자제하기
article, section태그는 반드시 안에 제목태그를 작성해야한다.
- 이때, 제목태그를 작성할때 꼭 article/section바로 이후에 작성될 필요는 없으나, div태그 내에 제목태그가 작성되어야한다.
- 원칙적으로 article안에 section을 넣었으나, 혼돈을 방지하기 위해 사람들이 더 이상 article을 사용하지 않는 추세가 되었고, section을 사용해 페이지를 구분한다고 한다.

🚫 html 작성 유의사항

h1태그는 보통 페이지에 한번만 사용하자. (로고 제외)
본문 제목은 h2태그를 사용하자. h2태그 이후에 오는 자식 요소들에 제목태그를 사용시 h3~ 레벨의 제목태그를 사용하자.
인라인 요소끼리 묶이는것을 최대한 지양하고 블럭태그를 섞어서 사용하자. (css 최소화)
html내에 태그로 텍스트를 감싸지 않고 쌩으로 작성하는 것을 최대한 지양하자.
b태그 대신에 더 시맨틱한 strong태그를 사용하자.
어디로 사용자를 이동시켜주는 요소는 반드시 a태그를 사용하여 만들자.
header태그에 있는 요소는 대부분 다 일종의 메뉴여서, ul과 li를 사용해서 제작하는 것이 좋다. (ex) 토글 버튼)
footer태그 같은경우, 중요도가 떨어져 푸터에 들어가는 로고 또한 제목태그를 사용하지 않고 무엇을 강조할때는 strong태그를 더 많이 사용하며, 로고 또한 블럭태그 내에 img요소로 넣는다.
header, main, footer는 페이지내에서 거의 한번만 사용되어 아이디를 줘야하는 경우가 거의 없다.

웹 접근성

웹 접근성은 웹 페이지에 접근할 수 있는 모든 사람이 웹 페이지를 사용할 수 있도록 하는 것을 의미한다. 웹 접근성을 준수하면 장애인, 노인, 어린이 등 다양한 사람들이 웹 페이지를 사용할 수 있도록 한다.

웹 접근성을 위한 준수 방법 몇가지를 알아보자.

img태그에는 반드시 alt속성을 사용해야 한다.
모든 태그는 각자 title이라는 속성이 존재한다. 해당 속성을 통해 리더기가 태그의 역할을 알 수 있도록 한다.
제목태그를 작성했지만 굳이 화면에 띄우고 싶지 않다면, 작성은 하되, css등으로 안보이게 만들면 된다. 제목태그의 의의는 결국 리더기로 일종의 목차와 같은 제목태그가 읽힐 수 있도록 만드는것이 중요한 것이다. (ex: section안에 있는 제목태그로 이게 어느 영역인지 리더기가 알림) 이때, display:none은 줘선 안된다. 리더기가 못읽어서, 반드시 페이지 어디에선가는 있어야함.
- 허나, 저 멀리 치워버려도 리더기가 못 읽을 가능성이 존재한다고 한다.
- 그래서 WCAG 가이드라인에서 제시해준 다음과 같은 안정적인 방법으로 처리해줄 수 있다.

  .hidden{
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }