초보자를 위한 14가지 CSS 모범 사례

게시 됨: 2022-07-25

웹 디자인을 시작할 때 모든 것이 제대로 작동하고 원하는 모양으로 보이게 하는 핵심 요소는 CSS의 손에 달려 있습니다. Cascading Style Sheets의 줄임말로 HTML 요소의 스타일을 원하는 방식으로 지정할 수 있습니다.

CSS를 여러 가지 방법으로 실험할 수 있지만(대부분 인라인으로) 더 나은 방법이 있습니다. 그리고 이는 코드가 기능적이고 불필요한 부피가 없으며 잘 구성되어 있는지 확인하기 위해 따라야 하는 일련의 모범 사례와 일치합니다.

오늘 우리는 초보자를 위한 14가지 CSS 모범 사례를 강조할 것이지만 숙련된 전문가도 때때로 기본 사항을 숙지해야 합니다.

1. 스타일시트 구성

CSS 모범 사례를 적용할 때 가장 먼저 해야 할 일은 스타일시트를 구성하는 것입니다. 접근 방식은 프로젝트에 따라 다르지만 일반적으로 다음과 같은 조직 원칙을 준수하는 것이 좋습니다.

일관성 유지

CSS를 구성하는 방법에 관계없이 전체 웹사이트는 물론 전체 스타일시트에서 일관된 선택을 유지해야 합니다.

클래스 이름 지정부터 줄 들여쓰기, 주석 구조에 이르기까지 모든 것을 일관되게 유지하면 작업을 보다 쉽게 추적할 수 있습니다. 또한 나중에 변경하는 데 어려움이 없습니다.

CSS: 사이트의 모양과 기능을 올바르게 만드는 열쇠입니다. 다음 프로젝트를 위해 이것을 북마크하십시오! 트윗하려면 클릭

줄 바꿈을 자유롭게 사용

CSS는 시각적으로 보기 흉하더라도 작동하지만 각 코드 조각을 구분하고 읽기 쉽게 유지하기 위해 줄 바꿈을 많이 사용하는 경우 귀하와 코드로 작업할 다른 개발자에게 더 좋습니다.

일반적으로 각 속성과 값 쌍을 새 줄에 배치하는 것이 가장 좋습니다.

속성 및 값 쌍이 자체 라인에 존재하도록 구조화될 때 CSS의 가독성을 보여주는 Mozilla.org의 CSS 코드 스크린샷. — CSS 코드

의미 있는 새 섹션 만들기

다시 말하지만, 스타일시트를 설정하는 방법은 작업 중인 사이트 유형에 따라 크게 달라집니다. 그러나 일반적으로 스타일에 사용할 섹션을 설정하는 것이 좋습니다. 따라서 텍스트 스타일에 대한 섹션, 목록 및 열에 대한 섹션, 탐색 및 링크에 대한 섹션 등이 있습니다. 상점이나 FAQ와 같이 다른 스타일과 다른 스타일을 가질 수 있는 특정 페이지에 대한 섹션을 만들 수도 있습니다.

코드에 주석 달기

당신만이 당신의 CSS를 보게 될지라도, 당신의 코멘트를 철저히 하는 것이 여전히 좋은 생각입니다. 댓글은 다음과 같이 표시됩니다.

 /* This is what a standard CSS comment looks like */

이렇게 하면 나중에 모든 줄을 자세히 살펴보지 않고도 각 섹션이 무엇과 관련되어 있는지 한 눈에 쉽게 파악할 수 있습니다.

댓글은 섹션을 정의하는 데 도움이 될 수 있지만 특히 나중에 잊어버릴 수 있다고 생각되는 경우 결정에 대한 통찰력을 제공하는 데 사용할 수도 있습니다.

대규모 프로젝트에 별도의 스타일시트 사용

모든 웹사이트에 적용되는 것은 아니지만 특정 CSS가 많이 필요한 대규모 사이트의 경우 여러 스타일시트를 사용하는 것이 좋습니다. 당신을 포함한 누구도 당신이 필요로 하는 코드 한 줄을 찾기 위해 아주 오랜 시간 동안 스크롤할 필요가 없습니다.

특히 완전히 다른 스타일을 가질 경우 번거로움을 피하고 다른 사이트 섹션에 대해 별도의 스타일시트를 만드십시오.

예를 들어, 글로벌 스타일에 대한 스타일시트를 만들고 제품 설명, 제목 또는 가격에 대한 전용 스타일을 사용하여 온라인 상점에 대해 다른 스타일시트를 만들 수 있습니다.

2. 인라인 CSS 대 외부 CSS 대 내부 CSS

웹 사이트를 구축하고 스타일을 조정할 때 처리해야 하는 세 가지 유형의 CSS가 있습니다. 각각이 무엇이며 하는 일에 대해 조금 이야기한 다음 실제로 프로젝트에 사용해야 하는 것에 대해 논의해 보겠습니다.

인라인 CSS. 이를 통해 특정 HTML 요소의 스타일을 지정할 수 있습니다.
외부 CSS . 여기에는 스타일시트와 같은 파일을 사용하여 사이트 전체의 스타일을 지정하는 작업이 포함됩니다.
내부 CSS. 이를 통해 특정 요소가 아닌 전체 페이지의 스타일을 지정할 수 있습니다.

인라인 CSS는 일반적으로 캐시할 수 없으므로 많은 개발자가 사용하지 않는 것이 좋으며 CSS를 여러 파일에 분할하지 않는 것이 좋습니다. 최소한 아껴서 사용해야 합니다.

웹 사이트의 한 섹션, 텍스트 또는 한 페이지 영역에 약간의 스타일 지정을 사용하는 경우에만 필요합니다. 인라인 CSS가 실행 가능한 솔루션인 유일한 상황일 것입니다.

그 외에 필요에 따라 외부 CSS 또는 내부 CSS를 사용하는 것이 시간과 노력을 절약할 수 있는 더 나은 옵션입니다. 스타일을 한 번 결정하고 웹사이트 전체에 적용하십시오. 붐 – 완료.

3. 스타일시트 축소

CSS 모범 사례 중 하나는 스타일시트를 축소하는 것입니다. Kinsta CDN 내에서 직접 포함하여 스타일시트 로드 시간을 단축하는 데 사용할 수 있는 다양한 축소 도구가 있습니다.

이를 통해 전체 웹사이트에서 코드 축소 설정을 조정할 수 있습니다.

4. 전처리기 사용

Sass/SCSS와 같은 전처리기를 사용하면 변수와 함수를 사용하고 CSS를 더 잘 구성하고 시간을 절약할 수 있습니다. 전처리기 구문에서 CSS를 생성할 수 있도록 하여 작동합니다.

이것이 의미하는 바는 전처리기가 "CSS +"와 같으며 일반적으로 CSS 자체에는 존재하지 않는 몇 가지 기능을 포함합니다. 이러한 기능을 추가하면 출력 CSS가 더 읽기 쉽고 탐색하기 쉽습니다.

전처리기를 사용하려면 웹사이트 서버에 CSS 컴파일러가 필요합니다. 가장 널리 사용되는 전처리기에는 Sass, LESS 및 Stylus가 있습니다.

5. CSS 프레임워크 고려

CSS 프레임워크는 경우에 따라 유용할 수 있지만 특히 웹사이트가 소규모인 경우 많은 사람들에게 불필요할 수 있습니다.

프레임워크를 사용하면 대규모 프로젝트를 신속하게 배포하고 버그를 방지할 수 있습니다. 그리고 여러 사람이 동시에 프로젝트를 수행할 때 필수적인 표준화의 이점을 제공합니다.

모든 사람은 동일한 명명 절차, 동일한 레이아웃 옵션, 동일한 주석 처리 절차 등을 사용하게 됩니다.

반면에 일반적으로 보이는 웹 사이트가 생성되고 코드의 대부분이 결국 사용되지 않을 수 있습니다.

이전에 CSS 프레임워크를 접한 적이 있을 것입니다. Bootstrap과 Foundation은 가장 인기 있는 두 가지 예입니다. 다른 프레임워크에는 Tailwind CSS와 Bulma가 있습니다.

6. 재설정으로 시작

신속하게 실천해야 할 또 다른 사항은 CSS 재설정으로 개발 작업을 시작하는 것입니다. normalize.css와 같은 것을 사용하면 브라우저 불일치를 최소화하기 위해 최신 표준을 따르는 동안 모든 브라우저가 일관된 방식으로 페이지 요소를 렌더링하도록 할 수 있습니다.

이 재설정은 실제로 HTML 요소의 스타일에 더 높은 수준의 브라우저 간 일관성을 추가하기 위해 웹사이트에 업로드하는 작은 CSS 파일이며 CSS 재설정을 수행하는 업데이트된 방법으로 사용됩니다.

7. 클래스 대 ID

CSS 모범 사례를 따를 때 주의해야 할 다음 사항은 클래스와 ID를 처리하는 방법입니다. 익숙하지 않은 경우 둘 다 간단히 정의하겠습니다.

수업. 클래스 선택기는 클래스 속성이 있는 요소를 선택하여 작동합니다. class 속성에 있는 것은 HTML 요소가 선택되는 방법을 결정하는 것입니다. 코드에서 다음과 같이 보입니다. .classname
ID. 반면에 ID는 ID 속성이 있는 요소를 선택하여 작동합니다. ID 속성이 작동하려면 선택자의 값과 같아야 합니다. CSS에서 # 기호로 ID를 찾을 수 있습니다.

ID는 단일 요소를 선택하는 데 사용되는 반면 클래스는 둘 이상의 요소를 선택하는 데 사용됩니다. ID를 사용하여 단일 HTML 요소에 스타일을 적용합니다. 클래스를 사용하여 둘 이상의 HTML 요소에 스타일을 적용합니다. 이 일반 규칙을 따르면 코드를 깨끗하고 깔끔하게 유지하는 데 도움이 되며 불필요하거나 중복되는 코드의 인스턴스도 줄일 수 있습니다.

위의 인라인 대 외부 CSS에 대한 논의와 유사하게 ID를 사용하여 단일 요소에 스타일을 적용합니다. 기본적으로 ID는 전체 페이지 또는 웹사이트에 적용되는 포괄적인 스타일이 아니라 페이지의 예외 스타일을 지정하는 데 사용됩니다.

8. 중복 방지

따라야 할 또 다른 CSS 모범 사례는 가능한 한 중복을 피하는 것입니다. 다음은 이 방법을 워크플로에 적용하기 위해 따라야 할 몇 가지 일반적인 팁입니다.

DRY 방식 사용

DRY 방법은 "Don't Repeat Yourself"의 약자이며 기본적으로 CSS에서 코드를 반복해서는 안 된다는 아이디어입니다. 기껏해야 이러한 스타일을 계속해서 수동으로 입력하는 것은 시간 낭비이고 반복적이지만 최악의 경우 웹 사이트 속도를 저하시킬 수 있기 때문입니다.

코드를 검토하여 중복을 제거하는 것이 좋습니다. 예를 들어 태그가 동일한 섹션에서 글꼴 크기를 두 번 식별할 필요가 없습니다. 반복을 제거하면 코드가 더 잘 읽고 더 잘 수행됩니다.

CSS 약식 사용

CSS 속기는 코드가 정상적으로 수행하면서 차지하는 공간을 줄이는 좋은 방법입니다. 합당한 경우 한 줄에 여러 스타일을 결합할 수 있습니다. 예를 들어 특정 div의 스타일을 설정하는 경우 한 줄에 여백, 패딩, 글꼴, 글꼴 크기 및 색상을 모두 나열할 수 있습니다.

요소에 여러 클래스 추가

해당되는 경우 요소에 둘 이상의 클래스를 추가하여 중복을 방지할 수도 있습니다. 예를 들어, .left 클래스 덕분에 페이지 콘텐츠가 이미 왼쪽으로 떠 있지만 페이지의 열을 오른쪽에 배치하려는 경우, 이를 요소에 추가하여 혼동을 방지하고 CSS에 구체적으로 어떤 요소가 필요한지 알려줄 수 있습니다. 표준 왼쪽 정렬 위에 왼쪽으로 부동하고 싶습니다.

그리고 가장 좋은 점은 요소가 공백으로 분리되어 있는 한 요소에 원하는 만큼 클래스를 추가할 수 있다는 것입니다.

가능한 경우 요소 결합

요소를 하나씩 나열하는 대신 공간과 시간을 절약하기 위해 결합합니다. 종종 단일 스타일시트 내의 요소는 동일한(또는 유사한) 스타일을 갖습니다. 동일한 스타일을 공유하는 경우 페이지의 모든 텍스트 요소에 대한 글꼴, 색상 및 정렬을 나열할 필요가 없습니다. 대신 다음과 같이 한 줄로 결합합니다.

 h1, h2, h3, p { font-family: ariel, color: #00000 }

불필요한 추가 선택자 피하기

때때로 사이트 디자인을 마무리하는 작업을 하다 보면 코드가 약간 지저분해질 수 있습니다. 이것이 사실 이후에 돌아가서 불필요한 선택기를 제거하는 것이 중요한 이유입니다. 지나치게 복잡한 선택자도 주의해야 합니다. 예를 들어, 웹사이트에서 목록의 스타일을 지정하려는 경우 "본문" 또는 "컨테이너" 또는 이와 유사한 유형의 선택기를 사용할 필요가 없습니다. .classname li { 이면 충분합니다.

9. 글꼴을 올바르게 가져오는 방법

글꼴을 적절하게 가져오고 사용하는 것은 CSS를 명확하고 간결하며 최적화하는 또 다른 방법입니다.

@font-face를 사용하여 글꼴 가져오기

웹사이트에 원하는 거의 모든 글꼴을 추가할 수 있지만 제대로 작동하는지 확인하려면 특정 절차를 따라야 합니다.

사용하려는 글꼴을 다운로드합니다. Google 및 Adobe를 포함하여 글꼴을 소싱할 수 있는 곳이 많이 있습니다. 선택한 글꼴에 대한 트루타입 글꼴 파일(.ttf)을 다운로드하고 있는지 확인하십시오.
Font Squirrel에서 제공하는 Webfont Generator에 사용하려는 사용자 정의 글꼴을 업로드하십시오. Web Font Kit가 생성되면 다운로드하십시오. 여기에는 .ttf, .woff, .woff2 및 .eot와 같은 확장자를 가진 여러 글꼴 파일을 포함하여 여러 파일이 포함되어야 합니다. CSS 파일도 포함되어 있어야 합니다.
FTP를 사용하여 웹 글꼴 키트를 웹사이트에 업로드합니다. 이에 대한 구체적인 지침은 웹 호스팅 제공업체에 따라 다르지만 일반적으로 cPanel과 같은 웹 호스트의 관리 인터페이스에서 FTP 클라이언트 또는 파일 관리자를 사용하여 사이트 파일에 액세스할 수 있습니다.
텍스트 편집기를 사용하여 CSS 파일을 업데이트합니다. 선호하는 HTML 텍스트 편집기는 메모장 또는 Sublime과 같습니다. 이 파일 내에는 "소스 URL"이 나열됩니다. Web Font Kit가 현재 웹 서버에 있는 위치를 반영하도록 업데이트해야 합니다. 웹 호스트에서 각 글꼴 파일이 저장되는 파일 경로를 다음과 같이 이 파일에 복사합니다.

 @font-face { font-family: "FontName"; src: url("https://sitename.com/css/fonts/FontName.eot"); src: url("https://sitename.com/css/fonts/FontName.woff") format("woff"), url("https://sitename.com/css/fonts/FontName.otf") format("opentype"), url("https://sitename.com/css/fonts/FontName.svg#filename") format("svg"); }

그런 다음 font-family 태그를 사용하여 사이트의 CSS 파일에 새 글꼴을 추가하여 사용할 새 글꼴을 넣을 수 있습니다.

사이트 성능을 개선하고 로드할 때 사이트 레이아웃이 이상하게 재조정되는 것을 방지하기 위해 글꼴을 미리 로드할 수 있습니다. 글꼴을 미리 로드하고 WOFF2 글꼴(또는 그렇지 않으면 가장 작은 글꼴 크기)을 먼저 로드하면 성능이 크게 향상될 수 있습니다. <head> 태그에 한 줄의 코드를 추가하면 됩니다. Better Web Type은 다음과 같은 간결한 예를 제공합니다.

 <link rel="preload" as="font" href="/assets/fonts/3A1C32_0_0.woff2" type="font/woff2" crossorigin="crossorigin">

할 수 있는 또 다른 일은 사용자 정의 글꼴의 문자 집합을 제한하는 것입니다. 글꼴에서 몇 개의 문자만 사용하는 경우(아마도 헤더 또는 로고용) 전체 문자 집합을 호출할 필요가 없으며 실제로 필요한 몇 개만 있으면 됩니다. 새 코드에 따르면 "Hello" 문자만 요청하려면 다음과 같이 하십시오.

 <link href="http://fonts.googleapis.com/css?family=Open+Sans&text=Hello" rel="stylesheet">

가능한 경우 자체 호스트 글꼴

위에서 설명한 프로세스는 자체 호스팅 글꼴을 위한 것이지만 이것이 최선의 접근 방식이라는 점을 반복하는 것이 중요합니다. 이는 로딩 시간을 상당히 단축시키며 다른 사이트의 속도에 의존하지 않고 사이트의 로딩 프로세스를 완료할 수 있음을 의미합니다.

다운타임 및 WordPress 문제로 어려움을 겪고 계십니까? Kinsta는 시간을 절약하도록 설계된 호스팅 솔루션입니다! 우리의 기능을 확인

글꼴 변형에 주의

글꼴 변형은 웹사이트에 재미있는 스타일을 추가하는 데 매우 유용할 수 있습니다. 그러나 잘못 사용하면 웹 사이트도 손상될 수 있습니다.

font-variation-settings 아래에 둘 이상의 스타일을 할당하면 두 스타일이 겹치고 하나가 다른 스타일보다 우선 적용됩니다. 다음과 같이 단순하게 유지하고 글꼴 속성을 대신 사용하는 것이 훨씬 좋습니다.

 .bold { font-weight: bold; } .italic { font-style: italic; }

대체 글꼴 사용

웹사이트에 사용자 정의 글꼴을 추가하고 CSS를 통해 사용하기 위해 노력할 수 있지만, 특히 오래된 웹 브라우저를 사용하는 사람이 액세스하는 경우에는 여전히 100% 작동하지 않을 것입니다. 그러나 여전히 이러한 사이트 방문자가 즐거운 브라우징 경험을 하기를 원합니다.

이를 수용하려면 다른 글꼴을 사용할 수 없는 경우 사용할 수 있는 대체 글꼴을 설정하는 것이 중요합니다. 이렇게 하려면 font-family 를 할당할 때 선호하는 글꼴 뒤에 대체 글꼴을 나열하기만 하면 됩니다. 이런 식으로 CSS는 사용자가 선호하는 글꼴을 먼저 호출한 다음 두 번째 선택 항목, 세 번째 선택 항목 등을 호출합니다.

W3Schools에 따르면 글꼴 패밀리에는 5가지 기본 범주가 있습니다. 다음은 각각에 맞는 인기 있는 대체 글꼴이 있는 이러한 제품군의 목록입니다.

세리프: Times New Roman, 조지아, Garamond
산세리프체: Arial, Tahoma, Helvetica
모노스페이스: Courier New
필기체: 브러시 스크립트 MT
판타지: 동판, 파피루스

10. CSS를 액세스 가능하게 만들기

모든 사람은 웹사이트를 액세스 가능하게 만들어야 합니다. 그리고 이것은 CSS에 대한 접근 방식에도 적용됩니다. 귀하의 목표는 가능한 많은 사람들이 귀하의 웹사이트를 사용할 수 있도록 하는 것이며 접근성 조치를 구현하는 것은 이를 달성하는 환상적인 방법입니다.

다음과 같은 여러 가지 방법으로 CSS에 액세스할 수 있도록 만들 수 있습니다.

링크에 색상 변형을 추가하여 눈에 띄게 만듭니다.
ESC 키를 눌러 팝업을 닫을 수 있도록 합니다. 스크린 리더나 확대를 사용하는 사람들은 종종 팝업을 닫는 화면에서 "X"를 볼 수 없으므로 키 입력을 통해 닫을 수 있도록 만드는 것이 필수적입니다.
일부 장치는 처음부터 팝업을 표시하지도 않으므로 모든 필수 정보가 다른 곳에서 전달되었는지 확인하십시오.
툴팁과 같은 호버 요소는 마우스 호버뿐만 아니라 Tab 키에 의해 트리거되어야 합니다.
윤곽선을 제거하지 마십시오. 브라우저는 키보드가 현재 자동으로 초점을 맞추고 있는 요소 주위에 윤곽선을 표시합니다. Outline:none 을 사용하여 비활성화할 수 있지만 실제로는 비활성화하면 안 됩니다. 화면 판독기를 사용하거나 시력이 좋지 않고 탐색을 위해 추가 강조 표시/초점 포인트가 필요한 사용자에게 매우 유용하기 때문입니다.
초점 표시기를 개선합니다. 위에서 언급했듯이 강조 표시된 요소 주변의 윤곽선은 많은 탐색에 필수적이지만 기본 윤곽선은 거의 보이지 않는 경우가 많습니다. :focus 를 사용하여 현재 포커스가 있는 항목에 더 많은 주의를 끄는 스타일을 설정하여 더 잘 보이도록 수정할 수 있습니다. :hover 를 사용하여 유사한 작업을 수행하여 표지 효과를 향상시킬 수 있습니다. :focus in action 수정의 좋은 예는 University of Washington의 접근성 지침 세트에서 가져옵니다.

 a { color: black; background-color: white; text-decoration: underline } a:focus, a:hover { color: white; background-color: black; text-decoration: none }

이 코드 조각은 링크가 흰색 배경에 검은색 텍스트로 표시되지만 키보드 포커스 아래에 배치될 때(사용자가 요소를 탭할 때) 배경에 흰색 텍스트로 이동하도록 합니다. 호버링 시에도 동일한 효과가 발생합니다.

11. 명명 규칙 구현

지금은 작게 보일 수 있지만 CSS에서 이름을 지정하기로 결정한 것은 지속적인 영향을 미칠 수 있으며 부적절하게 수행될 경우 미래에 시간과 비용이 많이 들 수 있습니다. CSS 작성을 시작하기 전에 일련의 명명 규칙을 결정하고 준수해야 합니다.

이렇게 하면 코드를 작성할 때 잘못된 요소를 참조할 가능성이 줄어들기 때문에 나중에 디버깅할 때 많은 시간을 절약할 수 있습니다. FreeCodeCamp에 따르면 좋은 접근 방식은 CSS 이름의 표준 형식, 즉 font-weight 대 fontWeight 를 고수하는 것입니다.

BEM 명명 규칙 사용

이름을 일관되게 유지하는 좋은 방법은 BEM 명명 규칙을 사용하는 것입니다. BEM의 요점은 사용자 인터페이스를 계속해서 재사용할 수 있는 구성 요소로 나누는 것입니다.

BEM은 블록, 요소 및 수정자를 나타냅니다. 그러나 그것이 실제로 무엇을 의미하는지 분석해 봅시다.

블록 : 블록은 메뉴, 머리글, 바닥글 또는 열과 같은 웹사이트의 모든 디자인 덩어리가 될 수 있습니다. 블록은 .main-nav 또는 .footer와 같은 이름을 가져야 합니다.
요소 . 요소는 각 블록을 구성하는 비트와 조각을 설명합니다. 글꼴, 색상, 버튼, 목록 또는 링크와 같은 것을 생각해 보십시오. BEM 명명 규칙을 사용할 때 요소 이름 앞에 두 개의 밑줄을 넣어 요소를 식별합니다. 따라서 웹 사이트의 헤더에 사용된 글꼴에 대해 이야기하고 싶다면 BEM 명명 규칙을 사용하는 CSS에서 다음과 같이 보일 것입니다. .header__font
수정자 . BEM 퍼즐의 마지막 조각은 수정자입니다. 수정자는 블록 내에서 요소의 스타일을 설정하는 방법입니다. 여기에는 글꼴 이름, 두께 및 크기와 같은 항목이 포함됩니다. 색상 값; 및 정렬 값. 위에서 설정한 예제로 계속 작업하면서 헤더 내에서 글꼴 색상을 설정하려면 두 개의 하이픈으로 구분된 요소와 수정자를 사용하여 다음과 같이 작성합니다. .header__font–red

이 명명 규칙 또는 팀에서 결정하는 다른 규칙을 따르면 나중에 훨씬 더 즐거운 편집 및 디버깅 경험을 할 수 있습니다.

12. !중요한 태그 피하기

CSS 작업 루틴에 구현하는 또 다른 모범 사례는 !important 태그를 최대한 많이 사용하지 않는 것입니다.

문제를 해결할 수는 있지만 사용하면 종종 목발에 의존하게 됩니다. 그리고 그 결과 코드 전체에 !중요한 태그가 엉망이 되어 결국 사이트가 손상될 수 있습니다.

이것이 실제로 귀결되는 것은 특이성입니다. 선택기가 매우 구체적이면 웹 브라우저는 덜 구체적인 선택기를 사용하는 것보다 선택기가 더 중요하다고 판단합니다. !important 태그는 다른 것보다 더 중요한 속성을 식별하는 데 사용할 수 있습니다.

특정 시나리오에서 각각 이전 태그를 재정의하기 위해 여러 !important 태그를 사용해야 하는 경우가 많기 때문에 이는 까다로울 수 있습니다. 이 작업을 너무 많이 수행하면 사이트가 중단되거나 스타일이 잘못 로드될 수 있습니다. 대부분의 경우 이 태그는 단기 솔루션으로 사용되지만 종종 영구적이 되어 나중에 특히 디버그할 때 문제를 일으킬 수 있습니다.

!important 태그를 사용하는 것이 일반적으로 허용되는 것으로 간주되는 유일한 경우 중 하나는 최종 사용자가 화면 판독기 및 기타 접근성 도구와 함께 사용하기 위해 스타일을 재정의할 수 있도록 허용하는 것입니다. 유틸리티 클래스를 다룰 때도 유용합니다.

13. Flexbox 사용

또한 워크플로에 CSS를 처리하기 위한 모범 사례를 구현하려고 할 때 Flexbox에서 더 많은 마일리지를 얻을 수 있습니다. Flexbox는 기존의 float 옵션을 사용하는 대신 웹 레이아웃을 만들고 페이지에서 요소를 정렬하는 유연한 방법입니다.

CSS-Tricks에 따르면 Flexbox는 컨테이너 내에서 레이아웃이 정렬되고 배포되는 방식에 주의하여 CSS를 구조화하는 대안적인 방법인 유연한 상자 모듈입니다. 가장 좋은 점은 컨테이너 자체의 크기를 알 필요가 없고 오히려 포함된 속성이 컨테이너 크기 변경에 따라 "유연"하다는 것입니다. 이것은 모바일 장치를 수용하는 좋은 방법입니다.

또 다른 주요 차이점은 Flexbox가 "방향에 구애받지 않는다"는 것입니다. 즉, 레이아웃이 수직 또는 수평으로 구조화되지 않습니다. 따라서 많은 화면 방향 변경을 수용해야 하는 복잡한 웹 사이트 및 응용 프로그램을 디자인하는 데 더 나은 선택입니다. 표준 CSS 레이아웃은 블록 기반이고 flexbox 레이아웃은 "flex-flow"에 의존합니다. 다시 말하지만 CSS-Tricks는 이 개념을 잘 보여주는 간결한 그림을 제공합니다.

CSS-Tricks에서 flexbox 레이아웃이 작동하는 방식을 보여주는 스크린샷. — CSS-Tricks에서 flexbox 레이아웃이 작동하는 방식

flexbox 내의 요소는 기본 축 과 교차 축을 가로질러 배치됩니다. 여기에서 각 요소와 속성은 플렉스 컨테이너의 크기에 따라 유연하게 흐르도록 설계되었습니다.

14. 워드프레스 팁: 테마 파일을 직접 수정하지 마세요

오늘 여기서 논의할 마지막 CSS 모범 사례는 특히 WordPress 사용자를 위한 것입니다. 테마 파일을 직접 수정하는 것은 좋은 생각이 아닙니다. 모든 사이트 업데이트는 이러한 변경 사항을 지우거나 사이트를 손상시킬 수 있습니다. 위험할 가치가 없습니다.

대신 테마 사용자 지정 프로그램에서 추가 CSS 옵션을 사용하여 원하는 대로 변경할 수 있습니다. 그러나 이것은 CSS를 인라인으로 주입하고 헤드에 직접 배치한다는 점을 명심해야 합니다.

한두 가지만 변경하려는 경우 실행 가능한 옵션이 될 수 있지만 테마 업데이트, 사이트 업데이트 또는 테마를 변경하더라도 추가 CSS 상자에 배치한 모든 항목은 그대로 유지됩니다. .

이제 더 강력한 CSS 수정이 필요한 경우 사용자 정의 CSS 스타일시트에서 추가하거나 하위 테마의 style.css 파일을 직접 수정하는 하위 테마를 사용하는 것이 좋습니다. 이 방법은 또한 업데이트를 방지합니다.

CSS Click to Tweet을 시작할 때 이 가이드를 편리하게 보관 하세요.

요약

유용하고 정확한 CSS를 만드는 데 몰두하는 것은 진정한 초보자 에게 많은 것처럼 느껴질 수 있지만 시간을 내어 모범 사례에 대해 교육하면 나중에 많은 시간, 노력 및 골칫거리를 절약할 수 있습니다.

이 모범 사례 모음이 앞으로 몇 년 동안 기능적이고 유용하며 액세스 가능한 웹 사이트를 구축하는 올바른 길로 안내하는 데 도움이 되기를 바랍니다. 행운을 빕니다!