오늘은 어제 배운 flexbox를 활용한 와어프레임 구성 및 개체의 정렬 방법을 활용하여 계산기 목업을 만들어보았다. 위 이미지는 코드스테이츠 강의에서 볼 수 있는 튜토리얼 계산기 목업이다. 기본적이고 심플한 형태의 계산기 모습이지만 div 박스들과 버튼을 정렬하는 과정에서 예상치 못 한 난관에 부딪히는 경우가 꽤 있었다. 각각의 개체들을 정렬하는 과정에서 사용되는 태그 및 속성들을 유심하게 살펴보면서 튜토리얼을 따라갔지만, 배운 내용을 토대로 나만의 계산기 목업을 만들어보려고 하니 막상 진행이 잘 되지 않았다. 처음엔 튜토리얼에서 만든 계산기에 약간의 기능 추가나 색상 변경 정도만 하려고 했지만, 코드스테이츠 크루님께서 보여주신 전 기수 분들의 작품들을 보게 되자 나 역시 조금 더 퀄리티 있는 과제물을..

CSS(Cascading Style Sheets)는 HTML로 만들어진 웹 페이지의 뼈대에 살을 입히고 디자인하는 언어이다. 웹 페이지의 스타일과 레이아웃을 정의하고 전달력, 가독성, 디자인적 탁월함 등의 더 나은 사용자 경험(UX, user experience)을 제공할 수 있는 사용자 인터페이스(UI, user interface)를 만드는 수단인 것이다. 프론트엔드 개발자는 CSS를 활용하여 다음과 같은 작업을 수행할 수 있어야 한다. 화면의 구성, 배치컴포넌트 기능에 따른 분류 및 제작타이포그래피와 색상의 적용요소의 정렬이나 배색에 대한 감각 기르기UI/UX에 대한 고민 및 바람직한 구현 방향에 대한 고민셀렉터는 요소의 이름이나 ID, Class를 선택하고 선택한 특정 요소에 적용할 내용을 중괄호 ..