CSS 코드에 주석을 포함하는 것이 유용하고 권장됩니다.
모든 웹 사이트는 구조적 요소 (HTML에 의해 지시 됨)와 해당 사이트의 시각적 스타일 또는 "모양 및 느낌"으로 구성됩니다. 캐스 캐이 딩 스타일 시트 (CSS)는 웹 사이트의 시각적 모양을 지정하는 데 사용됩니다. 이러한 스타일은 웹 표준을 쉽게 업데이트하고 준수 할 수 있도록 HTML 구조와 별도로 유지됩니다.
오늘날 많은 웹 사이트의 크기가 복잡 해짐에 따라 스타일 시트는 빠르게 길어지고 작업하기가 번거로워집니다. 반응 형 웹 사이트 스타일에 대한 미디어 쿼리 를 추가 할 때 특히 그렇습니다. 이러한 미디어 쿼리만으로도 CSS 문서에 상당한 양의 새로운 스타일을 추가 할 수 있으며 작업하기가 더 어려워집니다. CSS 주석은 웹 사이트에서 매우 중요한 도움이 될 수 있습니다.
웹 사이트의 CSS 파일에 주석을 추가하는 것은 문서를 검토하는 사람이 독자에게 코드의 섹션에 구조를 추가하는 좋은 방법입니다. 앞으로도 사이트에서 일해야하는 웹 전문가를위한 스타일을 설명하는 훌륭한 방법입니다 - 자신을 포함하여!
결국, 현명하게 추가 된 CSS 주석은 스타일 시트를보다 쉽게 처리 할 수있게 해줍니다. 이것은 실제로 팀이 편집 할 스타일 시트에 중요합니다. 주석은 이미 익숙하지 않은 팀 구성원들에게 스타일 시트의 중요한 측면을 전달하는 데 사용할 수 있습니다. 이 주석은 얼마 전에 코드에서 벗어난 후 다시 코드에 들어가기 전에 사이트에서 작업 한 사람들에게 매우 유용 할 수 있습니다. 나는 종종 수개월 혹은 수년 전에 제작 한 웹 사이트를 편집해야했고 HTML 및 CSS 형식의 주석을 달았습니다. 매우 환영합니다! 사이트를 만들었 기 때문에 미래에 사이트를 다시 방문했을 때했던 일을 왜했는지 기억하지 못할 수도 있습니다. 댓글을 통해 의도를 분명히하고 오해가 발생하기 전에이를 해결할 수 있습니다.
CSS 주석에 대해 이해해야 할 한 가지는 페이지가 웹 브라우저에서 렌더링 될 때 표시되지 않는다는 것입니다. 이러한 주석은 HTML 주석과 마찬가지로 정보 용입니다 (구문은 두 개 모두 다르지만). 이러한 CSS 주석은 사이트의 시각적 표시에 영향을 미치지 않으며 단순히 코드 자체에 존재합니다.
CSS 주석 추가하기
CSS 주석을 추가하는 것은 매우 쉽습니다. 올바른 여는 및 닫기 주석 태그를 사용하여 주석을 간단히 예약하십시오.
- / * 를 추가하여 주석을 시작하십시오.
- * / 를 추가하여 주석을 닫으십시오.
이 두 태그 사이에 나타나는 것은 주석의 내용이되며 코드에만 표시되고 브라우저에서 렌더링되지 않습니다.
CSS 주석은 한 줄일 수도 있고 여러 줄을 쓸 수도 있습니다. 다음은 한 줄 예제입니다.
div # border_red {border : 얇은 단색 빨강; } / * 빨간 테두리 예제 * /그리고 여러 줄의 예 :
/ ************************************************* ****** 코드 텍스트 스타일 ************************************** ************** /섹션 나누기
CSS 주석을 자주 사용하는 방법 중 하나는 제 스타일 시트를 더 작고 쉽게 소용없는 덩어리로 정리하는 것입니다. 나중에 파일을 열람 할 때이 섹션을 쉽게 볼 수 있기를 바랍니다. 이렇게하기 위해 종종 많은 하이픈이 포함 된 주석을 추가하여 코드를 빠르게 스크롤 할 때 볼 수있는 크고 분명한 페이지 나누기를 제공합니다. 다음은 그 예입니다.
/ * ----------------------- 헤더 스타일 ----------------------- ------- * /코드에서 이러한 주석 중 하나를 볼 때이 코드의 새로운 섹션이 시작되어 더 쉽게 코드를 처리하고 사용할 수 있습니다.
& # 34; 주석 달기 & # 34; 암호
주석 태그는 페이지 코딩 및 디버깅의 실제 프로세스에 유용 할 수 있습니다. 주석을 사용하여 코드의 "주석 처리"또는 "해제"영역을 사용하여 해당 섹션이 페이지의 일부가 아닌 경우 어떤 일이 발생하는지 확인할 수 있습니다.
어떻게 작동합니까? 주석 태그가 브라우저에 모든 것을 무시하도록 알려주기 때문에 CSS 코드의 특정 부분을 일시적으로 사용 중지 할 수 있습니다. 디버깅을하거나 웹 페이지 서식을 조정할 때 유용 할 수 있습니다.
이렇게하려면 코드를 비활성화하려는 위치에 여는 주석 태그를 추가 한 다음 비활성화 된 부분을 끝내려는 위치에 해당 끝 태그를 배치하면됩니다. 이러한 태그 사이의 모든 내용은 사이트의 시각적 표시에 영향을 미치지 않으므로 CSS를 디버그하여 문제가 발생한 위치를 확인할 수 있습니다. 그런 다음 문제를 해결하고 코드에서 주석을 제거 할 수 있습니다.
CSS 주석 처리 팁
다음은 CSS에서 주석을 사용하기 위해 기억해야 할 몇 가지 요령입니다.
- 주석은 여러 줄에 걸쳐있을 수 있습니다.
- 댓글에는 브라우저에서 렌더링하고 싶지 않지만 완전히 삭제하지 않으려는 CSS 요소가 포함될 수 있습니다. 이것은 웹 사이트의 스타일 시트를 디버깅하는 좋은 방법입니다. 사용하지 않는 스타일은 웹 사이트에 필요하지 않다고 결정한 경우 (주석 처리하지 않고) 제거해야합니다.
- 명확한 설명을 추가하고 장래 개발자 또는 미래에 그들이 알아야하는 중요한 정보를 알리기 위해 복잡한 CSS를 작성할 때마다 주석을 사용하십시오. 이렇게하면 모든 참여자의 향후 개발 시간을 줄일 수 있습니다.
- 댓글에는 다음과 같은 메타 정보도 포함될 수 있습니다.
- 저자
- 생성 일자
- 저작권 정보
공연
주석은 확실히 도움이 될 수 있지만 스타일 시트에 추가하는 주석이 많을수록 사이트의 다운로드 속도와 성능에 영향을 줄 수 있습니다. 이것은 실제 관심사이지만 성능이 저하 될 것이라는 두려움에 대해 유용하고 합법적 인 설명을 추가하는 것을 주저해서는 안됩니다. CSS 라인은 문서에 상당한 크기를 추가하지 않습니다. CSS 파일의 크기에 중요한 영향을주기 위해 TONS 개의 주석 줄을 추가해야합니다. CSS에 유용한 주석을 추가해도 페이지 속도에 부정적인 영향을 미치지는 않습니다.
결국, 도움이되는 주석과 너무 많은 주석의 균형을 찾아내어 CSS 문서의 이점을 모두 얻고 자 할 것입니다.
Jennifer Krynin의 원본 기사입니다. 제레미 지라드 편집 됨 : 7/5/17