웹 사이트의 모양과 느낌 또는 "스타일"은 CSS (Cascading Style Sheets)에 의해 결정됩니다. 이 파일은 웹 사이트 디렉토리에 추가 할 파일로, 페이지의 시각적 디자인과 레이아웃을 만드는 다양한 CSS 규칙을 포함합니다.
사이트에서는 여러 스타일 시트를 사용할 수 있으며 종종 그렇게해야 할 필요는 없습니다. 모든 CSS 규칙을 하나의 파일에 배치 할 수 있으며, 여러 파일을 가져올 필요가 없으므로 페이지 로드 시간과 성능 이 빨라지 므로 실제로 이점이 있습니다. 매우 큰 규모의 엔터프라이즈 사이트는 때때로 스타일 시트가 별도로 필요할 수 있지만 많은 중소 규모 사이트는 단 하나의 파일로 완벽하게 잘 수행 할 수 있습니다. 이것이 내 웹 디자인 작업의 대부분에 사용되는 것입니다. 즉, 내 페이지에 필요한 모든 규칙이있는 단일 CSS 파일입니다. 그래서 이제 질문이 생깁니다.이 CSS 파일의 이름은 무엇입니까?
명명 규칙 기본 사항
웹 페이지에 대한 외부 스타일 시트 를 만들 때 HTML 파일과 비슷한 이름 지정 규칙에 따라 파일의 이름을 지정해야합니다.
특수 문자를 사용하지 마십시오.
CSS 파일 이름에는 az, 숫자 0-9, 밑줄 (_) 및 하이픈 (-) 만 사용해야합니다. 파일 시스템을 사용하면 다른 문자가 포함 된 파일을 만들 수 있지만 서버 OS에는 특수 문자 문제가있을 수 있습니다. 여기에 언급 된 문자 만 사용하면 더 안전합니다. 결국 서버가 특수 문자를 허용하더라도 나중에 호스팅 제공 업체 를 이동하기로 결정한 경우는 그렇지 않을 수 있습니다.
모든 공간을 사용하지 마십시오.
공백은 특수 문자와 마찬가지로 웹 서버에 문제를 일으킬 수 있습니다. 파일 이름을 피하는 것이 좋습니다. 심지어 웹 사이트에 추가해야 할 경우를 대비하여 PDF와 같은 파일 이름을 지정하기도합니다. 파일 이름을 쉽게 읽을 수있는 공간이 필요하다고 생각되면 대신 하이픈 또는 밑줄을 사용하십시오. 예를 들어 "this is the file.pdf"를 사용하는 대신 "this-is-the-file.pdf"를 사용합니다.
파일 이름은 문자로 시작해야합니다.
이것은 절대적인 요구 사항은 아니지만 일부 시스템에서는 문자로 시작하지 않는 파일 이름에 문제가 있습니다. 예를 들어 숫자 문자로 파일을 시작하도록 선택하면 문제가 발생할 수 있습니다.
모두 소문자 사용
이것은 파일 이름에는 필요하지 않지만 일부 웹 서버는 대소 문자를 구분하므로 좋은 생각입니다. 다른 케이스에서 파일을 잊어 버렸고 참조하면로드되지 않습니다. 필자 자신의 작업에서는 모든 파일 이름에 소문자를 사용합니다. 나는 실제로 이것을 많은 새로운 웹 디자이너들이 기억해야 할 투쟁의 대상으로 생각했습니다. 파일 이름을 지정할 때 기본 동작은 이름의 첫 번째 문자를 대문자로 사용하는 것입니다. 이것을 피하고 소문자 만 사용하십시오.
파일 이름을 가능한 짧게 유지하십시오.
대부분의 운영 체제에는 파일 이름 크기 제한이 있지만 CSS 파일 이름에 비해 훨씬 길다. 확장 기능을 포함하지 않는 파일 이름은 20 문자를 초과하지 않는 것이 좋습니다. 현실적으로, 그보다 훨씬 오래 걸리는 것은 다루기 힘들고 어쨌든 링크 할 수 있습니다!
CSS 파일 이름의 가장 중요한 부분
CSS 파일 이름의 가장 중요한 부분은 파일 이름 자체가 아니라 확장자입니다. Macintosh 및 Linux 시스템에서는 확장 기능이 필요하지 않지만 CSS 파일을 작성할 때는 확장 기능을 포함시키는 것이 좋습니다. 그렇게하면 스타일 시트라는 것을 항상 알게 될 것이고 파일을 열지 않아도 미래의 내용을 결정할 수 있습니다.
아마 놀랄 일은 아니지만 CSS 파일의 확장자는 다음과 같아야합니다.
.cssCSS 파일 이름 지정 규칙
사이트에 CSS 파일이 하나만있는 경우 원하는 이름으로 지정할 수 있습니다. 나도 좋아해.
styles.css 또는 default.css대부분의 사이트에서 하나의 CSS 파일을 포함하고 있기 때문에이 이름들이 잘 작동합니다.
웹 사이트에서 여러 개의 CSS 파일을 사용하는 경우 각 파일의 목적이 정확히 무엇인지 명확하게 표시되도록 기능 후에 스타일 시트의 이름을 지정하십시오. 웹 페이지에는 여러 스타일 시트가 첨부 될 수 있으므로 해당 시트의 기능과 그 스타일에 따라 스타일을 다른 시트로 나눌 수 있습니다. 예 :
- 레이아웃 대 디자인 layout.css design.css
- 페이지 섹션 main.css nav.css
- 하위 섹션 mainstyles.css subpage.css가있는 전체 사이트
웹 사이트가 어떤 종류의 프레임 워크를 사용한다면 페이지의 다른 부분이나 사이트 측면 (인쇄술, 색상, 레이아웃 등)에 각각 전용 인 여러 개의 CSS 파일을 사용한다는 것을 알 수 있습니다.
Jennifer Krynin의 원본 기사입니다. Jeremy Girard에 의해 9/5/17에 편집 됨