🍎 오늘 한 일

• 다양한 CSS Selector 학습
• Figma를 활용한 와이어프레임 제작하기
• 와이어프레임을 기반으로 HTML 작성하기
• CSS를 적용해 목업 완성하기
  - Flexbox로 레이아웃 만들기
  - 배운 내용들을 적용해서 원하는 Twittler 목업 구현하기

  오늘 아침에 미리 기록해봤던 Want to do list

  <Twittler - CSS/JS로 구현하고 싶은 기능들>

  • 글씨 크기 조정 버튼
  • 나이트모드
  • textarea 자동 크기 조절
  • 트윗 정렬 - 최신순(기본)
  • 내가 확인 안한 지점부터 보여주기(심화)
  • 마음/코멘트 기능 추가
  • 작성시간을 몇분전>몇시간전>날짜로 보여주기
  • 클릭하면 팝업으로 자세하게 보여주는 기능 구현하기
  • 프로필 사진 추가 기능(안할 시 기본 이미지 색깔 랜덤 적용)
  • 유저네임은 20글자 이내로 입력받기
  • textarea 보더,주변에 파래지는거(?) 없애기
  • 글자수 제한은 일단 없게
  • 글자수 제한을 넣으려면 타래를 만드는게 가능해야 함 > 멘션기능 필요
  • 검색기능 추가
  • 로그인은 아직 안되는건가...? 그게 되면 할 수 있는게 너무 많아지는데.. (디엠, 알림, 내가 쓴 글에 대한 반응, 트친, 프로필 페이지 등등)

  오늘 작업한 Twittler mock-up 화면

  

  최대한 트위터의 깔끔하고 간결한 느낌을 담고 싶었다. 그래도 아직 보완하고 싶은 부분이 아직도 너무 많다.
  로그인 페이지를 거쳐야만 구현할 수 있는 기능들이 너무 많다.(프로필, DM, 북마크, 내가 쓴 글 등등)
  내일은 로그인 과정이 없이 익명으로 글을 작성하는 웹페이지가 있는지(최근엔 한번도 못본것 같다) 확인해보고 그런 경우 데이터를 어떻게 처리하는지 생각해봐야겠다.

  추가하고 싶은 기능들 (나만의 Advanced 단계)

  • 오른쪽 섹션에 검색창 구현하기
  • Day모드 Night모드 구현하기
  • 중장년층의 접근성을 고려해서 버튼 클릭 만으로 글자 크기 조정이 가능하게 하기 (font-size를 3단계로 나눠서 제공하기 클릭할 때 마다 1-2-3-1 같이 반복되도록)
  • username을 입력받기 전에는 textarea의 placeholder가 안보이게 할 수 있을까? 입력받은 후에 나타나도록.
  • textaria에 무언가를 입력받기 전에는 Tweet 버튼이 비활성화되어있게 하자
  • 오른쪽 상단의 refresh 버튼에 효과를 주자. 일단 hover시 색 변화주고, 가능하다면 회전하는 모션효과도 넣고 싶다.
  • 양쪽 섹션은 세로값이 고정되어있고 가운데만 스크롤가능하도록 구현하자.

✍ 기억할 것

• 부모 박스가 flex container, 자식 박스가 flex items
• Font-Awesome 사이트 이용해서 HTML에 <i> 태그 사용하기 (아이콘 넣기)
• 꿀팁! margin-left: auto로 오른쪽 정렬하기
• CSS 기본 속성 리셋하기

CSS 기본 속성 리셋

1. 전체 엘리먼트*의 margin, padding 리셋하기

   (꼭 제일 처음에 할 것. CSS는 순서대로 작업한다)	* { margin: 0; padding: 0; }
   

2. box-sizing 속성 수정하기

   body { box-sizing: border-box; } //기본값은 content-box
   

3. <textaria> 크기 조절기능 없애기

   textaria { resize: none; }
   

4. <button> 테두리, 클릭 시 나타나는 테두리 효과 없애기

   button { outline: none; border: none; }
   

5. <a> 링크 클릭 전/후 색상, 언더라인 없애기 (color 속성값은 원하는 색으로 지정)

   a, a:focus, a:hover { text-decoration: none; color: #000; }
   

🦄 더 공부해야 할 것

• CSS를 영리하게 작성하는 방법
  • flexbox/padding/margin을 class로 처리해보자
• flexbox를 자유자재로 다루기 (완전히 마스터하는 그날까지. 레쭈고 🙋‍♀️)

🤔 느낀 점

• 와이어프레임에서 flexbox나 그리드시스템, padding, margin등 많은 것을 고려하여 아예 class까지 상세하게 결정한 후에 HTML 작성으로 넘어가야 작업이 체계적일 것 같다는 생각이 들었다.
• 오늘 완성한 목업도 UI상으로는 원하는만큼 다 구현했지만 좀 더 정돈된 CSS를 위해 내일 와이어프레임부터 다시한번 제작해봐야겠다.
• 코드스테이츠를 수료한 선배기수분들의 후기공유회를 들었는데 많은 생각이 들었다. 지금으로서는 너무 욕심부리지 말고 내가 소화할 수 있는 선에서 최선을 다하는게 중요하다고 생각한다.
• 동기분에게 DM으로 알고리즘 스터디 제안을 받았다. 아직 정식으로 참여한 것은 아니지만 알고리즘이 확실히 중요하다고 느끼는 만큼 최대한 노력해봐야겠다. (근데 너무 어렵다... 코플릿은 애교였어..)

🌈 내일 할 일

• 이번주에 배운 내용 정리하는 느낌으로 블로그 작성하기
• 2주간 학습과정 회고 블로그 작성하기 (2월 1일 오전 10시까지 notion에 링크 공유)

  예시)
  제목: 2주자 후기/ 코드스테이츠 프리코스 느낀점 3가지
  주제: 코스 진행하면서 계속 들었던 생각들

• 꼭! 튜터와 영어로 대화 1시간 이상 하기!