브라우저
ADVERTISEMENT
-
웹디자인
IE에서 CSS 그리드 사용하기 – 중복된 그리드 영역 이름 지원!
Autoprefixer가 9.3.1 버전으로 업데이트되며 완전히 새로운 세계를 열어주었습니다. 이번 업데이트에서 핵심은 새로운 그리드 영역 시스템입니다. 그리드 변환을 사용하고 해제하는 작업은 정말 식은 죽 먹기가 되었습니다. /* autoprefixer grid: on */만 추가하면 그리드 변환 사용이 설정되고 on을 off로 바꿔주면 해제됩니다. 이 ... -
사용자경험
HTML 반응형 이미지 문법 가이드
브라우저가 마법을 부리는 HTML 문법들에는 srcset, <picture>, w 설명자가 있습니다. srcset만으로도 같은 이미지를 다른 크기로 또 아예 다른 이미지로 제공할 수도 있지만, w 설명자와 sizes 특성을 함께 사용하면 브라우저가 더 적절한 선택을 할 수 있습니다. 반응형 이미지로 '성능 향상'과 '디자인 제어'라는 두 마리 토... -
사용자경험
[스매싱 매거진 6월 총정리] 그동안 무슨 일이 있었나요?
속도가 사이트 성능을 좌우하기도 합니다. 워드프레스의 보안 플러그인 제작자들이 만든 패스트 오어 슬로(Fast or Slow)는 웹사이트 로딩 속도를 측정해줍니다. 전 세계 13개 도시에 있는 13개 서버로 구성된 네트워크에서 데이터를 받기 때문에 국내뿐 아니라 해외에서의 반응도 확인해볼 수 있습니다. 사이트의 문제점은 무엇이고 개선책까지 알려주는데 무료라... -
사용자경험
서버에서 클라이언트로
클라이언트는 웹브라우저이며 사용자 측에서 작업을 수행하는 소프트웨어다. 서버와 클라이언트가 어우러지는 아름다운 공연은 네트워크 상황에 따라 프로그래밍 캐시를 이용한 서비스 워커가 주연이 될 수도, 네트워크 계층작업을 통한 네트워크 캐시가 주연이 될 수도 있다. 누가 주인공이든 우리의 지향점은 언제, 어디서나 접근 가능한 웹사이트를 사용자가 경험할 수 있도... -
사용자경험
브라우저는 사용자가 원하는 것을 어떻게 제공하나
누구라도 예외 없이, 장애 구분 없이 웹에 쉽게 접근할 권리가 있죠. 따라서 디자이너와 개발자는 모든 정보와 기능을 공개하고 사용자가 상황과 맥락에 맞게 사용할 수 있도록 배려해야 합니다. 전체적인 제어는 사용자에게 넘겨서 콘텐츠를 이용하기 가장 좋은 환경으로 직접 구축할 수 있도록 말이죠. 통찰력과 깊이 있는 다음 기사를 읽고 웹접근성을 바라보는 눈높이를... -
사용자경험
접근성 좋은 SVG – 패턴을 넘어선 포용성
SVG 접근성 측면에서 보면 우리는 큰 진전을 이뤘습니다. SVG의 접근성을 최적화하는 데 도움을 주는 견고한 패턴은 간단한 이미지 혹은 좀더 복잡한 이미지를 만들 때에도 적용할 수 있습니다. 대부분의 개발자나 디자이너는 실제 사용자가 필요로 하는 것보다 WCAG2.1을 준수하기 위한 코드에만 초점을 맞춥니다. SVG를 어떻게 만드느냐에 따라 사용자는 장치... -
코드
<section> 버리고 HTML5 <article> 써야 하는 이유
각 태그는 목적에 맞게 쓰여야 합니다. 제목을 표시할 때는 헤딩 태그를 〈h1〉, 〈h2〉··· 순차적으로 나열하는 구조여야 합니다. 같은 레벨의 〈h〉 태그에 〈section〉을 둘러싸서 제목 크기를 조절하는 방법은 겉모양만 달라질 뿐입니다. 〈section〉은 구획을 나눌 때 쓰세요. 〈main〉, 〈header〉, 〈footer〉, 〈nav〉 등은 스... -
사용자경험
컨텍스트에서의 웹 접근성
웹의 혁신은 필수 요소인 접근성에서 비롯된다고 할 수 있지만 웹사이트를 개발하는 사람조차도 접근성의 중요성을 인식하지 못하고 있는 것이 웹 접근성의 주요 과제입니다. 웹 접근성 향상을 위한 다양한 기능의 디자인은 모든 사람이 사용할 수 있을 뿐만 아니라 예상하지 못한 용도를 발견하기도 합니다. 색맹 사용자를 위한 스마트폰의 색상 대비 설정은 밝은 햇빛 속에... -
웹디자인
[2019년 9월 웹 개발 동향] 기본적인 생활 스타일을 받아들이는 법과 단순해지기 힘든 이유
디지털 세상에서 살아가는 우리는 생산성을 높이기 위해 끊임없이 일을 찾고 단순함과는 점점 거리가 멀어지고 있습니다. 재충전을 위한 여가활동조차 온전히 누리지 못하고 있는 이 시점에 ‘기본’의 의미를 곱씹어 생각하며 일을 끝내면 아무것도 하지 않는 ‘기본적인 생활 스타일’을 한번 누려보는 것은 어떨까요? 파이어폭스 69가 출시되었습니다. 자바스크립트 퍼블릭 ... -
웹디자인
[2019년 7월 웹 개발 동향] 최신 기법과 착한 말썽
이달 웹 개발 동향에서는 파이어폭스 68, 크롬 76의 새로운 업데이트 소식과 점잖은 방식으로 세상을 바꾸어놓을 수 있는 프랭크 키메로의 ‘착한 말썽’에 대해서도 살펴봅니다. 파이어폭스 68에는 자바스크립트에 BigInt, 개발자 도구에 접근성 검사기, CSS 스크롤 스냅과 마커 스타일이 추가되었고 메서드, URL, 매개변수, 헤더를 편집하지 않고도 개발자...
ADVERTISEMENT