이거 공부 했더니 어때?
-
카카오톡 클론 코딩 #4 Screen Title이거 공부 했더니 어때?/HTML & CSS & JS 2020. 11. 10. 01:10
이번시간에는 (2) header, 상단을 만들어 보도록 하겠습니다. 먼저 header를 생성하고, 클래스로 header를 다시 명명해 줍니다. 그리고 자식 열, column 2개를 추가해 주겠습니다. 위와 같이, class, 클래스로 명명하고, column으로 사용한 이유는 편리성 때문입니다. 첫 번째 열에는 큰 h1태그를 사용해서, 채팅을 입력 하겠습니다. 두 번째 열에는 여러 아이콘들을 입력하도록 하겠습니다. 그 전에, 아이콘들 사이에 빈 공간, 즉, 간격을 재어보면 대략 25px입니다. 위와 같이, 아이콘 사이의 간격이 25px로 모두 동일하기 때문에, 아이콘들을 하나의 박스, div태그 안에 넣겠습니다. 첫 번째 아이콘은 돋보기이고, 저번 포스팅에서 했던 방식 그대로, Font Awesome에서 ..
-
카카오톡 클론 코딩 #3 status bar이거 공부 했더니 어때?/HTML & CSS & JS 2020. 11. 9. 06:55
이번 포스팅부터는 처음에 열리는 페이지인 index.HTML, 채팅 목록 창의 전체 구조를 만들어 보도록 하겠습니다. 이번 포스팅에는 (1) status bar, 스테이터스 바 를 만들고, (2) header, 상단, (3) navigation bar, 네비게이션 바, 하단을 만들고, (4) 그리고 채팅창을 순서대로 만들어 보겠습니다. 여러 번 반복해서 쓰일 상단, status bar와 하단부분, navigation bar는 컴포넌트 단위로 시작하거나, 반복되는 페이지로 시작하도록 하겠습니다. 이제 Emmet의 html5 단축명령, html: 을 입력 후, 탭키를 눌려주거나, html:5를 선택하여 엔터키를 눌려주면, html5 코드를 확인할 수 있습니다. title, 제목은 chat | Kakao Cl..
-
카카오톡 클론 코딩 #2 colorzilla, page ruler redux이거 공부 했더니 어때?/HTML & CSS & JS 2020. 11. 8. 05:00
이번시간에는 크롬 웹스토어, chrome web store에서 유용하게 사용할 수 있는 앱들을 살펴보도록 하겠습니다. 먼저, 사이즈를 구하고 색상을 입힐 수 있게 도와 주는 툴인 ColorZilla는 크롬 웹스토어에서 추가하게 되면, 웹페이지에서 색을 확인할 수 있게 합니다. 크롬에서 이미지를 열어서, ColorZilla의 Page Color Picker Active를 클릭해 주면, 색상을 확인할 수 있습니다. 이번에는 웹페이지에서 길이를 잴 수 있게 도와주는 앱, Page ruler redux를 다운로드 하겠습니다. 이제 이미지를 웹페이지에서 열어서 Page ruler redux를 클릭한 후, 프로필사진의 사이즈를 마우스로 드래그 하면, 프로필 사진의 너비가 57px이라는 것을 확인할 수 있습니다. 위..
-
카카오톡 클론 코딩 #1 프로젝트이거 공부 했더니 어때?/HTML & CSS & JS 2020. 11. 7. 02:10
이번 시간부터는 카카오톡의 디자인(안드로이드 버전)을 코딩해 보도록 하겠습니다. 그 전에, 카카오톡 화면을 살펴보면, 5개의 화면, 친구 목록, 대화 목록, 게임, 설정 화면으로 이루어져 있습니다. 그리고 카카오톡의 기본 화면들은 색상을 다양하게 사용하지 않았고, 아이콘이나 박스가 많이 사용하고 있습니다. 이제 프로젝트를 만들어 보면... Github Desktop을 켠 다음, File에서 New Repository...를 클릭하여, Name, 이름은 kakao-clone-v2를, Description, 설명에는 Kakao Clone v2를 입력하고, Local Path, 경로는 Documents로 저장하고, README는 체크해 줍니다. Git Ignore, License 모두 None으로 설정한 다음..
-
고급 CSS 정리이거 공부 했더니 어때?/HTML & CSS & JS 2020. 11. 6. 05:10
지금까지 (1)트랜지션, (2) 트랜스포메이션, (3) 애니메이션, (4) 미디어쿼리를 배웠습니다. (1) 트랜지션, Transition: 하나의 state에서 다른 state로 넘어갈 때 나타나는 효과, 예를 들어, hover(마우스 커서가 박스 위에 있을 때)하면 변화가 일어나게 할 수 있습니다.(2) 트랜스포메이션, Transformation: element의 모양을 변형하게 하는 효과, 예를 들어, 뒤집거나, 비틀거나(skew), 크기를 키우거나, 줄일 수 있습니다.그리고 트랜지션-트랜스포메이션을 합쳐서 사용해 보았습니다. 즉, 트랜지션하는 순간에, 모양새가 변형되는것(트랜스포메이션)되는 것으로, hover할 때 회전시킬 수 있습니다. (3) 애니메이션, anmation: @keyframes을 만..
-
Media Queries,이거 공부 했더니 어때?/HTML & CSS & JS 2020. 11. 5. 05:05
아이폰 같은 모바일 환경은 작은 화면이고, 모니터와 같은 데스크탑 환경은 큰 화면입니다. 화면의 크기에 따라서 CSS가 달리 쓰이기 때문에(큰 스크린을 위한 CSS와 작은 스크린, 화면을 위한 CSS가 다릅니다), 이번시간에는 브라우저가 큰 지 작은 지를 알아내는 방법에 대해 배우도록 하겠습니다. 먼저 배경색을 초록색이라고 해 보겠습니다. 여기서 유저가 모바일 환경이라고 한다면, 우리가 보는 화면의 최소값은 320px이고, 최대값은 640px일 때 HTML body의 배경색이 파란색이 되도록 하기 위해, @media screen and (min-width:320px) and max-width:640px) {body{background-color: blue;}} 라고 쓰겠습니다. 그럼 화면을 크게 하면, ..
-
[이상스쿨 수강 후기] 이상하게 쉬운 0원 환급반 #9이거 공부 했더니 어때?/주식투자 2020. 11. 4. 17:28
Chapter 02. 초보반 나만 따라해 10. 아직 한발 남았다. 지치지 않는 기적의 패턴분석 비법!(글자형) V자형: 주가가 급락한 이후에 반등하는 패턴 v자형 패턴에서는 각도와 반등폭이 중요하다 1. 하락각 < 상승각(매수세 < 매도세) → 반등가능성 大: 주가가 하락하는 각도보다 상승하는 각도가 더 클수록 반등 가능성이 큽니다. 다시 말해, 주가의 하락을 이끈 매도세보다 반등을 만드는 매수세가 더 강해야 반등 각이 커지게 됩니다. 2. 주가 하락폭의 70% < 상승(반등)폭 → 주가상승: 주가가 하락 폭의 70% 이상 반등해야 주가상승 추세가 이어집니다. 여기에 거래량급등까지 더해준다면 매수타이밍! 반면, 주가가 70% 이상 반등하지 못하면 추후 주가하락 가능성이 높다.