TailwindCSS & react-icons 이용해서 만들었다.
먼저 사용해보면서 느낀 장단점을 정리하자면 ..
Tailwind CSS 장점
1. 다른 스타일 라이브러리에 비해 스타일마다 이름을 생각할 필요가 없다.
2. 원래 스타일 정의할 때보다 짧게 스타일을 정의할 수 있다.
ex) width: 24px; -> w-6
3. 디자인 하다보면 가볍게 패딩이나 마진 주고 싶을 때가 있는데 그때마다 class명 짓고 쓰는게 불편하지만, tailwind는 간단하게 p-2로 줄 수 있다.
Tailwind CSS 단점
단점은 뭐 .. 코드가 보기 안좋아지는정도(class이름이 길어질 경우)가 있지만 장점이 뛰어 넘는다는 것을 느꼈다.
아이콘을 사용할 일이 간간히 있을거 같아서
react-icons 라이브러리를 사용했다. 그러나 추천하진 않는다.
React-icons
1. 개인적으로 아이콘이 이쁜 아이콘은 아님 .. (솔직히 flaticon에서 아이콘 가져올 때가 더 이쁘다고 생각했다.)
2. 종류가 많은데 예쁘게 쓸만한 건 많이 없음.
중요한건 예쁘지 않다 .. 이런거 쓰는 이유는 예쁘게 보이고 싶어서 인데 예쁘지가 않다 ..
5/6 월 - 1 차
아직 페이지를 만들진 않아서 연결하진 않았지만 .. 그동안 가장 애먹었던건 CSS 이다. 하면서도 정말 CSS 탄탄하게 알아둬야 겠다는 생각 많이 했다. 전체 페이지의 큰 구조를 살펴보면 다음과 같다.
헤더를 왼쪽으로 내용은 오른쪽으로 배치하고 싶었고, 이를 위해 inline-flex와 justify-items:center를 적용했다.
그리고 헤더 내에서는 작은 메뉴들은 각자 inline-flex로 크게 감싼 뒤 아이콘과 글자를 넣었다. align-items:center를 적용했다.
그리고 위에 프로필 사진 부분은 inline을 적용하여 가운데 배치되도록 했다.
App.css에 text-align: center가 적용되어 있기 때문에 inline설정만 해도 가운데 배치 됨.
- flex : 부모 요소에 적용해야함, 배치하고 싶은 자식 요소들을 부모 요소내에 배치해줌 (자식 요소 크기만큼) 가로로 우선 배치하고 화면을 넘어가면 밑으로 배치.
- inline-flex : flex와 같이 자식 요소들을 배치하지만 flex는 flex를 달은 부모 요소 자체는 block(Div같이)으로 인식되고, inline-flex는 부모요소를 Inline(span같이)으로 인식함. 예를들어 flex가 2개 있으면 상하로 배치되지만, inline-flex가 2개 있으면 두개가 화면을 넘어가지 않는다면 좌우로 배치됨
- 화면에서 inline-flex를 쓴 이유는 flex로 일단 배치해야 justify, align이 적용될 수 있고, Inline으로 해서 App.css에 있는 text-align:center를 적용시키기 위해서이다. 따라서 inline-flex로 결정 (그냥 flex로 하면 block으로 인식돼서 그림이나 혹은 메뉴 컴포넌트들이 헤더 가로 가운데에 배치되지 않음)
5/7 화 - 2 차
나는 개인적으로 디자인이 못생기면 개발하기 싫어지는 편이다.
왜냐하면 디자인이 별로면 개발에 쏟은 노력이 디자인 때문에 가려지는 것 같기 때문이다.
이전 디자인도 pinterest에서 열심히 community web design 검색해서 찾아서 해보았지만
피그마에서 보고 대충 작업해보니 맘에 들지는 않았다.
이번엔 figma community에서 web design열심히 검색해서 찾은 디자인을 이용해 .. 다시 헤더를 만들었다!
일단 정말 이전보단 만족스럽고, 피그마 디자인과 거의 똑같이 나왔기 때문에 좀 뿌듯했다. *_*
css구조는 이전과 거의 유사한데 달라진게 하나 있다면
Header와 Content를 App에서 flex로 감쌌다. (이전은 inline-flex로 감싸고 .. width 일일이 설정했음)
그러고 Content에 flex-grow:1을 설정해주면 header가 차지하고 남은 부분을 Content가 모두 차지하게 된다.
https://youtu.be/phWxA89Dy94?si=gd7hU2OKp_BrISnX
flex를 이해하는데는 이 강의가 많이 도움이 됐다.