회고록 블로그

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

cinnamonc.tistory.com/162 [공부 필기] 생활코딩 JavaScript 입문 수업 필기 (1) 오리엔테이션 (1) JavaScript는 처음 웹브라우저를 제어하기 위함으로 고안되었음. (2) 하지만 현재에는 JavaScript를 웹서버에서도 사용할 수 있도록 하는 기술이 등장함 (node.js가 대표적) => 자바스크 cinnamonc.tistory.com 처음 배우는 자바스크립트이기 때문에 당장 모든 내용을 다 이해하려고 하지 않았다. 그리고 너무 어려워서 처음부터 다 이해도 못할 것 같다. 다만 강의 들으며 내용은 필기를 해놓으려고 한다. (그래서 이 글을 쓰고 있는 것) 전체 강의를 다 들은 후 다시 처음으로 돌아가서 실습을 하며 문법의 원리를 이해하는 것이 최종 목표이다. (전체..

출처 : dasima.xyz/html-label/ HTML label 태그 for 사용법 및 for 없이 사용법 - TIMECRAFT HTML label 태그 어떻게 사용해야 할까요? input 태그를 설명합니다. input 바깥에 사용할 경우 자동으로 서로 연결됩니다. 따로 사용할 경우 label for 속성을 통해서 값을 지정하고 input 태그에 id 값을 dasima.xyz 자동로그인 위와 같이 사용해도 되고, 자동로그인 위와 같이 사용해도 된다고 한다.

이어서 카카오톡 클론을 진행하자. 저번에 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 요소는 문서의 전체적인 내용과는 별도의 독립적인 내용이 들어갈 때 사용"이라고 설명이 적혀있길..

오리엔테이션 (1) JavaScript는 처음 웹브라우저를 제어하기 위함으로 고안되었음. (2) 하지만 현재에는 JavaScript를 웹서버에서도 사용할 수 있도록 하는 기술이 등장함 (node.js가 대표적) => 자바스크립트는 만능이구나. (3) 웹브라우저에서 실행되는 자바스크립트는 HTML이 꼭 필요함 수의 표현과 연산 (0) 소괄호 사이에 수(number)가 들어감 (1) 정수, 실수 모두 입력될 수 있고, 정수/실수에 대한 정의는 중요하지 않음 (포괄적으로 그냥 number라고 함) ... (2) "Math.pow(3, 2)"와 같이 연산을 할 수도 있음 - 여기에서 Math는 일종의 카테고리라고 생각을 하자. 그 카테고리에서 pow 라는 명령을 가져올 때 온점(.)을 사용함 - Math.rou..

저번 글에 이어서 계속 만들고 있다. 현재 로그인창(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 쓸 줄 몰라서 + 한줄한줄 공부하자는 목적으로 블로그에 정리함..

FLEX - 레이아웃을 코드화할 수 있는게 없을까? 해서 나옴 - flex는 container(display, flex-direction, flex-flow 등)와 item(order, flex-grow, flex-basis 등)으로 구성되어 있음 - flex는 부모와 자식 형식으로 되어있어야 함 - flex 사용하기 ※ 반드시 해야하는 작업: 먼저 부모 태그(class명, id명, 태그 등등)의 CSS 내에 display:flex 값을 넣어줘야함 > flex-shrink 도 있는데 설명 생략 Flex : Holy Grail Layout - flex로 holy grail layout 만들어보기 1단계. HTML의 기본 레이아웃 먼저 만들기 2단계. flex 적용하기 (holy grail layout 주의..

font > font-size : 사이즈 지정 > font-family : 폰트 설정 시 사용 (airal, verdana, "Helvertica Neue" 등) * 폰트 사이에 띄어쓰기가 있는 경우 큰따옴표(or 작은따옴표) 필수 * 더 알아보기: opentutorials.org/course/2418/13361 font - 생활코딩 font-family font-family는 서체를 지정하는 속성입니다. 아래와 같은 방법으로 합니다. h1{ font-family: "Times New Roman", Times, serif; } 위 코드의 의미는 h1 태그를 Times New Roman을 지정합니다. 그런데 사용자 opentutorials.org > font-size, font-family 등 속성들을 여..