1. HTML이란?
▶ HTML (Hyper Text Markup Language) : 웹에서 내용을 파악하기 쉽게 문서화하는 언어, 웹페이지를 만드는 언어. 확장자가 .html이다. 90년대 초반에 개발됨. 영국의 물리학자 팀 버너스 리가 개발. 웹 사이트들은 모두 HTML을 사용하여 만들어짐.
♥ Hyper Text : (텍스트 그 이상, 텍스트를 초월하는.) == 링크
♥ Markup Language : 프로그래밍 언어의 한 종류. 정보를 구조적, 계층적으로 표현 가능한 언어라는 게 특징.
2. HTML 문법
2-1. 태그 : 무언가를 표시하기 위한 꼬리표! 각각의 태그들이 모여서 하나의 요소를 만들고, HTML 문서를 만들어낸다!
▶ HTML은 태그들의 집합! 태그는 HTML에서 가장 중요하고 기본이 되는 규칙
★ <태그 이름> (→시작 태그) _화면에 나타나는 내용_ </태그 이름> (→종료 태그)
★ 요소 : 내용을 포함한 태그 전체
2-2. 속성 : 태그에 추가로 정보 제공, 태그의 동작이나 표현을 제어할 수 있는 설정값
▶ 태그에 고유한 이름을 주거나, 이동할 경로를 명시
★ 이름과 값으로 이루어짐. ( 속성 이름=“속성값” )
(ex) <h1 id=“title”></h1> : h1에 id 속성을 추가해 title값 선언
★ 여러 속성을 선언할 때에는 공백으로 구분! 속성의 선언 순서는 태그에 영향 X.
★ 종류에 따라, 모든 태그에 사용할 수 있는 글로벌 속성과, 특정 태그에서만 사용할 수 있는 속성으로 구분
2-3. 태그 중첩 : 태그 안에 또 다른 태그 사용하기
▶ 중첩을 통해 부모 태그와 자식 태그의 관계 생성
※ 중첩되는 태그는 부모 태그를 벗어나서는 X.
★ (ex) <h1>Hello, <i></i> </h1>
★ 태그 안에서는 중첩이 얼마나 되는지, 어떤 태그를 쓰는 지는 상관 無. 근데 때에 따라 정해진 태그만 중첩 가능. 태그의 구조 특성으로 인해 중첩할 수 없는 경우도 有
2-4. 빈 태그 : 1쌍의 태그들 사이에 내용이 없다!
※ 빈 태그는 태그의 중첩이 불가
★ 빈 태그는 내용이 없으므로, 종료 태그가 필요하지 X
★ (빈 태그 ex) <br>, <img src=“”>, <input type=“”>
★ 빈 태그는 내용만 비어있을 뿐, 속성을 통해서 화면에 나타내거나, 화면에 표시되지 않더라도 다른 용도로 사용됨.
★ 대표적인 경우는 브라우저가 직접 화면에 내용을 그려줘야하는 경우! 이런 태그는 브라우저가 내용을 대체한다고 해서 replacement 태그라고 함. (ex) <img> 태그
★ 빈 태그에는 대체되는 태그만 있는 것은 아니고, 실제로 화면에 출력될 내용이 없어서, 다른 용도(문서 내부적으로 부가적인 정보 제공)로 쓰이는 태그도 존재. (ex) <br> 태그
2-5. 공백 : HTML 공백은 일반 텍스트 공백과는 차이 有
★ 기본적으로 HTML은 두 칸 이상의 공백과 개행, 여러 줄의 개행을 모두 무시
★ 이러한 공백처리 방식은 css로 제어 가능
2-6. 주석 : 화면상에 표시 X. 코드 상에만 노출됨. 메모의 목적으로만 사용
★ <!-- 여기에 작성되는 내용들은 모두 주석 처리됨! -->
★ <!--
주석은 여러 줄로 작성 가능
-->
2-7. 문서의 기본 구조 : 웹페이지를 만들기 위한 가장 기본이 되는 정보는 HTML 문서 구조!
▶ 브라우저는 HTML 문서 구조를 통해 HTML 버전, 문서의 제목, 정보, 내용 등을 파악
★ HTML 기본 구조 : 웹 문서를 작성할 때 반드시 필요한 기본적인 내용. 크게 문서 타입 정의와 <html> 요소로 구분!
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML</title>
</head>
<body>
<h1>Hello, HTML</h1>
</body>
</html>
☆ 문서 타입 정의 : DTD(doctype). 이 문서가 어떤 버전으로 작성되었는지 브라우저에 알려주는 선언문. 반드시 문서 내 최상단에 선언되어야 함! 작성 안하면 비표준 방식으로 해석.
☆ <html> 요소 : 문서 타입 선언 후 <html>태그 나와야함. 자식으로는 <head>태그와 <body>태그 있음.
▷ <html> 태그의 lang 속성 : 문서가 어느 언어로 작성되었는지!
▷ <head> 태그에 위치하는 태그들은 브라우저 화면에 표시 X. 대신 문서의 기본 정보 설정이나 외부 스타일시트 파일 및 js 파일 연결하는 등의 역할.
▷ <meta> 태그의 charset 속성 : 문자의 인코딩 방식 지정.
▷ <body> 태그 : 실제 브라우저 화면에 나타나는 내용들이 들어감! 태그들 대부분이 여기에 해당됨.
3. HTML 태그
3-1. 제목과 단락 요소
① 제목(Heading) 태그 : <h>
▶ 문서 내에 제목을 표현할 때!
▶ 태그 이름은 h (heading 줄임말), 제목의 레벨에 따라 <h1>~<h6>
★ <h1>은 해당 페이지를 대표하는 큰 제목. 숫자 ↑수록, 수준 ↓ 소제목
※ 현재 웹 페이지의 내용은, 제목과 본문 식의 문서 형태 < 이미지나 그림처럼 시각적인 형태라서 <h6>까지는 잘 안씀.
▶ 제목 태그를 사용하면, 일반 텍스트보다 더 강조되는 스타일! (브라우저가 default로 제공)
② 단락(paragraph) 태그 : <p>
▶ 본문에 해당하는 내용
▶ 태그 이름은 p (paragraph 줄임말)
▶ <p>를 사용해서 단락으로 구분하면 자연스럽게 개행이 됨!
▶ 블록 레벨 태그
③ 개행 태그 : <br>
▶ <p> 내부에서 임의로 개행할 때, 또는 개행을 위해 쓰이는 태그! (html은 두 칸 이상의 공백 및 개행을 무시하므로, 실제 코드창에 개행을 하더라도 화면에 나타나지 X)
▶ 태그 이름은 br (linebreak 줄임말)
▶ <br>은 닫기 태그 X, 내용 X. <br>은 빈 태그
▶ 개행하고자 하는 곳에서 <br>을 선언하면 개행이 됨!
3-2. 텍스트를 꾸며주는 요소
※ 웹 표준화가 대두되면서 웹문서의 구조와 표현이 분리됨. 그 과정에서 많은 표현용 태그가 사라졌고, 지금은 표현용 태그가 별로 없음. 아래 태그들은 의미없는 표현용 태그들 & 인라인 레벨 태그임.
① <b> : bold 태그. 글자를 굵게 표현!
② <i> : italic 태그. 글자를 기울여서 표현! (HTML5 버전에서는 <i>태그가 단순 표현용 태그에서 의미를 가지는 태그로 변경됨! 특정 이유(기술 용어, 외국어 문구, 소설 속 인물의 생각 등)로 다른 글자와 구분하기 위해 사용됨.)
③ <u> : underline 태그. 글자의 밑줄을 표현!
④ <s> : strike 태그. 글자의 중간선을 표현!
▶ 이외에도 텍스트 관련 태그는 https://developer.mozilla.org/en-US/docs/Web/HTML/Element#inline_text_semantics 에 더 자세히 있음!
3-3. 앵커 요소
▶ 앵커 태그 <a> : anchor의 줄임말. 링크를 생성하는 태그! 앵커 태그를 이용해 다른 페이지로 이동하거나, 현재 페이지 내에서 특정 위치로 초점 이동 가능! HTML의 가장 큰 특징이 되는 태그.
★ href(hypertext reference) 속성 : href 속성의 값은 링크의 목적지가 되는 URL. 링크를 만들기 위해 <a> 태그가 반드시 가져야하는 속성이 href 속성!
★ target 속성 : 링크된 리소스를 어디에 표시할지를 나타내는 속성!
☆ target의 속성값
① _self : 현재 화면에 표시. target 속성이 선언되지 않았을때의 기본값이 _self.
② _blank : 새로운 창에 표시. 외부 페이지가 나타나게끔 함.
③ _parent, _top : 프레임이라는 특정 조건에서만 동작하는 속성. (근데 최근에는 프레임을 잘 안씀.)
★ 기타 속성 : https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a (obsolete attributes : 폐기된 속성들)
★ 내부 링크 : <a>를 통해 페이지 내부의 특정 요소로 초점 이동 가능! 이게 내부 링크.
☆ 내부 링크를 사용할 때는 href 속성값에 #를 쓰고, 그 뒤에 페이지 내에서 이동하고자 하는 요소의 id 속성값을 적으면 됨!
☆ 보통 페이지의 최상단으로 이동할려고 할 때, 내부 링크 사용. 웹페이지에 있는 top 버튼이 내부 링크에 해당.
3-4. 의미가 없는 컨테이너 요소
▶ 태그 자체에 아무 의미 X. 단순히 요소들을 묶기 위해 사용되는 태그. 사용빈도 매우 높음!! (html 태그들은 기본적으로 문서에 최적화되어있는데, 현재 웹의 형태는 문서 형태에서 많이 벗어났으므로)
▶ 스타일을 주거나, 서버에 보내는 데이터를 담기 위한 용도로 쓰임.
★ 가장 대표적으로 많이 쓰이는 의미가 없는 태그 : <div>, <span> (모두 의미가 없는 태그이므로, 실제 브라우저도 별다른 스타일 적용 X.)
① <div> : division의 줄임말. 블록 레벨 테그. 블록 레벨 요소는 기본적으로 한 줄을 생성해서 내용을 표현.
② <span> : 인라인 레벨 태그. 인라인 레벨 요소는 블록 레벨 요소의 한 줄 안에서 표현되는 요소.
3-5. 리스트 요소
▶ 리스트 : 일련된 항목들이 나열된 것들.
① <ul> : unordered list. 순서가 없는 리스트를 표현할 때 사용하는 태그. <ul>을 선언한 후 그 안에서 <li>를 사용해 각 항목을 나타내서 사용!
② <ol> : ordered list. 순서가 있는 리스트를 표현할 때 사용하는 태그. <ol>을 선언한 후 그 안에서 <li>를 사용해 각 항목을 나타내서 사용!
③ <dl> : definition/description list. 용어와 그에 대한 정의를 표현할 때 사용하는 태그.
※ <ul>, <ol> : 항목을 단순히 나열하는 구조! but <dl> : 용어와 설명이 하나의 세트로 항목을 이루고, 하나 이상의 항목으로 리스트가 이루어지는 구조!
★ <dt> : 용어를 나타내는 태그
★ <dd> : 용어에 대한 정의 또는 설명을 나타내는 태그
※ 용어 하나에 여러 정의가 들어갈 때, <dd>를 1개 이상 쓸 수 O
3-6. 이미지 요소
▶ <img> : 문서에 이미지를 삽입하는 태그. 닫는 태그가 없는 빈 태그!
★ src 속성 : 이미지의 경로를 나타냄. <img>의 필수 속성!
☆ 상대경로와 절대경로
▷ 상대경로 : 현재 웹페이지를 기준으로 상대적으로 이미지의 위치를 나타냄.
▷ 절대경로 : 실제 그 이미지가 위치한 곳의 전체 경로.
★ alt 속성 : 이미지의 대체 텍스트(이미지를 대체하는 글)를 나타내는 속성. 웹 접근성 측면에서 중요한 속성. src 속성과 더불어 필수적임!
★ width/height 속성 : 이미지의 가로/세로 크기를 나타내는 속성. 값의 단위 필요 X. 값을 입력하면 자동으로 픽셀 단위로 계산됨. 이미지의 크기가 고정적이라면 선언하는 게 성능 측면에서 좋은 속성. 선언 안하면 이미지는 원본 크기대로 노출됨. 둘 중 하나만 선언하면 다른 한 속성은 자동으로 비율에 맞게 변경됨.
(+) 이미지 파일 형식 : gif(제한적인 색을 사용하고 용량이 적으며 투명 이미지와 애니메이션 이미지를 지원), jpg(사진이나 일반적인 그림에 쓰이며 높은 압축률과 자연스러운 색상 표현을 지원(투명 지원X)), png(이미지 손실이 적으며 투명과 반투명을 모두 지원)
3-7. 테이블 요소
▶ 데이터를 표로 나타낼 때!
★ 표 : 셀(내용이 들어가는 하나의 칸)으로 이루어짐.
☆ row : 표의 행. 가로 방향.
☆ column : 표의 열. 세로 방향.
① <table> : 표를 나타내는 태그
② <tr> : 행을 나타내는 태그
③ <th> : 제목 셀을 나타내는 태그
④ <td> : 셀을 나타내는 태그
★ 하나의 <table>은 하나 이상의 <tr>로 이루어짐. <tr>은 셀을 나타내는 <th>, <td>를 자식으로 가짐.
★ 표를 구성할 때는 위→아래로, 좌측→우측으로 작성.
★ 브라우저에서 제공하는 테이블의 default 스타일에는 테두리가 X. style을 따로 써줘야함.
▶ 표의 구조와 관련된 태그
★ 표를 구조적으로 파악하기 위해!
① <caption> : 표의 제목
② <thead> : 제목 행을 그룹화
③ <tfoot> : 바닥 행을 그룹화. (※ 위치는 <tbody>의 뒤에 위치해야함!)
④ <tbody> : 본문 행을 그룹화
▶ 복잡한 표를 만들 때, <colgroup>, <col>, scope 속성, header 속성들이 자주 사용됨
4. HTML 콘텐츠 모델, 시멘틱마크업, 블록&인라인
4-1. 콘텐츠 모델 : HTML5에서 요소의 종류를 정의하는 규칙에 대해, 비슷한 성격의 요소들끼리 그룹화한 것
▶ Content Models의 7분류
① Metadata : 콘텐츠의 스타일, 동작을 설정하거나 다른 문서와의 관계 등 정보를 포함하는 요소들이 포함됨. (메타 태그, 타이틀 태그, 스타일 태그, 링크 태그가 이에 해당. 대부분 <head>내에 들어간다는 것이 특징)
② Flow : 문서의 자연스러운 흐름에 의해 배치되는 요소들이 포함됨. (Metadata에 해당하는 일부 태그들만 Flow에서 제외됨. 요소들의 대부분이 Flow에 포함됨.)
③ Sectioning : 문서의 구조와 관련된 요소들이 포함됨. (HTML5에서 새로 생긴 <article>, <aside>, <nav>, <section> 등이 포함되며 이 태그들은 문서의 구조, 아웃라인에 영향을 줌.)
④ Heading : 각 section의 header를 정의하는 heading 태그가 포함됨.
⑤ Phrasing : 문서의 텍스트 또는 텍스트를 꾸며주는 문단 내부 레벨로 사용되는 요소들이 포함됨.
⑥ Embedded : 외부 콘텐츠를 표현하는 요소들이 포함됨. 오디오나 비디오, 이미지 등 멀티미디어 관련 요소들이 이에 해당.
⑦ Interactive : 사용자와 상호작용을 하는 요소들이 포함됨. 대표적으로 form 요소들이 이에 해당
4-2. 시멘틱 마크업 : 종종 POSH(Plain Old Semantic HTML)라고도 불리는데, 단어 그대로 평범하고 오래된 의미론적인 HTML이라는 뜻. 시멘틱 = 기계(컴퓨터, 브라우저)가 잘 이해할 수 있도록 하는 것을 뜻함.
▶ 시멘틱 마크업은 적절한 HTML 요소를 올바르게 사용하는 것에서 시작!
▶ 정해진 약속을 잘 지키면 됨! (= 마크업 할 때는 의미에 맞는 태그, 요소를 사용하는 것이고, 문서를 표현할 때는 구조화를 잘 해주는 것!)
▶ 정해진 약속대로 코드를 작성하게 되면 결국 기계뿐 아니라 사람도 이해하기 쉬운 코드가 됨! (그래서 중요함)
★ <b> vs <strong> (중요하다는 의미를 포함할때는 후자가 적절하고 시멘틱한 마크업임!)
★ <i> vs <em> (전자 : 단순히 기울어진 글자 / 후자 : 글자의 특정 부분 강조)
★ <u>, <s> vs <ins>, <del> (전자 : 단순히 글자에 선 / 후자 : 내용이 새롭게 추가됨/삭제됨 의미)
4-3. HTML5 시멘틱 요소
▶ 아래는 HTML5에서 새로 생긴 Sematic 요소들!
<article>, <aside>, <figcaption>, <figure>, <footer>, <header>, <main>, <mark>, <nav>, <section>, <time>
★ 참고 URL : https://developer.mozilla.org/en-US/docs/Glossary/Semantics
4-4. 블록&인라인 : 요소들이 7개의 콘텐츠 모델로 분류되기 전에, 요소들이 구분되었던 2가지 기준!
▶ Block Level 요소 : 한 줄에 하나의 요소 표시. 부모 요소의 가로 영역에 맞게 꽉 채워져 표현되는 요소
★ 양옆으로 다른 요소가 배치되지 않게 박스를 생성하므로, 박스의 위아래로 줄 바꿈이 생김.
★ 일반적인 모든 요소(블록, 인라인 레벨 등)를 포함 가능.
★ (ex) div, h1~h6, p, ul, li, table ...
▶ Inline Level 요소 : 한 줄에 여러개의 요소 표시. 하나의 라인 안에서 자신의 내용만큼의 박스를 만드는 요소
★ 라인의 흐름을 끊지 않고 요소 앞 뒤로도 줄 바꿈이 되지 않아 다른 인라인 요소들이 자리 가능.
★ 인라인 레벨 요소는 블록 레벨 요소의 자식으로 분류됨. 그래서 인라인 레벨 요소는 블록 레벨 요소를 포함 X.
※ HTML5 버전에서 생겨난 한가지 예외 경우가 있는데 <a>는 인라인 레벨 요소지만, 자손으로 블록 레벨 요소를 가질 수 O
★ (ex) span, i, img, em, strong, a ..."
학습한 강의 : https://www.boostcourse.org/cs120/joinLectures/33586
'개발냥발 > FE (FrontEnd)👩🏻💻' 카테고리의 다른 글
| React 익히기❗ (0) | 2022.05.30 |
|---|---|
| Javascript 활용하기❗ (0) | 2022.05.25 |
| Javascript 익히기❗ (0) | 2022.05.16 |
| CSS 익히기❗ (0) | 2022.05.09 |
| Git 과 Github 익히기❗ (0) | 2022.05.01 |