Transcript CSS의 기본 문법 - 성균관대학교 정보통신대학 시스템 컨설턴트 그룹

시스템 컨설턴트 그룹
신입교육
CSS
작성자 15기 최원영
소속팀/상위부서 SCG
작성년월일 2014-02-16
문서분류 14년 신입교육용
COPYRIGHT ⓒ 2014성균관대학교 정보통신대학 시스템컨설턴트그룹 All Right Reserved.
목차
0 CSS?
1 CSS의 기본 문법
1-1 셀렉터와 Property 및 Value 복습
1-2 CSS의 적용방법 및 우선순위
1-3 Box Model
2 반응형 웹 디자인
2-1 반응형 웹이란?
2-2 미디어 쿼리를 이용한 반응형 웹 디자인
3 CSS3를 이용한 동적 효과
3-1 Animation
시스템 컨설턴트 그룹 신입교육
Chapter 0
CSS?
시스템 컨설턴트 그룹 신입교육
Chapter 1
CSS의 기본문법
1-1 셀렉터와 Property 및 Value 복습
1-2 CSS의 적용방법 및 우선순위
1-3 Box Model
시스템 컨설턴트 그룹 신입교육
1-1
Selector,
Property,
Value
-Selector : 스타일을 적용시키길 원하는 HTML 요소 (Tag, Class, Id)
-Property : 바꾸고자 하는 스타일 요소
-Value : Property에 적요시킬 값
4
1-1
기본 Selector
Selector
기능
.class
class 선택
#id
id 선택
element
element 선택
*
모든 element 선택
selector, selector
둘 이상의 셀렉터 사용
selectorA selectorB
셀렉터B 안에 있는 모든 셀렉터 A사용
[attribute]
attribute를 가진 모든 element 선택
-참고자료 : http://www.w3schools.com/cssref/css_selectors.asp
5
1-1
기본 Property
Property
기능
values
display
화면 표시 여부를 결정
none, block
float
화면정렬방향 결정
right, left
color
텍스트 컬러 결정
colors…
width, height
가로, 세로크기 결정
%, 특정길이(px 등…)
-참고자료 : http://www.w3schools.com/cssref/default.asp
6
1-2
CSS의 적용방법
1 Inline Styles
2 Internal Style Sheet
3 External Style Sheet
CSS 적용 우선순위 : Imline > Internal Style > External Style
Tag > id > class
7
1-2
CSS 예시
8
1-3
Box Model
-Width : 콘텐츠의 가로 길이
-Height : 콘텐츠의 세로 길이
-Border : 요소의 윤곽선
color,width,style
Ex)border-style: solid;
-Padding : 윤곽선 과 콘텐츠 사이의 여백
top, bottom, left, right
Ex)padding-top: 2px;
-Margin : 윤곽선 밖의 여백
top, bottom, left, right
9
1-3
Box Model의 활용
-방금 전 만든 HTML문서에 Header와 Footer div 추가하기.
-윤곽선은 width 2px, style은 solid, color는 black.
- Header과 Body 사이의 마진은 20px, Body와 Footer 사이의 마진은 10px.
10
Chapter 2
반응형 웹 디자인
2-1 반응형 웹 디자인이란?
2-2 미디어 쿼리를 이용한 반응형 웹 디자인
시스템 컨설턴트 그룹 신입교육
2-1
반응형 웹 디자인이
란?
- IT의 발달로 인터넷에 접속할 수 있는 기기가 다양해짐.
- 다양한 해상도의 스크린을 위한 웹 디자인의 필요성 대
두.
- 하나의 Document로 여러 해상도의 스크린에 최적화
가능.
12
2-1
반응형 웹 디자인
이란?
13
2-2
미디어 쿼리를 이
용한
반응형 웹 디자인
media type
media
feature
css영역
-mdeia type : 다양한 미디어에 따라 각각의 스타일을 적용시키기 위해 선언
Ex)screen, all, print 등
-media feature : 다양한 상황에서 적용범위를 제한하기 위해 사용, and로 다수 연결.
Ex)width, height 등(앞에 min 또는 max 추가가능)
14
2-2
미디어 쿼리 실습
브라우저 너비가 400px 이하일 떄 스타일이 다르게 적용되는 반응형 css 구성하
기.
<브라우저 너비가 400px이하가 되면>
-모든 div의 너비가 100px로 변화.
-header와 footer의 배경색은 검은색으로 변화. body의 배경색은 흰색으로 변화.
-body의 윤곽선은 2px의 검은색으로 변화.
-header와 footer의 윤곽선은 제거.
15
Chapter 3
CSS3를 이용한 동적 효과
3-1 Animation
시스템 컨설턴트 그룹 신입교육
3-1
Animation
- CSS3에 새로 추가된 기능 중 하나
- ketframes를 통해 구현 가능.
- 이를 이용함으로써 플래시와 자바스크립트 대체 가능.
17
3-1
Animation
Tags
-animation-duration : 애니메이션의 구현시간 조작
animation-duration : 5s;
- animation-delay : 애니메이션이 웹 페이지 로딩후 설정한 시간이 지난 다음 시작되게 합니다.
animation-delay : 3s;
- animation-iteration-count : 애니메이션 반복 횟수 지정, 숫자 또는 infinite 사용.
- animation-direction : 애니메이션의 반복 형식 지정. reverse, alternate 등 사용.
- animation-fill-mode : 애니메이션이 중지되었거나 끝났을때의 스타일을 조절. forwards, backwards 등
사용
!! 사파리와 크롬에서 적용시키기 위해서는 항상 앞에 -webkit-를 붙여야 함.
18
3-1
Animation
활용
19
3-1
과제
애니메이션이 들어간 반응형 웹 디자인
기한 : ~ 3월 22일 밤 6시
[email protected]
-width가 600px 이하가 될 시에 글자 크기 변화.
-img는 페이지 로딩 후 일정시간이 지난 후 나타남.
-keyframes와 미디어 쿼리를 잘 활용할 것.
20