중복이나 복잡함 없이 깔끔한 CSS를 작성하는 방법

몇 주 동안 웹 프로젝트를 작업하다 보면 CSS 파일이 반복되는 정의, 길고 이해하기 어려운 클래스 이름, 추적하기 어려운 용도로 구성된 줄 등으로 가득 차게 됩니다. 이런 혼란은 갑자기 나타나는 것이 아니라 작은 조정이나 일시적인 추가가 누적되어 영구적으로 나타납니다.

하지만 CSS를 작성하는 것은 무질서하거나 복잡할 필요는 없습니다. 코드를 정리하고, 중복을 줄이고, 확장성을 개선하는 데 도움이 되는 간단한 기술과 검증된 방법론이 있습니다. 몇 가지 규칙과 관행을 따르면 CSS 파일을 명확하고 이해하기 쉬우며 로드 속도가 빠른 파일로 바꿀 수 있습니다.

1. 먼저 HTML을 알고 있는지 확인하세요.

CSS를 배우기 전에 알아야 할 첫 번째 사항은 HTML입니다. 당연한 것처럼 보일 수 있지만, 콘텐츠 포맷을 정하기 전에 강조해야 할 몇 가지 중요한 개념이 있습니다.

귀하의 학습 여정은 의미론(HTML)과 스타일(CSS)을 분리하는 데 중점을 둘 것입니다. 명확하고 좋은 마크업을 사용하고, 익숙한 문체적 HTML 태그는 제거하세요.

Mozilla의 HTML 문서는 훌륭합니다. (웹 플랫폼을 다루는 그의 모든 자료와 마찬가지로) HTML 능력에 자신이 없다면 거기서부터 시작하세요.

2. CSS의 기본부터 시작하세요

Mozilla 웹사이트에 머물러보세요CSS 소개를 자세히 살펴보세요.

이 시점에서 배워야 할 두 가지 기본 사항은 다음과 같습니다. 기본 CSS를 작성하는 방법과 HTML 파일에 연결하는 방법입니다. Mozilla 문서는 다음 예를 사용하여 CSS에 대한 간단한 소개로 시작합니다.

CSS 작성에 능숙하지 않더라도 이 스니펫의 기능은 이해할 수 있을 것입니다. h1 요소를 빨간색으로 만들고 특정 글꼴 크기를 설정합니다.

또한 읽기: DNS란 무엇이며 다른 DNS 서버를 사용해야 합니까?

Mozilla의 문서 "CSS 시작하기"에서는 퍼즐의 두 번째 부분을 설명하면서, 위와 같이 CSS를 HTML 파일에 적용하는 방법을 설명합니다. 내부 스타일 시트는 아마도 시작하기에 가장 빠르고 쉬운 방법일 것입니다. 하지만 외부 스타일 시트에는 많은 이점이 있으므로 둘 다 시도해 보는 것이 좋습니다.

3. 게임을 해보세요

당신에게 도움이 되는 훌륭한 게임이 많이 있지만 CSS를 배우세요하지만 일반적으로 네트워크 계획과 같은 보다 고급 기술을 다룹니다. CSS Diner는 초보자에게 더 적합하며, 문서의 특정 부분을 서식으로 표시하는 CSS 선택기를 이해하는 데 도움이 됩니다. 위의 예는 간단한 "h1" 선택자를 보여 주지만, 더 복잡할 수도 있습니다.

a#selected > .icon,
.box h2 + p {
    font-weight: bold;
}

테스트는 고려됩니다 CSS 스피드런 선택기를 사용하는 기술을 시험해 볼 수 있는 좋은 기회지만, 이름에서 알 수 있듯이 좀 더 지칠 수 있는 경험이 될 수도 있습니다!

4. Chrome/Safari/Firefox 개발자 도구를 사용하세요

기본을 익히고 나면 이제 직접 스타일시트를 작성할 준비가 된 것입니다. 하지만 텍스트 편집기를 열어 파일을 수정할 필요 없이 브라우저에서 바로 CSS를 실험해 볼 수 있습니다.

예를 들어, Google 개발자 도구의 요소 검사기를 사용하면 보는 모든 페이지의 모든 항목에 적용되는 CSS를 볼 수 있습니다.

게다가 스타일 패널을 사용하면 CSS 파일을 수정하거나 새로운 스타일을 만들고 결과를 즉시 볼 수 있습니다.

이러한 도구는 브라우저마다 약간씩 다르지만, 이를 사용하면 기술을 향상시킬 수 있습니다. Chrome은 허용되는 속성 이름과 값을 제안하는 데 있어 뛰어난 자동완성 기능을 제공합니다. 실험을 통해 다양한 기능을 알아보고 Mozilla Developer Network(MDN) 문서에 대한 직접 링크를 통해 해당 기능에 대해 자세히 알아볼 수 있습니다.

5. 온라인 편집기를 사용해 보세요

이 텍스트 편집기를 사용하기 전에 로컬 파일을 다루지 않고도 CSS 기술을 시험해 볼 수 있는 또 다른 방법이 있습니다. 다음과 같은 다양한 웹 애플리케이션이 있습니다. 코드 펜 أو JSFiddle. 이러한 도구는 게임 부분을 제외하면 여러분이 이전에 본 일부 게임과 비슷합니다. HTML과 CSS를 편집하는 데 사용할 수 있는 텍스트 상자를 제공하며, 최종 결과를 미리 볼 수 있습니다.

조언
이러한 도구에는 일반적으로 프로그래밍 기술을 개발할 수 있는 JavaScript 섹션이 포함되어 있지만 이는 전적으로 선택 사항입니다. "JS"나 "JavaScript" 섹션은 무시하고 HTML과 CSS에 집중하세요.

이러한 편집기에는 구문 강조 및 코드 서식 지정과 같은 유용한 기능이 포함되어 있습니다. JSFiddle은 좋은 오류 보고 기능을 갖추고 있어, 예를 들어 잘못된 CSS 값에 대한 주의를 줍니다. 나중에 사용할 수 있도록 작업 내용을 저장할 수도 있고, 원하는 경우 HTML이나 CSS를 로컬 파일에 복사하여 붙여넣어 자신의 프로젝트에서 사용할 수도 있습니다.

또한 읽기: Firefox를 다시 설치하면 어떻게 되나요?

6. 가장 좋은 참고 자료를 활용하세요.

보시다시피, 이러한 리소스 중 다수는 MDN(소프트웨어 개발자 네트워크)을 가리킵니다. 이 웹 플랫폼의 정보 소스는 훌륭하고 포괄적입니다. CSS 문제에 대한 세부 정보를 찾아야 할 때 가장 먼저 찾아야 할 곳입니다.

경고
당신은 사이트를 만날 수 있습니다 W3Schools CSS 주제나 다른 웹 관련 주제를 검색할 때. 이 사이트의 이름을 보면 웹 기술의 표준을 정하는 기관인 W3C에 가입되어 있음을 알 수 있습니다. 하지만 사실은 그렇지 않습니다. 제XNUMX자로부터 받은 문서 모음입니다. 품질은 향상되었지만 여전히 완벽과는 거리가 멀고, MDN은 훨씬 더 신뢰할 수 있는 출처입니다.

MDN에는 튜토리얼부터 대화형 퀴즈까지 다양한 CSS 자료가 있습니다. 이 사이트는 선택자, 상자 모델, 색상, 디버깅을 포함한 CSS의 모든 측면을 다룹니다. 각 CSS 속성에는 해당 속성에 대해 알아야 할 거의 모든 내용을 알려주는 참조 페이지가 있습니다.

각 속성 참조 페이지에는 다양한 값에 대한 설명, 사용 방법의 예, 브라우저 호환성 표가 포함되어 있습니다. 후자는 잘 지원되는 기능과 일부 특정 브라우저에서만 작동할 수 있는 실험적 기능을 구별하는 데 필요합니다.

좋은 대안을 찾고 있다면 W3C의 CSS 리소스가 신뢰할 만합니다. 하지만 초보자가 사용하기 쉽지 않다는 점을 유의하세요. MDN에 있는 훌륭한 정보를 모두 읽은 후에만 참조하시기 바랍니다.

7. 최신 정보를 얻으세요

CSS는 성숙하고 안정적인 기술이기는 하지만 계속 변화하고 있습니다. 다양한 조직의 회원들이 지속적으로 변경 사항, 수정 사항 및 새로운 기능을 제안하고 있습니다.

디자이너로서 여러분이 직면하는 과제는 종종 무언가를 하는 방법을 아는 것을 넘어서 실제로 무엇을 성취할 수 있는지에 초점을 맞춥니다. 텍스트의 색상은 변경할 수 있지만, 윤곽선은 변경할 수 있나요? 아니면 색상 대신 그라데이션을 사용할 수 있나요?

최신 동향에 대한 최신 정보를 얻고 이러한 질문에 답하려면 팟캐스트, 블로그, 전용 소셜 미디어 계정 등 CSS 뉴스의 좋은 소스를 찾아야 합니다.

준비하다 CSS 트릭 고급 CSS 뉴스를 제공하는 최고의 소스 중 하나입니다. CSS의 모든 측면을 다루는 기사가 포함되어 있으며, 특히 Flexbox와 그리드와 같은 기능에 대한 훌륭한 참고 자료도 포함되어 있습니다.

CSS 팟캐스트는 5년째 방영되고 있는 계절별 프로그램입니다. 발표자는 매우 상호 작용적이어서 주제를 지루하거나 복잡하게 만들지 않고 CSS의 세부 사항을 깊이 있게 다룰 수 있습니다.

게시하다 리아 페로 박사그녀는 이 분야의 전문가이며, X에 CSS와 웹 플랫폼에 대한 글을 정기적으로 게시합니다. 그것은 작동합니다 진 시몬스 Apple은 Safari에 CSS 기능을 제공하고, Bluesky에 CSS 문제에 대한 게시물을 올렸습니다. 계정 CSS 작업 그룹 매우 형식적이에요. 이 계정은 w3.org의 사양 업데이트 및 기타 관련 기사를 홍보하기 위해 가끔씩만 게시하지만, 이 계정을 팔로우하면 최신 개발 상황을 파악하는 데 큰 도움이 됩니다.

또한 읽기: YouTube 오디오가 작동하지 않는 문제를 해결하는 9가지 방법

8. CSS 검증

이제 수십 개의 스타일 시트를 만들었으니 오류가 없는지 확인하는 것이 좋습니다. CSS 오류는 쉽게 숨길 수 있고 디버깅하기 어려울 수 있으므로 가능한 모든 도움을 받는 것이 좋습니다.

항상 그래왔다 W3C 검증기 이는 CSS 오류 검사의 황금 표준입니다. 검증을 위해 패턴의 URL, 파일 또는 텍스트 사본을 제공할 수 있습니다.

스타일시트에 오류가 없으면 친절한 축하 메시지와 배지가 표시되며, 이를 웹 페이지에서 사용하여 스타일시트의 정확성을 확인할 수 있습니다. 이러한 메시지를 표시하는 것은 더 이상 필요하지 않지만, 포트폴리오나 개인 웹사이트에서 자신의 기술을 선보이고 싶다면 표시할 수 있습니다.

반면, 서식에 문제가 있는 경우 검증 도구는 이를 설명하는 자세한 오류 메시지를 표시합니다. 대부분의 오류와 마찬가지로, 이 오류도 익숙하지 않으면 이해하기 어려울 수 있으므로, 문제를 해결하기 전에 영향을 받은 코드를 검토하여 문제를 파악하세요.

9. 브라우저 호환성 확인

브라우저 간 호환성은 스타일시트의 유효성에 있어서 또 다른 중요한 측면입니다. 이 문제는 예전에 비해 훨씬 덜 흔하지만, 실험적 기능을 포함한 최신 CSS 업데이트는 항상 광범위한 지원을 받지는 못합니다. 다행히도 그는 당신에게 말해줄 것입니다. 사용해도 되나요 모든 브라우저에서 작동하는 CSS 속성을 사용하면 됩니다.

여기에 있는 정보는 내용이 방대하지만, 이해하기 쉬운 방식으로 표현되어 있습니다. Edge의 전신인 Internet Explorer를 비롯하여, 지원하려는 브라우저와 컴퓨터와의 호환성을 선택해야 합니다. 좋은 소식은 대부분의 CSS가 선택 사항이고, 지원하지 않는 브라우저에서 볼 때도 페이지를 자연스럽게 저하되도록 디자인할 수 있다는 것입니다.

10. CSS 타이포그래피 마스터하기

타이포그래피는 모든 디자인의 기본 요소이지만 CSS 글꼴이 등장하기 전까지는 웹에서 진지하게 받아들여지지 않았습니다. CSS는 항상 유연했으며, 사용 가능한 글꼴에 따라 원하는 글꼴 순서를 선택할 수 있는 글꼴 패밀리를 지원했습니다. 하지만 실제 웹 글꼴을 사용하면 사용자 경험을 더 많이 제어할 수 있으며, 글꼴이 설치되어 있지 않더라도 모든 사용자가 글꼴을 볼 수 있습니다.

라고 고려된다 구글 폰트 최고의 무료 글꼴 제공업체 중 하나로, 선택의 폭이 넓습니다. 이 글을 쓰는 시점을 기준으로 글꼴 패밀리가 거의 2000개에 달합니다.

다양한 굵기, 여러 언어 지원, 아이콘 글꼴 등 다양한 옵션과 구성을 사용할 수 있습니다. 원하는 대로 글꼴을 사용자 지정한 후, 내장 코드를 복사하여 HTML 파일에 추가하세요. 원하는 경우 글꼴 파일을 다운로드하여 로컬로 호스팅할 수도 있습니다.

구조화된 CSS는 코드 파일의 모양을 개선할 뿐만 아니라 성능, 개발 속도, 팀 협업도 향상시킵니다. 명확한 글쓰기 스타일로 시작하고, 이해하기 쉬운 라벨을 사용하고, 반복을 피하는 것은 모두 코드가 부담이 되는 대신 사용자에게 도움이 되는 단계입니다.

"복잡성 없이 CSS를 목적에 맞게 사용하세요"라는 원칙을 고수할수록 나중에 디자인을 수정하고 확장하는 것이 더 쉽고 빨라질 것입니다. 이러한 간단한 단계부터 시작하면 CSS를 재미있고 체계적으로 사용할 수 있다는 걸 알게 될 겁니다.