모든 웹 사이트는 구조적 요소 (HTML로 지정), 기능적 요소 및 문체 요소로 구성됩니다. 캐스 케이 딩 스타일 시트 (CSS)는 웹 사이트의 모양 ( "모양과 느낌")을 지정하는 데 사용됩니다. 이러한 스타일은 웹 표준을 쉽게 업데이트하고 준수 할 수 있도록 HTML 구조와 별도로 유지됩니다.
스타일 시트 문제
오늘날 많은 웹 사이트의 크기와 복잡성으로 인해 스타일 시트가 길어지고 복잡해질 수 있습니다. 이는 반응 형 웹 사이트 스타일에 대한 미디어 쿼리가 디자인에 필수적인 요소이므로 장치에 관계없이 웹 사이트가 보이는 것처럼 보입니다. 이러한 미디어 쿼리만으로도 CSS 문서에 많은 수의 새로운 스타일을 추가 할 수 있으므로 작업하기가 더 어려워집니다. CSS 코멘트가 웹 사이트 디자이너와 개발자에게 귀중한 도움이 될 수있는 곳입니다.
댓글 구조 및 명료성 추가
웹 사이트의 CSS 파일에 주석을 추가하는 것은 해당 코드의 섹션을 구성하여 문서를 검토하는 사람이 읽을 수있는 좋은 방법입니다. 또한 한 웹 전문가가 다른 웹 사이트를 방문 할 때 또는 사이트 팀이 사이트에서 작업 할 때 일관성을 보장합니다.
형식이 잘 지정된 주석은 이미 익숙하지 않은 팀 구성원에게 스타일 시트의 중요한 측면을 전달할 수 있습니다. 이러한 의견은 이전에 사이트에서 작업 한 적이 있지만 최근에 작성한 적이없는 사람들에게 매우 유용합니다. 웹 디자이너는 일반적으로 많은 사이트에서 작업하며 디자인 전략을 기억하는 것은 어렵습니다.
전문가 전용 눈 전용
웹 브라우저에서 페이지를 렌더링 할 때 CSS 주석이 표시되지 않습니다. 이러한 주석은 HTML 주석과 마찬가지로 정보 용입니다 (구문은 다르지만). 이러한 CSS 주석은 어떤 방식 으로든 사이트의 시각적 표시에 영향을주지 않습니다.
CSS 주석 추가하기
CSS 주석을 추가하는 것은 매우 쉽습니다. 올바른 여는 및 닫기 주석 태그를 사용하여 주석을 간단히 예약하십시오.
- 추가하여 의견을 시작하십시오.
/*
- 추가하여 댓글을 닫습니다.
*/
이 두 태그 사이에 나타나는 것은 주석의 내용이며 코드에서만 볼 수 있고 브라우저에서 렌더링되지는 않습니다.
CSS 주석은 여러 줄을 사용할 수 있습니다. 다음은 두 가지 예입니다.
/ * 빨간 테두리 예제 * / div # border_red { 테두리 : 얇은 단색 빨강; }/*******************************************************코드 텍스트 스타일*******************************************************/ 많은 디자이너가 독서시 쉽게 스캔 할 수있는 작고 쉽게 소화 가능한 청크로 스타일 시트를 구성합니다. 일반적으로 볼 수있는 페이지에 크고 분명한 틈이 생기는 일련의 하이픈이 앞에오고 그 뒤에 주석이 표시됩니다. 다음은 그 예입니다. / * ----------------------- 헤더 스타일 ----------------------- ------- * /
이 주석은 새로운 코딩 섹션의 시작을 나타냅니다. 주석 태그는 브라우저가 모든 것을 무시하도록 브라우저에 지시하기 때문에이를 사용하여 CSS 코드의 특정 부분을 일시적으로 비활성화 할 수 있습니다. 디버깅 할 때나 웹 페이지 형식을 조정할 때 유용 할 수 있습니다. 실제로 디자이너는 코드 영역을 "주석 처리"또는 "해제"하여 해당 섹션이 페이지의 일부가 아닌 경우 어떤 일이 발생하는지 확인하기도합니다. 이렇게하려면 주석 처리 할 코드 앞에 여는 주석 태그를 추가하십시오 (사용 안 함). 비활성화 된 부분을 끝내려는 위치에 닫기 태그를 배치하십시오. 이러한 태그 사이의 아무 것도 사이트의 시각적 표시에 영향을 미치지 않으므로 CSS를 디버그하여 문제가 발생한 위치를 확인할 수 있습니다. 그런 다음 문제를 해결하고 코드에서 주석을 제거 할 수 있습니다. 다음은 CSS에서 주석을 사용하기 위해 기억해야 할 몇 가지 요령입니다. 너무 많은 댓글을 추가하면 사이트의 다운로드 속도와 성능에 영향을 줄 수 있지만 사용하기를 주저해서는 안됩니다. 중요한 부정적인 영향을 미치기 위해서는 많은 의견이 필요합니다. 웹 디자인의 여러 측면과 마찬가지로 모든 것이 균형을 이루고 있습니다. 섹션 나누기
"주석 달기"코드
CSS 주석 처리 팁
공연
