좋은 CSS를 만드는 법

👋글을 시작하기에 앞서......

Css는 정말 무궁무진하고 자유롭게 제작이 가능하기 때문에 때로는 잘 만들어진 화면이더라도 내부의 CSS고통을 겪고 있을지 모릅니다. 눈으로 보이지 않기 때문에 저를 비록 한 초보자들이 많이 모르고 지나쳤을 꺼라 생각되어 이 글을 끄적입니다......... 

 

👆좋은 CSS를 만드는 법

단순히 화면만 이쁘게 만들어 진다고 좋은 Css가 아닙니다. 
👉아래 내용을 참고해서 자신의 코드를 평가해 보세요

📍단순하고 체계적으로 유지

명확하고 일관된 레이아웃을 사용하고 너무 많은 스타일과 요소를 사용하지 마십시오.

 

📍CSS 전처리기 사용

Sass 또는 Less와 같은 CSS 전처리기를 사용하면 변수, 함수 및 혼합을 사용하여 보다 효율적이고 유지 관리 가능한 코드를 작성할 수 있습니다.

📍CSS 프레임워크 사용

 Bootstrap 또는 Foundation과 같은 프레임워크는 시간을 절약하고 코드의 일관성을 높일 수 있는 미리 정의된 클래스 및 레이아웃 옵션 세트를 제공합니다.

 

📍CSS 재설정 사용

Normalize.css 또는 Eric Meyer의 reset.css와 같은 CSS 재설정은 모든 브라우저가 브라우저 간 불일치를 방지하는 데 도움이 되는 일관된 스타일 세트로 시작하도록 합니다.

 

📍반응형 디자인 사용

미디어 쿼리와 반응형 그리드 시스템을 사용하여 웹 사이트가 모든 화면 크기에서 보기 좋게 표시되도록 합니다.

 

📍웹 글꼴 사용

웹 글꼴을 사용하여 웹사이트의 타이포그래피를 개선하고 눈에 띄게 만드세요.

 

📍이미지 최적화 및 CSS 스프라이트 사용

이미지를 최적화하여 파일 크기와 로딩 시간을 줄이고 CSS 스프라이트를 사용하여 HTTP 요청 수를 줄입니다.

 

📍CSS 애니메이션 및 전환 사용

웹 사이트에 애니메이션과 상호 작용을 추가하여 더욱 매력적이고 역동적으로 만드십시오.

 

📍브라우저 개발자 도구 사용

브라우저 개발자 도구를 사용하여 CSS 코드를 빠르게 테스트 및 디버그 하고 다양한 장치 및 화면 크기에서 어떻게 보이는지 확인합니다.

 

📍미디어 쿼리를 사용하기

미디어 쿼리를 사용하면 화면 너비에 따라 다양한 CSS 스타일을 적용할 수 있습니다. 예를 들어 화면 너비가 600px 미만일 때 미디어 쿼리를 사용하여 글꼴 크기를 변경할 수 있습니다.

 

📍상대 단위를 사용하기

픽셀과 같은 고정 단위 대신 백분율과 같은 상대 단위를 사용하십시오. 이렇게 하면 화면 크기에 따라 요소의 크기를 조정할 수 있습니다.

 

📍메타 태그로 뷰포트 설정하기

뷰포트 메타 태그를 사용하여 웹페이지의 초기 배율과 최대 배율을 설정합니다. 이렇게 하면 사용자가 웹 페이지를 확대하거나 축소하여 레이아웃 문제를 일으키는 것을 방지할 수 있습니다.

  <meta name="viewport" content="width=device-width, initial-scale=1" />

 

추가로 🔍......

🧰CSS 코드를 최신 상태로 유지하십시오.

🔫Stylelint와 같은 보푸라기 도구를 사용하여 CSS가 일관된 스타일을 따르고 조기에 오류를 발견하도록 합니다.

💼요소 및 속성 수 줄이기, CSS 축소, 렌더링 속도가 더 빠른 CSS 속성 사용과 같은 CSS 성능 최적화 기술을 사용합니다.

🩺여러 브라우저와 장치에서 웹 사이트를 테스트하여 예상대로 표시되고 작동하는지 확인하십시오