[Day 7] CSS Flex 활용 :: 계산기 Mock-up 제작

Html, Css 활용하기

오늘은 Css flex box를 활용해 계산기 목업을 제작했다. 계산기 목업은 피그마에서 와이어 프레임을 간단하게 제작하고, 레이아웃 작성 후 css 수정의 순서로 만들었다. 피그마 툴을 거의 처음 써보는데, 어떤 기능이 있는지 제대로 파악을 못해서 약간 주먹구구식으로 제작했다. 주말동안 피그마의 활용법에 대해서 조금 더 공부해보아야겠다. 

 

오늘 다룬 개념 중 어려웠던 부분은 flex-item 의 grow shrink basis 속성이었다. grid 에서 비율을 설정할 수 있는 것과 비슷한 느낌인 것 같았다. 개념 정리하고, 앞으로 많이 써보면 익숙해지겠지!

 

그리고 css의 네이밍 컨벤션에 대해서 검색해보았는데, css가 왜 쓰면 쓸수록 어렵다고 하는지 조금은 알 것 같았다. css가 너무 global 하기 때문에 큰 프로젝트에 사용할 때 주의해야 할 점이 많다는 것, 컴포넌트 방식의 개발이 보편화되면서 css 가 가진 구조적 문제를 해결하기 위해 다양한 방법들이 새롭게 등장하고 있다는 것. 새로운 기술이 계속해서 등장하고 발전하는 과정에 있기 때문에, 이런 것들을 놓치지 않는것도 FE 개발자로서 가져야 할 중요한 역량이라는 생각이 들었다.

 

아! 그리고 오늘 오전 실시간 세션에서는 일을 잘 하는 것은 곧 질문을 잘 하는 것이라는 내용을 다시 상기시켜주셨다. 질문을 잘 하기 위해서는 내가 무엇을 알고 모르는지 정확하게 파악해야 하는데, 그래서 메타인지가 중요한 것 같다. 또 개발자가 되기 위해 공부하는 방법에 대해서도 간략하게 말씀해주셨는데, 기본 개념과 이정표를 코스를 통해 파악하고 필요한 정보를 구글링하여 얻는 방식으로 공부하길 권장하셨다. 

오늘 배운 것

• 레이아웃 : 요소를 목적에 맞게 배치하는 것
• 와이어프레임 : 웹/앱 개발시 레이아웃(뼈대)를 그리는 단계, 레이아웃과 구조를 포함하지만 전환효과, 애니메이션, 스타일링은 포함되지 않는다. 화면의 영역을 구분하는 것으로, 각 영역에서 사용할 주요 태그를 메모하는 방식으로 작성하면, 프로그램의 목적을 비교적 빠르게 파악할 수 있다. 
• 화면 나누기 : 콘텐츠의 흐름은 보통 좌>>우, 위>>아래로 흐른다. 따라서 수직분할 >> 수평분할의 순서로 진행한다. 
• CSS BEM (.Block__Element--Modifier)
  • 네이밍 컨벤션이란, 쉽게 말해 이름을 짓는 규칙이다. 식별자의 이름을 가독성 좋고 의미를 바로 알 수 있게 지어야 다른 사람과 협업을 하거나, 프로그램을 확장하기 위해 코드를 다시 수정할 때 바로 이해할 수 있을 것이다.
  • CSS의 대표적인 네이밍 컨벤션은 BEM 방식이 있다. 
  • Block : 기능적으로 독립되어 재사용 될 수 있는 컴포넌트 단위 
  • Element : 블록에서 분리될 수 없는, 블록의 일부분. Block__Element 와 같이 두개의 언더스코어로 연결
  • Modifier : Block 혹은 Element의 행동, 상태, 외양을 정의하는 것. --Modifier와 같이 두 개의 하이픈으로 연결.
• 아래의 예제 코드를 보면 더 확실하게 이해할 수 있다.

<a class="btn btn--big btn--orange" href="https://css-tricks.com">
  <span class="btn__price">$9.99</span>
  <span class="btn__text">Subscribe</span>
</a>

• .btn :은 btn block을 의미하며, 여기에서 변화되는 세부적인 modifier들은 .btn--big, .btn--orange 등으로 추가한다.
• .btn__price : btn 블록에 속하는 btn의 요소, 일부분.
• .btn__price__text 와 같이 사용하지 않도록 주의한다.
• 예시와 같이 BEM에서는 클래스만을 사용하여 식별자를 정의하는데, 이런 규칙 덕분에 이 요소의 선택자가 id인지 class인지를 헷갈릴 필요가 없다. BEM을 사용하다보면 클래스가 굉장히 길어질 수 있지만, 그럼에도 불구하고 직관적으로 이해되기 때문에 쉽게 기억할 수 있다는 장점이 있다.

 

• flex : <grow - 팽창 지수> <shrink - 수축 지수> <basis - 기본 크기> // flex-item에 적용되는 크기 속성이다.
  • grow : 팽창 지수 비율에 따라 각 요소가 공간을 차지한다.
  • shrink : 설정한 비율만큼 박스의 크기가 축소된다. flex-basis 속성에 따른 비율로서 실제 크기 예측이 어렵기 때문에, grow와 함께 사용할 경우 기본값인 1로 사용하는 것을 권장한다.
  • basis: item의 공간 배분 전 기본 너비로, 기본 값은 auto 이다. 그러나 모든 grow,shrink,basis인 flex에서 이 속성값을 설정하지 않으면 기본 값이 0이 된다. 따라서... flex : grow값 shrink값 auto 와 같이 세팅을 해야 기본-기본 값이 된다. 
  • flex-basis가 auto인 경우에는, grow, shrink 값이 우선되며, flex-basis의 ㅡ기가 정해진 경우에는 반대로 basis 값이 우선이 된다. 
• 더 자세히 정리된 링크는 이쪽을 참고하는 것이 좋을 것 같다. 
• 오늘 만든 계산기 목업은, 이전에 Css grid를 사용하여 만들었던 것을 flex box를 활용해서 다시 만드는 느낌으로 제작하였다. 박스 구조를 어떻게 만들어야 flex 정렬을 원하는대로 할 수 있을까 고민을 했는데, 지저분 하지만 아래와 같이 간단한 와이어프레임도 만들어 보았다.

계산기를 만들기 위한 와이어프레임(?)

어떤 박스 구조로 만들까 고민을 하면서 클래스 이름도 정해보고, 정렬도 나름대로 해보았다. 간단했는데 은근 클래스 이름을 어떻게 지을지 고민이 많이 되어서, 큰 프로젝트를 하게 되면 이름을 진짜 잘 지어야겠다고 다시 생각하게 되었다.

계산기 목업 - 예전에 만들어본 계산기와 거의 달라진 것이 없다. ㅋㅋ

아무튼... 안다고 해도 다시 제대로 알고 있는지 확인하며 나아가기!

 

참고자료

https://css-tricks.com/bem-101/

BEM 101 | CSS-Tricks

https://velog.io/@ashley_ku/CSS%EC%97%90%EC%84%9C%EC%9D%98-%EB%84%A4%EC%9D%B4%EB%B0%8D-%EA%B7%9C%EC%B9%99

CSS에서의 네이밍 규칙

https://velog.io/@teo/css-history-1#%EB%B0%A9%EB%B2%95%EC%9D%84-%EC%B0%BE%EC%95%84%EB%B3%B4%EC%9E%90-css-%EB%B0%A9%EB%B2%95%EB%A1%A0%EC%99%80-bem-2013

CSS 역사로 알아보는 CSS가 어려워진 이유

+ 주말에 공부할 내용

• 웹개발 종합반 강의를 듣고 있는데, 이 강의 내용을 바탕으로 예전에 프로젝트로 진행했던 유기묘 사이트를 처음부터 다시 제작해보는것이 7월 첫째 주의 목표이다. 아직 그렇게 많은 내용을 아는 것은 아니라, 부가 기능을 빼고 메인 기능에만 초점을 맞춘 기획으로 바뀌겠지만, 그 지저분했던 코드와 엉성한 마무리가 10개월이 지난 아직도 마음에 걸려서 다시 만들고 싶었다... 
• 추가적으로 알고리즘을 최소 한 문제는 풀 것이고, 읽으려고 사 두었던 관련 서적도 읽으면서 주말을 보낼 것 같다.