Skip to content

CSS

  • 디자인
    CSS 개발자 지정 속성으로 색상 만들기
    그동안 개발자들은 전처리기 변수나 자바스크립트 방식으로 프로젝트 색상을 구성했습니다. 최근에는 많은 개발자가 실시간으로 작업이 가능하고, 상속 및 값을 재정의할 수 있는 캐스케이드 모델을 지원하는 장점 때문에 색상 변수를 구성할 때 'CSS 개발자 지정 속성(CSS Custom Properties)' 방법을 선호합니다.
  • 디자인
    가독성 개선을 위한 최신 CSS 테크닉
    효과적인 읽기를 위해서는, 즉 가독성을 높이려면 읽기 환경을 최적으로 디자인하고 개발해야 합니다. 가독성을 개선하려면 난독증이나 학습 장애, 시각적 장애를 가진 독자도 고려해야 합니다. 어떻게 하면 시각적으로 장애가 있거나 난독증인 사용자를 포함한 모든 독자가 읽기에 쉽게 접근하고, 편하고 다양한 경험을 할 수 있을까요? 이 글에서는 최신 CSS ...
  • 웹디자인
    새해, 새로운 시작
    2021년 새해에도 세계 곳곳에서 웹을 발전시키기 위한 많은 프로젝트가 진행 중입니다. 올해에도 우리 모두의 목표는 웹 성능을 향상시키는 것이겠죠. 배움에는 끝이 없습니다. 웹액츄얼리가 스매싱 매거진(Smashing Magazine)의 글 중 엄선해 소개하는 기사들을 통해 배움에 대한 갈증을 해소하시길 바랍니다.
  • 디자인
    개발자가 알아야 할 피그마의 모든 것
    피그마(Figma)는 전 세계 수많은 회사가 채택해 사용하고 있는 UI GUI 디자인 툴입니다. 피그마는 브라우저 기반의 툴이라서 아무것도 설치할 필요가 없고, 운영체제와 상관없이 모두가 사용할 수 있습니다. 또 완전히 클라우드 기반이어서 항상 최신 버전의 디자인을 볼 수 있고, 내장된 협업 툴을 이용해 어느 때보다 쉽게 협업과 커뮤니케이션이 가능합니다...
  • 디자인
    2021년으로 향하는 카운트다운
    지난 1년 가장 많이 언급된 단어는 사회적 거리두기, 언택트였습니다. 1년 동안 게재한 <스매싱 매거진 월간 동향>의 큰 흐름 역시 원격 작업, 재택 근무였습니다. 올해 마지막 동향 기사에도 원격 근무에 도움이 될 만한 여러 툴들을 소개합니다.
  • UX
    [스매싱 매거진 11월 총정리] 스매싱하기 딱 좋은 때입니다!
    여전히 전 세계가 CODIV-19로 술렁이고 있습니다. 뒤숭숭한 분위기에도 불구하고 세계 곳곳에서 개발자들은 웹 업계에 도움이 되는 다양한 기술들을 속속 발표하고 있습니다. 스매싱 매거진 월간 동향을 통해 새롭고 기발한 아이디어들을 만나봅시다.
  • 사용자경험
    [스매싱 매거진 8월 총정리] 온라인에서 능력 향상하기
    디자이너는 정확한 기능을 얻거나 대담한 상호작용 기능을 갖춘 디자인을 위해 많은 시간을 보내지만 사용자는 기능이나 디자인과 관계없는 아주 다른 문제들로 헤매기도 합니다. 결제를 하던 사용자가 오타를 발견하고 뒤로가기 버튼을 눌렀을 때 그동안 입력한 정보가 지워지면 어떨까요? 다시 시도할까요? 베이마드 연구소는 "기대를 저버리는 '뒤로가기' 버튼의 디자인 패...
  • 웹디자인
    [스매싱 매거진 7월 총정리] 웹의 음지에서 들려오는 이야기
    코로나19로 인해 전 세계가 암울한 시기를 보내고 있는 요즘 스매싱 매거진은 독자 여러분께 매달 업계의 싱싱한 뉴스를 전달하기 위해 노력합니다. 매일매일 웹사이트를 론칭하는 디자이너가 빠르고 정확하게 웹사이트를 배포할 수 있도록 도와주고, 애니메이션 제작 과정에서 손쉽게 수정하면서 시간도 아낄 수 있는 방법을 제안합니다. 한편 구글 크롬 개발자 그룹이 제시...
  • 웹디자인
    IE에서 CSS 그리드 사용하기 – 중복된 그리드 영역 이름 지원!
    Autoprefixer가 9.3.1 버전으로 업데이트되며 완전히 새로운 세계를 열어주었습니다. 이번 업데이트에서 핵심은 새로운 그리드 영역 시스템입니다. 그리드 변환을 사용하고 해제하는 작업은 정말 식은 죽 먹기가 되었습니다. /* autoprefixer grid: on */만 추가하면 그리드 변환 사용이 설정되고 on을 off로 바꿔주면 해제됩니다. 이 ...
  • 사용자경험
    HTML 반응형 이미지 문법 가이드
    브라우저가 마법을 부리는 HTML 문법들에는 srcset, <picture>, w 설명자가 있습니다. srcset만으로도 같은 이미지를 다른 크기로 또 아예 다른 이미지로 제공할 수도 있지만, w 설명자와 sizes 특성을 함께 사용하면 브라우저가 더 적절한 선택을 할 수 있습니다. 반응형 이미지로 '성능 향상'과 '디자인 제어'라는 두 마리 토...


맨위로