[etc] CSS 인터뷰

CSS 인터뷰

1. reset CSS 란?

1) 정의

- CSS 설정을 초기화 하는데 목적이있다.

- 브라우저마다 기본 padding, margin 값이 다르기 때문에 화면에 다르게 나올 수 있다.

- 작업 이전에 reset CSS를 실행하여 초기화 한다

- 대표적인 reset css 

Eric Meyer’s “Reset CSS” 2.0

HTML5 Doctor CSS Reset

Yahoo! (YUI 3) Reset CSS

Universal Selector ‘*’ Reset

Normalize.css

- reset css 코드 주소 : CSS RESET.COM

2. float 속성

1) 정의

- left, right 같은 속성으로 배치를 자유롭게 할 수 있다

- http://heeestorys.tistory.com/837

3. float를 clearing 하는 방법

1) 정의

- 높이가 가변적인 다단 컬럼형 레이아웃을 시도할 때 주로 사용한다

- float 속성은 엘리먼트를 좌측, 우측으로 배치하면서 주변 콘텐츠 배치에도 영향을 끼친다

- float된 엘리먼트가 부모 엘리먼트의 높이에도 영향을 준다.

- 이런 문제를 해소하기위하여 clearing 사용

2) 방법

a. 가상 선택자: after로 clear 속성추가

http://naradesign.net/wp/2008/05/27/144/

4. CSS 스프라이트와 효과

1) 정의

- 여러 개의 이미지를 하나의 이미지로 합쳐서 관리하는 이미지

2) 효과

- 서버에 이미지를 요청하면 이미지 수 만큼 데이터를 가져와야한다.

- 스프라이트를 사용함으로 로딩 시간과 용량을 줄이는 효과가 있다.

3) 사용법

- http://tcpschool.com/examples/tryit/tryhtml.php?filename=css_basic_imageSprites_01

5. CSS 전처리기와 Sass(Syntactically Awesome Stylesheets)

1) 정의

- CSS 코드를 간결하게 작성 할 수 있도록 사용되는 도구

- 특정 변수로 만들어서 반복적인 작업에 사용된다

- Sass가 대표적이다

- 잘못 사용하면 오히려 독이 될 수 있다