하루하루 발전하는 개발자와 블로그🙌🏻 하루하루 발전하는 개발자와 블로그🙌🏻

분류 전체보기

• #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..

  Read More
• height: 100% vs 100vh

  Study/css 2020. 4. 3. 21:59

  .container{ background: beige; height: 100%; } height: 100%; 라는 의미는 선택자 즉, .container가 들어있는 부모의 100%를 채우겠다는 말. html파일이 이렇게 되어있다면, container의 부모는 body 인것이다. body { height: 100%; } .container{ background: beige; height: 100%; } 그럼 body에 높이 100% 값을 추가해보자. 그러나, 그래도 아무런 변화가 없음. 그래서 body, html { height: 100%; } .container{ background: beige; height: 100%; } body뿐 아니라 html의 값도 같이 설정해줘야한다. 그러나 만약 내가 이렇게..

  Read More
• flex-box

  Study/css 2020. 4. 3. 21:52

  flex-box는 CSS의 꽃이라 할 수 있음. flex-box 사용의 유래 아주 예전에는 모든 브라우저에서 호환 가능하고 강력하게 레이아웃을 만들기 위해선 position, float, table 등을 이용했었다. 근데 너무 복잡하고 할 수 없는 기능도 있었다. 사이즈상관없이 동일한 간격으로 놓기.. 같은거.. 이젠, flex-box가 있어서 이런것들을 손쉽게 할 수 잇음 **float을 먼저 알아보자. float의 원래의 목적은 이미지와 텍스트를 함께 놓을 때, 어떻게 함께 배치할 지 정리하기 위해 나타난 아이었다. 예전에는 레이아웃 할만한 도구들이 없었어서 float을 레이아웃을 위해 사용했었는데, 이젠 flex-box가 있으므로 float은 원래 용도로만 사용~~! flex-box는 크게 2가지만..

  Read More
• CSS란??

  Study/css 2020. 4. 3. 19:30

  CSS. Cascading Style Sheet Cascading Style Sheet = 스타일을 잘 정리한 문서한 장. cascade 폭포처럼흐르다. 무언가 연속해서 흐르는 느낌 = Cascading Style Sheet 예를들어, 브라우저에 버튼이 보여질때, 브라우저에서 css가 작성된 문서에 "야, 너희 이 버튼에 관련된 스타일링있어?" "없는데?" 하면 다시 또 이번엔 브라우저에 기본적으로 있는 문서에 "야, 너희 이 버튼에 관련된 스타일링 있어?" 묻는다. 기본값문서에 스타일링이 있으면 그 값을 가져와서 브라우저에서는 기본값으로 보여지는 것! 이렇듯, cascading 은 정의된 지정된 값이 있다면 그것을 쓰고, 그 값이 없다면 정의된 기본값으로 사용하는 것을 나타낸다. 웹사이트를 스타일링 할..

  Read More
• label tag

  Study/css 2020. 4. 3. 18:22

  Do you like cheese? Do you like peas? input 옆에 라벨링처럼 input을 설명해주는 것 을 요소와 연결하면 몇 가지 이점이 있습니다: label 텍스트는 텍스트 입력과 시각적으로 관련이 있을뿐만 아니라 프로그래밍적으로도 관련이 있습니다. 예를 들어, 화면리더기(screenreader) 는 폼 입력(form input)에서 label 을 읽어서 보조기술(assistive technology) 사용자가 입력해야하는 텍스트가 무엇인지 더 쉽게 이해할 수 있게 합니다. 관련 label 을 클릭해서 input 자체에 초점을 맞추거나 활성화를 시킬 수 있습니다. (활성되어서)늘어난 누를 수 있는 영역(hit area)은 터치스크린 사용자를 포함해 입력하려하는 모든 사람에게 이점을 ..

  Read More
• [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..

  Read More
• [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 할때, 배경색 뿐 아니라 글자 색까지 모두 애니메..

  Read More
• 프론트엔드 개발자라면 꼭 알아야할 '무료'사이트 (닥코)

  about front-end 2020. 4. 2. 22:22

  https://www.youtube.com/watch?v=dDyn_OmFGfY&feature=share 1. Mozilla Developer Network https://developer.mozilla.org/ MDN Web Docs MDN 웹 문서 사이트는 HTML, CSS, 및 웹 사이트와 프로그레시브 웹 앱을 위한 API를 포함한 오픈 웹 기술에 대한 정보를 제공합니다. 또한 Firefox 개발자 도구와 같은 Mozilla 제품을 위한 개발자 지향 문서도 포함합니다. developer.mozilla.org 웹개발에 관련된 대부분의 정보를 얻을 수 있음. 특히 프론트엔드 개발쪽에 집중이 많이 되어있음. 2. Eloquent Javascript http://eloquentjavascript.net/ E..

  Read More