CSS 선택자와 디버그

1. CSS

2. 선택자와

3. 디버그
Do

4. It

5. Yourself
스노우키위,

6. 한성일

7. 개요

8. 선택자 (SELECTOR)
tag
tag id = “bear”
tag class=“bear_class”

9. 디버그 (DEBUG)
* Debug 란?
오류가 발생했을때 오류를 수정하는 방법
크롬의 개발자 도구를..

10. 디버그 (DEBUG)
1945년 9월 9일 하버드 대학교의
Mark2 Aiken Relay Calculator
에서 오류 발생
내부의 벌레를 잡아 해결

11. SELECTOR
잡았다 요놈!
처리가 필요한 영역을 잡는 것
잡을수 있어야 색을 넣고
위치를 바꾸고
………. 적용이 가능

12. 선택자

13. ID, CLASS,TAG
CSS 에서 또는 자바스크립트에서 선택을 위한 방법
TAG class=“class_1” /
TAG id=“id_1” /
TAG

14. 태그 여러개 선택
http://www.w3schools.com/css/css_syntax.asp
p {
color: red;
/*This is a single-line comment */
text-align: center;
}

15. TAG 선택
CSS 에서 또는 자바스크립트에서 선택을 위한 방법
TAG class=“class_1” /
TAG id=“id_1” /
TAG

16. TAG 선택
TAG
!DOCTYPE html
html
head
style
p {
text-align: center;
color: red;
}
/style
/head
body
pEvery paragraph will be affected by the style./p
p id=para1Me too!/p
pAnd me!/p
/body
/html

17. #ID 선택
!DOCTYPE html
html
head
style
#para1 {
text-align: center;
color: red;
}
/style
/head
body
p id=para1Hello World!/p
pThis paragraph is not affected by the style./p
/body
/html
TAG id=“id_1” /

18. .CLASS 선택 1
!DOCTYPE html
html
head
style
.center {
text-align: center;
color: red;
}
/style
/head
body
h1 class=centerRed and center-aligned heading/h1
p class=centerRed and center-aligned paragraph./p
/body
/html
TAG class=“class_1” /

19. .CLASS 선택 2
!DOCTYPE html
html
head
style
p.center {
text-align: center;
color: red;
}
/style
/head
body
h1 class=centerThis heading will not be affected/h1
p class=centerThis paragraph will be red and center-aligned./p
/body
/html
TAG class=“class_1” /
TAG 와 class 가 모두 만족하는 조건으로 찾기

20. 태그 여러개 선택
!DOCTYPE html
html
head
style
h1, h2, p {
text-align: center;
color: red;
}
/style
/head
body
h1Hello World!/h1
h2Smaller heading!/h2
pThis is a paragraph./p
/body
/html
TAG_A /
TAG_B /
TAG_C /

21. 혼자해보기 1
http://www.w3schools.com/

22. 혼자해보기 2

23. 개발자 도구(크롬)

24. 크롬 개발자 도구
다양한 프론트앤드 디버그와 실험

25. 크롬 개발자 도구
daum.net1 2 naver.com 요소검사

26. 로고체인지
돋보기 버튼을 누르고3
네이버 로고 선택4
5 로고 이미지 선택

27. 로고체인지
6 오른쪽 버튼 클릭
7 Edit as HTML 선택

28. 로고체인지
8 로고 수정
9 다음에서 가져온 로고로 변경 alt height 변경

29. 오류 만들기
1 네이버 접속 2 영역지정

30. 오류 만들기
2 왼쪽 Element 창에서 영역을 줄임
3 왼쪽 Element 창에서 영역을 줄임

31. STYLE 수정
1 영역지정
2 원하는대로 수정

32. 다양한 기능
Network
Sources

33. 다양한 기능
오류 수정 기능

34. 수고하셨습니다. :)