기본개념

[Sass] CSS 전처리기 Sass

CSS 전처리기란? CSS는 프로젝트 규모가 커지면 쉽게 지저분해지고 유지보수가 어려워지는 단점이 있다. CSS 전처리기는 이러한 CSS의 한계를 보완하기 위해 자신만의 특별한 문법을 갖고 CSS를 생성하는 프로그램이다. 메타언어로서 추가 기능과 도구를 제공하여 CSS 구문을 개선한다. 대표적인 전처리기로는 Sass, LESS, Stylus 등이 있다. Sass 그리고 SCSS Sass: Syntactically Awesome StyleSheet SCSS: Sassy SCC CSS 전처리기라고 하면 대표적으로 Sass에 대해서 들었을텐데 그 때 꼭 같이 듣게 되는 것이 SCSS이다. Sass는 들여쓰기 감지를 핵심 특성으로 갖는 표기법과 전처리기 두 가지를 의미한다. Sass는 코드를 작성할 때 중괄호를..

[CSS 기초] CSS 선택자(Selector), CSS 적용 우선순위

CSS 선택자(Selector)는 무엇인가? 말 그대로 요소를 선택하게 만들어주는 것. CSS는 HTML 요소들의 스타일을 정의한다. 스타일을 정의하기 위해서는 스타일을 정의할 요소를 선택해야하는데 이 때 사용되는 것이 선택자(Selector)이다. 위의 이미지에서 h1이 선택자고 괄호 안의 속성(property 혹은 attribute)과 값들로 h1의 스타일을 꾸며주게 된다. 이러한 선택자에는 여러 종류가 있다. CSS 선택자(Selector) 종류 1. 기본선택자 전체 선택자, 태그 선택자, id 선택자, 클래스 선택자 1-1. 전체 선택자 (Universal Selector) 패턴 설명 예시 * HTML 문서 안의 모든 요소들을 선택한다. * { color: red; } 사과종류 홍옥 홍로 아오리 ..

[HTML 기초] DOCTYPE이란?

HTML에서 doctype은 모든 문서의 최상단에서 찾을 수 있는 필수 서문이다. !DOCTYPE이란? document type의 약어로, 웹 문서가 어떤 형식으로 작성되었는지 문서 형식을 선언하는 것이다. !DOCTYPE을 쓰지않을 경우 어떻게 되는가? 웹 브라우저는 문서 형식 선언이 없으면 쿼크 모드로 렌더링 해서 각 브라우저마다 다른 형태의 결과물을 보여준다. 이것을 방지하기 위해 문서 형식 선언을 하며 이로 인해 HTML 문서를 표준모드로 렌더링 할 수 있게된다. 쿼크 모드(Quirks mode)? 오래된 웹 브라우저를 위해 디자인된 웹 페이지의 하위 호환성을 유지하기 위해 표준모드를 대신하여 쓰이는 렌더링 모드. 오래된 웹 페이지들이 최신 버전의 브라우저에서 깨져보이지 않으려는 목적이다. 표준 ..