회고록 블로그
HTML과 CSS 공부: 혼자 힘으로 카카오톡 PC버전 클론하기 (4)_친구리스트 완성(추후 기능 수정) 본문
HTML과 CSS 공부: 혼자 힘으로 카카오톡 PC버전 클론하기 (4)_친구리스트 완성(추후 기능 수정)
김간장 2021. 3. 16. 00:36이어서 카카오톡 클론을 진행하자.
저번에 405 에러가 발생해서 그걸 해결하느라 시간이 많이 지나버렸다.
오늘은 꼭 완성해야지.
저번 글:
HTML과 CSS 공부: 혼자 힘으로 카카오톡 클론하기 (3)
저번 글에서 로그인창을 완성했다. 이어서 계속 웹페이지들을 만들어야한다.. ※ 효율적인 코드가 아닐 수 있음 (마치 로 레이아웃을 만드는 것과 같은 비효율일 수도..) 도구: Visual Studio Code 언
cinnamonc.tistory.com
두번째 페이지. 친구리스트 화면 (friend.html)
HTML 만들기 : <head> 영역
# 이어서 만들고 있다 #
3. <head> 영역의 내용은 저번에 만든 로그인 페이지(index.html)과 동일
* 다른 점은 키워드와 설명 정도
...
<meta name="description" content="Kakao Talk Clone Friend List Page">
<meta name="keywords" content="KakaoTalk, Clone, Friend">
...
HTML 만들기 : <body> 영역
# HTML의 정보 부분을 만들자. CSS(스타일)는 나중에.. #
1. 창 크기가 501px 이상이 되었을 때, 창 크기를 줄여달라는 문자 출력하기 위하여 코드 추가
2. 화면크기 경고, 세팅바(최소화, 닫기버튼 등), 헤더(제목, 친구찾기 버튼 등), 네비게이터, 메인(친구 리스트 영역), 광고로 나눠서 html 태그 추가
* fontello의 도움을 많이 받아야 한다..
* 클릭했을 때의 기능들은 우선 만들지 않기로 했다. 보이는 화면만 먼저 만들기로 하자. (추후 추가 예정)
e.g. 아래와 같이 설정을 클릭하면 또 다른 선택 화면이 생김 등 기능 추가 필요
(아마 나중에 form 태그 안에서 fieldset으로 묶어서 만들어내지 않을까..)
3. 메인(친구 리스트 영역): 나, 즐겨찾기, 채널, 친구별로 div를 나누고 각각의 친구 프로필은 리스트(ul, li) 이용
* 그냥 나열해도 상관없겠지만, 각각의 친구 프로필들은 순서가 없는 목록(ul) 태그를 이용해서 정리해주기로 했다.
=> 나중에 웹서버로 부터 친구 리스트 가져와서, li 태그 추가해가며 목록화 해야하는데 가능한 것일까 걱정은 된다
* 프로필에 있는 '사진', '이름'과 '상태메시지'는 table 태그로 정리할까 하다가.. table 태그의 사용법에 맞지 않는 것 같아서 그냥 각각 div 태그로 나눠주기로 했다.
크게는 위와 같이 작성했다.
그 결과 현재 상태는 이러하다.
지금은 아직 봐줄만한 상태가 아닌 것 같다. 빨리 CSS를 추가해줘야 할 것 같다.
(참고) 카카오톡과 동일한 이모티콘을 찾지 못해서 얼추 비슷한 이미지들을 찾아서 적용해줬다.
CSS 만들기
# CSS를 추가해주면서 HTML 문서 수정이 필요하면 일부 수정을 할 예정이다. #
# CSS 수정은 아래의 그림을 참고해서 위에서부터 수정한다. #
▲ 수정사항: 위의 그림에서 <section> 태그 대신 <main> 태그를 사용하기로 했다.
1. 전에 사용했던 CSS 일부 수정 & 세팅바(최소화, 최대화, 닫기 버튼) 크기 및 위치 수정
* 전에 사용한 CSS 파일에서 너무 불필요한 class를 많이 사용하지 않았는지 확인 후 수정
* 전체 페이지에 적용할 수 있는 스타일(body의 폰트, 배경화면 컬러, 애니메이션 기능 등)은 layout.css로 분리하기
* 로그인 페이지의 CSS(ID,PW 폼의 스타일을 바꿈), 친구/채팅리스트(=메인페이지) 페이지의 CSS 등은 별도의 css 파일로 분리
(CSS 파일 하나로 모든 페이지를 구현하고 싶었는데 너무너무 코드가 길어졌다.. 그래서 css 파일을 페이지별+공통 스타일로 나누기로 결정했다)
=> 로그인 페이지의 css는 login.css에 작성
=> 전체 페이지의 공통 디자인(서로 영향을 주는 부분)은 layout.css에 작성
=> 메인페이지(친구리스트, 채팅리스트, 설정 화면)는 main.css로 별도 작성
* 저번에 사용했던 css 파일 내 폰트 사이즈 수정 (rem으로 모두 일관되게 수정)
* 저번 코드에서 실수한 점이 있는데 fontello의 크기는 font-size로 지정해줘야 했었다. 이 부분도 수정..
* px <-> rem 사이즈 변환은 사이트 참고: offroadcode.com/rem-calculator
REM Calculator | Umbraco Registered Partner - Offroadcode Limited
We design and build Umbraco websites - Find out who we are and how we work
offroadcode.com
2. header, nav, main, aside의 레이아웃 구조 만들어주기 (gird 사용)
* FLEX를 이용해서 레이아웃 구조를 만들려고 했는데 이렇게 되면 flex container만 3개가 필요할 것 같았다.
=> 그래서 grid를 사용해보기로 했다. 안 배운 부분이라 gird는 잘 모르지만 찾아보면서 만들다보면 만들어질테지.
* grid에 대한 능력자님의 친절한 설명 : studiomeal.com/archives/533
이번에야말로 CSS Grid를 익혀보자
이 포스트에는 실제 코드가 적용된 부분들이 있으므로, 해당 기능을 잘 지원하는 최신 웹 브라우저로 보시는게 좋습니다. (대충 인터넷 익스플로러로만 안보면 된다는 이야기) 이 튜토리얼은 “
studiomeal.com
* grid 속성에 대한 능력자님의 설명: heropy.blog/2019/08/17/css-grid/
CSS Grid 완벽 가이드
CSS Grid(그리드)는 2차원(행과 열)의 레이아웃 시스템을 제공합니다.Flexible Box도 훌륭하지만 비교적 단순한 1차원 레이아웃을 위하며, 좀 더 복잡한 레이아 ...
heropy.blog
=> 수정사항.
문제가 발생했다.
3시간 동안 grid로 레이아웃 잡고 있었는데, 상단바와 아래 광고 부분을 fixed로 고정할 수가 없다.
즉, 카카오톡 PC버전은 친구 리스트(검은 영역)만 스크롤로 움직여지고 나머지 영역은 스크롤과 관계없이 모두 고정되어야 하는데
grid는 고정이 안먹힌다... (ㅠ)
grid 레이아웃을 그대로 두고 column을 fixed 할 수 있느냐는 질문을 누가 올렸는데 'No' 라는 답변이 있다.
stackoverflow.com/questions/43999732/how-to-make-a-fixed-column-in-css-using-css-grid-layout
How to make a fixed column in CSS using CSS Grid Layout?
I've made a simple site with a #container div that is parent to two divs: #left and #right, by using Grid Layout: Is there any way to make the left column fixed? I'd like the left text to persist ...
stackoverflow.com
3시간을 날렸지만 얻게 된 지식은 있으니까 괜.........찮다
flex box로 다시 만들어야겠다.
자바스크립트만 공부하고 나면 이 고생을 덜어내고 말겠다.
21.03.18 4:37 현재 결과물:
수정한 부분이 너무 많아서 기록을 하지 못했다.
어쨌든 얼추 비슷하게 완성은 되어간다.
다만 너무 불필요하게 class를 사용하였고, 이상한 부분이 꽤나 많다.
또한 아직 수정 해야하는 부분이 있다. (사이드바 수정, width, height 등 수정 필요)
확실히 HTML과 CSS 만으로 디자인을 따라하려고 하니까 거짓말 안하고 죽을 것 같다.
* flex box와 grid로 레이아웃을 잡아보겠다고 발악했더니 너무 힘들다.
차라리 position: fixed로 레이아웃을 잡고 친구 리스트 부분만 flex box를 쓸 걸 그랬다.. (ㅠㅠ)
이거 다 만들고 나서 언젠간 position: fixed로 레이아웃 잡아서 일부만 flex box 써보는걸로 만들어 봐야겠다.
2021-03-18 현재 결과물 : 겉모습을 완성하였다.
정말.. 새벽까지 영혼을 갈아서 만들어냈다.
일단 친구 리스트 화면은 만들었지만 추후 추가해야할 기능들이 많다.
통합검색, 애니메이션으로 화면전환 등등..
그래서 1차 완성이라고 제목을 적어놓았다.
것보다 이번 주 안으로 클론을 마무리 하려고 했는데 불가능할 것 같다. (ㅠ)
글 마무리.
가족들에게 보여줬는데 고작 이거 만드는데 그렇게 오래걸렸냐고 했다.
등짝 때리고 싶었다.
사실 positive: fixed를 이용해서 사이드바, 제목과 설정바(닫기, 최소화/최대화 버튼), 광고 영역을 모두 고정시키고
margin과 padding 값만 잘 조절해서 만들 수도 있었지만
굳이굳이 고생을 사서 하겠다고(?) 레이아웃을 잡아서 만들어야겠다고 생각했다.
음...
예전부터 조상님들께서(?) position: fixed를 사용하지 않고 <table> 태그를 이용해 가면서까지 레이아웃을 잡은데에는 이유가 있지 않을까 해서이다.
그래서, 저 위의 결과물의 레이아웃은 현재 아래와 같이 grid로 같이 잡혀있다.
(1, 2, 3, 4, 5는 grid line이다)
(각 영역에 어떤 내용이 들어가 있는지는 옆에 메모장을 보면 된다. 예를 들어 1행1열은 네비게이션 영역이다.)
그리고 나름대로 많이 고민하면서 만들었다.
새로운 기능들이 추가될 때마다 CSS를 모두 뜯어고치지 않도록 말이다.
예를 들어 아래 네비게이션 부분은 새로운 메뉴들이 추가될 수 있도록 flex box를 이용했다.
margin-top, margin-bottom이나 padding-top, padding-bottom이 아닌 flex를 이용해서
중심축 정렬을 space-between으로 했기 때문에 새로운 아이콘만 추가한다면 알아서 처리가 된다.
또한 스크롤을 내리면 사이드바, 헤더, 광고 영역도 마치 그 영역에 고정된 것(fixed)처럼 움직인다.
grid를 이용했을 때 position: fixed가 먹히지 않아서 애를 먹었었는데 position: sticky를 이용해서 마치 고정된 것처럼 보이게 했다.
나머지 페이지들은 언제 만드나... (ㅠ)
코드를 너무 많이 수정했고 + css를 파일로 너무 많이 분리해서 파일을 올려두기로 했다.
각각 파일의 소스코드를 써놓기에는 너무 스크롤 압박이 심해질 것 같다.. 빨리 github를 배워야겠다.
'2. 프로그래밍 언어 공부 > 무엇이든 만들어보기' 카테고리의 다른 글
| HTML과 CSS 공부: 혼자 힘으로 카카오톡 PC버전 클론하기 (6)_더보기 화면 완성 (0) | 2021.03.25 |
|---|---|
| HTML과 CSS 공부: 혼자 힘으로 카카오톡 PC버전 클론하기 (5)_채팅목록 완성 (0) | 2021.03.23 |
| HTML과 CSS 공부: 혼자 힘으로 카카오톡 PC버전 클론하기 (3) (0) | 2021.03.15 |
| HTML과 CSS 공부: 혼자 힘으로 카카오톡 PC버전 클론하기 (2)_로그인 페이지 완성 (0) | 2021.03.10 |
| HTML과 CSS 공부: 혼자 힘으로 카카오톡 PC버전 클론하기 (1) (0) | 2021.03.09 |
