Skip to content

레이아웃

  • 웹디자인
    CSS를 배우는 방법
    많은 사람이 다양한 CSS 강좌 중 어떤 강좌를 들어야 할지 추천해달라거나 CSS를 어떻게 배워야 할지 알려달라는 부탁을 한다. 또한 CSS를 어려워하는 사람도 많이 본다. 대체로 이런 사람은 낡은 사고방식으로 CSS라는 언어를 보기 때문에 문제를 겪는 경우다. CSS는 최근 몇 년 동안 많이 바뀌었기 때문에 지금은 지식을 새로 쌓기 아주 좋은 시기다. 자...
  • 웹디자인
    중괄호에서 픽셀로
    CSS 중괄호가 어떻게 화면의 화려한 픽셀로 변신하는지, 브라우저 엔진은 CSS를 어떻게 해석하는지, CSS소스와 캐스케이드, CSS 객체 모델, 레이아웃 결정, 채색, z-index는 브라우저에게 어떤 의미인지 알려줍니다. 브라우저는 결국 모든 계산을 마친 후 하나의 미트맵 이미지로 만들어냅니다. 이번 글은 브라우저가 CSS를 이용해 중괄호를 픽셀로 만드...
  • 레이아웃
    IE에서 CSS 그리드 사용하기: 간격으로 자동 배치 그리드 만들기
    인터넷 익스플로러에서 CSS 그리드 사용하기 마지막 시리즈! 셀 간격과 플렉스박스로 자동 배치(auto-placement) 기능을 어떻게 구현하는지 소개합니다. grid-gap의 역할을 인터넷 익스플로러에서는 어떻게 풀어내는지 알아봅시다.
  • 웹디자인
    편집 디자인과 웹 디자인의 유사성 비교
    나는 오랫동안 출판 분야에서 일을 했다. 웹 분야에서 일한 기간보다 더 오랜 시간을 출판 쪽에서 보냈다. 최고 전문가는 아니지만 인디자인 문서를 매일 다룰 정도로 출판 업무에 대해서는 잘 알고 있다. 내가 쓴 <워드프레스 제대로 파기>라는 책 레이아웃 작업을 마무리하면서 인디자인 작업 방식 중 CSS와 비슷한 부분과 그렇지 않은 부분에 대해 생각했는데, 지...
  • 레이아웃
    IE에서 CSS 그리드 사용하기: CSS 그리드와 Autoprefixer
    인터넷 익스플로러에서 그리드 레이아웃을 사용하기 위한 관점에서 Autoprefixer에 대해 알아봅니다.
  • 레이아웃
    플렉스박스 플렉스 컨테이너를 만들 때 무슨 일이 벌어질까?
    CSS 그리드(grid)는 본질(intrinsic)의 웹 시대 레이아웃의 기준이 될 것입니다. 먼저 사용된 플렉스박스로 그리드 레이아웃을 구현하는 데 어떤 어려움이 있는지 살펴보는 것은 그리드 레이아웃을 이해하는 첫걸음입니다.
  • 웹디자인
    CSS 그리드 레벨2: 서브그리드
    CSS 그리드 명세 레벨 2의 핵심 내용, 서브그리드(subgrid)란 무엇인가? 그 기능과 사용법에 대해서 레이철 앤드루가 이야기합니다.
  • 사용자경험
    [2018년 7월 웹 개발 동향] – 실용적 웹 개발, 더 높은 윤리 의식
    2018년 7월 웹 개발 동향은 실용적 웹 개발에 대해 더 생각해보고 웹 관련 종사자들이 어떻게 더 높은 윤리 의식을 가져야 하는지에 대해서 말합니다. 개인정보 보호와 보안의 중요성을 강조하는 내용은 웹 개발자가 주의 깊게 읽을 만한 내용입니다. 디자이너가 범하는 10가지 작은 디자인 실수 같은 유익한 팁도 소개합니다.
  • 웹디자인
    ‘본질의 웹 디자인(Intrinsic Web Design)’ 시대가 온다
    분위기는 점점 더 달아오를 것이다. 디자이너들이 이런 개념에 열광하며 기존 레이아웃 제작 방식에 플렉스박스와 CSS 그리드를 결합하여 만들 수 있는 것을 고민하기 시작했기 때문이다. 레이아웃에 관한 새로운 아이디어가 폭발적으로 증가할 건 분명하다.
  • 레이아웃
    CSS 그리드 레이아웃 모범 사례
    어떤 면에서 우리 모두는 CSS 그리드 레이아웃에 관해 여전히 새롭다. 모두가 새로우니 많은 사람이 계속해서 사용 가능한 모범 사례를 구하고 있다. 이번 글에서는 레이철 앤드루가 설문조사하여 수집한 그리드 레이아웃에 대한 궁금증과 그녀의 생각을 공유한다.


맨위로