Submit Search
Upload
[20160115] 작심 10시간 - CSS
•
0 likes
•
15 views
Wonjun Shin
Follow
설리번 프로젝트 1기 "작심 10시간! - 나만의 웹사이트 기획하고 개발하기" 커리큘럼 CSS 강의 자료입니다.
Read less
Read more
Education
Report
Share
Report
Share
1 of 56
Download now
Download to read offline
Recommended
02_CSS -작심 10시간! 나만의 웹사이트 기획하고 만들기
02_CSS -작심 10시간! 나만의 웹사이트 기획하고 만들기
설리번 프로젝트
웹표준(XHTML+CSS)
웹표준(XHTML+CSS)
ymtech
4주 CSS Layout
4주 CSS Layout
지수 윤
웹표준 (XHTML + CSS)
웹표준 (XHTML + CSS)
ymtech
[전파교육] css day 2014
[전파교육] css day 2014
Kyoung Hwan Min
XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영
XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영
XpressEngine
Asp.net Razor
Asp.net Razor
Sang Yun Kim
처음부터 다시 배우는 HTML5 & CSS3 강의자료 8일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 8일차
Michael Yang
Recommended
02_CSS -작심 10시간! 나만의 웹사이트 기획하고 만들기
02_CSS -작심 10시간! 나만의 웹사이트 기획하고 만들기
설리번 프로젝트
웹표준(XHTML+CSS)
웹표준(XHTML+CSS)
ymtech
4주 CSS Layout
4주 CSS Layout
지수 윤
웹표준 (XHTML + CSS)
웹표준 (XHTML + CSS)
ymtech
[전파교육] css day 2014
[전파교육] css day 2014
Kyoung Hwan Min
XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영
XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영
XpressEngine
Asp.net Razor
Asp.net Razor
Sang Yun Kim
처음부터 다시 배우는 HTML5 & CSS3 강의자료 8일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 8일차
Michael Yang
ABCD Foundation_Codingstudy
ABCD Foundation_Codingstudy
Woong Choi
CSS3 Top10
CSS3 Top10
Toby Yun
2 1. html4.01
2 1. html4.01
JinKyoungHeo
[Basic HTML/CSS] 5. css - selector, units
[Basic HTML/CSS] 5. css - selector, units
Hyejin Oh
Clearboth Study 14th
Clearboth Study 14th
Jiho Choo
[EWD2014]CLASS05
[EWD2014]CLASS05
JY LEE
ASP.NET MVC Framework 개발자를 위한 Razor Syntax.pdf
ASP.NET MVC Framework 개발자를 위한 Razor Syntax.pdf
SangHoon Han
처음부터 다시 배우는 HTML5 & CSS3 강의자료 5일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 5일차
Michael Yang
Android Study Summary 2-2
Android Study Summary 2-2
Seonmun Choi
Html5 소개 가이드
Html5 소개 가이드
Jong-hyun Park
CSS Reset
CSS Reset
Toby Yun
[WEB UI BASIC] CSS_2
[WEB UI BASIC] CSS_2
Jae Woo Woo
HTML5&CSS3 8장. 눈을 즐겁게
HTML5&CSS3 8장. 눈을 즐겁게
Youngkwon Lee
에어_HTML/CSS_02
에어_HTML/CSS_02
Hiddenest Lee
[122]네이버의모던웹라이브러리 박재성
[122]네이버의모던웹라이브러리 박재성
NAVER D2
엘리먼트는 좌우의 날개로 난다
엘리먼트는 좌우의 날개로 난다
정석 양
유용한 퍼블리싱 기법 3가지 - 오정훈
유용한 퍼블리싱 기법 3가지 - 오정훈
ebraceteam
처음부터 다시 배우는 HTML5 & CSS3 강의자료 11일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 11일차
Michael Yang
Web_03_Front-end Advance
Web_03_Front-end Advance
team air @ Dimigo
웹 브라우저는 어떻게 동작하나? (2)
웹 브라우저는 어떻게 동작하나? (2)
Joone Hur
More Related Content
Similar to [20160115] 작심 10시간 - CSS
ABCD Foundation_Codingstudy
ABCD Foundation_Codingstudy
Woong Choi
CSS3 Top10
CSS3 Top10
Toby Yun
2 1. html4.01
2 1. html4.01
JinKyoungHeo
[Basic HTML/CSS] 5. css - selector, units
[Basic HTML/CSS] 5. css - selector, units
Hyejin Oh
Clearboth Study 14th
Clearboth Study 14th
Jiho Choo
[EWD2014]CLASS05
[EWD2014]CLASS05
JY LEE
ASP.NET MVC Framework 개발자를 위한 Razor Syntax.pdf
ASP.NET MVC Framework 개발자를 위한 Razor Syntax.pdf
SangHoon Han
처음부터 다시 배우는 HTML5 & CSS3 강의자료 5일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 5일차
Michael Yang
Android Study Summary 2-2
Android Study Summary 2-2
Seonmun Choi
Html5 소개 가이드
Html5 소개 가이드
Jong-hyun Park
CSS Reset
CSS Reset
Toby Yun
[WEB UI BASIC] CSS_2
[WEB UI BASIC] CSS_2
Jae Woo Woo
HTML5&CSS3 8장. 눈을 즐겁게
HTML5&CSS3 8장. 눈을 즐겁게
Youngkwon Lee
에어_HTML/CSS_02
에어_HTML/CSS_02
Hiddenest Lee
[122]네이버의모던웹라이브러리 박재성
[122]네이버의모던웹라이브러리 박재성
NAVER D2
엘리먼트는 좌우의 날개로 난다
엘리먼트는 좌우의 날개로 난다
정석 양
유용한 퍼블리싱 기법 3가지 - 오정훈
유용한 퍼블리싱 기법 3가지 - 오정훈
ebraceteam
처음부터 다시 배우는 HTML5 & CSS3 강의자료 11일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 11일차
Michael Yang
Web_03_Front-end Advance
Web_03_Front-end Advance
team air @ Dimigo
웹 브라우저는 어떻게 동작하나? (2)
웹 브라우저는 어떻게 동작하나? (2)
Joone Hur
Similar to [20160115] 작심 10시간 - CSS
(20)
ABCD Foundation_Codingstudy
ABCD Foundation_Codingstudy
CSS3 Top10
CSS3 Top10
2 1. html4.01
2 1. html4.01
[Basic HTML/CSS] 5. css - selector, units
[Basic HTML/CSS] 5. css - selector, units
Clearboth Study 14th
Clearboth Study 14th
[EWD2014]CLASS05
[EWD2014]CLASS05
ASP.NET MVC Framework 개발자를 위한 Razor Syntax.pdf
ASP.NET MVC Framework 개발자를 위한 Razor Syntax.pdf
처음부터 다시 배우는 HTML5 & CSS3 강의자료 5일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 5일차
Android Study Summary 2-2
Android Study Summary 2-2
Html5 소개 가이드
Html5 소개 가이드
CSS Reset
CSS Reset
[WEB UI BASIC] CSS_2
[WEB UI BASIC] CSS_2
HTML5&CSS3 8장. 눈을 즐겁게
HTML5&CSS3 8장. 눈을 즐겁게
에어_HTML/CSS_02
에어_HTML/CSS_02
[122]네이버의모던웹라이브러리 박재성
[122]네이버의모던웹라이브러리 박재성
엘리먼트는 좌우의 날개로 난다
엘리먼트는 좌우의 날개로 난다
유용한 퍼블리싱 기법 3가지 - 오정훈
유용한 퍼블리싱 기법 3가지 - 오정훈
처음부터 다시 배우는 HTML5 & CSS3 강의자료 11일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 11일차
Web_03_Front-end Advance
Web_03_Front-end Advance
웹 브라우저는 어떻게 동작하나? (2)
웹 브라우저는 어떻게 동작하나? (2)
[20160115] 작심 10시간 - CSS
1.
SULLIVAN PROJECT
2.
목차 1. 오늘 우리가
할 것은? 2. CSS란? 3. CSS를 사용하는 방법 4. Selector(선택자) 5. CSS의 Property들 6. 혼자서 만들어보자!
3.
HTML CSS JAVASCRIPT Front-end back-end
4.
HTML CSS JAVASCRIPT Front-end back-end
5.
CSS
6.
Cascading StyleSheets
7.
꾸며주는 놈
8.
Selector { property: value; } CSS
기본 문법 엘리먼트.style.property = value;
9.
CSS를 사용하는 방법
3가지
10.
HTML파일 내에서 사용하는
방법 1. style 속성 2. style 태그 <TAG style=“css코드”> <style> css코드 </style> 보통 head 안에서 쓴다.
11.
.css 파일을 따로
만들고 html 파일로 로드하는 방법 중요(가장 많이 사용됨) *** <link rel=“stylesheet” href=“css파일경로”>
12.
경로 절대적인 경로값(ex -
C:₩어쩌구₩저쩌구) 매우 중요(기본 지식) ******** 상대경로 절대경로 상대적인 경로값(ex - ./a.html) .(현재 폴더), ..(상위폴더)
13.
상대경로 연습 a.html .(현재 폴더)
..(상위폴더) HTML b.css CSS One Two c.css
14.
(다시)CSS 기본 문법 Selector
{ property: value; }
15.
꾸미고자하는 대상을 가리키는
것 Selector(선택자)
16.
주요 Selector 태그명 { property:
value; } #id { property: value; } .class { property: value; }
17.
태그명 p { property: value; } <p
id=“id_1”> id_1 아이디 </p> <p class=“class_1”> class_1 클래스1 </p> <p class=“class_1”> class_1 클래스2 </p>
18.
id? class? #id_1 { property:
value; } <p id=“id_1”> id_1 아이디 </p> <p class=“class_1”> class_1 클래스1 </p> <p class=“class_1”> class_1 클래스2 </p>
19.
id? class? .class_1 { property:
value; } <p id=“id_1”> id_1 아이디 </p> <p class=“class_1”> class_1 클래스1 </p> <p class=“class_1”> class_1 클래스2 </p>
20.
(또 다시)CSS 기본
문법 Selector { property: value; }
21.
하나씩 쳐보면서 알아보자
22.
text -align -decoration font -size -weight -family -color background -color -size -position 그냥
사용가능 Selector { property-option: value; } Option 옵션이라는 용어는 편의상 부르는 말이므로 굳이 용어를 외울 필요는 없음.
23.
color width height auto... px pt em Color name #COLORCODE(HEX) rgb(red, green,
blue) rgba(red, green, blue, alpha) align left center right Value 말 그대로 값이다
24.
margin / padding
25.
margin:0px; 마진 상 하 우 좌 padding:0px; 패딩 상 하 우 좌
26.
margin:10px; 마진 상 하 우 좌 padding:10px; 패딩 상 하 우 좌
27.
margin:Opx; 마진 margin /
padding 사용법 적용방향 O : 숫자
28.
margin:Opx Opx; 마진 margin
/ padding 사용법 적용방향 O : 숫자
29.
margin:Opx Opx Opx;
마진 margin / padding 사용법 적용방향 O : 숫자
30.
margin:Opx Opx Opx
Opx; 마진 margin / padding 사용법 적용방향 O : 숫자
31.
margin-left:Opx; 마진 margin / padding
사용법 적용방향 O : 숫자 margin-right:Opx; margin-top:Opx; margin-bottom:Opx;
32.
position
33.
relative absolute fixed
34.
fixed
35.
display
36.
block inline inline-block none
37.
block inline inline-block none 단락을 방해하지 않는다 width와
height를 바꿀 수 없다
38.
block inline inline-block none 단락을 방해하지 않는다 width와
height를 바꿀 수 없다
39.
block inline inline-block none 단락을 방해하지 않는다 width와
height를 바꿀 수 없다
40.
block inline inline-block none 단락을 방해하지 않는다 width와
height를 바꿀 수 없다 대표 inline 태그 - span, a 등
41.
block inline inline-block none 새 줄에서 생성되며
좌우로 꽉찬다 한 줄에는 한놈만 올 수 있다 width와 height를 바꿀 수 있다
42.
block inline inline-block none 새 줄에서 생성되며
좌우로 꽉찬다 한 줄에는 한놈만 올 수 있다 width와 height를 바꿀 수 있다
43.
block inline inline-block none 새 줄에서 생성되며
좌우로 꽉찬다 한 줄에는 한놈만 올 수 있다 width와 height를 바꿀 수 있다
44.
block inline inline-block none 새 줄에서 생성되며
좌우로 꽉찬다 한 줄에는 한놈만 올 수 있다 width와 height를 바꿀 수 있다 대표 block 태그 - div, header, section, footer 등
45.
block inline inline-block none 생성은 inline처럼!! 크기 변경은
block처럼!!
46.
block inline inline-block none 생성은 inline처럼!! 크기 변경은
block처럼!!
47.
block inline inline-block none 생성은 inline처럼!! 크기 변경은
block처럼!!
48.
block inline inline-block none 안 보 인
다
49.
이것들을 활용해서 직접
만들어보자! (물론 이것들만으로는 안됨)
50.
51.
52.
350px 100px 350px padding 5px
53.
54.
HTML CSS JAVASCRIPT Front-end back-end
55.
HTML CSS JAVASCRIPT Front-end back-end
56.
JAVASCRIPT
Download now