css element

1. 엘리먼트는 좌우의 날개로 난다
CSS 가상선택자로 풍부한 표현하기
2014.05.17
하드코딩하는사람들 빼로

2. About 빼로
1) 빼빼로 데이에 태어남
2) 8년차 Front-end Developer
3) 마이다스아이티에서 근무 중
4) 웹 관련 교육에 관심이 많음
5) 웹 어플리케이션, 플래시 대체 모션 구현

3. 가상선택자란?
가상 선택자(pseudo selector)
가상 클래스(pseudo class) 가상 엘리먼트(pseudo element)
 :hover
 :active
 :link
 :visited
 :first-child
 :nth-child
 ::first-letter
 ::first-line
 ::before
 ::after
오늘 우리가 배울 내용!

4. 얼핏 보면 한겹같지만
속을 살짝 까보면 세겹!
삼겹살 엘리먼트
엘리먼트의 구조

5. #element
엘리먼트 본문이
나오기 전 컨텐츠를
삽입할 수 있음
우리가 흔히
사용하는 엘리먼트
바로 그것!
엘리먼트 본문이
나온 후 컨텐츠를
삽입할 수 있음
#element:before #element #element:after
가상선택자 :before와 :after

6.  컨텐츠를 넣을 수 있다.
 가로세로 값을 가질 수 있다.
 포지션을 잡을 수 있다.
 테두리선과 배경을 지정할 수 있다.
 Attribute값을 가져올 수 있다.
=> 풍부한 표현이 가능하다!
가상선택자의 특징

7. .clear {
content:””;
display:block;
clear:both;
}
우리에게 친숙한 :after
:after를 이용한 float clear하기
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

8. IE6, IE7이
지원하지 않는다!
지금까지 사용하지 못한 이유

9. 이제는 사용할 수 있는 이유
출처 : StatCounter 2014년 4월 대한민국 통계

10. 출처 : http://caniuse.com/#feat=css-gencontent
지원 브라우저

11.  싱글 콜론은 CSS2.1 규격 :before :after
 더블 콜론은 CSS3 규격 ::before ::after
CSS3 지원 브라우저만 적용하려면 더블콜론
IE8에도 적용하려면 싱글콜론
싱글콜론 : 과 더블콜론 ::의 차이

12. 무엇을 할 수 있을까?

13. :before를 이용한 블릿처리
<ul class=“list”>
<li>회원공지</li>
<li>등업요청</li>
<li>가입인사</li>
<li>내소개하기</li>
<li>수다방</li>
<li>멘붕게시판</li>
</ul>
.list>li:before {
content:”- “;
}
HTML CSS

14. :before를 이용한 블릿처리
마크업이 아니기 때문에
센스리더가 읽지 않아요!
결과물 웹 접근성 측면

15. :after를 이용한 Attribute 추가정보 제공하기
<a href=“http://www.hacosa.com”>하코사</a>
a:after {
content:”(“attr(href)”)”;
}
HTML
CSS
결과물
하코사(http://www.hacosa.com)

16. 스탭 가이드 만들기
본격! 풍부한 표현하기

17. 스탭 가이드 만들기
HTML CSS 기본설정
자동비율 Width
엘리먼트보다 가상선택자가
상위 레이어라서 z-index 설정
100%는 동그라미
IE8에서 네모로 보임

18. 스탭 가이드 만들기
CSS 가상선택자 설정 CSS 활성화 설정
표현용도의 before와 after는
레이어 우선순위만 차이가 있음
(after가 늦게 렌더링 되어 before보다 상단에 위치)
지금같이 둘 중 하나만 사용할 때는 아무거나 사용해도 상관없음!
CSS3 지원 브라우저에만 적용할거면
.last클래스보다 :last-child를 사용해보자!

19. 칸막이 만들기
본격! 풍부한 표현하기

20. CSS
칸막이 만들기
HTML
content가 빠지면 레이어가 나오지 않음
내용이 없어도 꼭 넣을것!
요 아래 내용은 아주 중요!
Height가 Border 높이,
Top이 위치가 된다.
두 값에 따라 위치와 길이가 결정됨
:first-child와 :before의 순서가 바뀌면 안됨!
li의 첫번째 엘리먼트의 before를 선택한 것
이미 설정한 가상 선택자의 속성을 없애고 싶을 땐
간단하게 content를 none으로 설정해주자
모든 CSS 속성이 해제된다
일반 엘리먼트의 display:none 급 효과
포지션 부모설정

21. 칸막이 만들기 - 생각해보기
디자이너가 다음과 같은 테이블 헤더가 담긴 디자인을 보내왔다.
어떻게 해결할 수 있을까?

22. 삼각형으로 다양한 표현하기
본격! 풍부한 표현하기

23. 삼각형으로 다양한 표현하기
HTML
결과물
Width나 Height가 0일때
삼각형 형성
아니! 그런 비밀이!?

24. 삼각형으로 다양한 표현하기
기본설정
위 네모를 border-방향-color: transparent를 이용하여
세모 모양으로 잘라낼 수 있음(배경을 투명하게 한다)
※ Border가 50px이기 때문에 가로세로 총 100px
border 아래 적어주자
예) border-top-color: transparent

25. 삼각형으로 다양한 표현하기
Border-top-color Border-left-colorBorder-bottom-colorBorder-right-color
Border-top-color
Border-bottom-color
Border-right-color
Border-left-color Border-bottom-color
Border-right-color Border-top-color
Border-left-color
Border-top-color
Border-right-color
Border-left-color
Border-right-color
Border-left-color
Border-bottom-color Border-top-color
Border-bottom-color
Border-right-color Border-left-color
Border-top-color
Border-bottom-color

26. 삼각형으로 다양한 표현하기 - 생각해보기
삼각형으로 다양한 도형 표현해보기 레이어 팝업을 말풍선으로 표현해보기
양쪽 모두 효과가 들어간 도형은
:before와 :after를 동시에 사용해야 함!

27. 마치며
IE6도 없고… IE7도 없고…
IE8은 과연 몇 년을 버틸 수 있을까?
동렬이도 없고…
종범이도 없고…

28. 머지않은 미래에 우리는…
캔버스, Transition, Transform…
얼마 남지 않았습니다!

29. 감사합니다