CSS도 대충 정리 했겠다 계산기를 하나 만들어 볼 생각이다
사실 어제 CSS 연습용으로 만들긴 했는데 팀원들이 없었다면 혼자 못 만들었을것 같아서 다시 만들어 보려고 한다..
TMI : link 도 안걸어놓고 왜 적용이 안되는지 헤매고 있던 나;;
1. 목표 : 아래와 같은 계산기 만들기
어제 만들면서 새로 알게 된 사실과 문제가 여럿 있었는데 최대한 이 부분들을 유의하면서 만들어 보도록 하겠다
CSS에서 선언하는 순서가 꽤 중요하다는 점
ex) background-color가 border 위로 덮어 씌워져 선이 더 얇아보이는 등의 문제가 있었음border 두께로 인해 선이 서로 안맞고 삐뚤할 수 있는 점
기능 및 디자인에 따라 구역을 처음에 잘 나눠야 한다는 점
2. 구역 나눠보기
3. 결과물
0.5x로 보면 편하다
어제 만든 결과물과 다른 점
-
어제는 div로만 만들었는데 오늘은 button을 활용해보았다
-
button에서 자동으로 만들어지는 border 때문에 틀이 깨지는 문제가 또 발생할뻔 했지만 다행히 button 속성 중에 border-left, border-right-width .. 등등 세세하게 적용 가능한 속성들이 있어서 잘 넘어갔다
혹시나 하는 마음에 transparent 가 먹히나 싶어 넣어봤는데 잘 됐다
-
button 의 크기는 px로 할당 해줬는데 일일이 px을 계산해서 넣어줬다
350px 의 30% 는 105px 이니까 5개의 버튼에 각각 21px 씩 값을 준다 이런식..
반응형으로도 만들어 보고 싶은데 아직 어려운 것 같다 -
border 색상이 조금 진한 것 같아 연하게 하려고 여러 회색을 넣었음에도 크게 차이가 없자 앗싸리 white를 넣었는데 연한회색이 된게 조금 의문이긴 하다..! ㅎ
아무튼 이렇게 해서 어제 만들어 본 계산기를 다시 만들어 보았다
다음에는 기능도 만들어 볼 수 있길..!
엉금엉금