멋쟁이사자처럼 프론트엔드 스쿨 2기 15_Day
📖 오늘 학습 내용
1. CSS 설계 기법
2. 위니브 로그인 과제
1. CSS 설계 기법
1) OOCSS (Object Oriented CSS)
🕵️♀️ OOCSS란?
UI에 있는 것들을 모두 객체로 생각하고 여러가지 모듈로 만들어 조립하는 기법입니다. 같은 형태의 UI 에 스킨만 다르다면 구조와 스킨을 분리하여 조합 합니다.<button type="button" class="btn"></button> <button type="button" class="btn btn-close"></button>
.btn { width: 200px; height: 80px; font-size: 30px; } .btn-close { background: black; color: #fff; border: 3px dotted #fff; }
구조에 해당하는 btn 클래스에는 width, height, padding, margin 등 레이아웃에 영향을 미치는 속성들이 포함됩니다.
스킨에 해당하는 btn-close 클래스에는 font 관련 속성, color, background, border 등 레이아웃에 영향을 미치지는 않지만 시각적인 영향을 주는 속성들이 포함됩니다.
해당 기법은 구조와 스킨을 조합하여 사용하는 기법 특성상 정의된 클래스를 찾아 조립하는 게 좀 번거롭고 어려울 것 같습니다.
2) SMACSS (Scalable and Modular Architecture for CSS)
🕵️♀️ SMACSS란?
CSS 코드를 베이스, 레이아웃, 모듈, 스테이트, 테마로 역할에 따라 분리하는 기법입니다.
해당 기법은 다섯 가지 역할로 분리하다 보니 클래스명 길이가 길어질 것 같고 CSS 코드 길이도 길어 질 것 같다는 생각이 들었습니다.
3) BEM (Block, Element, Modifier)
🕵️♀️ BEM이란?
OOCSS 와 같은 모듈 기반의 방법을 베이스로 두고 있습니다. block, element, modifer로 분리하는 기법입니다.
.error__link--off, .opacity-half__btn
에서 error와 opacity-half는 block, link와 btn는 element, off는 modifer라고 할 수 있습니다.
2. 위니브 로그인 과제
🔨 부족한 부분
- 모달 기법
"팝업이랑 차이가 뭐지? 비슷하지 않나?", "그냥display:none;
하면 되지 않을까?" 등등 처음 접한 개념이라 생각이 많았습니다.
위에 생각을 한 번에 정리하자면, 모달은 새로운 창을 띄우는 개념이 아닌 새로운 레이어를 위에 띄워 사용자의 이목을 끄는 화면전환 기법입니다. 그래서 팝업과 다르고 단순display:none;
과 다릅니다.- CSS 모듈화
동일한 기능을 하고 CSS 스타일이 비슷한 것들을 모아 재활용 가능하도록 만드는 것으로 이해하고 있습니다. 앞으로 JS, React를 학습하면서 더 많이 활용할 것 같습니다.
Author And Source
이 문제에 관하여(멋쟁이사자처럼 프론트엔드 스쿨 2기 15_Day), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@aydenote/멋쟁이사자처럼-프론트엔드-스쿨-2기-15Day저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)