멋쟁이사자처럼 프론트엔드 스쿨 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. 위니브 로그인 과제

🔨 부족한 부분

---

1. 모달 기법
   "팝업이랑 차이가 뭐지? 비슷하지 않나?", "그냥 display:none; 하면 되지 않을까?" 등등 처음 접한 개념이라 생각이 많았다.
   위에 생각을 한 번에 정리하자면, 모달은 새로운 창을 띄우는 개념이 아닌 새로운 레이어를 위에 띄워 사용자의 이목을 끄는 화면전환 기법이다. 그래서 팝업과 다르고 단순 display:none; 과 다르다.
2. CSS 모듈화
   동일한 기능을 하고 CSS 스타일이 비슷한 것들을 모아 재활용 가능하도록 만드는 것으로 이해하고 있다. 앞으로 JS, React를 학습하면서 더 많이 활용할 것 같다.