1. CSS 설계 기법
2. 위니브 로그인 과제
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 이다.
🔨 부족한 부분
- 모달 기법
"팝업이랑 차이가 뭐지? 비슷하지 않나?", "그냥display:none;
하면 되지 않을까?" 등등 처음 접한 개념이라 생각이 많았다.
위에 생각을 한 번에 정리하자면, 모달은 새로운 창을 띄우는 개념이 아닌 새로운 레이어를 위에 띄워 사용자의 이목을 끄는 화면전환 기법이다. 그래서 팝업과 다르고 단순display:none;
과 다르다.- CSS 모듈화
동일한 기능을 하고 CSS 스타일이 비슷한 것들을 모아 재활용 가능하도록 만드는 것으로 이해하고 있다. 앞으로 JS, React를 학습하면서 더 많이 활용할 것 같다.
썸네일 너무 귀엽네요!!😃😃
오늘도 잘 보았습니다!ㅎㅎ
css 모듈화, 모달 기능은 저도 많이 부족하네요! 같이 파이팅 해서 채워나가요!!👍👍