이번 포스팅부터는 이전에 모각소(모여서 각자 소프트웨어) 활동에서 Notion에 정리해두었던 HTML/CSS/JS 내용을 복습할 겸 포스팅을 해보려고 합니다 :)
1) HTML 이란 ?
HTML (HyperText Markup Language)은 웹페이지를 기술하기 위한 마크업 언어(태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어의 한 가지)
조금 더 자세히 말하면 웹페이지의 내용(content)과 구조(structure)를 담당하는 언어로써 HTML 태그를 통해 정보를 구조화할 수 있습니다.
💡 메타 데이터(Meta Data)란 ? 데이터에 관한 구조화된 데이터로, 다른 데이터를 설명해 주는 데이터
- HTML5 문서는 반드시 <!DOCTYPE html>으로 시작하여 문서 형식(document type)을 HTML5로 지정한다.
- 실제적인 HTML document은 2행부터 시작되는데 <html>과 </html> 사이에 기술한다.
- <head>와 </head> 사이에는 document title, 외부 파일의 참조, 메타데이터의 설정 등이 위치하며 이 정보들은 브라우저에 표시되지 않는다.
- 웹브라우저에 출력되는 모든 요소는 <body>와 </body> 사이에 위치한다.
2) 태그(Tag)와 속성(Attribute)
- 요소(Element) : HTML 요소는 시작 태그(start tag)와 종료 태그(end tag) 그리고 태그 사이에 위치한 content로 구성
- 요소의 중첩 (Nested Element) : html 요소는 웹페이지를 구성하는 모든 요소들을 포함한다. 중첩 관계(부자 관계)로 웹페이지의 구조(structure)를 표현.
- 빈 요소 (Empty Element) : content를 가질 수 없는 요소, content가 없으며(필요가 없다) 어트리뷰트(Attribute)만을 가질 수 있다. ex) br, hr, img, input, link, meta
어트리뷰트(Attribute) : 요소의 성질, 특징을 정의하는 명세. 요소는 어트리뷰트를 가질 수 있으며 어트리뷰트는 요소에 추가적 정보(예를 들어 이미지 파일의 경로, 크기 등)를 제공한다. 어트리뷰트는 시작 태그에 위치해야 하며 이름과 값의 쌍을 이룬다.
글로벌 어트리뷰트 (HTML Global Attribute) : 모든 HTML 요소가 공통으로 사용할 수 있는 어트리뷰트. 몇몇 요소에는 효과가 적용되지 않을 수 있지만, 글로벌 어트리뷰트는 대체로 모든 요소에 사용될 수 있다.
⭐️ target 어트리뷰트 : target 어트리뷰트는 링크를 클릭했을 때 윈도우를 어떻게 오픈할 지를 지정한다.
target="_blank"를 사용해 외부 페이지를 오픈하는 경우, 이동한 외부 페이지에서 자바스크립트 코드를 사용해 악의적인 페이지로 리다이렉트할 수 있는 보안 취약점(Tabnabbing 피싱 공격)이 있다.
따라서 rel="noopener noreferrer"를 추가해 Tabnabbing 피싱 공격에 대비할 것을 권장한다. 참고로 noopener 속성은 성능 상 이점도 있는 것으로 알려져 있다.
3) 주석(Comments)
주석 (Comments) : 주석은 주로 개발자에게 코드를 설명하기 위해 사용되며 브라우저는 주석을 화면에 표시하지 않는다.
4) 시맨틱 요소와 검색엔진
시맨틱 웹(Semantic Web) : 웹사이트는 검색엔진에의 노출이 매우 중요하다. 검색 엔진은 HTML 코드 만으로 그 의미를 인지하여야 하는데 이때 시맨틱 요소(Semantic element)를 해석하게 된다.
시맨틱 태그는 개발자가 의도한 요소의 의미를 명확히 드러내고, 이것은 코드의 가독성을 높이고 유지보수를 쉽게한다.
검색엔진은 대체로 h1 요소 내의 콘텐츠를 웹문서의 중요한 제목으로 인식하고 인덱스에 포함시킬 확률이 높다.
시맨틱 요소로 구성되어 있는 웹페이지는 검색엔진에 보다 의미론적으로 문서 정보를 전달할 수 있고 검색엔진 또한 시맨틱 요소를 이용하여 보다 효과적인 크롤링과 인덱싱이 가능해졌다.
즉, 시맨틱 태그란 브라우저, 검색엔진, 개발자 모두에게 콘텐츠의 의미를 명확히 설명하는 역할을 한다. 시맨틱 태그에 의해 컴퓨터가 HTML 요소의 의미를 보다 명확히 해석하고 그 데이터를 활용할 수 있는 시맨틱 웹이 실현될 수 있다.
시맨틱 웹이란 웹에 존재하는 수많은 웹 페이지들에 메타데이터(Metadata)를 부여하여, 기존의 잡다한 데이터 집합 이었던 웹페이지를 ‘의미’와 ‘관련성’을 가지는 거대한 데이터베이스로 구축하고자 하는 발상이다.
5) 웹 페이지를 구성하는 기본 태그(Tag)
- <html> tag : html 태그는 모든 HTML 요소의 부모 요소이며 웹페이지에 단 하나만 존재한다. 즉, 모든 요소는 html 요소의 자식 요소이며 html 요소 내부에 기술해야 한다. 단 <!DOCTYPE>는 예외이다.
- <head> tag : head 요소는 메타데이터를 포함하기 위한 요소이며 웹페이지에 단 하나만 존재한다. 메타 데이터는 HTML 문서의 title, style, link, script에 대한 데이터로 화면에 표시되지 않는다.
- <title> tag : title 요소는 문서의 제목을 정의한다. 정의된 제목은 브라우저의 탭에 표시된다.
- <style> tag : style 요소에는 HTML 문서를 위한 style 정보를 정의한다.
- <link> tag : link 요소에는 외부 리소스와의 연계 정보를 정의한다. 주로 HTML과 외부 CSS 파일을 연계에 사용된다.
- <script> tag : script 요소에는 client-side JavaScript를 정의한다. src 어트리뷰트를 사용하면 외부 JavaScript 파일을 로드할 수 있다.
- <meta> tag : meta 요소는 description, keywords, author, 기타 메타데이터 정의에 사용된다. 메타데이터는 브라우저, 검색엔진(keywords) 등에 의해 사용된다. charset 어트리뷰트는 브라우저가 사용할 문자셋을 정의한다.(SEO(검색엔진 최적화)를 위해 검색엔진이 사용할 keywords을 정의한다.)
- <body tag> : body tag는 HTML 문서의 내용을 나타내며 웹페이지에 단 하나만 존재한다. 메타데이터를 제외한 웹페이지를 구성하는 대부분의 요소가 body 요소 내에 기술된다.
6) 텍스트 관련 태그
- 제목 (Headings) 태그 : Heading 태그는 제목을 나타낼 때 사용하며 h1에서 h6까지의 태그가 있다. h1이 가장 중요한 제목을 의미하며 글자의 크기도 가장 크다.
시맨틱 웹의 의미를 살려서 제목 이외에는 사용하지 않는 것이 좋다. 검색엔진은 제목 태그를 중요한 의미로 받아들일 가능성이 크다.
- 글자 형태 (Text Formatting) 태그 :
- <b> : bold체를 지정한다. 제목 태그와 같이 의미론적(Semantic) 중요성의 의미는 없다.
- <strong> : b tag와 동일하게 bold체를 지정한다. 하지만 의미론적(Semantic) 중요성의 의미를 갖는다. 표현되는 외양은 b tag와 동일하지만 웹 표준을 준수하고자 한다면 strong를 사용하는 것이 바람직하다.
- <i> : Italic체를 지정한다. 의미론적(Semantic) 중요성의 의미는 없다.
- <em> : emphasized(강조, 중요한) text를 지정한다. i tag와 동일하게 Italic체로 표현된다. 의미론적(Semantic) 중요성의 의미를 갖는다.
- <small> : small text를 지정한다.
- <mark> : highlighted text를 지정한다.
- <del> : deleted (removed) text를 지정한다.
- <ins> : inserted (added) text를 지정한다.
- <sub> / <sup> : sub 태그는 subscripted(아래에 쓰인) text를 sup 태그는 superscripted(위에 쓰인) text를 지정한다.
- <p> : 단락 (Paragraphs)을 지정한다.
- <br> : br tag는 (강제)개행 (line break)을 지정한다. br tag는 빈 요소(empty element)로 종료태그가 없다.(HTML에서는 1개 이상의 연속된 공백(space)을 삽입하여도 1개의 공백으로 표시된다. 1개 이상의 연속된 줄바꿈(enter)도 1개의 공백으로 표시된다.)
- <pre> : 형식화된(preformatted) text를 지정한다. pre 태그 내의 content는 작성된 그대로 브라우저에 표시된다.
- <hr> : 수평줄을 삽입한다.
- <q> : 짧은 인용문(quotation)을 지정한다. 브라우저는 인용부호(큰따옴표/quotation marks)로 q 요소를 감싼다.
- <blockquote> : 긴 인용문 블록을 지정한다. 브라우저는 blockquote 요소를 들여쓰기한다. css를 이용하여 다양한 style을 적용할 수 있다.
7) HTML의 핵심 개념 : 하이퍼 링크(Hyper Link)
HyperText의 Hyper는 컴퓨터 용어로서 텍스트 등의 정보가 동일 선상에 있는 것이 아니라 다중으로 연결되어 있는 상태를 의미한다.
이것은 HTML의 가장 중요한 특징인 link의 개념과 연결되는데 기존 문서나 텍스트의 선형성, 고정성의 제약에서 벗어나 사용자가 원하는 순서대로 원하는 정보를 취득할 수 있는 기능을 제공한다.
한 텍스트에서 다른 텍스트로 건너뛰어 읽을 수 있는 이 기능을 하이퍼링크(hyper link)라고 한다.
HTML link는 hyperlink를 의미하며 <a(anchor)> tag가 그 역할을 담당한다.
href 어트리뷰트 : href 어트리뷰트는 이동하고자 하는 파일의 위치(경로)를 값으로 받는다. 경로(path)란 파일 시스템 상에서 특정 파일의 위치를 의미한다.
8) 디렉토리와 절대/상대 경로
- 디렉터리(Directory) : 디렉터리는 파일과 다른 디렉터리를 갖는 파일 시스템 내의 존재물로서 폴더라고도 불리운다.
- 파일 경로(File path) : 파일 경로는 파일 시스템에서 파일의 위치를 나타내는 방법이다. 경로에는 절대경로와 상대경로가 있다.
💡 절대경로(Absolute path) : 현재 작업 디렉터리와 관계없이 특정 파일의 절대적인 위치를 가리킨다. 루트 디렉터리를 기준으로 파일의 위치를 나타낸다.
- http://www.mysite.com/index.html
- /Users/leeungmo/Desktop/myImage.jpg
- C:\users\leeungmo\Desktop\myImage.jpg
- /index.html
💡 상대경로(Relative path) : 현재 작업 디렉터리를 기준으로 특정 파일의 상대적인 위치를 가리킨다.
- ./index.html
- ../dist/index.js
- ../../dist/index.js
- index.html
- html/index.html </aside>
9) 목록(List)와 표(Table) 형식 표현을 위한 태그
<!DOCTYPE html>
<html>
<body>
<h2>순서없는 목록 (Unordered List)</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html><!DOCTYPE html>
<html>
<body>
<h2>순서없는 목록 (Unordered List)</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
10) 이미지의 표현과 동영상, 음악 등 멀티미디어를 지원하는 태그
<!DOCTYPE html>
<html>
<body>
<img src="assets/images/doug.jpg" alt="doug" width="100">
<img src="assets/images/wrongname.gif" alt="이미지가 없습니다.">
</body>
</html>
11) 사용자와의 커뮤니케이션을 위한 Form/Input/Select/Textarea/Button 태그
<!DOCTYPE html>
<html>
<body>
<form action="http://jsonplaceholder.typicode.com/users" method="get">
ID: <input type="text" name="id" value="1"><br>
username: <input type="text" name="username" value="Bret"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>- <form> 태그 : 사용자가 입력한 데이터를 수집하기 위해 사용되며 input, textarea, button, select, checkbox, radio button, submit button 등의 입력 양식 태그를 포함할 수 있다.
- <input> 태그 : input 태그는 form 태그 중에서 가장 중요한 태그로 사용자로부터 데이터를 입력받기 위해 사용된다.form 태그 내에 존재하여야 입력 데이터를 전송할 수 있으나 ajax를 사용할 시에는 form 태그 내에 존재하지 않아도 된다.
- 서버에 전송되는 데이터는 name 어트리뷰트를 키로, value 어트리뷰트를 값으로하여 key=value의 형태로 전송된다.
- input 태그는 다양한 종류가 있는데 type 어트리뷰트에 의해 구분된다.
<!DOCTYPE html>
<html>
<body>
<select name="cars1">
<option value="volvo" selected>Volvo</option>
<option value="saab" disabled>Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<select name="cars2" size="4" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi" selected>Audi</option>
</select>
<select name="cars3">
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars" disabled>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
</body>
</html>- <select> 태그 : 복수개의 리스트에서 복수개의 아이템을 선택할 때 사용한다. 함께 사용할 수 있는 태그는 다음과 같다.
<!DOCTYPE html>
<html>
<body>
<textarea name="message" rows="10" cols="30">Write something here</textarea>
</body>
</html>- <textarea> 태그 : textarea 태그는 여러 줄의 글자를 입력할 때 사용한다.
<!DOCTYPE html>
<html>
<body>
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
<input type="button" value="Click Me!" onclick="alert('Hello world!')">
</body>
</html>- <button> 태그 :따라서 button 요소에는 텍스트나 이미지 같은 콘텐츠를 사용할 수 있다.
- button 태그는 어트리뷰트만을 받아들이는 input 태그와 달리 콘텐츠로 문자열은 물론 HTML 요소를 받을 수도 있다는 장점이 있다. 주의할 것은 IE의 경우, submit되는 값이 다를 수 있는 것이다.
- 따라서 오래된 IE를 지원해야 한다면 input 태그를 사용하는 것이 바람직하다.
- type 어트리뷰트는 반드시 지정하는 것이 바람직하며 어트리뷰트값으로 button, reset, submit를 지정할 수 있다.
- button 태그는 클릭할 수 있는 버튼을 생성한다. <input type="button">과 유사하지만 input 태그는 빈 태그인 반면 button 태그는 그렇지 않다.
'HTML&CSS&Javascript > HTML' 카테고리의 다른 글
| [HTML] 시맨틱 웹이란 ? (0) | 2023.11.27 |
|---|