html 학습

박서연·2023년 3월 13일

웹 스터디 기록

목록 보기

3/4

1. web이란?

인터넷 !== 웹
인터넷 안에 웹이 포함됨.
인터넷이 운영체제라면, 웹은 운영체제 위에서 돌아가는 어플리케이션.
웹과 비슷한 다른 기술로는 ftp(파일전송), 이메일 등이 있음.
1960년대 인터넷이 등장하고 1990년대 웹의 등장!

인터넷 : 데이터를 주고받을 수 있는 거대한 네트워크

웹 : 네트워크를 활용해서 html언어로 만들어진 웹 페이지를 컴퓨터끼리 주고받을 수 있도록 만들어진 것. 팀버너스리가 만듦.

먼저 웹브라우저를 만들고, 정보를 제공하는 컴퓨터에서 지니는 웹서버를 만듦.
이제 http를 통해 서로 정보를 주고받을 수 있고 웹페이지를 고안하게 됨.
웹브라우저에서 어떤 페이지를 원한다는 것을 웹서버에 요청하면, 웹서버는 저장되어있는 페이지를 살펴보고 응답함. 웹브라우저에는 html이 전달 됨.

2. html이란?

html : hypertext markup language의 약자. hypertext를 가장 중요한 특징으로 웹페이지가 어떻게 구조화되어 있는지 브라우저로 하여금 알 수 있도록 하는 마크업 언어이다.

html은 elements로 구성되어 있고, 이들을 적절한 방법으로 나타내고 실행하기 위해 각 컨텐츠의 여러 부분들을 감싸고 마크업한다. tags는 웹 사의 다른 페이지로 이동하게 하는 하이퍼링크 내용들을 생성하거나 강조한느 역할을 한다.
hypertext : 문서와 문서가 링크로 연결되어 있는 형태의 문서 시스템. (팀버너스리가 만듦). html의 가장 중요한 특징이며, 다른 말로는 링크라고도 볼 수 있음. 링크로 인해 거대한 그물망 처럼 연결되어 웹을 구성함. 링크는 html의 본질이며, html의 본질은 웹의 본질임.
markup language : 먼저 language는 컴퓨터도 알아들을 수 있고, 사람이 알아들을 수 있는 언어. html을 좀 더 정확히 말하면 사람과 웹브라우저가 알아들을 수 있는 마크업 언어.
- tag : 시작태그와 끝태그가 있고, 그 사이 내용을 컨텐츠라고 칭함.
- 속성 : <a href="http://opentutorials.org/course/1">생활코딩</a>에서 a는 태그, href는 속성명이라 하며, =을 기준으로 오른쪽이 속성 값에 해당 됨. 여러 속성을 사용할 수 있는데, <a href="http://opentutorials.org/course/1" target="_blank">생활코딩</a> 이처럼 새 창에서 해당 링크를 띄우는 코드를 보았을 때, 다음 속성을 사용할 경우 띄어쓰기를 구분자로 속성들을 분리하여 사용한다. (targe="_self"는 현재 창에서 열겠다는 의미)
- 중첩: 항목화를 시킬 때 list를 사용.
```
<ul>
<li> html </li>
<li> css </li>
</ul>
```
  리스트를 ul(unordered list) 태그로 묶어줄 수 있음.
  ol은 순서가 있는 리스트. 1, 2, 3으로 나타남.
head 태그와 body 태그 : body 태그는 내용, head태그는 body를 설명하는 간략한 내용이 들어감.
html 태그 : 안쪽에 있는 것들이 html 문서이다는 것을 브라우저에게 알려주는 역할.
w3c
html의 표준을 정의하는 국제기구.
의장이 팀버너스리.
doctype
doctype : html문서가 어떤 표준안에 따라 작성되었는지 브라우저에게 알려주는 역할. 작성한 코드를 정확히 동작하기 위해서는 필요.

html 요소는 대소문자를 구분하지 않아 은 <Title> <TITLE> 등과 같이 사용 가능. 하지만 가독성 등으로 인해 주로 소문자로 작성.

3. 기본문법 - 태그

구조
(사진)

여는 태그 : 요소의 이름과 열고 닫는 꺽쇠 괄호로 구성. 요소가 시작부터 효과가 적용되기 시작.
닫는 태그 : 요소의 이름 앞에 슬래시가 있는 것을 제외하면 여는 태그와 같음. 요소의 끝에 위치하고 닫는 태그를 적어주지 않으면 이상한 결과를 낳게 됨.
내용은 요소의 내용이며 주로 단순 텍스트
요소(element)는 여는 태그, 닫는 태그, 내용을 통틀어 요소라고 함.
html에는 주로 두가지 종류의 요소가 있는데, 블록 레벨 요소와 인라인 요소가 있음.
- block-level elements는 웹페이지 상에 블록을 만드는 요소. 블록 레벨 요소는 앞 뒤 요소 사이 새로운 줄을 만들고 나타남. 블록 레벨 요소 이전과 이후 요소사이의 줄을 바꿈. 일반적으로 페이지의 구조적 요소를 나타낼 때 사용. 블록 레벨 요소를 사용하여 단락, 목록, 네비게이션 메뉴, 꼬리말 등을 표현가능. 또한 블록 레벨 요소는 인라인 요소에 중첩될 수 없음. 그러나 다른 블록 레벨 요소에는 중첩 가능.
- 블록 레벨 요소는 언제나 새로운 줄에서 시작하고, 좌우 양쪽으로 최대한 늘어나 가능한 모든 너비를 차지함.
- lnline elements는 항상 블록 레벨 요소내에 포함. 인라인 요소는 문서의 한 단락같은 큰 범위에는 적용 불가하고, 문장과 단어 같은 작은 부분에 대해서만 적용. 새로운 줄을 만들지 않고 인라인 요소를 작성하면 그것을 작성한 단락내에 나타나게 됨. 인라인 요소에는 하이퍼링크를 정의하는 요소인 <a> 나 텍스트를 강조하는 요소인 <em>, <strong> 등이 있음.
-블록 레벨 vs 인라인
- 콘텐츠 모델
  일반적으로 블록레벨 요소는 인라인 요소와 다른 블록 레벨 요소를 포함할 수 있어, 이러한 구조족 차이점으로 인해 인라인 요소보다 더 큰 구조를 생성가능.
- 기본 서식
  기본적으로 블록 레벨 요소는 새로운 줄에서 시작하지만, 인라인 요소는 줄의 어느 곳에서나 시작할 수 있음.
ex)
```
<em>first</em><em>second</em><em>third</em>
<p>fourth></p><p>fifth</p><p>sixth</p>
```
em은 인라인 요소로 처음 세 개의 요소는 서로 같은 줄에

firstsecondthird

로 나타나며 사이에 공백 없이 위치한다.
하지만 p는 브록 레벨 요소로, 각 요소들은 새로운 줄에 나타나고 위아래 여백이 존재한다.

*하지만 이러한 블록 레벨과 인라인 요소의 구분은 HTML 4.01까지 사용되었고 HTML5부터 보다 복잡한 콘텐츠 카테고리 집합으로 대체 됨. css의 box 유형과 혼동되기 때문. 인라인은 syntax content로 대체할 수 있지만, block level은 명확한 대체제가 없음. 대신 인라인과 블록 레벨을 조합하면 플로우 콘텐츠에 대응가능. (html5의 새로운 요소를 설명할 때 블록 레벨이라는 용어는 정의되지 않음.) https://developer.mozilla.org/ko/docs/Web/HTML/Content_categories

void 요소
모든 요소가 여는 태그, 콘텐츠 및 닫는 태그의 패턴을 따르는 것은 아님. 일부 요소는 일반적으로 문서에 무언가를 삽입/포함하는데 사용되는 단일 태그로 구성. 이러한 요소를 void 요소라고 지칭.
ex)
```
<img
src="https://raw.githubusercontent.com/mdn/" alt="Firefox icon" />
     
```
속성 : 태그 명만으로는 정보가 불충분하기 때문에 속성이라는 문법이 고안됨.
- 속성의 특징
  - 각 속성은 공백으로 구분하며, 요소와 속성 이름도 공백으로 구분합니다.
  - 속성 이름 뒤에는 등호가 옵니다.
  - 여는 따옴표와 닫는 따옴표로 래핑된 특성 값입니다.
- bool 속성
  - 값 없이 작성된 속성
  - 일반적으로 속성 이름과 동일한 하나의 값만 가질 수 있음.
  - 양식 입력 요소에 할당할 수 있는 disabled 특성을 예시로 하면 <input type="text" disabled />로도 작성할 수 있음.
- 경우에 따라 작은따옴표를 사용할 수도, 큰 따옴표를 사용할 수도 있지만, 한번에 혼합해서 사용할 수는 없음.
태그 문서 참조하기
https://opentutorials.org/course/1058/4787
제목 태그
- h1 vs title
  : h1요소는 브라우저에 로드 될 때 페이지에 나타나며, 페이지당 한 번씩 페이지 콘텐츠의 제목을 표시하는데 사용된다. title은 문서의 내용이 아닌 전체 HTML 문서의 제목을 나타내는 메타데이터이다.

gml -> sgml -> sgmlguid -> html
sgmlguid에 17개의 tag가 이미 있었고, 하나의 태그를 추가하여 html이 탄생함. 그 태그가 바로 a tag. 따라서 a 태그의 중요성을 알 수 있음.

4. html 문서 분석

doctype : document type declaration
자신이 작성한 html 코드가 어떤 방식의 html 코드로 작성되었는지 선언하는 것.
18~20개 사이의 태그가 있었었고, 현재는 계속 변화중이지만 140개 이상의 태그가 있음. 태그는 추가, 삭제, 변경되고 있기 때문에 브라우저에게 제대로 된 표준을 알려줘야 함.
각각의 doc타입들이 적당한 doc타입을 선언해줄 필요가 있다는 점.
을 작성.
<html></html> : <html> 요소로 페이지의 모든 콘텐츠를 래핑하며, 루트 요소라고도 칭함.
<head></head> : <head> 요소로 html페이지에 포함하려는 모든 항목의 컨테이너 역할을 하며, 페이지가 뷰어에게 표시할 콘텐츠가 아님. 키워드 및 페이지 설명, 문자 집합 선언, css 등이 포함된다.
<meta charet="utf-8"> : 이 요소는 다른 html 메타 관련 요소로 나타낼 수 없는 메타데이터를 나타냄. charet 속성은 문서의 무자 집합을 UTF-8로 설정하여 모든 인간 언어의 거의 모든 문자를 포함함.
<title>/<title>: 페이지가 로드되는 브라우저 탭에 표시되는 제목인 페이지의 제목이 설정. 페이지 제목은 책갈피가 지정될 때 페이지를 설명하는데 사용.
<body></body> : 텍스트, 이미지, 비디오, 게임, 오디오 등을 포함한 페이지에 표시되는 모든 콘텐츠가 포함.
주석 :

5. html 변천사와 통계

html DIR 태그의 경우 1~3까지는 쓰였지만, 4부터는 권장하지 않음으로, 5부터는 완전히 사용불가가 됨. 이처럼 끊임없이 추가, 삭제, 변화되는 중.

6. 자주 쓰이는 태그 설명

구조가 필요한 이유
- 브라우저에서 문서를 열면 텍스트가 큰 덩어리로 나타남. 브라우저는 제목과 단락이 무엇인지 알지 못함.

사용자는 관련 콘텐츠를 찾기 위해 빠르게 스캔하는 경향이 있고, 종종 제목을 읽는 경우가 많음. 따라서 가독성이 중요함.

페이지의 색인을 생성하는 검색 엔진은 제목의 내용을 페이지의 검색 순위에 영향을 미치는 중요 키워드로 간주함.

시각 장애인들을 위한 기술으로 웹 페이지를 읽어주는 소프트웨어가 있는데, 다양한 기술 중 제목을 읽어 문서의 개요를 제공하여 사용자가 빠르게 정보를 찾을 수 있도록 하는 기술이 제공되고 있음. 만약 제목을 사용할 수 없다면 이러한 경우에도 전체 문서를 크게 읽어야 함.

<p> : 각 단락 구별
<h1, h2, h3 ...> : 주 제목, 소세목 등을 나타내며 h1 태그는 가급적이면 페이지당 하나를 사용해야 함. <h3> <h2>의 순서처럼 올바르지 않은 순서를 사용하면 이상한 결과를 초래할 수 있음. 사용 가능한 6개의 제목 수준 중 한 페이지당 3개 이하를 사용하는 것을 목표로 하는 것이 좋음.
<ul, ol, li> : list를 다루는 것으로 ul은 unordered list의 약자, ol은 ordered list의 약자, li는 list의 약자이다. ul과 ol을 이용하여 li를 그룹화 시킬 수 있다.
<em> : 강조를 위한 요소로 기울어진 이탤릭체로 표시 됨. 단순한 이탤릭체 스타일을 얻기 위해 사용해서는 안되며, 강조할 경우 사용해야 함.
<strong> : 강조를 위한 요소 중 또 다른 요소로 강력하게 중요한 부분에 사용됩니다.
<i> : em처럼 이탤릭체가 사용되지만, 강조의 의미는 아님. 외국어, 기술용어, 생각 등에 사용
<b> : strong 처럼의 강조의미 대신 굵게 전달되는 의미를 전할 때 사용. 키워드, 제품 이름, 리드 문장 등.
<u> : 밑줄로 전달되는 의미에서 사용. 고유명사, 철자 오류 등

7. 콘텐츠 구조화를 위한 html

header : <header>
- 소개 콘텐츠 그룹을 나타냄. body 요소의 자식인 경우 웹 페이지의 전역 헤더를 정의하지만, article 또는 section의 자식인 경우 해당 섹션에 대한 특정 헤더를 정의.
navigation bar : <nav>
- 페이지의 기본 탐색 기능이 포함. 보조 링크 등은 탐색에 포함되지 않음.
main content : <main>, <article>, <section>, <div>
- main : 이 페이지에 고유한 콘텐츠를 위한 것. 페이지 당 한번만 사용하고 body요소 안에 직접 넣음. 이상적으로는 다른 요소 내에 중첩되지 않아야 함.
- article : 페이지의 나머지 부분없이 자체적으로 의미가 있는 관련 콘텐츠 블록. ex) 단일 블로그 게시물
- section : article과 유사하지만, 하나의 단일 기능 또는 테마를 구성하는 페이지의 단일 부분을 그룹화하는데 더 가까움. 각 섹션은 heading으로 시작하는 것이 가장 좋음. ex) 미니 맵 또는 기사 헤드라인 및 요약 집합
sidebar : <aside>, <main>
- aside : 주요 콘텐츠와 직접 관련이 없지만 간접적으로 관련된 추가 정보(용어집 항목, 관련 링크 등)를 제공할 수 있는 콘텐츠를 포함.
footer : <footer>
- 페이지의 끝 콘텐츠 그룹
span : 인라인 비 의미 체계요소로 콘텐츠를 래핑하는데 특정 의미를 부여하지 않거나, 더 나은 의미 체계 텍스트 요소를 생각할 수 없는 경우 사용
div : 블록 수준의 비 의미론적 요소로 span와 비슷.

8. html5 새로 달라진 것들

간단해진 doctype 선언
모든 웹 문서의 첫시작은 문서형 정의인 DTD의 선언으로 부터 시작하는데, 만약 생략하는 경우 비표준모드로 렌더링되며 크로스브라우징에 어려움을 겪을 수 있다.
- 크로스 브라우징 : 브라우저간의 호환성으로, 크롬에서는 동작하지만 익스플로러에서는 동작하지 않는 경우 크로스 브라우징이 안되어있다고 함.
그동안의 doctype 선언

html 5
<!DOCTYPE html>

html 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

html4.01 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

시맨틱 태그
그전에는 검색 엔진이 어떠한 태그가 어떤 기능을 하는지 분별하기 힘들었으나 html5부터는 논리적인 시맨틱 태그로 의미부여하여 효율적 검색을 가능하도록 함. header, nav, main, footer 등이 이에 해당됨. (이전에는 id로 지정해서 적용해 왔었음.)
form의 속성이 추가
기존 자바스크립트로 구현해야 했던 기능들이 추가되어 달력, 스크롤바, 색상 표 등의 다양한 타입이 추가됨. 도한, form 양식에 대한 유효성 검증 기능도 추가로 지원하여 각 폼 양식마다 이 기능을 끄고 킬 수 있게 함.
다양한 API 제공
이전에는 그림이나 비디오, 오디오 처리를 위해 별도의 플러그인 설치가 필요했지만, html5부터는 기본적으로 제공하기 시작해스빈다.
html 연대기 : http://www.martinrinehart.com/frontendengineering/engineers/html/html-tag-history.html
html 통계 : https://www.advancedwebranking.com/seo/html-study/
web storage : 서버가 아닌 클라이언트에서 데이터를 저장할 수 있도록 지원하는 html5의 새로운 기능.

Local Storage
더욱 영구적인 솔루션
HTML5가 나온 이후, cookies의 많은 사용 방법들은 LocalStorage의 사용으로 대체됨. 가장 중요한 차이점 중 하나는 쿠키와 달리 모든 HTTP 요청에서 데이터를 주고받지 않고 클라언트와 서버 간의 전체 트래픽과 낭비되는 대역폭의 양을 줄일 수 있음. 그리고 최대 5MB의 정보를 저장 가능
만료 조건은 persistent cookies처럼 동작함. JavaScript 코드를 통해 삭제하지 않으면 데이터는 자동으로 삭제되지 않으므로 더 오랜 시간 동안 저장해야 하는 큰 데이터에 유용함. 문자열뿐만 아니라 javascript의 primitives와 object도 저장할 수 있음

로컬 스토리지를 잘 사용하려면 이 상황에 저장된 데이터의 위협 수준이 매우 낮아야 함. 쉽게 해킹되지 않도록 저장된 데이터를 암호화하는 등의 보안 작업이 필요. 재무 정보와 같은 매우 취약한 데이터는 로컬스토리지를 사용해 제대로 저장하거나 보호할 수 없음

Session Storage
localStorage에 비해 자주 사용되진 않음. 각 세션마다 데이터가 개별적으로 저장됨. 현재 떠 있는 탭 내에서만 유지되므로 세션을 종료하면 데이터가 자동으로 제거되며, 같은 도메인이라도 세션이 다르면 데이터에 접근할 수 없음. 보통 세션의 종료는 일반적으로 브라우저의 종료를 뜻한다. 새창을(프로세스)띄우건 새탭을 띄우건 이는 세션종료를 의미하지 않는다. 그러나 sessionStorage에서 의미하는 세션은 가장 작은 단위인 탭단위를 의미한다.

쿠키와 웹스토리지의 큰 차이점 중 하나는 쿠키의 경우 서버와 클라이언트 측 모두 데이터를 읽을 수 있지만, 웹스토리지는 클라이언트 측에서만 데이터를 읽을 수 있습니다.

참고
https://velog.io/@aideneverywhere/CSS-%ED%94%84%EB%A0%88%EC%9E%84%EC%9B%8C%ED%81%AC
https://2021.stateofcss.com/en-US/technologies/css-frameworks/
https://2022.stateofcss.com/en-US/css-frameworks/
https://cocoon1787.tistory.com/843
https://developer.mozilla.org/en-US/docs/Learn
https://free-eunb.tistory.com/86
https://ko.wikipedia.org/wiki/%ED%8C%80_%EB%B2%84%EB%84%88%EC%8A%A4%EB%A6%AC
https://velog.io/@yon3115/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EA%B0%9C%EB%B0%9C%EC%9E%90-%EB%A9%B4%EC%A0%91-%EC%A7%88%EB%AC%B8
https://negabaro.github.io/archive/sass_scss_less
https://tailwindcss.com/
https://itchallenger.tistory.com/194
https://aboooks.tistory.com/40
https://getbootstrap.kr/
https://velog.io/@ahsy92/%EA%B8%B0%EC%88%A0%EB%A9%B4%EC%A0%91-%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80-%EB%A0%8C%EB%8D%94%EB%A7%81-%EA%B3%BC%EC%A0%95
https://opentutorials.org/module/1892
https://opentutorials.org/course/2418
https://leekihyun.tistory.com/entry/TailwindCSS-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0
https://studiomeal.com/archives/533
https://www.advancedwebranking.com/seo/html-study/
http://www.martinrinehart.com/frontend-engineering/engineers/html/html-tag-history.html