Clearance 마진 병합에 대해서 W3C 레퍼런스를 찾아보다가 등장한 단어 "Clearance" CSS에 대해서 다 알진 못하더라도 대부분의 단어에 대해서 들어보긴 했다고 생각했는데 이 단어는 정말 처음 들어봤다. 처음 들어보는 단어다 보니, 당연히 W3C에 있는 문장들을 이해할 수 없었다. 도대체 clearance가 뭐야?? 구글링을 해봐도 한글로 된 설명글은 나오지 않았고 이름이 clearance 인걸로 보아 그냥 clear 속성을 가진 것을 말하나 보다 라고 생각했다. 이런 오해로 인해 더 오래 고민하고 더 오래 고생했다. 혹시 나같은 사람이 또 있을까 싶어 clearance에 대한 정리를 해보겠다. 먼저, clearance가 있으려면 clear 속성이 none이 아니어야 한다. 그런데, clear 속성이 none이 아니라고 다 clearance가 있는 것은 아니다. codepen 예시로 살펴보자. <p class="

OOCSS(Object Oriented CSS) OOCSS의 2가지 원칙 oocss는 객체 지향에 따라 고안된 설계 방식이다. 구조와 외형의 분리 컨테이너와 내용 분리 구조와 외형의 분리 기본적인 구조와 반복 정의되는 외형은 따로 정의해둔다. (공통 스타일 추상화) 구조: width, height, border, padding, margin 외형: color, border-color, background-color OOCSS Style 기본 구조가 독립적으로 지정되어 있기 때문에 향후 다른 색의 버튼이 추가되더라도 외형 스타일만 추가로 정의한다. 예를 들어 설명해보자. 이러한 방법은 객체 지향형 CSS로, 공통적인 버튼의 구조를 만들어두고 외향은 따로 정의해주는 방법이다. 그렇다면 의미론적 CSS를 살펴보자. 클래스 이름을 구체적으로 설정했고, 구조와 외형을 분리하지 않고 c

클론코딩을 하려고 웹사이트의 코드를 뜯어보면 처음 보는 :root 가상선택자와 알 수 없는 속성들 --font-family-roboto 같은 것들이 종종 보여 이에 대해 정리하려고 합니다. 전처리기 변수와 CSS 커스텀 속성 CSS 전처리기는 웹 개발에서 중요한 역할을 하고 있다. (Sass, Stylus, Less 등) 전처리기의 주요 장점 중 하나는 변수를 사용할 수 있다는 것이다. 변수를 사용하면 복사 붙여넣기를 피할 수 있고 개발과 리펙토링이 간단해진다. 그러나, 전처리기 변수에는 몇 가지 한계가 있다. 동적으로 변경할 수 없다. DOM 구조를 알지 못한다. 자바스크립트에서 읽거나 변경할 수 없다. 이러한 문제를 해결하기 위해 css 커스텀 속성이 개발되었다. 전처리기와 css 커스텀 속성은 뭐가 다른걸까? CSS 커스텀 속성 CSS 커스텀 속성은 작성자가 정의한 속성의 집합이다

Web font 오늘은 web font에 대해 알아보겠습니다. 그동안 아무 생각없이 구글 폰트에서 복사 붙여넣기 하던 폰트였는데 문득 font-family로 적용하는 방법과 @font-face로 적용하는 것 두 가지가 어떤 차이가 있는지 궁금해져 작성합니다. 웹 폰트란 무엇일까? 방문자의 로컬 컴퓨터에 폰트 설치 여부와 상관 없이 온라인의 특정 서버에 위치한 폰트 파일을 다운로드하여 화면에 표시해주는 웹 전용 폰트이다. 예를 들어, 웹 폰트를 사용하지 않았을 경우 나눔고딕 폰트가 설치되지 않은 pc에서는 기본 폰트인 돋움 글꼴이 노출되고, 나눔고딕 폰트가 설치된 pc에서는 나눔고딕 폰트가 노출된다. 그러나, 웹 폰트를 사용할 경우 방문자의 pc에 나눔고딕 폰트가 있든 없든 나눔고딕 폰트가 노출된다. 웹 폰트는 font-family속성을 사용하지만, @font-face라는 CSS 명령어를 사용해서 웹 브라우저에

속성 선택자 정리 태그의 속성을 선택 [attribute] : a[target] {color: blue;} a 태그에 target 이라는 속성을 가진 요소를 선택한다.("target"이라는 속성을 가지고 있으면 전부 선택) 태그의 속성과 속성값까지 선택 [attribute="value"] : a[target="_blank"] {color: blue;} a 태그에 [target="_blank"] 라는 속성을 가진 요소 선택 클래스 이름을 선택 [attribute~="value"] : div[class~="money"] {color: blue;} money 라는 class를 가진 요소를 선택한다. 단, 여러 개의 class가 함께 지정되어 있어도 money를 가졌다면 선택한다. 단일 클래스 이름을 가졌거나 하이픈으로 연결된 것만 선택 [attribute|="value"] : `