하루 하나씩 작성하는 TIL #2
#1에서 와이어프레임을 작성 후, 진행한 팀 프로젝트의 과정 中
html 작성 후 css를 입히는 과정에 대해 소개하고자 한다. 그 전에 #1에서 설명하지 못했던 준비 과정도 추가적으로 설명하고자 한다.
팀 프로젝트의 주제는 우리 팀 소개 웹 페이지이다.
- 포함 내용
- 객관적으로 살펴본 자신의 장점
- [팀]과 [자신]에 대한 설명 및 MBTI
- 자신의 스타일, 협업 스타일 소개
- 우리 팀만의 특징과 추구하는 궁극적인 목표
- 우리 팀의 약속
- 팀원들의 블로그 주소
위 6개의 내용을 소개하면 된다.
목표는 웹 개발 전반의 흐름을 이해하며 프론트엔드와 벡엔드 구성과 상호작용에 대해 이해함에 있으며 CRUD를 구현하고 활용함에 있다.
우수한 기술적 표현 또한 중요하지만, 개인 프로젝트가 아닌 팀 프로젝트인 만큼 구체적인 계획과 원활한 소통과 룰 또한 중요시 되었다.
우리 팀의 룰
- 일정 및 마감일 약속: 각 팀원이 할 일을 정하고, 그 일정을 준수하여 프로젝트의 마감일을 지킬 수 있도록 합니다.
=> 각자 역할 분담을 하고 서로 많이 도와준 덕분에 일정을 준수할 수 있었다.
- 의사소통 약속: 효과적인 의사소통을 위해 어떤 채널을 사용할 것인지 (예: 이메일, 메신저, 회의 등), 그리고 어떤 시간에 회신을 해야 하는지를 명확히 합니다.
=> slack 그룹 채팅방, zep 채팅 및 음성, 화면 공유를 통해 소통하였고 팀원 분들 다 수업 시간 내에 회신이 가능한 상태였다.
- 코드 품질과 스타일 가이드 준수: 일관된 코드 품질과 스타일을 유지하기 위한 규칙을 정하고 이를 준수할 것을 약속합니다.
=> 발표 전, 마무리 단계에서 웹표준을 지켰는지, 시멘틱 웹인지 확인할 수 있게 코드를 검사할 예정이다.
- 문서화 및 주석 작성 약속: 코드에 문서화와 주석을 작성하여 코드를 이해하기 쉽게 하고, 다른 팀원이 작업한 내용을 파악할 수 있도록 하는 것을 약속합니다.
=> 파일을 세분화하여 가시성을 높혔으며 commit message또한 팀원들이 이해하기 쉽도록 작성하였다.
- 문제 해결 절차 및 대응 방안 약속: 문제가 발생했을 때 어떤 절차를 따를 것인지, 그리고 어떤 대응 방안을 취할 것인지를 정해놓습니다.
=> 서로 질문하고 피드백하며 해결하였다.
-
피드백 제공 및 수용 약속: 팀원들끼리 서로 피드백을 제공하고 받는 것을 활발히 할 것을 약속합니다.
-
업무 분담 및 역할 분배 약속: 각자의 역할과 책임을 명확히 하고, 업무를 공정하게 분담하여 프로젝트를 효율적으로 진행할 수 있도록 합니다.
이 프로젝트에선 기존 css대신 tailwind css를 사용하였다.
이번 프로젝트를 진행하면서 처음 알 게 된 CSS 프레임워크인데, 이에 대해 설명 하고자 한다.
Tailwind란?
-
Utility-First 컨셉을 가진 CSS 프레임워크로, 인라인 스타일을 사용한다. 쉽고 빠르게 스타일링이 가능하며 일관된 디자인이 가능하다. 쉽게 생각하면 부트스트랩과 같이 m-1, flex등 미리 세팅된 유틸리티 클래스를 활용하는 방식으로 HTML 코드 내에서 스타일링을 할 수 있다.
-
기존 CSS는 작은 스타일 변경에도 컴포넌트를 만들어야하는 번거로움이 있거나, 매번 클래스명을 다르게 지정해줘야 한다는 점과 다르게 편리하다.
-
각 CSS 요소 수준의 유틸리티 클래스를 제공하기 때문에 세밀하게 원하는 디자인을 구현할 수 있다.
-
또한 Tailwind CSS는 JavaScript 코드와 완전히 분리되어 있다. 그러므로 프로젝트 진행 도중 JavaScript 프레임워크를 변경하여도 큰 추가 작업 없이 기존의 HTML 코드를 그대로 쓸 수 있다.
-
<단점>을 꼽자면 코드가 더럽다. 직관적이라고 생각하면 직관적이겠지만 필자가 보기엔 더럽다.
-
또한 필자는 처음 접해보았기 때문에 클래스명이 익숙치 않아 계속 문서를 보면서 진행해야 하는 어려움이 있었다.
설치 및 경로 지정은 링크 에서 확인 가능하다.
작성했던 코드 일부를 가지고 설명해보자면,
<button id="postComment"
class="py-3 px-5 bg-[#1D886D] text-[#eeeeee] float-end my-2 rounded-md hover:cursor-pointer">댓글달기</button>
</div>- class 속성은 버튼에 적용할 css 클래스를 지정해준다.
- py-3은 상하 여백(padding)을 3단위로 조절해준다.
- px-5는 좌우 여백(padding)을 5단위로 조정해준다.
- text-[#eeeeee]: 텍스트 색상을 #eeeeee(헥사코드)로 지정한다.
- float-end: 요소를 오른쪽으로 띄운다.
- my-2: 상하 여백(margin)을 2단위로 설정한다.
- rounded-md: 버튼을 모서리가 약간 둥근 형태로 만든다.
- hover:cursor-pointer: 마우스를 버튼 위에 올렸을 때 커서를 포인터(pointer)로 변경한다.
기존 css와 거의 비슷하기 때문에 익히는데 시간이 오래 소요되지 않았다.
