작성일 댓글 남기기

mixin을 이용해 float을 clear하기

div나 span과 같은 요소에 float 속성을 적용하여 위치를 잡다보면 부모 요소의 height가 float 속성을 가진 요소를 포함하지 못하여 레이아웃이 비정상적으로 출력되는 경우가 있다.

이에 대해 검색해 보면 무슨 방법이니 무슨 방법이니 설명이 많이 되어 있지만, 다 필요 없고 부모 요소에 가상 클래스 :after 를 주고 빈 block 영역을 만들어 clear 값을 both로 설정하면 자식 요소의 float: left 나 float: right 를 초기화시켜 준다. 레이아웃이 정상적으로 표시될 것이다. CSS에서 코드는 다음과 같다.

부모 요소:after {
	content: "";
	display: block;
	clear: both;
}

그런데 float을 초기화 시켜줘야 하는 부모 요소가 하나면 상관없지만, 2개 3개를 훌쩍 넘어서게 되면 매번 입력하기가 힘들다. Class를 만들어서 적용시켜주는 방법도 있지만 SCSS에서는 mixin을 만들어 해당 부모 요소에 직접 설정할 수도 있다.

mixin 코드는 다음과 같다.

@mixin clearfix() {
	&:after {
		content: "";
		display: block;
		clear: both;
	}
}

사용할 때는 아래 코드를 입력해 준다.

@include clearfix();

예를 들어, 아래와 같이 입력했다면

section {
	padding: 1em;
	@include clearfix();
}

컴파일된 CSS 파일에는 다음과 같이 표시된다.

section {
	padding: 1em;
}

section:after {
	content: "";
	display: block;
	clear: both;
}

 

작성일 댓글 남기기

::selection – 마우스 드래그로 블록 지정시 스타일 주기

간단하게 블록의 배경만 바꿔주는 코드다. mixin을 사용했다.

PC와 모바일에서 모두 작동해야 하므로 모바일을 위한 접두어(-webkit-, -moz-)를 붙여줘야 한다.

@mixin selection($background) {
	$prefixes: ("-webkit-","-moz-", "");
	@each $prefix in $prefixes {
		::#{$prefix}selection {
			background: $background;
		}
	}
}

사용할 때는 아래 코드를 사용한다.

@include selection(색상값);

직접 css로 입력하면 다음과 같다.

::-webkit-selection {
	background: 색상값;
}
::-moz-selection {
	background: 색상값;
}
::selection {
	background: 색상값;
}

직접 입력하는게 더 편해보이지만, 만약 배경만이 아니라 다른 요소가 더 들어가 있고, 수정해야 할 일이 생기면, 작업은 수정해야 할 요소 개수 * 3개  가 된다. mixin을 이용하면 처음엔 조금 복잡할 수는 있지만 수정에 용이하다는 장점이 있다.

작성일 댓글 남기기

SASS와 SCSS? 결론은 SCSS

XE/라이믹스 레이아웃과 게시판 스킨을 만들면서 CSS를 다루어 보았다.

HTML로 틀을 만들고 CSS로 스타일을 주다보면 어느새 1000줄은 훌쩍 넘어간다.

실력이 없어서 그런지는 몰라도 나는 그랬다.

 

그러다 scss 확장자를 알게 되었고, 덕분에 그나마 편하게 CSS 파일을 만들었다고 생각했지만..

scss 확장자를 가진 파일의 장점을 전혀 활용하지 못했고, 가장 낮은 수준의 활용만 했다는 것을 알게 되었다.

 

그래서 앞으로 필요에 의해서든 취미로든 뭐로든 웹디자인을 하려면 CSS만 가지고는 어렵다는 결론을 내렸다.

SCSS를 해야 한다.

 

SCSS를 찾아보니 SASS가 나온다. SASS는 뭐고 SCSS는 뭔가.

 

먼저는 SASS다. Syntactically Awesome StyleSheets = SASS = 사스.

쉽게 말하면 컴파일이 필요한 프로그래밍 언어다. SASS로 작성한 파일을 컴파일하면 CSS 파일이 생성된다.

그러니 조건문, 반복문, 변수활용, 함수 등등 기존 CSS에서는 생각지도 못했던 방식으로 CSS를 만들 수 있다.

 

SCSS는 Sassy CSS 라고 한다. Sass한 CSS라고. SCSS는 SASS와 다른 별개의 것이 아니라 SASS의 문법이다.

SCSS는 SASS보다 CSS스럽다. 무슨말이냐면, SASS에는 중괄호가 없는데, SCSS에는 중괄호가 있어서 좀 더 익숙하게 코딩을 할 수 있다는 것이다. 가독성 뿐만 아니라 중괄호와 세미콜론을 사용하기 때문에 컴파일에서도 에러가 줄어든다고 한다.

그래서 대부분 SCSS 문법을 사용한다고.

 

결론은 SCSS다.