Chap.1 HTML[웹 표준 기술] - 설치, HTML5, CSS
웹 표준 기술
설치, HTML5, CSS
설치
Web Client는 Python을 사용하지 않음.
vscode
Download for Windows Stable Build
directory가 프로젝트이다.
Directory 만들기
C:\workspace\03_webclient\css
C:\workspace\03_webclient\html
C:\workspace\03_webclient\javascript
C:\workspace\03_webclient\html 마우스 오른쪽
웹 표준 기술
HTML5 : 컨텐츠 구성 - 정적
CSS3 : 보여지는 것(스타일) - 정적
자바스크립트 : 사용자 action에 따라 내용을 바꾸거나 이동 - 동적
HTML5
-
큰 의미 : 웹 표준 기술 총칭
-
작은 의미 : 웹 문서의 문법
-
HyperText : 링크
-
Markup Language : 의미 부여
- HTML5는 마크업 언어. 마크업은 대상이 화면에 어떻게 보일지 나타내기 위해 사용하는 일련의 문자.
- ‘마크업한다’ = HTML로 페이지의 구조나 요소를 프로그래밍 하는것
CSS
-
Casacading Style Sheet
-
HTML 웹 페이지의 스타일을 지정할 때 사용하는 언어
-
현재 2013년에는 CSS3 버전을 사용중
HTML5 기본 용어 정리
-
요소(Element)
- 제목, 본문, 이미지 등 HTML 페이지에 존재하는 것
-
태그(Tag)
- 요소를 만들 때 사용하는 기호
태그와 요소
-
일부 태그는 태그 내부에 다른 태그를 넣을 수 있음
- 태그 내부에 다른 태그를 넣을 수 없는 태그도 있음
속성
-
태그에 추가 정보를 부여 할 때 사용
- "" : 권장사항
HTML5 페이지 기본 구조
-
기본 구조
- <!DOCTYPE html> 태그
- 웹 브라우저에 HTML5 문서임을 알려줌
- 문서의 첫 행에 표기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
</body>
</html>
-
주석
- 프로그램의 실행에 영향을 미치지 않고, 설명을 위한 목적으로 사용하는 코드
- <!-- title 태그 -->
VScode > HTML > New File > 01.ex.html
html 타이핑 > html 5 선택
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Hello HTML5</h1>
<p>안녕하세요....</p>
</body>
</html>결과
-
수정 사항 자동 새로고침
- VScode > Extensions(Ctrl + Shift + X) > Korean Language Pack for Visual Studio Code > Install > restart now
- VScode > Extensions(Ctrl + Shift + X) > open in browser > Install
- VScode > Extensions(Ctrl + Shift + X) > Live Server > Install
Source Code > 마우스 오른쪽 > Open with Live Server- VScode > Extensions(Ctrl + Shift + X) > Beautify > Install
Source Code > F1 > Beautify Selection OR Ctrl + K + F : 들여쓰기
-
html 태그
- 모든 HTML 페이지의 루트(기본) 요소
- lang 속성 입력가능
-
head와 body 태그
- body 태그: 사용자에게 실제로 보여지는 부분
- head 태그: body 태그에서 필요한 스타일시트와 자바스크립트를 제공하는데 사용
CSS3의 종류와 기본 작성법
-
내부 스타일시트
- 스타일시트를 가장 손쉽게 사용할 수 있는 방법
- style 태그 사용
-
외부 스타일시트
- 프로젝트의 규모가 큰 경우
- link 태그의 href 속성을 통해 HTML 페이지로 불러옴
-
내부 스타일시트 작성하기 - HTMLPageWithStyle.html
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Basic</title>
<style>
/* CSS 주석문 */
h1 {
color: white; /* 폰트 색상 */
background: black; /* 배경 색상 */
}
</style>
</head>
<body>
<!-- 주석달기 -->
<h1>Hello World..!</h1>
</body>
</html>결과
-
외부 스타일시트 작성하기 - style.css
style.scc 파일 추가
h1 {
color: white;
background: black;
}
-
HTML 페이지에 외부 스타일시트 적용하기 - HTMLPageWithLink.html
- link 태그 사용
<!DOCTYPE html>
<html>
<head>
<title>External Stylesheet Basic</title>
<link rel="stylesheet" href="Style.css"/>
</head>
<body>
<h1>Hello CSS .. !</h1>
</body>
</html>결과
파일명 소문자 관례
댓글