[항해99] TIL 사전과제 스터디 D-31

프로젝트 본격돌입

얼마만의 협업프로젝트인지 모르겠다.

감이 다 죽은 것 같다..

이번에는, 이번 사전프로젝트기간의 모든 팀 프로젝트들은 잘끝내보자.

협업

협업이란 무엇일까?..

어렵기에 가치가 있고

힘들기에 결실이 있는

게임에서 배우기 힘든 마지막 각성스킬 같은 느낌이다.

모든 스트레스는 인간관계에서 온다는 말을 나는 전적으로 믿는다.

지금까지의 팀프로젝트들은 좋을때도 슬플때도 있었다.

그 과정들을 겪으면서 나는 성장했나?..

확실한건 아주 조금씩은 단단해져왔다고 믿고 싶다.

고집과 편협한 사고

고집이란 말은 보통 안 좋은 의미이다.

근데 말을 바꾸면 좋은 의미처럼 들리기도 한다.

신념, 확신, 믿음… 자신이 고집을 부리는 지 확신을 갖고 있는건지는

결국 자신의 그 생각으로 나오는 결과가 말해주는 거라 생각한다.

그렇기에 결국은 그 생각이 고집일지 확신일지 알기전에는 모든 경우의 수를 다 열어

생각해보고 받아들여 내가 틀렸을 경우도 생각해야한다.

그것이 불확실한 나의 고집이 될 수 있는 선택들을 확신으로 바꾸어주는 방법이다.

언행일치

지금보니까 팀원들에게 계획을 작성할때 구체적으로 그 기획을 어떻게 구현할건지도

짜야한다 했는데 나부터가 별로 안 실천한것 같다… 좀 더 꼼꼼이 계획을 작성하고

자신의 능력으로 어느정도의 시간이 걸리면 이 기능을 구현할 수 있을지 측정하는 능력도

기르자

---

6/11 록 그 록 (1일차)

• 나의 제목은 만화록으로 하기로 정했다.
• 처음에 목표와 할일들 어떻게 구현할지를 정하지 않으면 망망대해에서 표류하는느낌이 든다.
• 표류는 유튜브, 만화, 웹서핑이다.
• 급할 수 있지만 천천히 가자
• 알고리즘과 비슷하다
  • 구현 먼저 하지말고 흐름을 먼저 작성한다(꼼꼼하게)
  • 그 다음 그 흐름에 맞춰 구현을 한다.
  • 여기서 흐름이 꼼꼼하지 않다면 원래 흐름에 작성하면 30분 걸릴게 구현에서는 딴짓하느라 2시간 걸리게된다.

목표

• 1주차 강의 다 듣기
  • 2배속으로, 5초앞으로 쓰면서 흐름만 빠르게 익힌다.
• html, css 기획서 만들기
• httml, css 만들기
  • 부트스트랩을 적극 활용하여 반응형까지 챙긴다.

강의 듣고 난 1주차의 흐름

• 폴더를 만들고 그 안에 index.html을 만든다.
• html과 css의 기본을 사용해본다.
• 부트스트랩(!)을 적극 활용하여 빠르고 멋있게 프론트엔드 작업을 끝낸다.
• 자바스크립트의 기초를 배운다.(이번 프로젝트 과정(1일차)에서는 나는 할필요없다.)

html, css 기획서 만들기

• 프로그래머는 쉬운 해결법이 있으면 일단 쉽게 해결한다.
• 어렵게 포토샵이나 adobe XD, figma 쓰지 말자
• 샤프와 흰 종이만 있으면 뭐든 할 수 있다!

• 아 근데 아이디어가 안 떠오르네… 모방은 창조의 이종 사촌쯤은 된다. 구글링 하자.
  • 찔리지 말자 어차피 서비스라는게 다 베끼고 베끼는거다.
  • 걔네도 베꼈다(베꼈겠지… 완전창작이 세상에 어딨어.. 상업적으로 쓸것도 아니고)
  • 컨텐츠는 라프텔로 디자인폼은 카카오페이지로 하자
    • 심플하고 가독성이 좋다, 그리고 핫하다.

스파르타 피디아

스파르타 피디아

라프텔 - 애니 추천 · 애니 스트리밍 서비스

라프텔 - 애니 추천 · 애니 스트리밍 서비스

홈 | 카카오페이지

홈 | 카카오페이지

Hey there!

https://kitsu.io/explore/anime

AniList: Track, Discover, Share Anime & Manga

AniList: Track, Discover, Share Anime & Manga

코믹시스트 - 만화의 모든 것

코믹시스트 - 만화의 모든 것

• 한 페이지내로 만들어야 한다.
  • why? 그렇게 하기로 했으니까!
  • 따라서 헤더에 다른 링크연결메뉴는 필요없다.
• 헤더이미지(무라타유스케 작)

• 페이지 제목은 난 창의력이 없으니까 그냥 js의 만화록으로 하자(나중에 팀원과 맞춰서 수정)

기능은?

• 최신 만화들이 슬라이드로 나온다.
  • 기능이라 생각하니 자꾸 api를 떠올리게 되는 것 같다…
  • 일단 프론트엔드적인 기능만 생각하자 다른 기능은 최소화하고
• 최근 만화들이 액자식으로 나온다.
• 별점과 코멘트를 달 수 있다.
• 별점은 평균치가 나오게 한다.(도전)
• 코멘트에도 추천과 반대 기능을 추가하여 볼 수 있게 한다.(코멘트 공개처형기능)
• (지금 보니까 나도 진짜 공상만 하고 어떻게 구현할지는 적지도 않았네... 에효.. 할 말이 없다)

HTML, CSS 만들기

헤더에 사진을 넣자

• html에서는 h1을 사용해서 제목을 만들어준다.
• css의 background 3개 사용
• 가운데로 옮기는 건 고민하지말고

						display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

• linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5))
  • 는 치트키이다. 정말 배경에서 원하는 곳을 긁어주는 효자손, 바로 써서 배경을 어둡게 하자

폰트를 넣어보자

• 구글 폰트에 들어가서 원하는 폰트를 넣는다.
• 구글 폰트에서 원하는 폰트를 select로 오른 쪽에 넣어주고 link 코드와 font-family코드를 넣어준다.

부트 스트랩을 사용하자

• 슬라이더와 카드를 사용할 것이다.
• 부트스트랩 사이트에서 검색하여 그대로 복붙해준다.
• 부트스트랩을 분석해보자(carousel)
  • 우선 크기가 너무 크다…크기를 줄이자
  • css의 id선택자로 선택후 width를 줄이면된다.
  • 단, height는 width의 고정되어있는것 같다.
  • 카카오 페이지에서 영감을 얻었다.
    • 100% 를 하되 일정 수준이상이되면 width를 제한하자(max-width:1000px)
• 부트스트랩을 분석해보자(card)
  • 얘는 어려울건 없었다.
  • 그리드 스타일을 사용했고 위에 마진을 10px정도 주었다.

•