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

Study

• Hello Modules

  Study/JavaScript 2020. 5. 14. 14:54

  Hello Modules JavaScript modules are reusable pieces of code that can be exported from one program and imported for use in another program. Modules are particularly useful for a number of reasons. By separating code with similar logic into files called modules, we can: find, fix, and debug code more easily; reuse and recycle defined logic in different parts of our application; keep information p..

  Read More
• hover / i:not(:hover)

  Study/css 2020. 5. 14. 11:26

  .상위클래스:hover i:not(:hover){ opacity: 0.1; } i:hover{ transform: translateY(-10px); color: black; } 이렇게 작성하면, 아래와 같은 식으로 됨. 오호호:) 신기하구만

  Read More
• Grid 정리

  Study/css 2020. 5. 12. 12:54

  display: grid; grid-template-columns: 40% 60%; -> columns형태로 각각 40, 60프로 나뉘어 배치됨. grid-template-columns: 4fr 6fr; -> 위와 같은 것을 출력하나 이 친구를 더 많이 사용함. 왜냐하면, grid-gap: 1rem; -> 그리드 사이의 공간. 이 친구를 사용할때 템플릿을 %로 사용하면 갭때문에 이외의 공간이 생겨나서 스크롤이 생겨버림. 그래서 템플릿을 사용할때에는 fr을 사용하는 것이 더 좋다. (fr = fraction 부분, 일부) grid-template-columns: 4fr 6fr; grid-template-columns: 1fr 1fr 1fr 1fr; -> 이런식으로도 사용할 수 있음. grid-templat..

  Read More
• <p>태그 텍스트 중 일부만 선택해서 속성 변경하기 :: span활용

  Study/css 2020. 5. 11. 17:43

  HTML 요소는 구문 콘텐츠를 위한 통용 인라인 컨테이너로, 본질적으로는 아무것도 나타내지 않습니다. 스타일을 적용하기 위해서, 또는 lang 등 어떤 특성의 값을 서로 공유하는 요소를 묶을 때 사용할 수 있습니다. 적절한 의미를 가진 다른 요소가 없을 때에만 사용해야 합니다. 은 와 매우 유사하지만, 는 블록 레벨 요소인 반면 은 인라인 요소입니다. Add the basil, pine nuts and garlic to a blender and blend into a paste. Gradually add the olive oil while running the blender slowly. 즉, span태그의 클래스를 사용해서 각각 css로 색, 폰트 등을 변경할 수 있다. :) 😁

  Read More
• vs code 같은 글자 한번에 선택하는 방법 (같은 글자 한번에 바꾸는 방법)

  Study/html 2020. 5. 11. 16:46

  해당 글자 위에 커서 두고 ctrl + d 계속 누르면 커서를 둔 글자랑 똑같은 글자가 하나씩 드래그처리 된다. 그리고 나서 값 입력할면 알아서 같은 글자 한번에 바뀜! 생활코딩 보다가 알게된 vs code 개꿀팁 ! 출처: https://bumcrush.tistory.com/179 [맑음때때로 봄]

  Read More
• backface-visibility(이면가시성)

  Study/css 2020. 5. 11. 15:21

  우리말로 번역해서 더 어려워진 단어, 뒷면을 보여준다는 backface-visibility 속성에 대해 간단히 알아봅니다. backface-visibility 소개(뒷면 보기) backface-visibility 속성은 3D 전환을 제어할 수 있습니다. 즉, 이 속성은 3D transform(전환)과 연관되어 있으며, 입체적인 뒷면의 가시성을 결정하는 속성입니다. 변형이 가해져서 요소의 뒷면이 보여지게 될 때, 이 속성으로 숨기거나 보여지게 할 수 있습니다. 그리고 이 속성을 이용하여 원치 않는 번쩍이는 효과를 숨기게 할 수도 있습니다. CSS div { -webkit-backface-visibility: hidden; /* Chrome, Safari, Opera */ backface-visibility..

  Read More
• figure태그, figcaption태그

  Study/css 2020. 5. 11. 15:09

  figure태그, figcaption태그

  Read More
• npm init

  Study/JavaScript 2020. 5. 8. 21:50

  npm init In the last exercise, you wrote one command in your terminal to transpile ES6 code to ES5. In the next five exercises you will learn how to setup a JavaScript project that transpiles code when you run npm run build from the root directory of a JavaScript project. The first step is to place your ES6 JavaScript file in a directory called src. From your root directory, the path to the ES6 ..

  Read More