1. HTML Basic
- What is HTML
- HTML Tags
- Web Browsers
- HTML Page Structure
- HTML Document Structure
- HTML Comments
- HTML Elements
- HTML Attributes
▪️ What is HTML
HTML이란, 웹 페이지를 만드는 표준화된 마크업 언어를 말하며 아래와 같은 특징들을 가진다.
- 프로그래밍 언어가 아닌 마크업 언어(=데이터 기술 언어)이다.
- 웹 페이지 구조를 설명하는데 사용된다.
- HTML은 element들의 연속으로 구성되어 있다.
- HTML의 element들은 브라우저에게 하여금 content를 어떻게 display할지 알려주는 역할을 한다.
- HTML의 element는 태그로 표현된다.
- 브라우저는 태그를 직접 표현하지 X. 페이지의 내용만 표현한다.
- HTML은 대소문자를 구분하지 않지만 소문자로 tagging할 것을 권장한다.
▪️ HTML Tags
HTML tag란, <>와 같이 angle bracket으로 표현되는 element의 이름을 말한다.
보통 pair(짝)으로 이루어지며 Start tag(=Opening tag)로 시작해 End tag(=Closing tag)로 닫힌다.
<태그> 태그 내용 </태그>
▪️ Web Browsers
Web Browser는 HTML 문서를 읽고 이의 태그들을 해석하여 디스플레이하는 역할을 수행한다.
웹 블라우저는 HTML 태그를 직접적으로 표현하지 않고 그들을 해석해 내용을 표현한다.
▪️ HTML Page Structure
HTML Page의 경우 크게 3개의 섹션 <html>,<head>,<body>로 구성된다.
이 중 <body> 섹션의 부분만 브라우저에서 디스플레이 된다.
▪️ HTML Document Structure
- <!DOCTYPE> : 문서의 type을 명시해줌으로써 브라우저가 웹페이지를 옳게 디스플레이 하도록 하게 함.
- <html> : HTML 페이지의 root element
- <head></head> : 문서 전체에 사용되는 부가적인 meta informations를 나타냄
- <body></body> : 페이지의 content 내용을 포함하는 요소로 가장 핵심요소
▪️ HTML Comments
Comment tag란, 추가적인 코드 설명이 필요할 때 사용하는 주석으로 사용방식은 아래와 같다.
<!-- 원하는 주석 내용을 작성하세요. -->
▪️ HTML Elements
HTML element는 주로 시작 태그와 종료 태그로 구성되며 그 사이에 표현하고자 하는 내용이 삽입되는 형태를 지닌다.
이때 내용(content)가 없는 경우, 'Empty Element'라 불리는데 해당 요소의 경우 종료 태그를 가지지 않는다. (ex. <br>)
element들은 중첩(nested)하여 사용이 가능하며 표현방식은 아래와 같다.
<태그> 태그 내용 </태그>
▪️ HTML Attributes
HTML Attribute란 element에 대한 추가적인 정보를 제공하기 위한 용도로 시작태그 내부에 명시되는 속성값이다.
모든 HTML element는 attribute를 가질 수 있으며, 사용방식은 매우 다양하기에 알아서 구글링해보는 것을 추천한다.
2. HTML Elements
- <title> - Title
- <h> - Heading
- <hr> - Horizontal Rules
- <p> - Paragraphs
- <pre>
- <br> - Line Breaks
-
▪️ <title> - Title
: 브라우저 툴 바의 제목을 정의하며 검색엔진 결과에 페이지 제목을 표시함.
: (default) 설정값이 없을 경우, 제목으로 파일소스경로 + 이름이 출력됨.
▪️ <h> - Heading
: <h1>부터 <h6>까지 총 6가지의 크기의 헤딩이 제공되며, <h4>가 기본 글자의 크기 정도이다.
: <h1>이 가장 중요도가 높은 헤딩으로 크기가 가장 크며 <h6>이 가장 중요도가 낮고 크기도 작다.
: (주의) 헤딩은 중요도를 표현하기 위한 용도이다. 단순히 글자를 크게 혹은 굵게 표현하기 위한 용도로는 적절치 않다.
▪️ <hr> - Horizontal Rules
: HTML 페이지의 내용을 구분하기 위한 용도의 구분선으로, content가 없어 종료태그가 존재하지 않는다.
▪️ <p> - Paragraphs
: 단락으로, 공간 전체를 점유한다는 특징을 가진다.
: 주로 해당 텍스트 묶음의 속성을 바꾸고 싶을 경우 사용한다.
: <p>의 경우 추가적인 space/line을 무시하기에, 단락 내에서의 공백/개행은 무시된다.
▪️ <pre>
: <p>와 달리, 텍스트의 format이 보존되므로 내부의 공백/개행이 보장된다.
: <p>와 폰트가 다르며, 주로 독특한 서식의 텍스트나 컴퓨터 코드 등을 그대로 표현하고자 할 때 사용하나 잘 사용 X.
▪️ <br> - Line breaks
: 줄바꿈을 보장하는 메소드로 content가 없어 종료태그가 없는 것이 특징이다.
: 주로 단락(<p>)의 내부에서, 새 단락을 시작하고 싶지 않으나 줄바꿈이 필요할 때 사용된다.
▪️
: 띄어쓰기를 보장하는 메소드로, 주로 단락(<p>)의 내부에서 띄어쓰기가 필요할 때 사용된다.
3. HTML Attributes
- <a> - Link
- <img> - Image
- Style Attributes
- Formatting Attributes
- List Tags
- Table Tags
▪️ <a> - Link
: href에 이동할 목적지의 주소를 입력하여 이동하게 해주는 링크 Attribute이다.
: 링크 태그의 경우 개행이 포함되지 않기에 <br>을 통한 개행이 권장된다.
▪️ <img> - Image
: src에 보여주고자 하는 이미지 소스의 URL값을 지정하여 보여주게 하는 이미지 Attribute이다.
(온라인 상의 원격 소스일 경우) src에 절대 경로 소스값 입력
(로컬 저장소 소스파일일 경우) src에 현재 작업 html의 경로 기준으로 상대 경로 소스값 입력
: alt 메소드를 통해 src의 URL값이 올바르지 않을 때, 대체할 수 있는 문구를 지정할 수 있다.
: width 메소드를 통해 가로폭 크기를 커스텀 가능하다. 이때 세로 height를 지정해주지 않을 경우 원본 비율이 고려된다.
▪️ Style Atrributes
: <tagname style = "propery : value;">의 문법을 통해 원하는 대로 HTML Attribute의 스타일을 커스텀 가능하다.
: Ex. text-align (배치), text-size-adjust (크기), color (색상) 등.
▪️ Formatting Attributes
: Ex. <b>,<strong> (굵은체), <i> (기울임체), <mark> (노란색 하이라이트체), <del> (지운 글씨), <ins> (밑줄체) 등.
▪️ List Tags
- <ul> : unordered/bullet list로 순서가 매겨져지 않는 리스트 태그이다.
- <ol> : ordered/numbered list로 순서가 매겨지는 리스트 태그이다.
→ 이때 ul은 style을 통해, ol은 type을 통해 리스트 태그의 유형을 커스텀할 수 있다.
▪️ Table Tags
- <table> : HTML의 테이블의 테이블을 정의해주는 태그. (우선순위 1)
- <tr> : 각 테이블의 row 행을 정의해주는 태그.
- <th> : 각 테이블의 header를 정의해주는 태그.
- <td> : 각 테이블의 data/cell을 정의해주는 태그.
→ 이때 반드시 tr(행)부터 설정을 한 뒤, th(헤더) 또는 td(데이터/셀)의 설정이 가능하다.
→ 또한 style을 통해 폭/넓이를 조절하거나, colspan/rowspan을 통해 cell의 span을 한 칸보다 크게 조절 가능하다.
'Computer Science > Internet & Web' 카테고리의 다른 글
| [학교수업] 03. Introduction to HTML5 (2) (0) | 2022.03.30 |
|---|---|
| [학교수업] 01. Introduction to Internet (1) (0) | 2022.03.06 |
| [학교수업] 00. Syllabus slide (0) | 2022.03.06 |
