HTML5&CSS3를 이용한 웹 퍼블리싱 강의에 대한 실습위주의 학습내용

1. codin9cafe
HTML5 + CSS3
<이즌잇 무료 스터디 강좌>
Park jae eun 2015. 03. 25.
“웹 퍼블리싱 강의”

2. CONTENTS
DAY 1 : 웹표준 / W3C / HTML / CSS
DAY 2 : HTML 태그 종류 / HTML 태그 작성
DAY 3 : CSS 속성 종류 / CSS 적용
DAY 5 : 레이아웃 제작
DAY 4 : 아이디와 클래스 / 박스 모델

3. 웹표준 / W3C / HTML / CSS
DAY 1.

4. 국제 표준화 단체인 W3C(woeld wide web
consortium)가 제시한 표준에 맞춰 웹 페이지를 제
작하는 것을 말한다.
=> 어떠한 운영체제, 어떠한 기기, 어떠한 곳에서
웹 페이지를 실행시켜도 동일한 모습을 볼 수 있다.
웹 표준이란?
Ex ) 웹 표준 = USB
DAY 1

5. DAY 1 W3C 란?
국제 웹 표준화 기구 중 하나로,
웹 기술을 제정하고 표준안을 만드는 비영리 기관
팀 버너스리를 중심으로 1994. 10 창립

6. DAY 1 HTML5 / CSS3 이란?
Hyper Text Markup Language
웹 문서를 만들기 위하여 사용하는 기본
적인 프로그래밍 언어의 한 종류이다.
즉, 웹페이지의 구조/뼈대를 만들기 위한
프로그래밍 언어이다.
HTML5
CSS3
Cascading Style Sheet
웹 문서의 전반적인 스타일을 미리 저장
해 둔 스타일시트이다.
즉, 웹페이지의 배치/스타일 등을 위한 프
로그래밍 언어로써 코드는 순차적으로 적
용된다.

7. HTML 태그 종류 / HTML 태그 작성
DAY 2.

8. DAY 2 HTML5 기본문서
HTML5 버전으로 작성
HTML 문서의 시작
HTML 문서정보를 가짐
문서의 제목
문서의 구조(몸체)부분

9. DAY 2 HTML5 태그 종류
• <nav> : 메뉴 영역을 나타내기 위한 태그
• <header> : 소개 또는 내비게이션 영역을 나타내는 태그
• <section> : 의미 있는 영역을 구분하기 위한 태그
• <div> : 의미 없는 영역을 구분하기 위한 태그
• <article> : 독립 아이템을 나타내는 태그
• <footer> : 저작권, 작성자, 기타 정보를 나타내는 태그
• <Ul> : 순서가 없는 목록을 나타내는 태그
• <a> : 링크를 위한 태그
• <Ol> : 순서가 있는 목록을 나타내는 태그
• <li> : 목록을 구성하기 위한 태그
• <p> : 문단을 구성하기 위한 태그
• <h1-h6> : 제목을 정의하기 위한 태그 (크기 차)
• <span> : 의미 없는 문자열을 구성하기 위한 태그
• <img> : 이미지를 표현하기 위한 태그

10. DAY 2 HTML5 태그 구조 만들기 – 실습

11. DAY 2 HTML5 태그 구조 만들기 – 실습

12. CSS 속성 종류 / CSS 적용
DAY 3.

13. DAY 3 CSS 기본 문서
Head 태그 사이에서
CSS코드 작성

14. DAY 2 CSS 속성 종류
• {padding: ;} : 요소 안의 여백을 설정하는 속성
• {display: ;} : 요소를 보이게 할지 안보이게 할지에 대한 속성
• {width: ;} : 요소에 대한 너비를 지정하는 속성
• {height: ;} : 요소의 높이를 지정하는 속성
• {margin: ;} : 요소의 공백, 간격을 설정하는 속성
• {border: ;} : 선을 설정하기 위한 속성
• {font-family: ;} : 폰트 종류를 지정하는 속성
{font-size: ;} : 폰트 크기를 지정하는 속성
• {float: ;} : 요소를 띄우기 위한, 전체적 박스의 흐름을 바꾸는 속성
(layout 설계를 위해 반드시 필요한 속성)
• {text-align: ;} : 텍스트의 방향을 설정하는 속성
• {color: ;} : 텍스트의 색상을 설정하는 속성
• {background: ;} : 배경 색상을 설정하는 속성
• {position: ;} : 요소의 위치/배치 방법을 설정하는 속성
• {Z-index: ;} : 요소의 겹침을 설정하는 속성
• {clear: ;} : float로 인해 생기는 문제를 해결해주는 속성

15. DAY 2 HTML 구조를 작성 / CSS 속성을 사용해서 자유롭게 구조 만들어보기 - 실습

16. DAY 2 HTML 구조를 작성 / CSS 속성을 사용해서 자유롭게 구조 만들어보기 - 실습

17. 아이디와 클래스 / 박스 모델
DAY 4.

18. DAY 4 아이디와 클래스
# 아이디 . 클래스
 공동의 목적을 가지지 않을 때 사용
 선택자로 사용할 때 “#”으로 선택
 아이디는 하나만 설정 할 수 있음
 아이디 명은 중복 사용 할 수 없음
 공동의 목적을 가질 때 사용
 선택자로 사용할 때 “.”으로 선택
 클래스는 여러개 설정 할 수 있음
(공백으로 구분)
 클래스 명은 중복 사용 할 수 있음

19. DAY 4 박스 모델
HTML 태그 들은 박스모델이라는 규칙을 따르고 있다. `
정확한 크기와 구조로 웹 사이트를 만들 수 있다.

20. DAY 4 간단한 레이아웃 만들어 보기 – 실습

21. DAY 4 간단한 레이아웃 만들어 보기 – 실습

22. DAY 4 간단한 레이아웃 만들어 보기 – 실습

23. 레이아웃 제작하기
DAY 5.

24. DAY 5 psd, 이미지를 기반으로 레이아웃 제작해보기 – 실습

25. DAY 5 psd, 이미지를 기반으로 레이아웃 제작해보기 – 실습

26. DAY 5 psd, 이미지를 기반으로 레이아웃 제작해보기 – 실습

27. DAY 5 psd, 이미지를 기반으로 레이아웃 제작해보기 – 실습

28. DAY 5 psd, 이미지를 기반으로 레이아웃 제작해보기 – 실습