CSS
ADVERTISEMENT
-
웹디자인
쓰기 모드와 CSS 레이아웃
레이아웃 제작에 쓸 수 있는 여러 기술에 관련한 명세를 명쾌하게 설명해 CSS 작동 원리의 이해를 돕는 《새로운 CSS 레이아웃》의 저자 레이철 앤드루, 그녀가 CSS 레이아웃과 CSS 전반에 쓰기 모드(writing mode)가 미치는 영향과 중요성에 관해 설명한 글을 소개합니다. 쓰기 모드는 쓰기 방식이 다른 언어를 사용하는 문서를 만들 때 사용합니다.... -
웹디자인
Sass 믹스인 중복 배제하기
Sass는 작성된 스타일 시트와 브라우저에서 해석할 .css 파일의 계층이다. Sass는 CSS를 더 쉽게 작성하고 유지할 수 있는 기능을 제공하고, 스타일시트 작성자가 CSS를 DRY하게 유지관리할 수 있도록 돕는다. 우리가 원하는 대로 한 곳에서 중복 없이 핵심 스타일을 정의하고 선택자 하나로 스타일을 적용하는 '실용주의 프로그래밍'의 원칙과 무관하지 ... -
코드
객체 지향 CSS 소개
객체 지향 CSS(Object Oriented CSS : OOCSS)는 CSS 생산성을 높이기 위해 개발된 방법론으로 CSS를 여러 개의 독립된 객체로 구성해 재사용성을 극대화합니다. 궁극적으로는 더 빠르고 효율적이며 추가와 유지보수가 쉬운 스타일시트를 만드는 데 목적이 있습니다. 최근에는 BEM 기법과 함께 사용되는 경우가 많고 부트스트랩 같은 CSS 프... -
웹디자인
[2019년 7월 웹 개발 동향] 최신 기법과 착한 말썽
이달 웹 개발 동향에서는 파이어폭스 68, 크롬 76의 새로운 업데이트 소식과 점잖은 방식으로 세상을 바꾸어놓을 수 있는 프랭크 키메로의 ‘착한 말썽’에 대해서도 살펴봅니다. 파이어폭스 68에는 자바스크립트에 BigInt, 개발자 도구에 접근성 검사기, CSS 스크롤 스냅과 마커 스타일이 추가되었고 메서드, URL, 매개변수, 헤더를 편집하지 않고도 개발자... -
웹디자인
그리드 완벽 가이드
CSS 그리드 레이아웃은 CSS 레이아웃 시스템 중 최강이라 할 수 있습니다. 플렉스박스와 달리 열과 행을 다룰 수 있는 2차원 시스템입니다. 우리는 레이아웃에 CSS를 사용하지만 생각만큼 쉽지 않습니다. 플렉스박스는 유용하지만 2차원 레이아웃이 아니기 때문에 한계에 부딪히기도 합니다. 여러분이 구상한 웹 페이지가 CSS 단 몇 줄만으로 다양하게 구현되... -
웹디자인
[2019년 3월 웹 개발 동향] 리액트 훅스, 컨스트럭터블 스타일 시트, CSS 단편화 등
구글이 컨스트럭터블 스타일 시트(Constructable Stylesheets, 객체로 생성하는 스타일 시트)라는 새로운 기법을 제시했습니다. 크롬 버전 74 개발자 도구에 새 기능을 추가하여 이제 CSS 속성에 영향을 받는 모든 요소를 확인할 수 있다고 합니다. CSS의 대가 레이철 앤드루가 CSS 단편화를 소개합니다. 인쇄물이나 전자책에서 사용하는 페이... -
웹디자인
웹사이트 성능을 개선해 지구를 구하는 방법
인터넷은 전기를 많이 사용하지 않는다고 생각합니다. 전기는 어디선가 생산돼야 합니다. 이는 대부분의 국가에서 화석 연료를 태운다는 뜻입니다. 이는 결국 인터넷 탄소 발자국이 전 세계 항공 여행으로 발생하는 탄소 발자국을 넘어설 정도로 커졌고, 인터넷을 지구상 가장 큰 석탄 연소 기계로 만들고 있음을 의미합니다. 웹사이트를 만들며 지구를 구하는 방법을 확인해... -
웹디자인
[2019년 2월 웹 개발 동향] 웹 인증 그리고 UX의 문제점
대부분의 데이터 유출 사건은 취약하고 자주 쓰는 비밀번호를 설정했기 때문으로, 요즘은 웹 인증이 주목을 받고 있습니다. 온라인에서 민감한 정보를 보호할 수 있는 방법인 웹 인증 API 가이드를 새롭게 제시했습니다. 좋은 디지털 제품과 위대한 디지털 제품의 차이를 만드는 건 뭘까요? 단 두 글자, 'UX'입니다. 어떤 관점으로 디자인을 해야 할지 생각해볼 만... -
웹디자인
CSS를 배우는 방법
많은 사람이 다양한 CSS 강좌 중 어떤 강좌를 들어야 할지 추천해달라거나 CSS를 어떻게 배워야 할지 알려달라는 부탁을 한다. 또한 CSS를 어려워하는 사람도 많이 본다. 대체로 이런 사람은 낡은 사고방식으로 CSS라는 언어를 보기 때문에 문제를 겪는 경우다. CSS는 최근 몇 년 동안 많이 바뀌었기 때문에 지금은 지식을 새로 쌓기 아주 좋은 시기다. 자... -
웹디자인
[2019년 1월 웹 개발 동향] 습관을 다시 생각하고 새로운 해결책 찾기
크롬이 특정 네이티브 앱의 설치 여부를 감지할 수 있는 getInstalledRelatedApps라는 API를 개발 중입니다. 방문자에게 홍보 배너가 보이는 것을 중단할 수 있다니 방문자에게는 좋은 소식이지만 광고 제공자에게는 조금 슬플 수 있겠네요. 후디니와 페인트 API로 구현할 수 있는 '슈퍼 언더라인'도 흥미롭습니다. 후디니는 브라우저가 이해할 수 ...
ADVERTISEMENT