DEV_달리자

폴더 구조 Root/src/ 외에는 자유롭게 관리 아래 예시는 7-1 패턴 (상황에 맞게 파일들을 나누고 폴더를 쪼개 하나의 css로 컴파일하여 사용 /* 공식 문서에서의 이상적인 구조 */ scss/ | |– **abstracts/** | |– _variables.scss # Sass 변수 | |– _functions.scss # Sass 함수 | |– _mixins.scss # Sass 믹스인 | |– _placeholders.scss # Sass 플레이스홀더 | |– **base/** | |– _reset.scss # 리셋/정규화 | |– _typography.scss # 타이포그래피 규칙 | … # 기타. | |– **components/** | |– _buttons.scss # 버튼 | |– _..

전역 범위 변수 :root{ ... } 전역 범위의 변수를 만들기 위해 사용 :root { --main-color: #111111; --default-color: #111111; --hover-color: #595c60; --active-color: #2d2d2d; --disabled-color: #a0a0a0; --background-color: #f1f3f6; } 지역 범위 변수 지역 범위로 생성하려면 변수를 사용할 선택기 내부에 선언 여기서 잠깐! scss는 변수명의 하이픈(-)과 언더바(_)를 구분하지 않음, key_color = key-color $error-colors: ( 'default': $error-color, 'hover': #cb0837, 'active': #b8002c, 'disa..

사전 지식 CSS란 Cascading Style Sheets W3C에서 1996년 도입한 것, 문서(content)와 표현(presentation)을 분리하여 수정 관리할 수 있도록 발전하게 된 계기로 탄생하게 됨 사용자에게 문서를 표시하는 방법을 지원하는 규칙 기반 언어, 웹 표준 기술 중 하나 CSS Preprocessor란 EX) Sass, Scss, Less, Stylus CSS 전(예비)처리기, CSS가 동작하기 전에 사용하는 기능, (↔ 후처리기라는 개념도 존재함!) CSS가 고도화될 수록 커지는 불편함을 해결하면서도, 웹에서는 표준 CSS만 동작한다는 점에서 나온 방식 전처리기로 작성 → 웹에서 표준의 CSS로 컴파일 → 동작 SASS란? Sass는 Preprocessing으로 궁극적인 목적..

BEM의 기본 구조 및 장점 기본 구조 Block(”블록”, 구역), Element(요소), Modifier(”변경자”, 수식어) 컨벤션 사용 각각 --, __로 구분 기본적으로 ID를 사용하지 않으며, 오직 class만을 사용 '어떻게 보이느냐'가 아닌 '어떤 목적인가'에 따라 이름 지음 예시 에러 메시지를 띄우는 P 태그에는 .red가 아닌 .error라는 이름 block-name과 같이 하이픈 하나만 써서 해결 장점 class name 중복을 방지 직관적임 전체 DOM tree 구조를 다시 보지 않아도 됨 Block Element Modifier 각 개념 정리 Block (블록) : 구성 요소의 가장 바깥쪽 상위 요소를 블록으로 정의 재사용 가능한 기능적으로 독립적인 페이지 컴포넌트 (다른 곳에 여..

CSS 대표적 3가지 방법론 - OOCSS - BEM - SMACSS OOCSS Object Oriented CSS 객체 지향에 따라 고안된 설계 방식, 구조와 외형의 분리, 컨테이너와 내용의 분리 (1) 구조와 외형을 분리 구조: width, height, padding... 외형: color, border-color, font-color... tel email // css .btn{공통 스타일 정의} .common-skin{공통 스타일 정의} (2) 컨테이너와 내용을 분리 위치에 의존하지 않는 스타일 정의 어떤 태그라도 동일한 외형을 제공 어디에서나 재사용 가능한 클래스 기반 모듈 구축 ... ... .sub-title {font-size:16px} 장점 공통된 부분을 정의해서 재사용이 가능 구조적 ..