회고록 블로그

보호되어 있는 글입니다.

보호되어 있는 글입니다.

보호되어 있는 글입니다.

혼자힘으로 카카오톡 PC버전 클론하기를 진행중에 있고 현재까지의 결과물은 이러하다. 코드는 너무 길고 많아서 zip파일로 업로드 하였다. (flex box와 grid를 사용했기 때문에 IE로 열면 깨질 확률이 99.99999% 이므로 chrome을 권장) 더 수정/보완 해야할 부분은 (1)웹브라우저별로 호환 가능토록 코드 수정해주는 작업과 (2)사용된 CSS 단위를 rem, vw/vh 등으로 수정해주는 작업, (3)채팅화면(채팅목록화면 아님)과 기능들을 추가해주는 작업이다. 기능들을 추가한다는 것은 "통합검색"이나 "친구 목록"을 클릭하였을 때 친구에 대한 정보가 출력되는 등 기능을 말한다. 단기간에 하기 어려워서 시간될 때마다 하기로 했다.. +추가> 채팅목록 화면에서 '채팅 내용의 일부를 보여주고 나..

이번에는 '더보기 화면'을 만들려고 한다. 큰 FLEX BOX 하나로 레이아웃을 만들고 그 안에 flex box를 또 하나 만들려고 한다. 그리고 위쪽에 있는 내 프로필은 태그 혹은 flex box로 구성해보려고 하는데, 태그를 이런 경우에 써도 되는건가..? 일단 잘못된 구성의 코드일지라도 만든 후 생각해야겠다. ※ 멘토없이 초보자가 혼자 만드는 코드이므로, 효율적인 코드가 아닐 수 있음 (마치 float나 flex를 놔두고 로 레이아웃을 만드는 것과 같은 비효율적인 코드일 수 있음 주의) 도구: Visual Studio Code 언어: HTML, CSS 서버: 없음 (클라이언트 사용) 그 외: 없음 네번째 페이지. 더보기 화면 (more_menu.html) HTML 만들기 : HTML 만들기 : 영역..

저번에 카카오톡 PC버전을 HTML+CSS만으로 만들기로 하였고 로그인 페이지, 친구리스트 화면까지 만들었다. 이번에는 '채팅리스트 화면'을 만들어야 한다. 미처 그림을 그리지 못했는데, 이번에는 저번에 만들었던 '친구리스트 화면'의 코드를 일부 복사해오면 되기 때문에 구상이 좀 쉬워질 것 같다. 이미 사이드바, 상단바, 하단 광고까지 grid로 레이아웃을 잡아놓았으니까 그 코드를 가지고 오고, 채팅목록 부분만 flex로 구성해주면 될 것 같다. ※ 멘토없이 초보자가 혼자 만드는 코드이므로, 효율적인 코드가 아닐 수 있음 (마치 float나 flex를 놔두고 로 레이아웃을 만드는 것과 같은 비효율적인 코드일 수 있음 주의) 도구: Visual Studio Code 언어: HTML, CSS 서버: 없음 (..

이어서 카카오톡 클론을 진행하자. 저번에 405 에러가 발생해서 그걸 해결하느라 시간이 많이 지나버렸다. 오늘은 꼭 완성해야지. 저번 글: cinnamonc.tistory.com/165 HTML과 CSS 공부: 혼자 힘으로 카카오톡 클론하기 (3) 저번 글에서 로그인창을 완성했다. 이어서 계속 웹페이지들을 만들어야한다.. ※ 효율적인 코드가 아닐 수 있음 (마치 로 레이아웃을 만드는 것과 같은 비효율일 수도..) 도구: Visual Studio Code 언 cinnamonc.tistory.com 두번째 페이지. 친구리스트 화면 (friend.html) HTML 만들기 : 영역 # 이어서 만들고 있다 # 3. 영역의 내용은 저번에 만든 로그인 페이지(index.html)과 동일 * 다른 점은 키워드와 설명..

저번 글에서 로그인창을 완성했다. 이어서 계속 웹페이지들을 만들어야한다.. ※ 멘토없이 초보자가 혼자 만드는 코드이므로, 효율적인 코드가 아닐 수 있음 (마치 float나 flex를 놔두고 로 레이아웃을 만드는 것과 같은 비효율적인 코드일 수 있음 주의) 도구: Visual Studio Code 언어: HTML, CSS (언어가 아니지만..) 서버: 없음 (클라이언트 사용) 그 외: 없음 section 안에서 div로 나눈 이유는 아래의 링크에서의 설명 때문이다. article로 나눠야하나, section으로 나눠야하나 고민을 했는데 "section 요소는 HTML 문서의 전체적인 내용에 포함되며 article 요소는 문서의 전체적인 내용과는 별도의 독립적인 내용이 들어갈 때 사용"이라고 설명이 적혀있길..

저번 글에 이어서 계속 만들고 있다. 현재 로그인창(index.html) 만드는 중이다. 저번 글: cinnamonc.tistory.com/160 HTML과 CSS 공부: 혼자 힘으로 카카오톡 클론하기 (1) 생활코딩 HTML과 CSS 강의를 드디어 모두 들었다. 당연히 강의를 듣고 필기한다고 해서 모두 내 것이 되는게 아니기 때문에 뭐라도 만들어보기 위해서 카카오톡 클론 만들기를 시작했다. 큰 의미 cinnamonc.tistory.com CSS 만들기 2) 로고 사이즈 조절하기 * 태그에서 조절할수도 있지만 CSS에서 사이즈를 조절하기로 했다. * 이유는 저번에도 썼지만, CSS의 단위(vh, vw)가 필요하기 때문이다. (HTML에서는 먹히지 않았다..ㅠㅠ) * 만들면서 생각해보니까 화면 크기에 따라..

생활코딩 HTML과 CSS 강의를 드디어 모두 들었다. 당연히 강의를 듣고 필기한다고 해서 모두 내 것이 되는게 아니기 때문에 뭐라도 만들어보기 위해서 카카오톡 클론 만들기를 시작했다. 큰 의미를 두고 카카오톡으로 정한 것은 아니다. 많은 분들이 카카오톡으로 클론 코딩을 하길래.. 아무래도 혼자 힘으로 만들다보면 막힐 것 같은데 (+완전 초보) 사람들이 만들어놓은 코드를 참고하면 좀 쉽게 문제가 해결되지 않을까 싶어서 많은 사람들이 클론 코딩한 카카오톡으로 결정했다. 하지만 만들고 싶은 카카오톡 클론은 좀 다른 버전임. PC버전 카카오톡을 클론하려고 한다. 그래서 어떤 화면들이 필요할까를 고민했고 아래와 같이 정리를 했다. (아직 github 쓸 줄 몰라서 + 한줄한줄 공부하자는 목적으로 블로그에 정리함..