이거 공부 했더니 어때?/HTML & CSS & JS
-
카카오톡 클론 코딩 #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;}} 라고 쓰겠습니다. 그럼 화면을 크게 하면, ..
-
Animations, 애니메이션이거 공부 했더니 어때?/HTML & CSS & JS 2020. 11. 4. 04:40
이번시간에는 hover state 아니더라도, 변화가 계속 나타나길 원할 때, 즉, rotate를 반복하고 싶을 때 사용할 수 있는 애니메이션, animation을 배워보도록 하겠습니다. 저번시간과 다르게, 애니메이션을 만들기 위해서는 CSS에게 애니메이션을 생성했다는 것을 알려 주는 @keyframes, 키프레임을 작성해야 됩니다. 그런 다음, 애니메이션의 이름을 적어 줍니다. 예를 들어, 이름을 scaleAndRotateSquare라고 하겠습니다. 애니메이션은 2단계, (1) from, (2)to가 필요합니다. 예를 들어, (1) from, 어디서부터, 트랜스포메이션, 변형이 없는 상태에서, from{ transfrom: none; } (2) to, 여기까지, 트랜스포메이션, 변형이 회전 1바퀴, 사..
-
Transformation, 트랜스포메이션이거 공부 했더니 어때?/HTML & CSS & JS 2020. 11. 3. 02:30
이번시간에는 HTML문서의 element들을 변형시키는 효과, 트랜스포메이션, Transformation을 공부해 보겠습니다. 먼저 박스를 만들고, CSS에서 transform: rotate(20deg)를 작성해 보겠습니다. 브라우저에서 확인하기 전에, 박스가 잘 보이도록 폭 500px, 높이 500px, 배경색은 빨간색으로 설정하겠습니다. 그럼 박스가 20도 회전한 것을 확인할 수 있습니다. rotate, 회전뿐만 아니라, 아래와 같이 다양한 트랜스포메이션, Transformation을 시도해 볼 수 있습니다. 예를 들어, transform: skew(30deg, 20deg); 복사-붙여넣기하여 확인해 볼 수 있습니다 이러한 트랜스포메이션, Transformation은 트랜지션, transition과 ..