HTML5 기본 구조와 작성법
강의 소개
HTML5, CSS를 공부하고 간단한 홈페이지 구축을 목표
담당 조교: 조원형
– 한빛관 409호
– https://cs.kangwon.ac.kr/~whcho – whcho@kangwon.ac.kr
과제 제출
– 과제 제출 PDF 참고
성적
– 이론 80%, 실습 20%
HTML5(HyperText Markup Language)
WWW(World Wide Web)의 웹 표준 기술, 웹 마크업 언어
웹 페이지의 뼈대를 이루고 있으며, 다양한 기능을 포함하고 있음
– 멀티미디어, 그래픽, 시맨틱 웹, etc.
Markup 언어란?
– 대상이 화면에 어떻게 보일지 나타내기 위해 사용하는 문자
HTML 예제
CSS3(Cascading Style Sheet)
HTML 문서를 표현하는 방법
HTML은 웹 페이지의 몸체를 구축하고 CSS로 웹 페이지를 꾸밈
CSS3 예제
CSS 적용 전 CSS 적용 후
실습 환경 구축
Sublime Text 에디터 설치
– https://www.sublimetext.com
Practice1-1 HTML 기본 구조
Practice1-1 HTML 기본 구조
HTML은 태그로 구성 됨
– <html> </html>과 같이 태그로 둘러 쌓임
태그를 열었으면 닫아야함
HTML 문서는 기본적으로 예제와 같은 구조로 이루어짐
HTML 태그
– HTML 페이지의 기본 요소
– 웹 페이지 동작에는 영향을 끼치지 않음
HEAD 태그
– 웹 페이지의 CSS, JavaScript, 메타데이터 등을 제 시
Body 태그
– 사용자에게 실제 보여지는 부분
웹 브라우저에 HTML5 문서라고 알려줌 HTML 문서의 속성, 언어 = 한국어
웹 페이지의 제목
주석
Practice1-2 제목 글자 태그
HTML5는 6가지 제목 글자 태그를 지원
– <h1> <h6> 순으로 크기가 작아짐
Practice1-3 본문 글자 태그
Practice1-4 특수문자
Practice1-5 하이퍼링크 태그