StyleSheet/Compass 검색 결과

해당 글 5건

compass 고급 스프라이트 사용 패턴

Advanced Compass CSS Sprite 앞선 포스팅에서 Compass Basic Sprite 에 대해 알아보았으며 이 글에서는 좀 더 고급 사용이 가능한 Compass helper 인 CSS Sprite 에 대해 알아보는 시간을 가져보겠습니다. Compass의 스프라이트 고급 패턴을 사용하려면 Compass 에서 제공되는 functions(Helpers for Compass) 및 Mixin을 사용합니다. 이 고급 패턴 역시 png만을 지원하고 있습니다. CSS Sprite Helpers for Compass sprite-map($glob, ...) sprite-map() 은 개별 스프라이트 이미지를 병합된 스프라이트 이미지를 생성하도록 도와줍니다. SCSS $icons: sprite-map("..
StyleSheet/Compass 2016. 9. 29. 10:17

Compass 를 이용한 스프라이트(Spriting with Compass)

Spriting with Compass 스프라이트 기법은 Compass 와 함께 이용하면 보다 쉽게 사용할 수 있습니다. 스프라이트 이미지를 PSD 에서 배치하여 작업하지 않고도 스프라이트 이미지를 자동 배치하고 스타일시트를 생성할 수 있도록 도와줍니다. Compass 에서 다음의 몇가지 방식을 사용하여 스프라이트를 사용하는 법을 알아보도록 하겠습니다. Compass : Basic Spirte Tutorial Setup(설정) 사용자의 폴더에 스프라이트로 사용할 PNG 이미지가 4개 있다는 전제하에 설명하도록 하겠습니다. 이미지 폴더의 구성은 다음과 같습니다. images/one/ball.pngimages/one/bus.pngimages/one/check.pngimages/one/coupon.pngima..
StyleSheet/Compass 2016. 9. 29. 10:17

콤파스 구성 옵션 살펴보기(Compass Configuration Properties)

Compass Configuration Properties 이전 포스팅에서 대략적인 콤파스의 구성 파일의 전반적인 내용을 살펴보았습니다. 만약 살펴보지 않았다면 다음의 링크에서 살펴보시길 바랍니다. [이전 포스팅 참고자료] : 콤파스 구성파일 작성 구성 속성들은 속성명, 타입, 내용에 대해 알아보도록 하겠습니다. 참고로 모든 프로퍼티를 다루지 않기 때문에 더 많은 내용을 알고 싶다면 Compass Documation 을 살펴보시길 바랍니다. # ---------------------------------------------------------------- # # ############ Compass Configuration Properties ############ # -----------------..
StyleSheet/Compass 2016. 9. 29. 10:16

콤파스 구성파일 작성하기(Ruby-based Configuration Reference)

Ruby-based Configuration Reference compass 구성파일(.rb)은 sass 로 할 수 있는 설정보다 영리하고 더 많은 일들을 할 수 있습니다. 이 구성파일은 사용자의 프로젝트를 설정하는데 간단,편리함을 제공해 줍니다. [참고] 콤파스 설정 참고: Compass Documentaion 기본 구성방식(Basic format) 대부분의 구성 속성들은 간단한 프로퍼티를 배치하는 방식입니다. 예를 들어, 아래와 같은 방법입니다. css_dir = "stylesheets" 대부분의 .rb 파일을 구성하는 속성은 기본 타입값을 가지고 있으며 속성에 설정될 수 있는 기본타입에는 세가자 타입이 있습니다. 타 입 내 용 String single or double quotes 를 사용한 텍스트..
StyleSheet/Compass 2016. 9. 29. 10:16

Compass & bourbon

Compass 확장팩 Compass 는 Sass 에서 활용하는 프레임워크입니다. CSS3, 타이포그래피, 그리드, 레이아웃 등 미리 정의된 스타일 모듈을 불러와서 사용할 수 있습니다. Compass 장점ㆍ 표현을 위한 class 속성을 사용하지 않고도 의미있는 마크업이 가능합니다. ㆍ 재사용 가능한 웹 디자인 모듈이 유용하게 쓰일 수 있습니다. ㆍ Spites 이미지를 손쉽고 빠르게 만들어 사용할 수 있습니다. ㆍ Compass 에서 제공되는 CSS3 믹스인을 활용하면 코드 작성이 쉬워집니다. ㆍ 아름다운 타이포그래피를 제공합니다.(우리나라 현실에서는 그닥...ㅠ) Compass 명령어 알아보기 gem install compass compass --version or compass -v compass -..
StyleSheet/Compass 2016. 9. 29. 10:15