검색 폼

BLOG Here are some topics that have been on our mind lately.

[] Sass의 @extend로 Bootstrap을 시맨틱하게 확장
25 June 2014 by http://bit.ly/1v4Doez


트위터 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

[편집자주]

webactuallyhttp://www.webactually.com

웹액츄얼리팀은 '워드프레스'를 이용해 개인/기업을 위한 '브랜드페이지'를 제작하고 웹디자인 관련 책을 번역 출판합니다. 그것도 즐겁게.

Comments

Twitter