HTML5+CSS3 실무 테크닉 김은기 저.

Presentation on theme: "HTML5+CSS3 실무 테크닉 김은기 저."— Presentation transcript:

1 HTML5+CSS3 실무 테크닉 김은기 저

2 INDEX Part1. HTML5의 기초 다지기 Part2 HTML5 태그 정복하기 Part3 CSS 기초 이해하기

3 Part 1. HTML5의 기초 다지기 01. 웹 브라우저의 언어, HTML5 02. 스타일시트, CSS3 03. 자바스크립트
04. HTML5, CSS3, JavaScript의 상관관계

4 1. 웹 브라우저의 언어, HTML5 HTML이란? HTML : HyperText Markup Language
웹 문서를 만들기 위한 기본 프로그래밍 언어

5 1. 웹 브라우저의 언어, HTML5 HTML5의 개념 HTML의 최신 기술
2014년 10월 28일 W3C(World Wide Web Consortium)에 의해 표준으로 채택 HTML에 비디오, 오디오, 그래픽, 위치 정보 등을 처리할 수 있는 기능을 포함

6 1. 웹 브라우저의 언어, HTML5 Html 문서의 경우

7 1. 웹 브라우저의 언어, HTML5 Html5 문서의 경우

8 1. 웹 브라우저의 언어, HTML5 Html5의 주요 기능

9 2. 스타일시트, CSS3 스타일시트(CSS)란? CSS : Cascading Style Sheet의 약자
웹문서의 모양과 위치를 지정할 수 있는 언어 기존의 HTML에 모양을 추가(변경) 웹 사이트에 통일감 부여 글자 크기나 모양, 줄 간격, 배경 색상 등 제어

10 2. 스타일시트, CSS3 업그레이드된 CSS3 CSS의 가장 최신 기술
CSS3는 아직 W3C의 권장 표준은 아니다. 아직 개발 중 CSS2.1과의 큰 차이점 : CSS3가 모듈 기반으로 개발 다른 프로그램의 도움 없이도 이미지, 3D, 애니메이션 가능 웹 사이트 화려해지고 사용자에게 편리한 기능 제공

11 2. 스타일시트, CSS3 CSS3의 주요 기능

12 3. 자바스크립트(JavaScript) 자바스크립트의 매력 - 배우기가 쉽다. - 작은 프로그램을 코딩하기에 적합하다.
- 웹 브라우저 자체에서 자바스크립트를 지원한다. - 함수를 사용하기가 편리하다. - 소스를 활용하기가 쉽다.

13 4. HTML5, CSS3, JavaScript의 상관관계

14 Part 2. HTML5 태그 정복하기 01. HTML 기본 구조 02. meta 태그 03. HTML5 시멘틱 구조 태그
04. 웹 문서를 정리하는 태그 05. 목록을 만드는 태그 06. 타이포 태그 07. 웹 문서를 재미있게 꾸미는 태그 08. 깔끔한 웹 문서의 필수품, Table 09. 웹 공간을 마음대로 헤엄치는 하이퍼링크 10. 폼(form)으로 방문자와 대화하기 11. HTML5에서 더 이상 지원하지 않는 태그

15 1. HTML 기본 구조

16 1. HTML 기본 구조 HTML 문서의 규칙

17 1. HTML 기본 구조 HTML 태그의 특징 태그는 일반 글자와 구분하기 위하여 ‘<’와 ‘>’ 안에 넣어서 사용
대소문자를 구별하지 않지만 일반적으로 소문자 사용 태그는 단독으로 사용하는 경우와 ‘시작 태그’, ‘끝 태그’가 한 쌍으로 사용되는 경우가 있는데, 시작 태그는 ‘<>’, 끝 태그는 ‘</>’ 형식으로 사용 시작 태그, 끝 태그가 한 쌍으로 사용되는 경우 : 태그와 태그 사이의 내용만 태그의 영향을 받음 태그는 중첩해서 사용할 수 있는데 반드시 시작과 끝을 잘 맞춰야 함. 즉, 가장 먼저 시작된 태그가 가장 나중에 끝난다는 원리 이해 태그에는 속성이 있기 때문에 세부적인 설정 가능함

18 2. meta 태그 <meta> 태그의 구성

19 2. meta 태그 <meta> 태그의 속성

20 3. HTML5 시멘틱 구조 태그 시멘틱 웹의 개념 웹 문서를 쉽고 정확하고 의미 있게 검색하기 위해 시멘틱 웹이라는 개념이 생겼다. 즉, 시멘틱 웹이란 사용자가 정보를 검색하면 컴퓨터가 정보를 찾아 정보의 뜻을 이해하고, 심지어 추론까지 하는 차세대 지능형 웹 기술을 말한다.

21 3. HTML5 시멘틱 구조 태그 구획 정의를 위한 태그

22 3. HTML5 시멘틱 구조 태그 의미를 명확하게 하는 태그

23 3. HTML5 시멘틱 구조 태그 제목 크기 조절하는 <h1>~<h6> 태그

24 3. HTML5 시멘틱 구조 태그 구획 정의를 위한 태그

25 4. 웹 문서를 정리하는 태그 <br>과 <p> 태그 이해하기 태그 속성

26 4. 웹 문서를 정리하는 태그 <hr> 태그 : 웹 문서에 수평선을 추가 태그 속성

27 4. 웹 문서를 정리하는 태그 <pre> 태그 : 편집기에 입력한 형태 그대로 웹 문서로 보여줌 태그 속성

28 4. 웹 문서를 정리하는 태그 <div>와 <span> 태그 태그 속성 div : 웹 문서의 블록을 지정

29 5. 목록을 만드는 태그 ul : 번호 없는 목록 ol : 번호 있는 목록
li : <ul>과 <ol> 태그의 항목을 만듦 태그 속성

30 5. 목록을 만드는 태그 <dl> 태그와 <ul>, <ol> 태그의 차이
dt : 설명 리스트의 이름을 표시 dd : 설명 리스트에 대한 세부내용을 표시 <dl> 태그와 <ul>, <ol> 태그의 차이 계층 구조를 만드는 <dl> 태그는 앞에서 설명한 <ul>, <ol> 태그처럼 목록을 만든다. 하지만 모양 상으로는 <ul>, <ol> 목록 태그가 점이나 숫자로 표현되는 것을 제외하고는 목록을 표현한다는 것 자체는 크게 다르지 않다. 이처럼 화면의 모양 상으로는 차이가 없더라도 태그가 가지는 의미에 맞도록 사용하는 것이 웹 문서를 작성하는 데 있어서 지켜야 할 규칙이다.

31 6. 타이포 태그

32 6. 타이포 태그

33 6. 타이포 태그 루비 글자 태그 : 루비 글자 : 일본이나 중국에서 주로 사용하는 표기 방법, 단어에 대한 설명이나 읽는 법 등을 보통의 글자보다 작은 크기로 적는 것을 말한다.

34 6. 타이포 태그 특수문자 입력하는 방법 Numeric과 Symbolic
HTML에서 지원하는 코드값(Numeric)이나 약속된 기호(Symbolic) 입력 키보드의 <ㄱ>, <ㄴ>, <ㄷ>과 같은 한글 자음과 <한자>를 이용하여 입력 Numeric과 Symbolic

35 7. 웹 문서를 재미있게 꾸미는 태그 이미지를 삽입하는 <img> 태그

36 7. 웹 문서를 재미있게 꾸미는 태그 이미지를 삽입하는 <img> 태그

37 7. 웹 문서를 재미있게 꾸미는 태그 상대 경로와 절대 경로

38 7. 웹 문서를 재미있게 꾸미는 태그 상대 경로와 절대 경로

39 7. 웹 문서를 재미있게 꾸미는 태그 웹 문서 속의 웹 문서 <iframe>

40 7. 웹 문서를 재미있게 꾸미는 태그 <iframe>

41 7. 웹 문서를 재미있게 꾸미는 태그 <iframe>

42 7. 웹 문서를 재미있게 꾸미는 태그 멀티미디어 삽입하는 <embed> 태그

43 7. 웹 문서를 재미있게 꾸미는 태그 멀티미디어 삽입하는 <embed> 태그

44 7. 웹 문서를 재미있게 꾸미는 태그 <audio>와 <video> 태그

45 7. 웹 문서를 재미있게 꾸미는 태그 <audio>와 <video> 태그

46 7. 웹 문서를 재미있게 꾸미는 태그 이미지맵을 설정하는 <map> 태그

47 7. 웹 문서를 재미있게 꾸미는 태그 이미지맵을 설정하는 <map> 태그

48 7. 웹 문서를 재미있게 꾸미는 태그 이미지맵을 설정하는 <map> 태그

49 8. 깔끔한 웹 문서의 필수품, Table <table>의 기본 태그

50 8. 깔끔한 웹 문서의 필수품, Table <table>의 기본 태그

51 8. 깔끔한 웹 문서의 필수품, Table <table>의 기본 태그

52 8. 깔끔한 웹 문서의 필수품, Table <table>의 기본 태그

53 8. 깔끔한 웹 문서의 필수품, Table <table>의 기본 태그

54 9. 웹 공간을 마음대로 헤엄치는 하이퍼링크 URL로 하이퍼링크 연결하기

55 9. 웹 공간을 마음대로 헤엄치는 하이퍼링크 URL로 하이퍼링크 연결하기

56 9. 웹 공간을 마음대로 헤엄치는 하이퍼링크 URL로 하이퍼링크 연결하기

57 9. 웹 공간을 마음대로 헤엄치는 하이퍼링크 URL로 하이퍼링크 연결하기

58 10. 폼(form)으로 방문자와 대화하기 server-side를 처리하기 위한 <form>
웹 사이트를 방문한 사람이 입력한 정보를 서버로 전달하려면 <form> 태그를 사용해야 합니다. 즉, 각종 입력 양식을 <form> 태그 안에서 사용해야 하며, 이 태그에서 서버에 전달하는 방식이나 서버에서 가동될 프로그램 등을 지정해야 합니다.

59 10. 폼(form)으로 방문자와 대화하기 server-side를 처리하기 위한 <form>

60 10. 폼(form)으로 방문자와 대화하기 server-side를 처리하기 위한 <form>

61 10. 폼(form)으로 방문자와 대화하기 HTML5 <input> 태그

62 10. 폼(form)으로 방문자와 대화하기 HTML5 <input> 태그

63 Part 3. CSS 기초 이해하기 01. 나만의 스타일을 만드는 CSS3 02. 스타일시트 적용하는 여러 가지 방법
03. 기초부터 알아보는 스타일시트 04. 배경을 꾸미는 스타일시트 05. 테두리를 꾸미는 스타일시트 06. 세련미를 풍기는 박스 여백 07. 폰트 적용 스타일시트 08. 스타일시트로 문자와 문단 꾸미기 09. 스타일 시트로 내 마음대로 문서 꾸미기 10. 목록을 꾸미는 스타일시트 11. 남다르게 꾸미는 하이퍼링크

64 스타일시트의 매력 1. 나만의 스타일을 만드는 CSS3 웹 문서를 자유롭게 편집할 수 있다 문서를 통일감 있게 만들 수 있다
문서를 관리하기 편리하다

65 2. 스타일시트 적용하는 여러 가지 방법 외부 문서에서 연결하기(linked Style)
문서 내부에 정의하기(Embedded Style)

66 2. 스타일시트 적용하는 여러 가지 방법 태그에 직접 정의하기(Inline Style) 스타일시트에서 주석 사용하기

67 3. 기초부터 알아보는 스타일시트 스타일시트 기본 형식
Selector : 선택자 스타일을 적용하려는 대상을 지정 (예. p, body 등) 스타일 속성 : 값 : 선언문은 속성과 값으로 표시 (예. font-size:15pt, color:blue) ;(세미콜론) : 선언문과 선언문을 구분할 때에 사용

68 3. 기초부터 알아보는 스타일시트 특정 태그에 스타일 지정하기 그룹으로 만든 태그에 스타일 지정하기

69 3. 기초부터 알아보는 스타일시트 하위 태그에 스타일 지정하기

70 3. 기초부터 알아보는 스타일시트 클래스 이용하기

71 3. 기초부터 알아보는 스타일시트 아이디(ID) 이용하기
ID는 한 페이지에서 오직 하나만 유효하므로 ID는 한 태그에만 부여된다. 따라서 ID를 이용하여 스타일을 지정할 경우에는 ID를 지정된 하나의 태그에만 적용할 수 있다는 점이 Class와 다르다. 특히, ID는 자바스크립트로 ID에 지정한 스타일 자체의 값을 수정할 수 있는 연결고리 역할을 한다.

72 4. 배경을 꾸미는 스타일시트 배경 색상 바꾸기(background-color)

73 4. 배경을 꾸미는 스타일시트 배경 그림 바꾸기(background-image)
반복되는 배경 그림 바꾸기(background-repeat)

74 4. 배경을 꾸미는 스타일시트 배경 그림의 스크롤 지정(background-attachment)
배경 그림의 위치 지정하기(background-position)

75 4. 배경을 꾸미는 스타일시트 배경 그림의 속성을 한 번에 지정하기(background)

76 5. 테두리를 꾸미는 스타일시트 테두리 형태 지정하기(border-style)

77 5. 테두리를 꾸미는 스타일시트 테두리의 색상 지정하기(border-color)
테두리의 두께 지정하기(border-방향-width)

78 6. 세련미 풍기는 박스 여백 바깥 여백 지정하기(margin-방향) 바깥 여백 한 번에 지정하기(margin)
① margin-top ② margin-bottom ③ margin-left ④ margin-right 바깥 여백 한 번에 지정하기(margin)

79 6. 세련미 풍기는 박스 여백 안쪽 여백 지정하기(padding-방향) 문단의 위치와 폭, 높이 지정하기
① padding-top ② padding-bottom ③ padding-left ④ padding-right 문단의 위치와 폭, 높이 지정하기

80 7. 폰트 적용 스타일시트 글자 형태 지정하기(font-style) 글자 굵기 지정하기(font-weight)

81 7. 폰트 적용 스타일시트 글자 크기 지정하기(font-size) 글자 속성 한 번에 지정하기(font)

82 8. 문자와 문단을 꾸미는 스타일시트 자간 지정하기(letter-spacing) 단어 간격 지정하기(word-spacing)

83 8. 문자와 문단을 꾸미는 스타일시트 줄 간격 지정하기(line-height) 공백과 줄바꿈 지정하기(white-space)

84 9. 내 마음대로 문서를 꾸미는 스타일시트 문단 들여쓰기 지정하기(text-indent)
글자에 밑줄 긋기(text-decoration)

85 9. 내 마음대로 문서를 꾸미는 스타일시트 영문자의 대/소문자 속성(text-transform)

86 10. 목록을 꾸미는 스타일시트 목록의 머리 기호 바꾸기(list-style-type)

87 10. 목록을 꾸미는 스타일시트 목록의 머리 기호 바꾸기(list-style-type)

88 10. 목록을 꾸미는 스타일시트 그림으로 목록의 머리 기호 만들기(list-style-image)
목록의 들여쓰기 지정하기(list-style-position)

89 11. 하이퍼링크를 꾸미는 스타일시트 하이퍼링크 색상과 밑줄 표시하기

90 11. 하이퍼링크를 꾸미는 스타일시트 한 문서에 여러 가지 하이퍼링크 스타일 적용하기

91 Part 4. 업그레이드된 CSS3 01. CSS3 살짝 맛보기 02. 테두리 속성, border
03. 배경 이미지 속성, backgrounds 04. 그레이디언트 속성, gradient 05. 텍스트와 관련된 여러 가지 속성 06. CSS3를 이용한 간단한 애니메이션 07. 위치, 모양, 크기를 내 맘대로, transform 08. 애니메이션 속도를 제어하는 transition 09. 사용자 인터페이스(Basic User Interface) 만들기

92 1. CSS3 살짝 맛보기 크롬은 대부분의 CSS3를 지원하지만, 예제에 따라 접두어가 필요한 경우도 있다. 접두어를 사용하기 위해서는 다음과 같이 입력해야 한다.

93 2. 테두리 속성, Border 다양해진 테두리 효과

94 2. 테두리 속성, Border 테두리를 둥글게 만들기(border-radius)

95 2. 테두리 속성, Border 테두리에 그림자 만들기(box-shadow)
테두리에 이미지 사용하기 (border-image)

96 3. 배경 이미지 속성, Background 배경 이미지 크기 지정하기(background-size)
배경 이미지 위치 지정하기(background-origin)

97 3. 배경 이미지 속성, Background 배경 이미지 여러 개 지정하기(background)

98 4. 그레이디언트 속성, gradient 선형 그레이디언트 주기(linear-gradient)

99 4. 그레이디언트 속성, gradient 선형 그레이디언트에 투명도 주기(linear-gradient)

100 4. 그레이디언트 속성, gradient 선형 그레이디언트 반복하기(linear-gradient)
방사형 그레이디언트 만들기(radial-gradient)

101 4. 그레이디언트 속성, gradient 방사형 그레이디언트에 모양 주기 (radial-gradient)

102 4. 그레이디언트 속성, gradient 방사형 그레이디언트 반복하기(radial-gradient)

103 5. 텍스트와 관련된 여러 가지 속성 Text Shadow Word Wrapping

104 6. CSS3를 이용한 간단한 애니메이션 CSS3를 이용한 간단한 애니메이션
@keyframe을 이용하여 Animation의 중간 상태 기술하기

105 7. 위치, 모양 크기를 내 맘대로, transform

106 8. 애니메이션 속도를 제어하는 transition

107 9. 사용자 인터페이스(Basic User Interface) 만들기
Resizing Outline Offset

108 9. 사용자 인터페이스(Basic User Interface) 만들기
Multi-column

109 Part 5. 반응형 웹 디자인 01. 반응형 웹 디자인 이해하기 02. 그리드 시스템 03. 미디어 타입과 미디어 쿼리

110 1. 반응형 웹 디자인 이해하기 반응형 웹 디자인의 개념
반응형 웹 디자인이란, 다양한 해상도를 가진 기기들에 맞추어 웹 사이트를 디자인하는 것

111 1. 반응형 웹 디자인 이해하기 반응형 웹 사이트

112 1. 반응형 웹 디자인 이해하기 반응형 웹 디자인을 위한 브레이크 포인트
기기에 따라 화면이 달라지면 화면 폭에 따라 레이아웃을 바꿔주어야 한다. 화면 폭에 맞춰 레이아웃을 바꾸어 주도록 하는 시점이 바로 브레이크 포인트이다.

113 2. 웹 디자인 레이아웃을 위한 그리드 시스템 그리드 시스템의 기능 정보의 구조 정보의 전달과 반복
그리드 시스템을 사용하여 기능이나 서비스를 일정 간격 또는 공간적으로 배치함으로써 정보의 구조를 명확하게 한다. 정보의 전달과 반복 정보를 쉽게 검색할 수 있도록 도와준다. 이 경우 어느 정도 정보가 반복되지만, 그리드 시스템이 배치되는 정보의 공간을 적당히 설정함으로써 효율적으로 분류할 수 있다. 그뿐만 아니라 가독성을 향상시키고 정보가 반복될 때의 단조로움을 극복할 수도 있다.

114 2. 웹 디자인 레이아웃을 위한 그리드 시스템 그리드 시스템 참조 사이트

115 2. 웹 디자인 레이아웃을 위한 그리드 시스템 그리드 시스템 정적 그리드 시스템 동적 그리드 시스템 반응형 그리드 시스템
웹 사이트의 레이아웃 폭이 고정되어 웹브라우저의 크기가 바뀌어도 같은 크기로 보인다. 동적 그리드 시스템 웹 브라우저의 크기에 따라 화면의 크기가 변한다. 반응형 그리드 시스템 웹 브라우저의 크기에 따라 그리드 시스템이 변경된다.

116 3. 미디어 타입과 미디어 쿼리 미디어 쿼리 <head>와 </head> 사이에 사용할 때에는 미디어 타입의 요소를 그대로 사용, CSS 내에 규칙을 그대로 사용

117 3. 미디어 타입과 미디어 쿼리 미디어 쿼리의 문법

118 3. 미디어 타입과 미디어 쿼리

119 3. 미디어 타입과 미디어 쿼리

120 3. 미디어 타입과 미디어 쿼리

121 Thank you