내일 배움 3일 차 코딩은 엉덩이라는 것을 정말로 깨닫게 되는 날이었다...!
꾸준함으로 밀어붙일 것이다.
전공자 5명 사이에 낀 비전공자 1 feat. 비 1/나/자신
1. 오늘은 개발을 시작한 지 어느덧 3일 차가 되었다.
2. 팀 프로젝트 : 팀원과 같이 자기소개서 홈페이지 만들기를 진행하는 중이다...!
3. 나는 원석님과 아래와 같이 보이는 와이어프레임으로 아래에 보이는 멤버들 카드를 작성할 계획이다.
내가 만들 멤버카드
4. 원석님의 tailwind라는 css기술을 사용하여 작성하게 되었다.
5. 이렇게 같이 써 보고 배웠다.
<div class="member-container">
<!-- 멤버카드 컨테이너 -->
<div class="member-card w-[400px] h-[280px] m-auto p-[8px] border-[2px] border-white rounded-[8px]" >
<!-- 멤버카드1 -->
<div class="w-full h-full flex">
<!-- 내부 랲퍼 -->
<div class="w-[180px] h-[220px] bg-white">
<!-- 왼쪽/프로필사진 -->
</div>
<div class="flex flex-col m-auto p-[8px] h-full justify-between items-center">
<!-- 오른쪽/멤버 정보 + 상세 페이지 이동 버튼 -->
<div class="mt-[12px] leading-[40px]">
<!-- 멤버 정보 -->
<div>
<!-- 멤버 이름 -->
<label>이름:</label>
<label>정원석</label>
</div>
<div>
<!-- MBTI -->
<label>MBTI:</label>
<label>INTP</label>
</div>
<div>
<!-- 인삿말 -->
<label>잘 부탁드립니다.</label>
</div>
</div>
<a href="#">
<button class="bg-black rounded-[8px] p-[8px] cursor-pointer transition-all delay-0 duration-150 ease-in-out hover:bg-white">
<!-- 상페 페이지 이동 버튼 -->
GO TO PRIVATE
</button>
</a>
</div>
</div>
</div>
</div>
6. 프런트엔드에서 기본적인 구조라고 생각이 든다. 하지만 처음이어서 하기가 많이 버거웠다.
7. 특히 <div>라는 박스를 통해 부모와 자식이라는 표현으로 알기 쉽게 표현을 해주셨다.
8. <div>를 쓰고 class를 넣으므로 tailwind 기술로 간결하게 css를 넣을 수 있는 방법을 배울 수 있었다.
9. 왕초보 웹개발에서는 사용해 보지 못 한 언어들이었다.
10. 하지만 tailwind는 줄임말을 쓸 수 있다는 포인트가 신기하였다.
11. 전공자 분들의 속에서 나는 어떤 것을 해야 할까 어떤 것을 도움줘야 할까 어떤 것을 우선으로 해야할까 고민이 많다......;;;
3일 차로 접어드는 이 기간 시간이 정말 느리게 가는 것 같다.
이 또한 지나가겠지?
1. 팀원분들이 착하다.
2. 처음으로 복사 붙이기가 아닌 하나하나 이해를 해보았다.
3. 코딩은 엉덩이이다!
오늘도 꾸준히 나아갈 것이다.
꾸*길