.png)
CH1. HTML
1) HTML(HyperText Markup Language)
이전에는 다른 페이지로 이동하기 위한 요소만을 가리켰지만, 요즘에는 웹 문서를 이루고 있는 요소 하나하나를 전부 Hypertext라고 보면
된다.
2) 웹브라우저
- 웹브라우저 : html로 작성된 파일을 구동할 수 있는 프로그램
HTML 📄 ↔ 웹브라우저 💻
ex) 크롬, 엣지, 익스플로러, 사파리 등
- 웹브라우저의 다양한 역할
- 문서를 보여주는 뷰어 역할
- 검색 등 다양한 부가 기능
- 웹 페이지를 분석할 수 있는 개발 도구 제공
3) Markup Language
- 프로그래밍 언어 : 데이터를 가공
- 마크업 언어 : 어떤 방식으로 어디에 어떻게 표현할지를 기술
html은 웹페이지를 위한 마크업 언어 !
4) HTML, CSS, Javascript
[구조] HTML : 웹 문서의 기본적인 골격을 담당
[표현] CSS : 각 요소들의 레이아웃, 스타일링을 담당
- 사용자의 웹페이지를 사용할 때의 경험 증대
- 웹 페이지만의 아이덴티티
[동작] Javascript : 동적인 요소 (사용자와의 인터렉션)을 담당
- 사용자의 행동에 의해 동작 제어
- HTML과 CSS까지만으로는 정적인 정보 전달이 주를 이루지만, javascript를 사용한다면 단순히 보여지는 형태가 아닌 웹어플리케이션 형태를 띠게 됨
HTML과 CSS가 나누어있다면 스타일링과 레이아웃만 다른 두 개의 웹페이지를 만들 수 있음 (ex.웹용과 모바일용)
5) 웹 표준, 웹 접근성, 웹 호환성
웹 표준 (Web Standards)
- html5(2014년 W3C) ➡ HTML Living Standard(2019년 WHATWG)
- HTML이 표준화 되기 이전에는 독자적인 플러그인이 존재하기도 함
ex) 익스플로러의 액티브X - 웹 표준을 준수하여 작성한다면 운영체제, 브러우저마다 의도된대로 보여지는 웹 페이지를 만들 수 있음
웹 접근성 (Web Accessibility)
- 일시적으로 키보드나 마우스를 사용할 수 없는 경우에도 브라우저를 사용할 수 있게 해줌
ex) 화면 돋보기, 스크린리더, 음성 인식, 키보드 오버레이 등
웹 호환성 (Cross Browsing)
- 웹 브라우저 버전, 종류와 관계없는 웹사이트 접근
- 웹 표준 준수를 통한 브라우저 호환성 확보
- HTML, CSS 문법 준수
- 동작, 레이아웃, 플러그인 호환성
웹 표준, 웹 접근성, 웹 호환성이 좋을수록, 더 나은 코드와 웹 페이지를 만들 수 있음 !
CH2. HTML이란?
1) HTML은 어떻게 생겼을까
- 웹 페이지를 구성하고 있는 요소 하나하나를 "태그"라는 표기법을 작성
- 태그를 통해 어떤 요소인지 명시
ex) 제목, 본문, 이미지, 비디오 등 - 태그의 이름은 HTML5 웹 표준에 맞게 작성
HTML 형태
<p>내용</p>
⬇
<opening tag>내용(content)</closing Tag>
// ⇒ 세 개를 통틀어 요소(element)라고 함
태그의 경우 대소문자를 구분하진 않지만, HTML5에서는 모두 소문자로 작성하는 것을 권장
2) 빈 요소
- 내용이 없는 요소 == 빈 요소(Empty element)
ex) 이미지, 수평선, 줄바꿈 등 - 이 경우 닫는 태그를 추가로 명시하지 않아도 됨
➡ Empty element, Self-Closing element, Void element, single tag
// 빈 요소 example
<br>
<hr>
<tag scr="~~">
<meta charset="~~~">
<input type="~" name="~">- 작성 방법 :
<br>or<br/>
(opening tag or self-closing tag)
어떤 방법으로든 일관성 있게만 작성하면 된다 !
3) 요소의 중첩 (Nesting)
- 요소 안에 다른 요소가 들어가는 포함관계 성립
- 여러 요소가 중첩될 경우, 열린 순서의 반대로 닫아야 함
(최근 연 것부터 닫기) - 들여쓰기로 포함관계 구분
//요소의 중첩 예시
<body>
<h1>title</h1>
<ul>
<li>1</li>
<li>2</li>
</ul>
</body>4) 주석 (Comments)
- 브라우저는 주석을 무시하여 사용자가 주석을 보이지 않게 함
- 주석의 목적:
- 코드에 메모 추가
- 사용하지 않는 코드를 임시로 처리
- ex)
<!-- html 주석처리된 내용 -->// js 주석처리된 내용# 파이썬 주석처리된 내용5) HTML 문서의 구조
<html>: 페이지 전체의 컨텐츠를 감싸는 루트(root) 요소<head>: 웹브라우저 화면에 직접적으로 나타나진 않는 웹페이지의 정보- head tag는 한 파일에 하나만 존재
<head>의 주 목적은 기계 처리를 위한 정보로, 사람이 읽을 수 있는 정보가 아님
➡ 최상위 제목, 작성자 목록 등 사람에게 보여야 할 정보는<header>요소를 사용<meta>: 문서의 일반적인 정보와 문자 인코딩을 명시<title>: 웹페이지의 제목
<body>: 웹브라우저 화면에 나타나는 모든 콘텐츠- body tag는 한 파일에 하나만 존재
- html 문서의 내용을 나타냄
⬇ html code example
<!-- html example -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>page title</title>
</head>
<body>
<a href="/login">
<div>
<h2>로그인 하러 가기</h2>
<br/>
<h6>로그인 후 사용합니다 <i>click</i></h6>
</div>
</a>
</body>
</html>6) HEAD 태그
7) BODY 태그
8) 태그를 구분짓는 특성
<body> 안에 들어가는 요소만 두 가지로 구분할 수 있음
(1) 구획을 나누는 태그
- 단독으로 사용했을 때에는 눈에 보이지 않음
- 여러가지 요소들을 묶어서 그룹화
➡ 레이아웃을 위해 사용
ex) div, span
(2) 자체로 요소인 태그
- 단독으로 사용했을 때에도 눈으로 확인할 수 있음
ex) button, input
9) 블록과 인라인
(1) 블록 (block)
- 블록 레벨 요소는 언제나 새로운 줄에서 시작
- 좌우 양쪽으로 가능한 모든 너비를 차지
ex) div
(2) 인라인 (inline)
- 인라인 요소는 줄의 어느 곳에서나 시작할 수 있음
- 바로 이전 요소가 끝나는 지점부터 시작, 요소의 내용만큼만 차지
ex) span
✔ 포함 규칙
대부분의 블록 요소는 인라인 요소를 포함할 수 있지만, 인라인 요소는 블록 요소를 포함할 수 없음 !
10) 콘텐츠 카테고리
- HTML5부터 비슷한 특징을 가진 요소끼리 묶어서 7가지 카테고리로 세분화
- 하나의 HTML 요소가 여러 콘텐츠 카테고리 내의 포함관계에 들어갈 수도 있음
메타데이터 콘텐츠, 플로우 콘텐츠, 섹션 콘텐츠, 프레이징 콘텐츠, 임베디드 콘텐츠, 인터렉티브 콘텐츠
CH3. 실습환경 세팅
1) 웹 에디터와 통합개발환경
웹 에디터 (편집기)
- HTML 문법에 맞추어 편리하게 작성할 수 있도록 도와주는 편집기
- 문법에 따라 색깔, 들여쓰기 등을 구분할 수 있음
- 온라인 웹 에디터 : jsbin , replit , codeopen
통합개발환경 (IDE)
- 개발을 할 때, 필요한 여러가지 툴을 한 프로그램을 통해 사용할 수 있도록 함
ex) VScode, intelliJ, Xcode, Eclipse 등 - 툴 종류
- 소스코드 편집기
- 빌더
- 디버거
- 플러그인
2) VScode 단축키
블로그 이사했어요 https://ktmihs.tistory.com/