CSS 전문가가 되려면 CSS 선택기를 능숙하게 사용하는 것만으로는 충분하지 않습니다. 또한 작업의 전반적인 계획, 작업 흐름을 마스터하고 스타일 시트의 유지 관리성과 효율성을 향상시키는 데에도 있습니다. 이 기사에서 Jina Bolton은 12명의 최고 디자이너로부터 10가지 CSS 응용 기술을 선택하고 모든 사람에게 권장합니다.
최근에는 더욱 매력적인 스타일시트를 만드는 방법을 모색하고 있습니다. CSS를 사용하면 우리가 원하는 멋진 웹사이트를 만들 수 있고, CSS를 작성하는 것 자체가 즐거움입니다.
더욱 매력적인 스타일 시트를 만드는 방법은 무엇입니까? 스타일시트에는 어떤 기능이 있어야 합니까?
몇 달 전, 저는 미국 오레곤주 포틀랜드에서 열린 2007 웹비전 컨퍼런스에 참석하는 기쁨을 누렸습니다. 이번 행사를 위해 저는 웹 디자인과 개발에 탁월한 공헌을 한 12명의 디자이너를 조사했습니다. 내 자신의 업무 경험과 결합된 이 연구 결과는 아름다운 스타일 시트를 만들기 위한 일련의 좋은 방법을 요약하는 데 도움이 되었습니다.
01. CSS에 태그를 너무 많이 두지 마세요
스타일 시트를 연결하거나 가져오는 것은 혼란스러운 작업처럼 들릴 수 있습니다. 하지만 저는 이것이 왜 그렇게 중요한지 강조하고 싶습니다. 나는 많은 웹사이트 개발자들이 깔끔하고 잘 정리된 CSS 문서를 가지고 있지만, 짧은 시간에 빠르게 업데이트할 수 없거나 단순히 관리하기에는 너무 게으른 탓에 이전에 만든 절묘한 스타일 시트를 사용하는 것을 보았습니다. 쓰레기가 되었습니다.
수백 개의 콘텐츠를 게시해야 하는 거대한 웹사이트에서 작업하고 있다고 상상해 보세요. 시간이 제한되어 있기 때문에 CSS를 중첩하거나 배열하여 빠른 변경이나 업데이트가 필요합니다. 해가 갈수록 이 습관은 계속됩니다. 어느 날 웹사이트가 완전히 재설계될 것이라는 말을 듣고(그러나 콘텐츠는 여전히 동일할 것임) 웹사이트를 만드는데(테스트 포함) 일주일밖에 남지 않았습니다.
일반적으로 스타일 시트를 업데이트하는 것은 매우 간단한 방법입니다. 오랫동안 웹사이트의 흩어져 있는 영역을 변경하지 않는 한. 웹 사이트 스타일 시트 구조를 전체적으로 파악할 수 없습니다. 이제 두 가지 옵션이 있습니다: a. 모든 것을 정리하고 한 달 안에 다시 디자인하세요(행운을 빕니다). b.
당신의 직업이 이렇게 되도록 놔두지 마십시오. 스타일시트를 연결하거나 가져오는 것은 일상적인 문제가 아닙니다. 깨끗하고 깔끔한 스타일 시트를 만들어 보관하면 직장에서 더 행복해질 것입니다.
참고: 스타일시트에 마크업을 너무 많이 추가하지 마세요. 새로운 콘텐츠를 업데이트하거나 추가할 때마다 새로운 스타일시트를 만들려고 하면 분명히 문제가 발생할 수 있습니다. 링크와 가져온 스타일 시트가 너무 많으면 버그 제거가 어렵고 스타일 시트 유지 관리가 어려워집니다. 대규모 웹사이트에서는 여러 부분에 대해 별도의 스타일 시트를 만드는 것이 이해됩니다. 너무 극단적으로 가지 않도록 주의하세요.
스타일 시트를 많이 추가하면 http 요청이 늘어나 후속 작업에도 영향을 미칠 수 있다는 점을 언급할 가치가 있습니다. 또한 Microsoft IE6 브라우저에는 32-연결 스타일 시트에 대한 특정 제한 사항이 있습니다. .
02. 의미론은 단순한 업계 용어가 아니다
콘텐츠를 표현하기 위해 가장 적절하고 의미 있는 요소를 선택하는 것 외에도 의미론이 좋은 친구가 될 것이라는 점을 언급해야 합니다. 또한 클래스 및 ID 속성 값을 선택해야 합니다. 직장 밖에서도 그것은 당신의 삶을 더 단순하게 만들어 줄 것입니다. (그리고 팀으로 일하는 경우에는 작업 팀의 삶도 더 단순하게 만들 것입니다.) 아래 정의를 살펴보세요.
.l13k { 색상: #369 }
방금 출근해서 이 CSS 파일에서 이 클래스를 본다면, 이 클래스를 바로 찾을 수 있을까요? 아마도 불가능할 것입니다. 왜냐하면 이 클래스의 이름은 아마도 약어일 것이기 때문에 바로 알 수 있는 정확한 방법이 없기 때문입니다. 아니면 그것을 거기에 놓고 오늘은 그것이 무엇을 의미하는지 알지만, 몇 년이 지난 후에도 여전히 그것이 무엇을 의미하는지 알 것이라고 장담할 수 있습니까?
이제 이 정의를 살펴보겠습니다.
.왼쪽-파랑 { 색상: #369 }
왼쪽 열에 파란색 모듈이 있다는 것을 아는 것처럼 이 클래스 선택기가 수행하는 작업을 즉시 알 수 있으므로 작동한다는 의미입니다. 일주일 후에 다시 디자인해야 할 수도 있다고 앞서 언급했습니다. 재설계 과정에서 이 모듈은 오른쪽에 배치되었으며 여전히 빨간색이었습니다. 이 클래스는 더 이상 존재 가치가 없습니다. 이제 모든 속성 값을 변경할지 아니면 그대로 둘지 선택해야 합니다. (이로 인해 더 많은 혼란이 생길 수 있습니다.)
클래스 속성에 색상이나 길이 및 너비 치수를 추가하지 않는 것이 가장 좋습니다. 문자 그대로의 단어인 속성 값은 피해야 합니다. 상자와 같은 직접적인 속성으로 인해 콘텐츠가 분리될 수 있습니다.
마지막으로 보다 적절한 명명 규칙을 살펴보겠습니다.
.제품 설명 { 색상: #369 }
여기에서 볼 수 있습니다. 이 스타일로 정의된 제품 설명은 어떻게 변경하더라도 매우 명확합니다.
03.댓글 추가의 장점
댓글이 잘 정리되어 있고 CSS 범위 내에 있다면 각 섹션에 명확하게 라벨을 지정하세요. 내용을 스크롤하고 10줄을 훑어볼 때 주석을 빠르게 찾을 수 있도록 주석을 시각적으로 눈에 띄게 하는 것이 가장 좋습니다. 그러면 CSS 문서에 주석을 달면 향후 개발에 큰 도움이 될 것입니다. 대부분의 기본 설명에서는 이 규칙이 여기서 사용되는 이유를 암시합니다.
팁과 참고사항
주석을 추가하면 귀하 또는 미래의 개발자가 불필요한 혼란을 피하는 데 도움이 될 수 있습니다. 이 습관을 계속 유지하세요. 예를 참조하세요:
/* 연결된 이미지의 테두리 끄기 */
img { 테두리: 0 }
시간과 서명
일부 디자이너와 개발자는 CSS 문서가 마지막으로 업데이트된 날짜와 시간을 이름 및 초기 상태와 함께 표시하기를 좋아합니다. 이 정보는 관련자가 누구인지에 대한 정보뿐만 아니라 가장 최근 문서가 무엇인지에 대한 힌트도 제공할 수 있습니다.
/* Sushimonster 타이포그래피 스타일
업데이트됨: 목요일 10.18.07 @ 오후 5시 15분
저자: 지나 볼튼
------------------------------------- ---*/
이는 특히 팀으로 작업하는 경우 좋은 생각입니다. 일부 팀에서는 이 정보를 생략해야 한다는 점을 명심하십시오(일부 회사에서는 문서에 이러한 이름과 날짜를 포함하지 않기를 원함). 보세요. 이 정보가 필요한가요?
조직 분류
CSS의 다양한 부분을 간략하게 설명하려면 주석을 사용하는 것이 좋습니다. 예를 들어 모든 제목 유형이 함께 그룹화되어 있는 경우 이를 구별하기 위해 살펴보아야 합니다.
/* 헤더
------------------------------------- ---*/
이에 대해서는 나중에 "유형 구분"을 논의할 때 자세히 설명하겠습니다.
주석 표시
CSS 문서가 위에서 말한 것처럼 분산된 스타일을 구성하는 경우 주석 표시를 사용하면 파일에서 해당 부분을 더 쉽게 찾을 수 있습니다. 기능 기호, 키워드를 사용하여 최종 결과를 찾을 수 있습니다.
/* =헤더
------------------------------------- ---*/
이는 길고 복잡한 스타일시트에 유용합니다. 이에 대해서는 Stop Design에서 읽을 수 있습니다. .
참조하다