prop() vs. attr()

뷰포트 너비가 좁아질 때, 상단 가로 네비게이션 메뉴를 셀렉트 폼 형태로 만들어보고자 jQuery를 사용했다. ul li에서 선택한 메뉴는 select option에서도 선택되도록 했다. attr() 혹은 prop() 둘 중에 아무거나 써도 되기는 된다. 12345678910<div id="menu"> <ul> <li class="sel

Read More...

상황에 따라 다르게 적용하는 CSS 방법론

원문: When to use which CSS methodology by simurai 해가 지날수록 점점 더 많은 CSS 방법론이 등장하고 있습니다. 그러나 불행하게도 언제나 먹히는 CSS 방법론은 존재하지 않기 때문에, 이 글에서는 프로젝트의 성격에 따라 어떤 CSS 방법론이 적합한지에 대해 살펴보겠습니다. 좋아요, 이제 그럼 CSS 방법론으로 가득 찬 캄캄한 동굴 속으로 들어가 봅시다.

Read More...

W3C 스펙 문서 읽는 법

원문: How to Read W3C Specs, J.David Eisenberg, 2001년 9월 28일 W3C에서 하는 일은 모든 웹 기술에 대한 스펙 제정입니다. 웹 디자이너로 일을 한 경험이 있다면 W3C 사이트를 방문한 적이 있을 것입니다. 아마 XHTML 사용법에 대한 궁금증이 생겨서 방문했을 수도 있고, XSL 포매팅 객체 혹은 SVG에 대한 궁금증을 해결하기 위해서 였을수도 있죠

Read More...

이미지 대체 기법 박물관

원문 바로가기: The Image Replacement Museum by Marie Mosley, Nov 3, 2015 CSS 이미지 대체 기법은 텍스트 요소(대부분의 경우 <h1>과 같은 머리말 태그)를 로고와 같은 이미지로 대체하는 방법입니다.

Read More...

Sass Map의 Key 값으로 숫자를 넣을 때 주의할 점

작업하던 도중에 스프라이트 이미지 부분이 계속 에러가 나서 소스를 살펴봤더니 Sass Map의 Key 부분이 대략 다음과 같이 적혀있었다. 123456789$sass-map-example: ( 1: some-value, 2: some-value, 3: some-value, 5: some-value, 10: some-value, 12: some-value, 13: some-value) 위와 같

Read More...

PostCSS 안내서

원문 바로가기: An Introduction To PostCSS by Drew Minns 다른 개발 언어와 마찬가지로 CSS 역시 순환적인 발전 과정을 거칩니다. 매번 주요 배포 때마다 새로운 기능과 구문이 등장합니다. CSS 레벨 3에서 새로 배포된 기능 중 인터렉션과 관련된 것들은 예전에는 자바스크립트만을 사용하여 구현할 수 있었습니다. 하루가 멀다하고 새로운 툴이 등장하고, 그 덕분에

Read More...

CSS 속성값 구문에 대해 알아보자

원문: Understanding the CSS Property Value Syntax by Russ Weakley, 2016년 5월 16일 W3C는 전용 구문을 사용해서 각 CSS 속성에서 사용할 수 있는 값을 정의합니다. 공식 CSS 스펙 문서를 직접 훑어 본 적이 있다면, 이 구문이 나오는 것을 봤을 겁니다. 여기 border-image-slice 스펙에 나온 것 처럼요. 한번 봐볼까요?

Read More...

WAI-ARIA 관련 자료 목록

W3C WAI-ARIA 스펙WAI-ARIA FAQ 문서에 따르면, 현재 버전 1.0은 권고안으로 완전히 확정이 된 상태이고, 1.1은 1.0과 비교했을 때에 몇가지 점만 변경된 상태이다. 1.1에 적용된 변경 사항 중 중요한 것 하나를 꼽아보자면, aria-describedat이 추가 되었다는 것이다. 현재 집필중인 1.1 스펙에는 아직 개발되거나 구현 승인 되지 않은 초기 단계의 아이디어도

Read More...

라이브러리(해커와 화가 p324-325)

해커와 화가, 폴 그레이엄 지음, 임백준 옮김, 한빛미디어 간결함의 최고봉이라 할 수 있는 경우는 특정한 일을 수행하고자 할 때 다른 사람에 의해 프로그램이 미리 작성되어 있어서 호출하기만 하면 되는 때이다. 이런 사실은 프로그래밍 언어에서 점점 더 중요해지고 있는 기능에 대해 생각해 보는 계기가 된다. 그 기능이란 바로 라이브러리다. 펄이 승리를 거둘 수 있었던 이유는 문자열을 다루는 데

Read More...

Notes on Using ARIA in HTML

HTML에서 WAI-ARIA 사용에 관한 노트문서 바로가기: Notes on Using ARIA in HTML(2016년 9월 18일) 서론본 문서는 개발자를 대상으로 하는 실용 지침 문서이며, ARIA 명세(WAI-ARIA-1.1)를 HTML 요소에 적용하여 접근성을 지닌 정보를 제공하는 방법에 대해 설명합니다. 장애인들이 웹 컨텐츠와 웹 애플리케이션을 이용할 때 접근 문턱을 낮출 수 있는

Read More...