13
HTML5 기본 구조와 작성법

HTML5 기본구조와작성법cs.kangwon.ac.kr/~whcho/2017_Winter/lecture/lecture1.pdf · 2017-12-27 · HTML5(HyperTextMarkup Language) WWW(World Wide Web)의웹표준기술, 웹마크업언어

  • Upload
    others

  • View
    1

  • Download
    0

Embed Size (px)

Citation preview

HTML5 기본구조와작성법

강의소개

HTML5, CSS, Java Script를 배우고 간단하게 홈페이지 구축

담당 조교: 조원형

– 한빛관 409호

– https://cs.kangwon.ac.kr/~whcho

[email protected]

과제 제출– 과제 제출 PDF 참고

성적

– 이론 80%, 실습 20%

2017-12-18

HTML5(HyperText Markup Language)

WWW(World Wide Web)의 웹 표준 기술, 웹 마크업 언어

웹 페이지의 뼈대를 이루고 있으며, 다양한 기능을 포함하고 있음

– 멀티미디어, 그래픽, 시맨틱 웹, etc.

Markup 언어란?

– 대상이 화면에 어떻게 보일지 나타내기 위해 사용하는 문자

HTML 예제

2017-12-18

CSS3(Cascading Style Sheet)

HTML 문서를 표현하는 방법

HTML은 웹 페이지의 몸체를 구축하고 CSS로 웹 페이지를 꾸밈

CSS3 예제

2017-12-18

CSS 적용전 CSS 적용후

JavaScript

HTML 페이지의 사용자 반응을 처리

HTML의 정적인 페이지를 동적으로 수행하게 함

웹 브라우저 내부에서 주로 사용하며, 외부 프로그램에서도 접근 가능

2017-12-18

실습환경구축

Sublime Text 에디터 설치

– https://www.sublimetext.com

2017-12-18

Practice1-1 HTML 기본구조

2017-12-18

Practice1-1 HTML 기본구조

2017-12-18

HTML은 태그로 구성 됨

– <html> </html>과 같이 태그로 둘러 쌓임

태그를 열었으면 닫아야함

HTML 문서는 기본적으로 예제와 같은 구조로이루어짐

HTML 태그

– HTML 페이지의 기본 요소

– 웹 페이지 동작에는 영향을 끼치지 않음

HEAD 태그

– 웹 페이지의 CSS, JavaScript, 메타데이터 등을 제시

Body 태그

– 사용자에게 실제 보여지는 부분

웹브라우저에 HTML5 문서라고알려줌

HTML 문서의속성, 언어 = 한국어

웹페이지의제목

주석

Practice1-2 제목글자태그

2017-12-18

HTML5는 6가지 제목 글자 태그를 지원

– <h1> <h6> 순으로 크기가 작아짐

Practice1-3 본문글자태그

2017-12-18

Practice1-4 특수문자

2017-12-18

Practice1-5 하이퍼링크태그

2017-12-18

감사합니다