Tip – SPACE XIAN

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;
}

간단하게 블록의 배경만 바꿔주는 코드다. 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을 이용하면 처음엔 조금 복잡할 수는 있지만 수정에 용이하다는 장점이 있다.

[카테고리:] Tip

mixin을 이용해 float을 clear하기

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