Skip to content

CSS

  • 웹디자인
    [2018년 5월 웹 개발 동향] 브라우저 성능, 이터레이션 제로, 웹 인증
    2018년 5월 주목할 만한 이슈는 GDPR, 유럽 개인정보보호법 개정안 발효입니다. 강화된 개정 GDPR 내용을 정리한 체크리스트를 살펴보는 것만으로도 웹을 보는 시야가 넓어집니다. 지속적인 브라우저 업데이트 소식과 어도비 XD의 무료 배포, 프리랜서에게 전하는 조언 등 5월에도 다양한 웹 디자인 이슈가 기다립니다.
  • 웹디자인
    [2018년 4월 웹 개발 동향] 노력, 편견, 생산성에 관하여
    2018년 4월에도 글로벌 웹 디자인계는 바쁘게 돌아가고 있습니다. 브라우저 업데이트 소식을 시작으로 페이스북발 개인정보 유출 스캔들에 따른 디자인 윤리와 최근 이슈인 포용적 디자인(Inclusive Design)에 대한 논의도 활발합니다. CSS와 자바스크립트의 새로운 기능에 대한 소개도 빠뜨리지 않고 있습니다.
  • 콘텐츠전략
    [2018년 3월 웹 개발 동향] 서비스 워커, CDN 만들기, 디자인 팁
    서비스 워커Service Worker는 아마도 가장 잘못 소개되고 있는 웹 기술 중 하나일 것 같습니다. 대부분 이 기술을 논할 때 오프라인 모드에서 앱을 사용하는 방법에 관한 이야기만 하죠. 하지만 서비스 워커는 그보다 훨씬 많은 것을 할 수 있습니다. 최근에는 서비스 워커가 얼마나 훌륭한 기술인지에 관한 글을 매주 새로 보는 것 같네요. 예를 들어 이달...
  • 모바일
    [2018년 2월 웹 개발 동향] 개선된 내용, 다양한 브랜드 소식, 브라우저의 빠른 발전
    사람들은 저마다 속한 전문 분야에서 본인에게 맞는 세부 영역을 찾곤 합니다. 오늘날의 웹 디자인과 개발 분야도 이와 다르지 않습니다. 15년 전 제가 첫 웹사이트를 만들 때 사용했던 기술은 프레임셋과 HTML 4.0, 이미지 파일, 그리고 지금에 비하면 극히 제한적인 CSS와 현란한 GIF 이미지, 인라인 자바스크립트(예를 들면 onclick="" 속성) ...
  • 코드
    CSS 그리드로 미지원 브라우저 지원하기
    ‘지원’의 의미 그리드 미지원 브라우저를 어떻게 지원할지 고민하기 전에, 먼저 ‘지원support‘의 의미를 정할 필요가 있다. 지원이란 대상 목록에 있는 모든 브라우저에서 우리 사이트가 완전히 동일한 모습이라는 의미일 수 있다. 또한, 어떤 브라우저에서도 따로 마무리 작업을 할 필요가 없는 만족스러운 상태이거나,...
  • 웹디자인
    웹폰트 사용하기
    폰트를 선택했다면 웹사이트에 적용해보자. 웹폰트는 @font-face 규칙을 통해 CSS에서 정의한다. 웹 개발자들은 @font-face 규칙을 직접 작성해본 혹은 복사해 붙여넣기라도 해본 경험이 있을 것이다. 그게 아니라도 최소한 본 적은 있을 것이다. 그래도 완벽하게 내 것으로 만들기 위해 기본 예제를 빠르게 실행해보자. 이렇게 @font-face 규칙...
  • 디자인
    CSS 그리드 레이아웃을 지금 사용해도 정말 괜찮을까
    저는 경비행기 조종을 배우고 있습니다. 경비행기 조종을 하면 컴퓨터에서 벗어날 수 있죠. 얼마 전에는 세스나150Cessna 150을 조종하고 있었습니다. 브리스틀 공항에 접근하면서 기체 고도를 낮게 유지하려고 고군분투하던 중, 말 그대로 구름 속으로 빨려 들어가 버렸습니다. 비행 강사는 이렇게 말했습니다. “당신이 잘못한 건 아니에요. 하지만 어쨌든 처리...
  • 코드
    Sass 프로젝트를 위한 아키텍처
    저자인 휴고 기로델은 Sass 프로젝트의 아키텍처 "개념"을 얘기합니다. 이는 실전 프로젝트에서 적절한 아키텍처를 만들 수 있는 응용력을 갖추도록 하기 위함입니다. Sass 프로젝트에 맞는 아키텍처를 만들기 위해 기초 개념을 잡아 보세요!
  • 코드
    윈도우에서 SASS 설치하기
    Sass의 공식 웹사이트에서는 Sass를 윈도우에서 작업하려면 윈도우용 루비 인스톨러(Ruby Installer)를 먼저 설치할 것을 권장하고 있습니다. 설치가 어려울 것 같다고 지레 겁을 먹고 좌절하지 마세요! Sass 설치과정은 생각보다 훨씬 쉽고 빨리 끝납니다.
  • 코드
    Sass의 @extend로 부트스트랩을 시맨틱하게 확장하기
    오픈 소스 프론트엔드 툴킷인 부트스트랩(Bootstrap)이 버전 3.1.1로 업그레이드 되었습니다. 최신 버전에는 이미 지원중인 LESS와 함께 Sass가 새롭게 지원됩니다. 이 글에서 저자인 브래드 바로우(Brad Barrow)는 HTML의 구조를 시맨틱하게 변경하고 Sass의 @extend 기능을 사용해 스타일을 적용하는 방법을 알려줍니다.


맨위로