5일차 회고
ㅁ 주요 내용
1. [실습] 계산기 목업 페어프로그래밍
원래는 오늘까지 계산기 목업 프로그래밍 예정이었으나, 우리 페어(팀)는 금요일날 거의 다 완성시켰기 때문에 금일은 CSS관련 자율학습을 진행하였다.
금주에는 목업된 계산기를 자바스크립트를 통해 계산기능까지 구현하는 작업이 예정 되어 있다. 이와 관련하여 이전 내용을 복습하고, 다소 번잡했던 id명과 class명 수정하는 작업을 했다.
//* AS-IS *//
<body>
<div id="container">
<section id="display">
<div class="ff" id="fomula"></div>
<div class="ff" id="value">0</div>
</section>
<section id="key">
<div class="button">
<button class="dd">AC</button>
<button class="dd">+/-</button>
<button class="dd">%</button>
<button>÷</button>
</div>
<div class="button">
<button class="cc">7</button>
<button class="cc">8</button>
<button class="cc">9</button>
<button>×</button>
</div>
<div class="button">
<button class="cc">4</button>
<button class="cc">5</button>
<button class="cc">6</button>
<button>-</button>
</div>
<div class="button">
<button class="cc">1</button>
<button class="cc">2</button>
<button class="cc">3</button>
<button>+</button>
</div>
<div class="button">
<button class="cc" id="zero">0</button>
<button class="cc">.</button>
<button id="rr">=</button>
</div>
</section>
</div>
</body>
< 내가 생각한 문제점 >
- id와 class에 정체성이 없어, CSS를 작성할때도 계속 html파일로 넘어와서 id명과 class명을 수시로 확인해야 함
< 해결 방안>
- BEM 방식 적용하기
- BEM방식
- Blcok, Element, Modifier 3가지로 클래스 이름을 짓는 방식
- Block: 페이지 전체 Element(요소)를 의미하거나, 하위 Element(요소)를 감싸는 컨테이너를 의미
- Element: Block을 구성하는 단위, Block은 독립적인 형태인 반면, Element는 의존적인 형태임
- Element: Blcok이나, Element의 속성을 담당. 다르게 동작하는 Block이나, Element를 만들때 사용
//* TO-BE (BEM적용) *//
<body>
<div id="calculator">
<div id="output">
<div class="output__fomula">(식)</div>
<div class="output__result">0</div>
</div>
<div id="rows">
<div class="rows__btn">
<button class="rows__btn--reset"> AC </button>
<button class="rows__btn--op"> +/- </button>
<button class="rows__btn--op"> % </button>
<button class="rows__btn--op"> ÷ </button>
</div>
<div class="rows__btn">
<button class="rows__btn--num"> 7 </button>
<button class="rows__btn--num"> 8 </button>
<button class="rows__btn--num"> 9 </button>
<button class="rows__btn--op"> × </button>
</div>
<div class="rows__btn">
<button class="rows__btn--num"> 4 </button>
<button class="rows__btn--num"> 5 </button>
<button class="rows__btn--num"> 6 </button>
<button class="rows__btn--op"> - </button>
</div>
<div class="rows__btn">
<button class="rows__btn--num"> 1 </button>
<button class="rows__btn--num"> 2 </button>
<button class="rows__btn--num"> 3 </button>
<button class="rows__btn--op"> + </button>
</div>
<div class="rows__btn">
<button class="rows__btn--zero"> 0 </button>
<button class="rows__btn--dot"> . </button>
<button class="rows__btn--op"> = </button>
</div>
</div>
</div>
</body>
< 장점 >
1. 목적과 기능을 비교적 명확히 전달 가능
2. 요소의 구조를 효율적으로 전달 가능
3. 즉, 클래스 네임만으로 마크업 구조를 알 수 있음
< 단점 >
1. 클래스 네임이 너무 김
2. 더블클릭 선택이 불편..
2. BEM방식 연습 및 CSS복습겸 만든 계산기 목업 ver2
See the Pen Untitled by WONHO22 (@WONHO22) on CodePen.
