엘리먼트는 좌우의 날개로 난다
DESCRIPTION
css elementTRANSCRIPT
엘리먼트는 좌우의 날개로 난다CSS 가상선택자로 풍부한 표현하기
2014.05.17하드코딩하는사람들 빼로
:before :afte
r
About 빼로
1) 빼빼로 데이에 태어남
2) 8 년차 Front-end Developer
3) 마이다스아이티에서 근무 중
4) 웹 관련 교육에 관심이 많음
5) 웹 어플리케이션 , 플래시 대체 모션 구현
가상선택자란 ?
가상 선택자 (pseudo selector)
가상 클래스 (pseudo class) 가상 엘리먼트 (pseudo element)
:hover
:active
:link
:visited
:first-child
:nth-child
::first-letter
::first-line
::before
::after
오늘 우리가 배울 내용 !
얼핏 보면 한겹같지만속을 살짝 까보면 세겹 !
삼겹살 엘리먼트
엘리먼트의 구조
:before
:after
element
#element
엘리먼트 본문이나오기 전 컨텐츠를
삽입할 수 있음
우리가 흔히사용하는
엘리먼트 바로 그것 !
엘리먼트 본문이 나온 후 컨텐츠를 삽입할 수 있음
#element:before #element #element:after
가상선택자 :before 와 :after
컨텐츠를 넣을 수 있다 .
가로세로 값을 가질 수 있다 .
포지션을 잡을 수 있다 .
테두리선과 배경을 지정할 수 있다 .
Attribute 값을 가져올 수 있다 .
=> 풍부한 표현이 가능하다 !
가상선택자의 특징
.clear {content:””;
display:block;clear:both;
}
우리에게 친숙한 :after
:after 를 이용한 float clear 하기<ul> <li></li> <li></li> <li></li> <li></li>
</ul>
IE6, IE7 이 지원하지 않는다 !
지금까지 사용하지 못한 이유
이제는 사용할 수 있는 이유
출처 : StatCounter 2014년 4월 대한민국 통계
싱글 콜론은 CSS2.1 규격 :before :after
더블 콜론은 CSS3 규격 ::before ::after
Þ CSS3 지원 브라우저만 적용하려면 더블콜론
Þ IE8 에도 적용하려면 싱글콜론
싱글콜론 : 과 더블콜론 :: 의 차이
무엇을 할 수 있을까 ?
:before 를 이용한 블릿처리
<ul class=“list”> <li> 회원공지 </li> <li> 등업요청 </li> <li> 가입인사 </li> <li> 내소개하기 </li> <li> 수다방 </li> <li> 멘붕게시판 </li></ul>
.list>li:before { content:”- “;}
HTML CSS
:before 를 이용한 블릿처리
마크업이 아니기 때문에센스리더가 읽지 않아요 !
결과물 웹 접근성 측면웹 접근성도 오케이 !
:after 를 이용한 Attribute 추가정보 제공하기
<a href=“http://www.hacosa.com”> 하코사 </a>
a:after { content:”(“attr(href)”)”;}
HTML
CSS
결과물하코사 (http://www.hacosa.com)
스탭 가이드 만들기
본격 ! 풍부한 표현하기
스탭 가이드 만들기
HTML CSS 기본설정
자동비율 Width
엘리먼트보다 가상선택자가상위 레이어라서 z-index 설정
100% 는 동그라미IE8 에서 네모로 보임
스탭 가이드 만들기
CSS 가상선택자 설정 CSS 활성화 설정
표현용도의 before 와 after 는레이어 우선순위만 차이가 있음(after 가 늦게 렌더링 되어 before 보다 상단에 위치 )
지금같이 둘 중 하나만 사용할 때는 아무거나 사용해도 상관없음 !
굿굿 베리굿 !!
CSS3 지원 브라우저에만 적용할거면.last 클래스보다 :last-child 를 사용해보자 !
칸막이 만들기
본격 ! 풍부한 표현하기
CSS
칸막이 만들기
HTML
content 가 빠지면 레이어가 나오지 않음내용이 없어도 꼭 넣을것 !
요 아래 내용은 아주 중요 !
Height 가 Border 높이 ,Top 이 위치가 된다 .두 값에 따라 위치와 길이가 결정됨
:first-child 와 :before 의 순서가 바뀌면 안됨 !li 의 첫번째 엘리먼트의 before 를 선택한 것
이미 설정한 가상 선택자의 속성을 없애고 싶을 땐간단하게 content 를 none 으로 설정해주자모든 CSS 속성이 해제된다일반 엘리먼트의 display:none 급 효과
포지션 부모설정
칸막이 만들기 - 생각해보기
디자이너가 다음과 같은 테이블 헤더가 담긴 디자인을 보내왔다 .어떻게 해결할 수 있을까 ?
삼각형으로 다양한 표현하기
본격 ! 풍부한 표현하기
삼각형으로 다양한 표현하기
HTML
결과물
Width 나 Height 가 0 일때삼각형 형성
아니 ! 그런 비밀이 !?
삼각형으로 다양한 표현하기
기본설정
위 네모를 border- 방향 -color: transparent 를 이용하여세모 모양으로 잘라낼 수 있음 ( 배경을 투명하게 한다 )※ Border 가 50px 이기 때문에 가로세로 총 100px
자 ! 그럼 한 번 해볼까 ?
border 아래 적어주자예 ) border-top-color: transparent
삼각형으로 다양한 표현하기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
삼각형으로 다양한 표현하기 - 생각해보기
삼각형으로 다양한 도형 표현해보기 레이어 팝업을 말풍선으로 표현해보기
양쪽 모두 효과가 들어간 도형은:before 와 :after 를 동시에 사용해야 함 !
힌트 !
마치며
IE6 도 없고… IE7 도 없고…IE8 은 과연 몇 년을 버틸 수 있을까 ?
동렬이도 없고…종범이도 없고…
머지않은 미래에 우리는…
캔버스 , Transition, Transform…얼마 남지 않았습니다 !
감사합니다