오늘 아침에 미리 기록해봤던 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시 색 변화주고, 가능하다면 회전하는 모션효과도 넣고 싶다.
- 양쪽 섹션은 세로값이 고정되어있고 가운데만 스크롤가능하도록 구현하자.
<i>
태그 사용하기 (아이콘 넣기)margin-left: auto
로 오른쪽 정렬하기CSS 기본 속성 리셋
- 전체 엘리먼트
*
의 margin, padding 리셋하기(꼭 제일 처음에 할 것. CSS는 순서대로 작업한다) * { margin: 0; padding: 0; }box-sizing
속성 수정하기body { box-sizing: border-box; } //기본값은 content-box<textaria>
크기 조절기능 없애기textaria { resize: none; }<button>
테두리, 클릭 시 나타나는 테두리 효과 없애기button { outline: none; border: none; }<a>
링크 클릭 전/후 색상, 언더라인 없애기 (color
속성값은 원하는 색으로 지정)a, a:focus, a:hover { text-decoration: none; color: #000; }
예시)
제목: 2주자 후기/ 코드스테이츠 프리코스 느낀점 3가지
주제: 코스 진행하면서 계속 들었던 생각들