Sass의 @extend로 Bootstrap을 시맨틱하게 확장

webactually — Wed, 25 Jun 2014 08:13:41 +0000

트위터 UI 디자이너 마크 오토^{Mark Otto}와 개발자 제이콥 쏜톤^{Jacob Thornton}이 제작한 오픈 소스 프론트엔드 툴킷인 부트스트랩^Bootstrap이 버전 3.1.1로 업그레이드 되었습니다. 최신 버전에는 이미 지원중인 LESS와 함께 Sass가 새롭게 지원됩니다. 이제 Sass를 사용하는 프론트엔드 개발자도 부트스트랩을 사용해 편하게 개발할 수 있습니다.

이 글에서 저자인 브래드 버로우^{Brad Barrow}는 HTML의 구조를 시맨틱하게 변경하고 Sass의 @extend 기능을 사용해 스타일을 적용하는 방법을 알려줍니다. 물론 이 방법은 부트스트랩에 한정되지 않고 그와 유사한 프레임워크에도 응용할 수 있습니다.

[편집자주]

부트스트랩^Bootstrap은 작업자가 초보자이든 전문가이든 상관없이 최근 사이트나 앱의 구조^scaffold를 빠르고 쉽게 생성할 수 있는 소스 코드를 제공합니다. 점점 더 많은 개발자들이 개인 툴박스에 이 프레임워크를 넣고 있습니다.

부트스트랩에는 어두운 이면도 있습니다. 정리되지 않고 시맨틱하지 않으며 재사용 할 수 없는 마크업을 쉽사리 작성할 수 있습니다. 이렇게 작성해도 모든 브라우저에서 제대로 보여지긴 하지요.

저는 이 글에서 부트스트랩을 사용해 견고하고 시맨틱한 코드를 작성하는 방법에 대해 설명할 것입니다. 부트스트랩의 최신 버전에는 Sass를 공식적으로 탑재하고 있습니다. 이 글의 목적을 달성하고자 Sass의 가장 강력한 기능 중에 하나인 @extend 지시자를 사용할 것입니다.

시맨틱에 관하여

우선 무언가를 ‘시맨틱’하게 만든다는 말이 무슨 뜻인지 알아봅시다. HTML 문서는 정보의 계층구조적 관점에서 콘텐츠를 묘사합니다. 누구나 코드를 읽고 무엇을 말하고 있는지 알 수 있어야 합니다. 어떻게 보이는가는 해당하지 않습니다.

CSS 특히 CSS 프레임워크의 인기가 높아지면서 독자/개발자의 입장보다 CSS 문서 자체에 신경을 쓰며 HTML을 작성합니다. 요즘 웹사이트 소스 코드에서 이와 같이 작성된 HTML 마크업을 보는 것은 흔한 일이죠.

See the Pen wqxfJ by jin ah chon (@chon3) on CodePen.

부트스트랩의 CSS 파일은 위의 코드가 무엇을 할지 압니다. 열이 모두 2개 있고, 한 열에 행이 3개 있으며, 나머지 열에 100% 너비가 적용된 행 1개가 있다는 것을 말이지요. 부트스트랩을 다뤄본 개발자라면 이것을 쉽게 파악합니다. 하지만 이 프레임워크를 사용해 본 경험이 없는 사람이 보았다면 어떨까요? 위의 HTML 코드들은 왜 있는 걸까요? 어떤 정보가 담겨 있죠? 이 마크업은 쓸만한 정보를 보여주지 않습니다.

시맨틱 마크업은 보이는 외관보다 콘텐츠를 설명하는 코드입니다. 위의 코드를 다음과 같이 의미가 담긴 코드로 작성할 수 있습니다.

See the Pen cxqDt by jin ah chon (@chon3) on CodePen.

전체 코드가 바뀐 것은 아니지만 위의 코드는 각 엘리먼트가 왜 있는지 다른 엘리먼트와 어떤 관계가 있는지 즉시 알려줍니다. 여기서 잃은 것이 있다면 시각적으로 어떻게 보일지 알 수 없다는 것이지요. 어쨌든 그것은 HTML의 목적은 아닙니다.

부트스트랩이 시맨틱한 스타일을 어떻게 반영할까?

여러분은 내장된 클래스없이 어떻게 부트스트랩을 사용할지 궁금해할 것입니다. Sass @extend 기능의 힘을 사용해서 이것을 해결할 수 있습니다.

Sass 문서:

@extend는 확장된^extended 선택자가 있는 스타일시트 안에 어디에서나 확장하는^extending 선택자를 넣어서 작동합니다.

이는 시맨틱한 선택자를 사용하면서 부트스트랩의 선택자를 확장할 수 있는 장점을 취한다는 의미입니다. 어떻게 적용하는지 봅시다.

See the Pen cFGqb by jin ah chon (@chon3) on CodePen.

@extend의 마술로 부트스트랩의 선택자와 우리가 만든 선택자가 컴파일 된 스타일시트에 서로 껴 맞춰 집니다. 컴파일 된 코드를 검사해보면 알 수 있듯이 확장된 클래스와 정확하게 동일한 속성이 선택자에도 있습니다. 예를 들면, 컴파일 된 CSS 코드 중에 이것이 보입니다.

See the Pen rnmey by jin ah chon (@chon3) on CodePen.

여기서 컴파일 된 CSS 코드와 Sass를 나란히 함께 볼 수 있습니다. 깔끔하지 않나요?

재사용성^Reusability

이 방법의 또 다른 장점은 가독성과 재사용성 모두를 가진 구성요소^components를 만든다는 것입니다. 예를 들어 행과 열 밖에서 필요할 때마다 author 구성요소를 반복해서 만들지 않아도 됩니다. 대신 구축하기 쉽도록 구성요소 각 부분의 이름을 알기 쉽게 지어주세요. 전체 사이트에서 일관적으로 보이는지 부트스트랩을 통해 확인할 수 있습니다.

이식성^Portability

부트스트랩이 최고의 프레임워크들 중에 하나일지라도 나중에 다른 프레임워크로 이전하거나 아예 자체 프레임워크를 제작할 때가 올지 모릅니다. 위에 대략 서술한 방식으로 이와 같은 작업을 할 수 있습니다. 왜냐하면 CSS에서 여러분의 마크업을 군더더기 없이 깔끔하게 분리할 수 있기 때문입니다.

툴벨트^toolbelt를 매세요.

부트스트랩의 Sass 버전을 아직 사용해보지 않았다면 반드시 사용해 보세요. Github 페이지에서 시작하는 것이 좋습니다.

Sass가 유일하게 놀 거리는 아닙니다. HTML과 CSS에서 다음 단계의 시맨틱을 진정으로 알고 싶다면 BEM이나 SMACSS 같은 명명법^{naming convention}을 권해드립니다. 여러분은 이것으로 선택자를 표준화하고 기억하기 쉽게 만들 수 있습니다.

이제 나가서 확장하세요

부트스트랩에 놀랍도록 강력한 스타일 세트가 있습니다. 그렇다 하더라도 코드를 대충 꿰 맞추어서 마크업의 품질을 상실할 수도 있습니다. Sass의 @extend 지시자를 사용하면 콘텐츠와 개발자 모두를 위해 의미를 명확히 전달할 수 있는 마크업을 작성할 수 있습니다.

브래드 바로우 Brad Barrow

트위터 @foxwisp

브래드 바로우는 호주 멜버른에 거주하는 프론트엔드 개발자이고 디자이너이며 SitePoint팀과 함께 작업하고 있다. 아침 식사로 자바스크립트/CSS를 먹으며 계속 변화하는 프론트엔드 세계의 정상에 서있고자 노력한다.

이 글은 SitePoint의 블로그 글을 번역한 것으로, 웹액츄얼리 북스팀이 SitePoint로부터 허가를 받고 올린 자료입니다. 원본은 http://www.sitepoint.com/sass-semantically-extend-bootstrap/에서 확인할 수 있습니다.
※ 내용중에 오번역, 오탈자를 발견하신 경우에는 알려주세요.

※ 웹액츄얼리 북스팀에서 웹 디자인 관련 영문 번역이나 윤문을 해주실 분을 찾고 있습니다. 관심 있으신 분은 메일 보내주세요.
books@webactually.com

[편집자주]

댄 시더홈 Dan Cederholm

웹디자이너를 위한
SASS

CSS 마스터, 댄 시더홈이 전수하는 SASS 노하우!
SASS로 스마트한 CSS 고수가 되자!

책 구매하기책 미리보기책 상세설명

Webactually Korea » Bootstrap