누군가 나에게 말해줬으면 하는 3가지 CCS 팁

안녕하세요 세계!

다시 오신 것을 환영합니다. 여기 제가 처음 시작했을 때 누군가 말해줬으면 하는 3가지 CSS 팁이 있습니다. 여느 때처럼 바로 본론으로 들어가겠습니다.

팁 1: @미디어

여러분 중 75%는 @media가 무엇인지 모를 것입니다. 저는 몇 주 전에 그 75%의 일부였습니다. @media가 그렇게 어렵다면 왜 배워야 하느냐고 생각할 수도 있습니다. 🤔

좋아요, 모순되지는 않겠습니다. @media는 가장 어려운 CSS 개념 중 하나입니다. 좋아요, 이제 시청자의 99%를 잃었으니 @media에 들어가 봅시다!

먼저 예부터 시작하겠습니다.

@media only screen and (max-width: 600px) {
  body {
    background-color: blue;
  }
}

따라서 기본적으로 배경색은 너비가 600px 미만인 모든 장치에서 파란색이 됩니다.

내가 말한 단어를 이해 했습니까? 기본적으로 (max-width: 600px) 부분을 참조하십시오. 따라서 스타일을 표시하는 화면의 최대 너비는 600px입니다.

CSS의 자바스크립트와 비슷하죠? 아, 그리고 btw, Javascript에서도 그렇게 할 수 있습니다!

var width = window.innerWidth;
if(width > 100){
   alert('Device bigger than 100px');
}

요약: @media = CSS의 JavaScript

팁 2: CSS 기본 글꼴 = 불량

CSS에 대한 공격은 아니지만 기본 글꼴이 형편없습니다. 다음은 글꼴 변경에 대한 빠른 자습서입니다.

방문 fonts.google.com .

CSS의 기본 글꼴이 아닌 글꼴을 클릭하십시오.

스타일을 선택합니다.

선택한 패밀리 상위 보기 버튼을 클릭합니다.

측면에서 팝업되는 지침을 따르십시오

.

충분히 쉽고 몇 분 이상 걸리지 않습니다. CSS의 기본 글꼴에 작별을 고하는 것을 잊지 마십시오!

팁 3: 라이브러리 사용

일반 CSS는 좋지만 그다지 효율적이지는 않습니다. 부트스트랩 또는 Tailwindcss와 같은 인기 있는 CSS 라이브러리를 다운로드할 수 있습니다. 나는 아마 내일 이것에 관한 글을 쓸 것이다.

CSS 라이브러리는 CSS를 대체하지 않습니다. 결국 모든 CSS 라이브러리는 기본적으로 CSS의 애드온입니다.

따라서 일반적으로 CSS를 배우고 있다면 아마도 JavaScript도 배우고 있을 것입니다! 따라서 이 제목의 나머지 부분에서는 CheaterJS 이라는 JavaScript 라이브러리에 대해 이야기해 보겠습니다.

CheaterJS는 기본적으로 일반적인 JavaScript 기능이 많이 포함된 모듈입니다. 이제 CSS로 돌아갑니다!

결론(결론문)

오, 이것은 내가 안녕이라고 말하는 부분이고 그런 종류의 것들입니다. 당신이 승진을 싫어한다면, 이것은 당신이 떠나야 할 때라는 좋은 지표입니다.

아직 읽고 있는 0%에게 작별인사를 하고 좋은 하루 되세요. 이와 같은 더 많은 내용을 보려면 저를 팔로우하십시오.(실생활에서 저를 팔로우하지 마십시오.)