• 장소 : 서울 광화문 한국 마이크로 소프트
• 날싸 : 2016년 12월 17일

CSS Selectors in HTML

발표자 : 정찬명

*:focus와 :focus는 같은 기능을 한다.
가상선택자는 좀더 높은 우선순위를 가진다.
가상 클래스 선택자 : E:hover, 가상요소 선택자 : E::first-line (:을 하나만 사용해도 된다. 구분 편의상 2개 넣음)

앵커태그 속성을 정의할때 순서에 따라 적용 우선순위가 바뀐다. link, visited, focus, hover, active

<div hidden/> == {display: none;}

<p lang="en"/>을 사용해서 특정 언어를 셀렉팅할 수 있다.

div::before { content: 'hello'; } 컨텐츠에 관련된 요소라면 메시지를 넣는걸 추천하지 않는다.

E ~ F E 다음에 따르는 F전부 선택

:target #을 이용한 셀렉터

우선순위는 내부 스타일이나 외부 스타일 구분없이 뒤에 선언하기만 하면 더 높다.

CSS4

OOCSS + Sass = The best way to CSS

발표자 : 안형우

oocss나 bem과 같은 방식들이 나옴

모양을 클래스명으로 사용하는것을 지향해야한다.

• 내용시멘틱 : 컨텐츠와 관련된 클래스 네이밍
• 개발시멘틱 : 개발자가 이해할 수 있는 변수나 추상적인 이해가 필요한 네이밍

단독으로 사용하는 요소들(헤더, 푸터, 로고 등등..)은 굳이 모듈화할 필요가 있을까…

골격만 갖추고 있는 css 프레임워크도 존재함.

모듈별로 파일을 나누는것이 사용할때와 사용하지 않을때의 구분을 쉽게 둘 수 있음.

골격과 모양을 구분

wai-aria

단순 마크업만으로는 스크린리더에서 읽으면 이해할 수 없는것들이 많다.
wai-aria로 처리를 하면 스크립트 컨트롤을 통한 컴포넌트의 해석에 많은 도움을 줄 수 있다. 스크린리더에서 뭔가를 선택하고 클릭한거에 대한 읽기 접근성을 올릴 수 있다.

role, aria 같은 속성들로 어떻게 작동하는지에 대한 설명을 정의내려줄 수 있다.

네이티브 엘리먼트를 우선으로 사용하고 정 안되면 wai-area 속성들을 사용해서 부족한 부분들을 보충해주는 전략으로 코드를 작성해야 한다. (특히 인터랙티브 요소에서..)

Google AMP

리플로우, 리페인트 (모양이 변형되어 다시 렌더링하는 일) 작업이 어떠한 작업보다 성능비용이 가장 값비싸다.

커스텀 자바스크립트를 사용할 수 없으니 이게 어떠려나…

fastDOM 렌더링에 관한 라이브러리 (리서칭 해보기)

반응형 웹디자인

css 셀렉터 ~, + 가 상당히 유용할지도..

scroll-snap-type: mandatory iOS only : 스크롤링 할때 스내핑이 가능해진다!!!

html 마크업을 잘 해두는것이 좋다. (css를 교체하여 다양한 디자인을 만들 수 있다.)

멀티클래스보다는 단일클래스를 지정하고 값은 변수로 잡는것이 더 좋을거다. html 단순화

가상 클래스를 적극적으로 사용한다.

viewport : ‘width=device-width’ 정석으로..

방향 회전은 고려하지 않는것이 좋다.

미디어 쿼리 해상도 구분: 320~639 640~768 769~1279 1280~

역시 데스크탑 퍼스트!

* {box-sizing: border-box;} 추천

em, rem 안써도 된다고 함.

가변박스 (프레젠테이션 데이터 참고)

work-break: keep-all 줄바꿈…

스프라이트 이미지
-50% 중간 요소가 선택된다.

숨겨진 <i/>엘리먼트를 사용하여 block속성을 먹여 줄넘김 트릭을 사용할 수 있다.

UI 컴포넌트

컴포넌트별로 분리하여 사용 (sass파일별로 분리함)

.grid--modifier 형태로 곧장 모디파이어를 붙일 수 있다.
모디파이어에 멀티클래스를 부담없이 사용한다.

컴포넌트 목록 페이지를 따로 만들어두는것이 나을듯…

inVision 서비스 아니었던가…

UI 개발에 유용한 도구들..

피들러

불러오는 파일 바꿔치기. 운영중인 웹서비스를 디버깅할때 유용하게 사용할 수 있다. 긴급상황에서 프리뷰에 굉장히 유용하게 사용할 수 있다.

모바일 디버깅도 가능함!!
프록시 설정 필요함.