간단한 쉼표로 코딩을 단순화하는 이유
CSS 또는 캐스 케이 딩 스타일 시트는 사이트에 시각적 스타일을 추가하는 웹 디자인 업계에서 인정 된 방법입니다. CSS를 사용하면 페이지 레이아웃, 색상, 타이포그래피 , 배경 이미지 등을 제어 할 수 있습니다. 기본적으로 비주얼 스타일 인 경우 CSS는 이러한 스타일을 웹 사이트에 가져 오는 방법입니다.
문서에 CSS 스타일을 추가하면 문서의 길이가 길어지고 길어지는 것을 알 수 있습니다. 소수의 페이지 만있는 작은 사이트조차도 상당한 CSS 파일로 끝날 수 있습니다. 매우 큰 사이트와 수많은 고유 한 콘텐츠 페이지는 매우 큰 CSS 파일을 가질 수 있습니다. 이것은 스타일 시트에 포함 된 많은 미디어 쿼리를 포함하는 반응 형 사이트에 의해 합성되어 화면이 어떻게 보이고 페이지가 다른 화면에 배치되는지를 변경합니다.
예, CSS 파일이 길어질 수 있습니다. 이것은 사이트 성능과 다운로드 속도면에서 큰 문제는 아니며 긴 CSS 파일조차도 매우 작습니다 (실제로는 텍스트 문서이므로). 그래도 페이지 속도에 관해서는 조금씩 고려해야하므로 스타일 시트를 더 가볍게 만들 수 있다면 좋은 생각입니다. 이것은 "쉼표"가 당신의 스타일 시트에서 매우 편리하게 올 수있는 곳입니다!
쉼표 및 CSS
쉼표가 CSS 선택기 구문에서 어떤 역할을하는지 궁금해했을 것입니다. 문장과 마찬가지로 쉼표는 코드가 아닌 선명도를 구분 기호로 나타냅니다. CSS 선택기 의 쉼표는 동일한 스타일 내에서 여러 선택기를 구분합니다.
예를 들어 아래의 CSS를 살펴 보겠습니다.
th {color : red; }
td {color : red; }
p.red {color : red; }
div # firstred {color : red; }
이 구문을 사용하면 th 태그, td 태그, 단락 태그가 빨간색으로 표시되며 div 태그에 ID가 먼저 표시되도록하려면 스타일 색상이 빨간색으로 표시됩니다.
이것은 완벽하게 수용 가능한 CSS이지만, 다음과 같이 두 가지 중요한 단점이 있습니다.
- 앞으로 이러한 속성의 글꼴 색을 파란색으로 변경하려면 스타일 시트에서 변경해야합니다.
- 필요없는 스타일 시트에 많은 추가 문자를 추가합니다. 이 네 가지 스타일은 과도한 것처럼 보이지 않을 수도 있지만 전체 스타일 목록에서이 작업을 계속하면 선이 늘어나고 시트가 훨씬 커지게됩니다.
이러한 단점을 피하고 CSS 파일을 간소화하기 위해 쉼표를 사용해 보겠습니다.
쉼표를 사용하여 선택자 구분하기
별도의 CSS 선택기 4 개와 규칙 4 개를 작성하는 대신 개별 선택기를 쉼표로 구분하여 이러한 모든 스타일을 하나의 규칙 속성으로 결합 할 수 있습니다. 이것이 어떻게 수행 될 것인가입니다 :
th, td, p.red, div # firstred {color : red; }
쉼표 문자는 기본적으로 선택기 내에서 단어 "and"로 작동합니다. 이것은 t h 태그와 td 태그 및 단락 태그에 red 클래스가 있고 div 태그의 ID가 firstred 인 경우에 적용됩니다. 이것이 바로 우리가 이전에했던 것입니다. 그러나 4 개의 CSS 규칙을 필요로하지 않고 여러 개의 선택자가있는 단일 규칙이 있습니다. 선택자에서 쉼표가 수행하는 작업으로 하나의 규칙에 여러 개의 선택기를 사용할 수 있습니다.
이 접근법은 더 깨끗하고 깔끔한 CSS 파일을 만들뿐만 아니라 향후 업데이트를 훨씬 쉽게 만듭니다. 이제 색상을 빨간색에서 파란색으로 변경하려면 원래 4 스타일 규칙 대신 한 위치에서 변경해야합니다. 전체 CSS 파일에서 이러한 시간 절약에 대해 생각해보십시오. 이렇게하면 장 점프 시간과 공간을 절약 할 수있는 방법을 알 수 있습니다!
구문 변형
어떤 사람들은 각 셀렉터를 위와 같이 한 줄에 모두 쓰는 대신 자체 줄에서 분리하여 CSS를 읽기 쉽게 만듭니다. 이것이 어떻게 될 것입니다 :
th,
td,
p.red,
div # firstred
{
색깔 : 빨강;
}
각 선택기 다음에 쉼표를 넣은 다음 "enter"를 사용하여 다음 선택기를 자체 행으로 나눕니다. 최종 선택자 다음에 쉼표를 추가하지 마십시오.
선택자 사이에 쉼표를 사용하면 나중에 쉽게 업데이트 할 수있는보다 컴팩트 한 스타일 시트를 만들 수 있습니다.
Jennifer Krynin의 원본 기사입니다. 제레미 지라드 편집 : 5/8/17