4일차. CSS 응용

오늘의 학습

CSS를 응용해서 페어와 함께 계산기 틀을 Html로 만들고, 이를 CSS 그 중에서도 Flex를 사용해서 꾸미는 것을 배웠다. 부모가 자식 요소를 정렬를 해주는 display:flex; 나 align-items, justify-contents 개념은 이전에 예습하고 있었지만, 자식 요소에서 여백 공간을 나눠갖는 flex: 0 1 auto; 관련된 부분은 완전히 처음(은 아니고 내가 예전에 잘 안 쓴다고 생각해서 반쯤 흘려들어서...)이라 헤매는 감이 있었다.

새삼 Flex가 공간 배치 감각이 있어야 해서 배울 때 어렵긴 한데, Flex가 나오기 전에는 position이나 float로 더 어렵게 레이아웃을 배치해야 했다고 하는 글들을 보다보니 어휴... 차라리 나와서 다행이라는 생각이 든다. 

 

---

스스로 묻는 하루치 Question

- 와이어프레임이란?

웹 또는 앱을 만들 때, 그 뼈대를 먼저 그리는 단계를 말한다. 단순한 선과 도형으로 처음 레이아웃을 보여준다. 기능이 구현되는 건 아니다보니 UX(사용자 경험 User Express) 판단용은 아니다. 

요즘은 주로 피그마Figma를 많이 쓰는 것 같다. 

https://www.figma.com/login

Figma

 

부모 요소에 적용해야 하는 속성들이 자식 요소들의 정렬과 관련이 있었다면, 자식 요소에게 적용해야 하는 속성인 flex 는 요소가 차지하는 공간과 관련이 있습니다.

자식 요소의 flex 깊이 파기(부모 요소 flex는 어느 정도 이해했다고 생각함...)

위 인용문과 같이, 자식 요소가 가지는 flex 값은 '요소가 차지하는 공간'과 관련이 있다. 

아래 규칙을 이해해두자. 차례로 grow shrink basis의 수치이며 fiex-grow:0; 이런 식으로 하나만 쓸 수도 있다.

flex: grow shrink basis;
flex: 0 1 auto;

flex: 0 1 auto; 는 flex: initial;라고 표현된다. flex: 0 0 auto; 는 flex: none; 와 같다.  

이 flex는 절대적 크기가 아니라 총합에서의 비율로 공간을 차지한다. 자식 요소의 grow 값/자식요소간 grow 값의 총합 비율로 빈 공간을 가져가는 것이다.

 

- flex-grow와 flex-shrink를 같이 쓰는 건 추천하지 않는다. 가능하다면 shrink는 1로 두고, grow의 변화로 사용하기를 권장한다. flex-shrink는 width나 flex-basis속성에 따른 비율이기 때문에 실제 크기를 예측하기 어렵기 때문이다.

 

- flex-basis는 늘어나거나 줄어들기 전에 갖는 기본 크기를 말한다. 가령 flex-grow가 0일 때 basis의 크기를 30px로 지정하면, 늘어나거나 줄지 않고 계속 30px를 유지한다. 기본값은 auto라서, 설정하지 않을 땐 내부 컨텐츠 크기에 따라 사이즈가 결정된다. 
- flex-grow 속성의 값이 0인 경우에만 flex-basis 속성의 값이 유지된다. flex-grow 속성의 값이 양수일 경우, 늘어나면서 flex-basis 속성에 적용한 값보다 커질 수도 있다. width와 flex-basis를 동시에 적용하는 경우, flex-basis가 우선 적용된다. 콘텐츠가 많아 자식 박스가 넘치는 경우엔 width가 정확한 크기를 보장하지 않는다.

- flex-basis 속성에 0값(반드시 여기엔 단위가 붙어야 함)을 주면, 절대적 flex item이 되어서 상위 flex container 기준으로 크기가 결정된다. 반면 flex-basis 속성에 auto를 주면 상대적 flex item이 되어서 콘텐츠 양 기준으로 크기가 결정된다. 

- 부모 컨테이너 값이 600이고 각 item의 flex-basis가 300일 시, flex-shrink가 0이면 부모 요소 밖으로 튀어나간다. flex-shrink가 1이라면 부모 요소에 맞춰 알아서 줄어든다. 하지만 flex: none; 를 적용시키면 flex item의 크기를 작아지지 않게 고정하게 된다. 

 

- text align에서 end와 right는 무슨 차이가 있을까?

좌에서-우로 가는 direction이라면 둘다 똑같이 우측으로 붙는 효과를 낸다. 그러나 만약에 direction이 우에서-좌로 간다면, right는 방향과 상관 없이 우측에 붙지만 end는 좌측 끝에 붙게 될 것이다. 

 

 

아래는 사적으로 개인 계산기 디자인을 손보면서 알아본 CSS 효과들.

- 유리처럼 반투명 효과를 내는 계산기를 만들기로 했다. 이를 위해 보통 반투명한 filter로 블러 처리를 준다고 배웠는데, 거검색해보니 backdrop-filter이 더 효과적인 것 같아서 이걸로 사용하기로 했다. backdrop-filter은 요소 뒤에 흐린 효과를 주거나, 다양한 색상 필터링을 효과로 줄 때 사용한다. backdrop-filter에는 여러 효과가 있는데 배경색을 rgba(255, 255, 255, 0.5)처럼 반투명하게는 해놔야 효과를 확인할 수 있다. 

블러 처리를 줄 때 filter은 컴포넌트의 테두리를 벗어난다. 그러나 동일한 blur 필터이지만 backdrop-filter은 컴포넌트 내부에서만 영향을 받는다. 

 

 

ERROR 상황!

1. body에 지정한 폰트가 버튼에서 적용되지 않는 현상. -> Button 태그에서 따로 font family 지정을 해주니 해결 되긴 했는데, 서치 결과 'Buttons have their own font-family, so don't inherit from the cascade unless you tell it to.' 라고 나온 걸 보니까 버튼은 상속받지 않는 모양. 어떤 요소들이 body에서 상속받지 않는지(a 태그도 비상속이라고 알고 있는데 맞나.)정확하게 알아둬야겠다는 생각이 든다. 

 

 

스스로 칭찬하기

1. 처음으로 페어 프로그래밍을 진행했다. 먼저 컨택 넣어서 떨리는 마음으로 인사한 순간을 잊지 못할 것 같다.
2. 계산기 디자인 기초만(ㅋㅋ)만들어놓고 말려고 했는데 지난 기수 작품들 보고 우와... 하는 마음에 뒤늦게 끄적끄적 혼자 효과를 추가하기 시작했다. 왜 이렇게 다들 아이디어가 뛰어난 거지.
3. flex가 다시 손에 익기 시작했다... 이전에는 이해를 포기했던 여백 나누기 부분을 조금 알 것 같다.

 

앞으로 해야 하는 것

• 피그마 다루는 법을 대략적이라도 강의를 보고 알아봐야겠다는 생각. 비싸게 팔렸다고 들었는데 레이아웃 짜기에 디자인 비전공자도 엄청 편하게 만들어두긴 했더라.
• 별 건 아닌데 ...폰트를 자의로 바꿔 적용할 때, 다른 포맷들로 여러 개 같이 넣어서 다른 플랫폼에서 해당 폰트가 적용 안 되는 상황에서 다른 폰트로 글씨를 읽을 수 있게 한다고 알고 있다. 정확한 '규칙'을 머리에 넣는 게 목표.
• 와이어프레임을 보통 다른 사람들은 어떻게 보기 쉽게 짜는지...? 알아보고 싶음.
• 자식 요소 flex를 남에게 내 언어로 이해시킬 수 있을 정도로 익히고 싶다. 주말에 ...해야지...