번역: 스매싱 매거진
중국어: Zen Coding: HTML/CSS 코드를 작성하는 빠른 방법
저작권을 존중해 주시고, 재배포시 출처를 꼭 밝혀주세요!
이 기사에서는 CSS 선택기를 모방한 구문을 사용하여 HTML 및 CSS를 빠르게 개발하는 새로운 방법을 보여줍니다. Sergey Chikuyonok 이 개발했습니다. HTML 코드(모든 태그, 속성, 인용문, 중괄호 등 포함)를 작성하는 데 얼마나 많은 시간을 소비하시나요? 편집기에 코드 힌트가 있으면 작성하기가 더 쉽지만, 그래도 여전히 많은 코드를 수동으로 입력해야 합니다.
JavaScript에서는 페이지의 특정 요소를 가져오려고 할 때 동일한 문제에 직면하게 되고, 많은 코드를 작성해야 하므로 유지 관리 및 재사용이 어려워집니다. JavaScript 프레임워크가 등장했으며 CSS 선택기 엔진도 도입되었습니다. 이제 간단한 CSS 표현식을 사용하여 DOM 요소를 얻을 수 있습니다. 이는 매우 멋진 기능입니다.
하지만 CSS 선택기를 사용하여 요소를 레이아웃하고 배치할 수 있을 뿐만 아니라 코드도 생성할 수 있다면 어떨까요? 예를 들어, 다음과 같이 쓴다면:
div #내용 > h1 + p
...그러면 다음과 같은 출력을 볼 수 있습니다.
< 사업부 ID = "콘텐츠" >