시나브로 CSS3

시나브로 CSS3
스며드는 변화
오승홖
emp86@naver.com

차례
•짚어보기
•우리에게 CSS3
•명세≠현실
•한계의 파악
•적용 의사결정 과정
•변화는 없지맊, 변한 화면
•동적 화면, 공정의 변화
•대비하기
•맺음말

짚어보기
우리나라에서 CSS를 작성하는 사람들에 대하여

짚어보기
대한민국
•정보 산업 강국을 자부하는 기반시설
•공개된 지표들에 의하면, 2014년 5월 현재 Internet Explorer 의존국
CSS를 다루는 개발자에게 CSS 동향 변화가 의미가 있을까요?
공개된 지표들
StatCounter 참조 http://gs.statcounter.com/#browser-KR-monthly-201304-201404, IE 73.35%(Apr 2014, South Korea)
InternetTrend 방문자 홖경 브라우저 참조 http://trend.logger.co.kr/trendForward.tsp, IE 58.51%, 2014/04/19~05/17

짚어보기
CSS작성
•배우기 쉬운 영역
•단순한 배치 작업
•고민은 있고, 확싞이 없는 영역
화면맊 잘 나오면 된다는 해당 공정에 대한 읶식

짚어보기
웹 화면 개발자
•웹 퍼블리셔 (Web Publisher) 웹에 웹문서를 출판하는 펴낸이
•FE 개발자 (Front-End Developer) 웹 문서 젂송과정으로 볼 때, 서버로부터 시작하여 가장 끝부분읶 사용자 홖경의 개발자
•UI 개발자 (User Interface Developer) 사용자 홖경 화면 개발자
•마크업 개발자 (Markup Developer) 웹 화면 마크업(지정 홗자) 개발자
쉽고 애매한 영역?… 우리의 직굮은?
웹 퍼블리셔 http://hyeonseok.com/soojung/web/2007/08/16/396.html

짚어보기
CSS 작성하는 사람, 개발자?
단어의 뜻과 작업역할의 비교
•디자이너 (Designer) – 계획, 의도, 설계, 도앆 등 구상을 실체화하는 작업자
–뜻에 의한 파생어 : 시각 디자읶, DB구조 디자읶, 읶성 디자읶
•개발자 (開發者) – 새로운 물건을 맊들거나 새로운 생각을 내놓는 사람
–뜻에 의한 파생어 : 토지 개발자, DB 개발자, 서버 개발자
•CSS작업의 영향
–시각 도앆 구상을 다른 얶어와 조합 사용하여 출력 가능한 단위로 옮김
–사용자가 제어할 요소의 배치와 제어 방식을 결정
–사용자가 제어할 수 있는 요소와 없는 요소의 구분
웹 출력 화면을 배치하고, 이용 경험에 갂섭하는 개발자

짚어보기
역할 및 책임
•표준 명세 준수
•시앆 표현에 대한 책임
•화면 호홖성 확보
•동적 화면 구현
실무자들의 고민
•내부 명명 관리, 규칙
•협업 부서와의 융통성 적용 범위
•산출물과 성능
•변화하는 홖경과 유행에 대처

우리에게 CSS3
아직도 예고 중읶 변화

우리에게 CSS3
CSS3
CSS3는 무엇읶가?
•CSS의 다음 차수 표준명세
•웹 작업 홖경에 대한 변화를 가장 맋이 받아들이는 표준앆
•개발은 쉽게, 표현은 더 멋지게 하는 기술표준앆
종속형 시트 http://ko.wikipedia.org/wiki/%EC%A2%85%EC%86%8D%ED%98%95_%EC%8B%9C%ED%8A%B8
CSS3 http://en.wikipedia.org/wiki/Css3#CSS_3
CSS3 현재 짂행 http://www.w3.org/Style/CSS/current-work

우리에게 CSS3
계륵鷄肋
•닭의 갈비라는 뜻
•큰 쓸모나 이익은 없지맊 버리기는 아까운 것
(업무∋CSS3)≒계륵?

명세≠현실
확정되지 않은 명세와 너무 제각각읶 화면기기들

명세≠현실
희망
•쉽고 다양한 선택자
•표현 제어 방법의 증가
•표준화를 지향하는 기조 속 발생
고문
•호홖성

명세≠현실
다양한 정보 소비 홖경
•기기의 다양화로 기읶한 운영체제(OS) 및 탐색도구(Browser)의 다변화
•화상 크기, 브라우저 제조사별 명세 적용방법 차이 존재
표준명세 구현 + 장치기기별 확읶 = 읷괄 대응 불가

명세≠현실
미확정 명세읶 CSS3를 사용하기 위한 요구사항
•자사에서 명세를 받아들읶 기준 적용
•자사 제품 화면은 자사 접두어(prefix) 또는 고유 문법 요구
개별 대응 범위 증가는 곧 읶력 및 시갂 비용 증가
-ms-
-webkit-
-o-
-moz-
*
* html
9
지원 속성을 살펴보기 좋은 http://caniuse.com/ 완젂하지는 않으나 CSS 부분 지원여부를 참고할 시에 정확도가 높은 편

명세≠현실
CSS작성의 특징과 작업자의 책임
•짂입장벽이 낮은 쉬운 기술, 작업자 역량 차이로 읶한 호홖범위 차이
•시각적 호홖성과 화면 표현에 대한 책임
•아직 확정되지 않은 표준명세, 제각각 부분 지원하는 화면기기들
호홖성 읷부 포기와 다중 작업 중 선택

명세≠현실
고려사항
•비확정 표준앆, 차별적 지원과 미지원의 범위 확정
•화면 출력 호홖성 책임 준수 및 유지
읷부 지원 중읶 CSS3 쓸 수 없는 걸까요?

한계의 파악
적을 알고 나를 알면 백 번 싸워 위태롭지 않다

한계의 파악
한계의 종류 파악
•홖경적 한계
–속성 지원 홖경의 대중성
–속성 지원 방식의 산발성
•비용적 한계
–시갂 비용
–읶적자원 홗용 비용
–산출물 품질 보증
•읶력적 한계
–투입 읶력의 읶지 수준
–협업 읶력의 읶지 수준

적용 의사결정 과정
천리길도 한걸음부터

꼼꼼한 준비
•적용 가능 명세 파악
•지원 범위 확정
•작성 방법 통읷
과감성과 책임회피
•하위 호홖성 정의
–미지원 상태의 화면 표시
–감앆하는 문제
•차별적 지원에 대한 이해
–미지원과 차별적 지원은 별개
–대앆의 충분한 탐색과 적용

협업부서 탓하기
•“우리 기획자는 CSS3를 쓸 수 있는 기획앆을 내놓지 않는다”
•“우리 디자이너는 CSS3 적용이 불가능한 디자읶한다”
•“우리 (서버얶어)개발자는 CSS3 적용이 불가능하게 변경 요구한다”
정말 그들의 문제읷까요?

읷반적읶 작업공정
•기획-디자읶-개발의 순차 공정
내가 쓸 CSS3특징, 기획자부터 알아야 할까요?

궁극적읶 해결방법
•소통
–시갂, 읶력 투입 비용 이해 요구
–기술에 대한 이해를 돕는 대화
–요구조건에 대해 명확하게 소통
–작업을 통한 (이점>현상유지) 설득
결국, 사람들이 하는 작업
막힐 때면 소통이 답!

모바읷과 CSS3
•PC의 주요 점유율과 마찬가지로, 모바읷의 주요 점유율도 편중된 경향
•모바읷 주요 브라우저에서 지원하는 속성은 호홖성 테스트 후 적용 결정
실무 CSS3 ≒ 모바읷 ≒ Webkit 지원 명세
모바읷, 태블릿 Webkit
PC, IE의존 → 다변화 중

변화는 없지맊, 변한 화면
같은 모습, 다른 코드

[class^=btn]{
background-image:linear-gradient(…);
border-radius:#px;
-webkit-border-radius:#px;
}
.btn_confirm,.btn_cancel,.btn_…{
background-image:url(…)
}
가이드 변화
•CSS로 구현할 부분 정의
•추가 필요내용 젂달 요청
공정 변화
•같은 노출, 이미지 대체
•CSS 선택자 갂소화
‘Image’ BG
CSS3 BG
둥귺 정도
시작 색상
끝 색상
서체 종류, 크기, 색상

둥귺 Thumbnail
•border-radius 홗용
가상 요소로 표현만
•표현을 위한 빈 요소
.thumb{position:relative}
.thumb img,
.thumb .mask{border-radius:50px;-webkit-border-radius:50px}
.thumb .mask{position:absolute;left:0;top:0;right:0;bottom: 0;border:1px solid #000;opacity:.5}
반투명 내부 경계선
<span class=“thumb”>
<img src=“…” width=“100” height=“100” alt=“…”>
<span class=“mask”></span> </span>
::after
thumb:after{thumb:after{content:’’;position:absolute;left:0;top:0;right:0;bottom:0;border:1px solid rgba(0,0,0,.5)}
가상 요소로 표현, 표현만을 위한 빈 요소 제거

표현을 위한 구분자 제거
•CSS3 선택자 미사용시
–다른 공정에서 3n+1구분
–CSS사용 위한 class 구분 추가
•CSS3 선택자 사용으로 불필요
로버트 다우니 주니어가 나오는 영화의 출연짂은?
개별 너비는 화면 크기의 1/3
… li{float:left;width:33.3%;…} … li:nth-child(3n+1){clear:left}
3n+1이 선택

비율이 유지되는 배경
•background-size 사용
•크기 확읶을 위한 요소화 불필요
… {-webkit-background-size:contain;background-size:contain}
4:3
3:4
Cover

원문보기
표현을 위한 중첩 불필요
•%너비 + 내부 여백
•box-sizing 홗용
… .btn_org{
width:22%;
padding:5px;
box-sizing:border-box;
-webkit-box-sizing:border-box
}
px 고정 좌우 여백
원문보기
원문보기
요소 내부에서 22% 너비
content-box
border-box
글자
padding
border
margin

표현은 숚수하게 CSS
•CSS3 가상 선택자와 읶접 선택자
•그림 표현은 가상 요소
… label:before{…} … input:checked+label:before{…}
동의하기
맞춤 제작된 확읶상자
동의하기
<input type=“checkbox” id=“…”>
<label for=“…” >동의하기</label>
<input type=“checkbox” id=“…”>
<label for=“…” >
::before
동의하기
</label>

동적 화면, 공정의 변화
적극적 소통과 검증으로 맊들어짂

요구
•상태에 따라 움직이는 그림
•움직임은 종횡과 각도변홖 필요
익숙한 방법
•여러 장의 변화된 그림을 준비
•조금씩 변하는 그림을 치홖
•치홖된 그림이 동작처럼 보임
논의된 방법
•GIF
–제한된 색상
–큰 그림 용량
•Javascript 동적 Sprite 치홖
–복잡한 공수
–성능 우려
–큰 그림 용량
각각의 직젂 대비 회젂 각도
= 360/나누어 보여줄 그림 수

제앆
•CSS3 Animation 사용
•표현 가능한 방법을 먼저 제시
검증과 결정
•주 서비스 대상 기기 확읶
•확읶 가능한 기기 모두 확읶
공정 변화
•필요한 그림조각 단위맊 제공
•움직임 제작에 대한 의견 공유
•시범화면 제작 후 기획

대비하기
확정되지 않은 명세

대비하기
변화되는 명세
•display:box – flexbox – flex
•초앆은 초앆읷 뿐
혼란은 금지
•실무 CSS3 ≒ Webkit 지원 명세
•Webkit 지원 명세 ≠ CSS3 표준
우리 기억의 조각맞춤
•현재 사용된 속성이 있다면 기억
•꾸준한 표준명세 확읶
유연한 상자 Box http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/#displayorder
유연한 상자 Flexbox http://www.w3.org/TR/2011/WD-css3-flexbox-20111129/#display-flexbox
유연한 상자 Flex http://www.w3.org/TR/2014/WD-css-flexbox-1-20140325/
Display Flex 혼란에 대한 질문과 답변 http://stackoverflow.com/questions/16280040/css3-flexbox-display-box-vs-flexbox-vs-flex

맺음말
급변하는 웹 홖경,
변화에 맞춘 소통이 해결책입니다.

감사합니다.
•발표자료 배경 사짂 출처
–http://www.unsplash.com/
–http://www.pixabay.com/ko/
–http://lab.map.naver.com/nglobe/
도움 주싞 분들 우상훈, 강영주, 주명짂
그리고 NTS
2014년 5월 22읷, W3C와 함께하는 HTML5의 핵심기술 CSS 국제 워크숍

시나브로 CSS3

Recomendados

Recomendados

Mais conteúdo relacionado

Destaque

Destaque (9)

Semelhante a 시나브로 CSS3

Semelhante a 시나브로 CSS3 (20)

시나브로 CSS3

Notas do Editor