웹 프로그래밍 - презентация, доклад, проект скачать

Нажмите для полного просмотра!

Содержание ▲

Вы можете ознакомиться и скачать презентацию на тему 웹 프로그래밍. Доклад-сообщение содержит 63 слайдов. Презентации для любого класса можно скачать бесплатно. Если материал и наш сайт презентаций Mypresentation Вам понравились – поделитесь им с друзьями с помощью социальных кнопок и добавьте в закладки в своем браузере.

Слайды и текст этой презентации

Слайд 1

Описание слайда:

Слайд 2

Описание слайда:

강의 목표 CSS3 언어가 무엇인지 안다. CSS3 스타일 시트를 작성하는 방법을 안다. CSS3 셀렉터 만드는 방법을 안다. CSS3로 텍스트 꾸미기를 할 수 있다. CSS3로 웹 페이지에 색과 모양을 꾸밀 수 있다. CSS3의 박스 모델을 이해하고 다룰 수 있다. CSS3로 HTML 태그의 배경과 테두리 등을 꾸밀 수 있다. CSS3로 그림자 효과를 만들 수 있다.

Слайд 3

Описание слайда:

CSS3 스타일 시트 CSS(Cascading Style Sheet) HTML 문서의 색이나 모양 등 외관을 꾸미는 언어 CSS로 작성된 코드를 스타일 시트(style sheet)라고 부름 현재 CSS3 : CSS level 3 CSS1 -> CSS2 -> CSS3 -> CSS4(현재 표준화 작업 중) CSS3의 기능 색상과 배경 텍스트 폰트 박스 모델(Box Model) 비주얼 포맷 및 효과 리스트 테이블 사용자 인터페이스

Слайд 4

Описание слайда:

예제 4–1 HTML 태그로만 작성한 웹 페이지

Слайд 5

Описание слайда:

예제 4–2 CSS3 스타일 시트로 꾸민 웹 페이지

Слайд 6

Описание слайда:

CSS3 스타일 시트 구성 예) 텍스트를 20픽셀 blue로 출력하는 CSS3 스타일시트 셀렉터 CSS3 스타일 시트를 HTML 페이지에 적용하도록 만든 이름 프로퍼티 스타일 속성 이름. 약 200개 정도의 프로퍼티 있음 값 프로퍼티의 값 주석문 스타일 시트 내에 붙이는 설명문으로 /* ... */. 여러 줄, 아무 위치에나 사용 가능 대소문자 구분 없음

Слайд 7

Описание слайда:

HTML문서에 CSS3 스타일 시트 만들기 HTML 문서에 CSS3 스타일 시트 만드는 방법 3 가지 태그에 스타일 시트 작성 style 속성에 스타일 시트 작성 스타일 시트를 별도 파일로 작성 태그나 @import로 불러 사용

Слайд 8

Описание слайда:

태그에 스타일 시트 만들기 전형적인 모양 태그는 태그 내에서만 사용 태그는 여러 번 작성 가능 스타일 시트들이 합쳐 사용 태그에 작성된 스타일 시트는 웹 페이지 전체에 적용

Слайд 9

Описание слайда:

예제 4-3 태그로 스타일 시트 만들기

Слайд 10

Описание слайда:

style 속성에 스타일 시트 만들기 HTML 태그의 style 속성에 CSS3 스타일 시트 작성 해당 태그에만 스타일 적용

Слайд 11

Описание слайда:

예제 4–4 style 속성에 스타일 시트 만들기

Слайд 12

Описание слайда:

외부 스타일 시트 파일 불러오기 .css 파일에 스타일 시트 저장 웹 페이지에서 CSS3 스타일 시트 파일을 불러 사용 동일한 스타일 시트를 웹 페이지마다 중복 작성 해소 웹 사이트의 전체 웹 페이지 모양의 일관성 확보 CSS3 스타일 시트 파일을 불러오는 방법 2 가지 태그 이용 @import 이용

Слайд 13

Описание слайда:

예제 4-5 태그로 CSS3 파일 불러오기

Слайд 14

Описание слайда:

예제 4-6 @import로 CSS3 파일 불러오기

Слайд 15

Описание слайда:

CSS3 규칙 – 스타일 상속 CSS3 스타일은 부모 태그로부터 상속 부모 태그(부모 요소) 자신을 둘러싸는 태그 예) 태그는 의 부모 태그 태그의 출력 글자 크기는 25px, 글자 색은 부모 태그를 상속받아 green

Слайд 16

Описание слайда:

예제 4–7 부모 스타일 상속

Слайд 17

Описание слайда:

CSS3 규칙 – 스타일 합치기와 오버라이딩 태그에 적용 가능한 스타일 브라우저의 디폴트 스타일 스타일 시트 파일에 선언된 스타일 태그에 선언된 스타일 style 속성에 선언된 스타일

Слайд 18

Описание слайда:

예제 4–8 여러 스타일 시트가 중첩되는 경우

Слайд 19

Описание слайда:

셀렉터 셀렉터(selector) HTML 태그의 모양을 꾸밀 스타일 시트를 선택하는 기능 여러 유형의 셀렉터 예) 웹 페이지의 모든 태그에 color:brown 스타일을 적용 하는 셀렉터 h3를 만든 사례

Слайд 20

Описание слайда:

셀렉터 설명을 위한 샘플 HTML 페이지

Слайд 21

Описание слайда:

태그 이름 셀렉터 태그 이름 셀렉터 태그 이름이 셀렉터로 사용되는 유형 셀렉터와 같은 이름의 모든 태그에 CSS3 스타일 시트 적용

Слайд 22

Описание слайда:

class 셀렉터 점(.)으로 시작하는 이름의 셀렉터 HTML 태그의 class 속성으로만 지정 가능 body.main { background : aliceblue; } 태그에만 적용 가능

Слайд 23

Описание слайда:

id 셀렉터 #으로 시작하는 이름의 셀렉터 HTML 태그의 id 속성으로만 지정 가능 div#etc { background : mistyrose; } 셀렉터는 다음 사용 불가능 안녕하세요

Слайд 24

Описание слайда:

셀렉터 조합하기 2 개 이상의 셀렉터 조합 조합에 적합한 HTML 태그에만 적용 자식 셀렉터(child selector) 부모 자식 관계인 두 셀렉터를 ‘>’ 기호로 조합 예) div > strong { color : dodgerblue; } 의 직계 자식인 에 적용되는 스타일 시트 자손 셀렉터(descendent selector) 자손 관계인 2 개 이상의 태그 나열 예) ul strong { color : dodgerblue; } 의 자손 에 적용되는 스타일 시트

Слайд 25

Описание слайда:

자식 셀렉터와 자손 셀렉터

Слайд 26

Описание слайда:

전체 셀렉터와 속성 셀렉터 전체 셀렉터(universal selector) 와일드 문자(*)를 사용하여 모든 태그에 적용시키는 셀렉터 예) * { color : green; } 웹 페이지의 모든 태그에 적용. 텍스트 색을 green으로 칠함 속성 셀렉터 HTML 태그의 특정 속성(attribute)에 대해 값이 일치하는 태그에만 스타일을 적용하는 셀렉터 예) input[type=text] { color : red; } type 속성값이 “text”인 태그에 적용

Слайд 27

Описание слайда:

가상 클래스(pseudo-class) 셀렉터 어떤 조건이나 상황에서 스타일을 적용하도록 만든 셀렉터 40개 이상의 많은 가상 클래스 셀렉터 있음 예1) a:visited { color : green; } 방문한 의 링크 텍스트 색을 green으로 출력 예2) li:hover { background : yellowgreen; } 태그에 마우스가 올라오면, yellowgreen을 배경색으로 출력, 내려가면 복귀

Слайд 28

Описание слайда:

:firstletter와 :hover의 사용 사례

Слайд 29

Описание слайда:

예제 4-9 셀렉터 활용

Слайд 30

Описание слайда:

CSS3에서 색 표현 3 가지 방법 16진수 코드로 표현 10진수 코드와 RGB()로 표현 색 이름으로 표현 CSS3 표준에서는 140개 색의 이름을 정하고 있음 사례

Слайд 31

Описание слайда:

CSS3의 표준 색 이름과 코드 중 일부(총 140개)

Слайд 32

Описание слайда:

색 관련 프로퍼티 색 관련 CSS3 프로퍼티들 사례 div> 요소의 배경색과 글자 색 지정

Слайд 33

Описание слайда:

예제 4–10 색 활용

Слайд 34

Описание слайда:

텍스트 텍스트를 꾸미는 CSS3 스타일 시트 예) text-decoration 프로퍼티로 하이퍼링크에 밑줄 제거

Слайд 35

Описание слайда:

예제 4-11 텍스트 꾸미기

Слайд 36

Описание слайда:

CSS3의 표준 단위

Слайд 37

Описание слайда:

폰트 CSS3의 폰트와 모양 폰트 형

Слайд 38

Описание слайда:

폰트 제어 CSS3 프로퍼티 폰트 패밀리, font-family 폰트 크기, font-size 폰트 스타일, font-style 폰트 굵기, font-weight

Слайд 39

Описание слайда:

단축 프로퍼티, font font 프로퍼티 font-style, font-weight, font-size, font-family를 순서대로 지정하는 단축 프로퍼티 예) 20픽셀로 이탤릭 스타일에 bold 굵기로 consolas 체 font : italic bold 20px consolas, sans-serif; font : 20px consolas, sans-serif; /* font-size, font-family외 생략 가능 */

Слайд 40

Описание слайда:

예제 4–12 CSS3 폰트 활용

Слайд 41

Описание слайда:

CSS3의 박스 모델 HTML 태그는 사각형 박스로 다루어진다 각 HTML 태그 요소를 하나의 박스로 다룸 박스 크기, 배경 색, 여백, 옆 박스와의 거리 등 제어 가능 의 박스 모델 사례

Слайд 42

Описание слайда:

박스 모델의 구성

Слайд 43

Описание слайда:

박스 모델을 구성하는 CSS3 프로퍼티

Слайд 44

Описание слайда:

박스 크기 - 태그의 박스 모델 사례

Слайд 45

Описание слайда:

예제 4-13 의 박스 모델 보이기

Слайд 46

Описание слайда:

박스 모델의 색, 테두리, 단축프로퍼티

Слайд 47

Описание слайда:

예제 4-14 박스 모델 활용

Слайд 48

Описание слайда:

예제 4–15 다양한 테두리 선 스타일

Слайд 49

Описание слайда:

둥근 모서리 테두리 만들기 - border-radius 테두리의 모서리를 둥글게 만듦

Слайд 50

Описание слайда:

예제 4–16 다양한 둥근 모서리 테두리

Слайд 51

Описание слайда:

이미지 테두리 만들기 - border-image 테두리에 이미지를 입힘 모서리(corner)와 에지(edge)로 구분하여 각각 이미지 입힘 border-width과 border-style 역시 미리 지정 필요 예) border.png에서 30픽셀 크기 조각으로 이미지 테두리 만들기

Слайд 52

Описание слайда:

Слайд 53

Описание слайда:

예제 4–17 이미지 테두리 만들기

Слайд 54

Описание слайда:

배경 다루기 배경 색이나 이미지지정 background-color, background-image 둘다 지정되면 배경 이미지가 출력되지 않는 영역에 배경색 출력 예) 배경 이미지의 위치, background-position 예) 배경 이미지 반복 출력, background-repeat 예)