노마드코더/html+css (카카오클론-초급)
-
#1.2 ES5, ES6 ES?! and JS노마드코더/html+css (카카오클론-초급) 2020. 4. 20. 14:58
JavaScript Version과 자바스크립트를 배우는 이유 자바스크립트의 ECMA. 자바스크립트는 꽤나 중앙 집중화되어있어서 누가 업데이트를 하면 모든 브라우저에서 작동을 하게된다. ES… 는 JavaScript의 Specification인데 체계 매뉴얼 같은것이다. 브라우저는 무슨일을 하냐면, 구글크롬이랑 Firefox도 이 Specification을 받아서 자기들 방식으로 실행한다. ES5, ES6같은 경우는 Specification의 버전을 나타내주는 것이다. 바닐라자바스크립트는 Javascript의 한 종류로 라이브러리가 없는 자바스크립트를 말한다. 화장이 없는 JavaScript인 것이다. 도움이 없는 JavaScript. 왜 우리는 바닐라 자바스크립트를 먼저 배워야 하는가?! JavaScr..
-
카카오톡-클론코딩과정노마드코더/html+css (카카오클론-초급) 2020. 4. 7. 21:20
1. 구현하고 싶은 각 페이지의 html태그들을 작성한다. 2. 각 페이지를 nav태그에 링크걸어 이동가능하게 만든다. 3. reset.css로 html 각 태그의 스타일 값을 0으로 만든다. 4. 전체 body값의 기본 배경컬러, 색컬러, 패딩 등을 설정한다. 5. 전체 페이지에서 위쪽 박스부터(또는 공통으로 구현되는 박스부터) 만들기. "status-bar.css" => 새로운 css 페이지를 만든 다음에는 항상 배경컬러를 바꿔보면서 제대로 구현이 되고 있는지, 연결이 됬는지 확인하기. .status-bar{ background-color: red; } **각 공통되는 또는 꾸밀 박스마다 css파일을 작게 여러개 만드는게 좋다. 파일이 커지면 계속 스크롤을 하면서 보는게 힘듦... 6. status-..
-
#4-4 Animations노마드코더/html+css (카카오클론-초급) 2020. 4. 4. 21:28
#4-4 Animations 만약 내가 상자에 rotate-scale을 hover할 필요없이 계속 발생하기를 원한다면?? ->> 애니메이션을 생성하면 됩니당~~~ 일단, 애니메이션 이름을 지어야함. @keyframe 은 css로 하여금 내가 애니메이션을 생성했다는 것을 알려준다. @keyframe (애니메이션이름) { from {} to {} } .box{ animation: 1.5s 애니메이션 이름 ease-in-out; } @keyframes scaleAndRotateSquare{ form{ transform:none; } to{ transform: rotate(1turn) scale(.5, .5); } } 이걸 무한반복 하고 싶다면?? .box{ animation: 1.5s 애니메이션이름 infin..
-
[Module #4] CSS (#4-3)노마드코더/html+css (카카오클론-초급) 2020. 4. 3. 14:28
#4-3 . Transformations Transformations는 html문서의 element들을 변경, 모습이 변하는 효과를 뜻한다. 구조는, transform: properties(value); Properties backface-visibility perspective perspective-origin rotate scale transform transform-box transform-origin transform-style translate Data types The transform-function CSS data type represents a transformation that affects an element's appearance. Transformation functions can..
-
[Module #4] CSS (#4-2)노마드코더/html+css (카카오클론-초급) 2020. 4. 3. 13:54
Module #4 = advanced CSS #4-2. what are transitions? 트랜지션은 -이동/변경-을 멋지게 보여주는 효과이다. 이 경우, 박스가 hover될 때 색상만 바뀌고 다른 transition은 일어나지 않는다. 그냥 변경만 될뿐, 그 사이엔 아무런 애니메이션이 없음. 트랜지션을 적용하려면, 무엇을 변경할 지 적어주면 된다. 배경색을 5초 안에 바꾸라고 설정해보자. 애니메이션은 ease-in-out으로. (스르륵~~ 나타나고 스르륵~~ 사라지는 효과) transition: background-color 5s ease-in-out; 추가. Text 이렇게 box css안에 트렌지션 추가하면 애니메이션이 생김! 여기서, hover 할때, 배경색 뿐 아니라 글자 색까지 모두 애니메..