Skip to content

레이아웃

  • 디자인
    색각 결핍 디자이너의 삶
    저자인 노아 글루시엔 역시 색맹이라는 핸디캡을 극복하고 자기에게 맞는 커리어 쌓기에 도전하고 있는 웹디자이너입니다. 노아는 이 글에서 색각 결핍이 있는 웹디자이너나 일반 사용자들이 웹을 다루고, 즐길 수 있는 다양한 도구와 자료들을 소개합니다. 그리고 색맹자로서 오히려 장점을 발휘하는 순간들을 알려줍니다.
  • 코드
    디자이너는 어떻게 코드를 배우나?: Part Ⅱ
    지난 1부에서는 터미널의 기본을 알려주고, 코딩 시작을 위해 생산적인 팁과 코드 편집기 선택 요령에 대해 설명했습니다. 2부에서는 깃과 같은 버전 관리 시스템를 비롯해 HTML, CSS, 시맨틱 코드와 주요 엔지니어링에 대해 소개합니다.
  • 디자인
    [스매싱 매거진 5월 총정리] 힘겨운 시간을 위한 학습 자료
    코로나19로 전 세계가 아직도 혼란한 지금 가족, 친구, 동료의 힘이 더욱 절실합니다. 제자리에서 스스로를 지키는 노력 역시 필요한 때입니다. 스매싱 매거진이 지난 한 달 웹 산업계의 주요 이슈와 프로젝트를 짚어주고, 흥미로운 읽을거리들을 소개합니다.
  • 사용자경험
    [스매싱 매거진 1월 총정리] 웹 퍼포먼스 최적화하기
    놀라운 속도로 변화하는 웹 업계에서 2020년 공동의 과제는 뭐니뭐니해도 웹 환경 개선이 아닐까요? 웹을 더 빠르고 안정적으로 만들기 위해서는 퍼포먼스를 최적화해야 합니다. 최적화된 웹 퍼포먼스의 중요성을 널리 알리기 위해 현재 많은 사람들이 노력하고 있습니다. 팟캐스트를 통해, 종이책이나 전자책으로, 각종 뉴스레터나 SNS를 이용해서, 세계 각국의 콘퍼...
  • 웹디자인
    [스매싱 매거진 12월 총정리] 새로운 소식
    코드에도 꿀팁이 있으면 좋겠지요? 지난 12월 한 달 동안 매일 업데이트된 짤막한 팁들로 개발을 좀더 편하게 해보세요. 배열 중복을 지우기, 브라우저 개발자 도구에 데이터를 보여주기 등 자바스크립트, HTML, CSS가 모두 포함되었으니 프런트엔드 개발의 보물창고라 할 만합니다.
  • 웹디자인
    IE에서의 CSS 그리드 사용하기: 일반적인 IE 그리드 오해를 파헤치다
    IE와 크롬을 비롯한 엣지, 사파리, 오페라 같은 최신 브라우저에서도 작동하는 그리드, 폴백 레이아웃 없이 작성할 수 있는 CSS 그리드는 더 이상 미래의 이야기가 아닙니다. 여기 대니얼 토논이 IE와 최신 브라우저에서 안전하게 구현되는 CSS 그리드 사용법에 대해 알려드립니다. 모두 4부작으로 IE 그리드에 대한 오해를 풀어주고, IE에서도 완벽하게 구현...
  • 웹디자인
    쓰기 모드와 CSS 레이아웃
    레이아웃 제작에 쓸 수 있는 여러 기술에 관련한 명세를 명쾌하게 설명해 CSS 작동 원리의 이해를 돕는 《새로운 CSS 레이아웃》의 저자 레이철 앤드루, 그녀가 CSS 레이아웃과 CSS 전반에 쓰기 모드(writing mode)가 미치는 영향과 중요성에 관해 설명한 글을 소개합니다. 쓰기 모드는 쓰기 방식이 다른 언어를 사용하는 문서를 만들 때 사용합니다....
  • 웹디자인
    그리드 완벽 가이드
    CSS 그리드 레이아웃은 CSS 레이아웃 시스템 중 최강이라 할 수 있습니다. 플렉스박스와 달리 열과 행을 다룰 수 있는 2차원 시스템입니다. 우리는 레이아웃에 CSS를 사용하지만 생각만큼 쉽지 않습니다. 플렉스박스는 유용하지만 2차원 레이아웃이 아니기 때문에 한계에 부딪히기도 합니다. 여러분이 구상한 웹 페이지가 CSS 단 몇 줄만으로 다양하게 구현되...
  • 웹디자인
    CSS를 배우는 방법
    많은 사람이 다양한 CSS 강좌 중 어떤 강좌를 들어야 할지 추천해달라거나 CSS를 어떻게 배워야 할지 알려달라는 부탁을 한다. 또한 CSS를 어려워하는 사람도 많이 본다. 대체로 이런 사람은 낡은 사고방식으로 CSS라는 언어를 보기 때문에 문제를 겪는 경우다. CSS는 최근 몇 년 동안 많이 바뀌었기 때문에 지금은 지식을 새로 쌓기 아주 좋은 시기다. 자...
  • 웹디자인
    중괄호에서 픽셀로
    CSS 중괄호가 어떻게 화면의 화려한 픽셀로 변신하는지, 브라우저 엔진은 CSS를 어떻게 해석하는지, CSS소스와 캐스케이드, CSS 객체 모델, 레이아웃 결정, 채색, z-index는 브라우저에게 어떤 의미인지 알려줍니다. 브라우저는 결국 모든 계산을 마친 후 하나의 비트맵 이미지로 만들어냅니다. 이번 글은 브라우저가 CSS를 이용해 중괄호를 픽셀로 만드...


맨위로