CSS를 작성할 때 의미론적 X/HTML이 어떻게 시간을 절약할 수 있습니까?

StackOverflow https://stackoverflow.com/questions/2206478

문제

Semantic X/HTML 마크업이 시간을 절약하는 방법 -

  1. 웹 사이트에 CSS를 쓸 때
  2. 그리고 미래에 고객이 디자인 변경이 이루어지면.
  3. 그리고 테이블 기반 레이아웃이 항상 두 조건에서 더 많은 시간이 걸리는 이유

오늘은 학생들에게 이 내용을 설명해야 합니다.

몇 가지 예가 있지만 더 좋은 예와 아이디어를 잘 설명하고 싶습니다.

개발자 관점에서 Semantic X/HTML 마크업의 이점이 무엇인지 설명하고 싶습니다.

미리 감사드립니다

업데이트:

의미론적 마크업 사용의 이점:

  1. CSS를 적용 할 수없는 환경에서 문서를보고있는 사람들에게는 좋은 방법으로 읽을 수 있습니다.
  2. 웹 개발자가 코드를 유지하고 컨텐츠 (HTML)와 프레젠테이션 (CSS)을 분리하는 것이 훨씬 쉬워집니다.
  3. 시맨틱 마크 업은 경우에 따라 CSS 그룹 선택기의 요구를 줄일 수 있습니다.
도움이 되었습니까?

해결책

내 업무 경험에 따르면:나는 전임자나 완전히 다른 사람들의 레거시 마크업을 여러 번 살펴보아야 했습니다(실제로 나 자신도 한두 번 정도).때때로 나는 브라우저에서 소스를 보고 나온 것만 얻었습니다.지금까지 내가 찾은 결과는 다음과 같습니다.

  • 작성자가 사용한 경우 의미적 마크업 가능한 한 명확하고 논리적인 클래스 이름과 함께 페이지의 구조를 찾는 것이 정말 쉽고 재미있었습니다. 예를 들어 새 위젯을 코딩하거나 열 레이아웃 등을 재구성하는 것이 가능했습니다.

  • 작성자가 사용한 경우 테이블 기반 레이아웃도 그렇고, 90년대 말의 자료도 있었는데, 완전 엉망이더군요.어떤 테이블 행이 무엇을 하는지, 어떤 테이블 셀이 어디에 속해 있는지 파악해야 하며, 이해가 될 것이라고 생각하기 시작하면 다음을 간과한 것입니다. rowspan="3" 이전에 300라인의 마크업이 있었습니다.Firebug에서도 그런 태그 수프를 사용하면 화를 낼 수 있습니다.

    여기에 새로운 것을 추가하는 것은 꽤 모험적인 일이 될 수 있습니다.표 셀에 내용을 추가하고 새 항목의 너비와 높이를 완전히 수정하지 않으면 페이지 전체에 불편한 간격이 생기고 열거나 닫는 것을 잊어버릴 수 있습니다. <td>어딘가(원본 페이지에 200개의 유효성 검사 오류가 있으면 어딘가에서 뭔가를 놓칠 가능성이 있음)가 완전히 잘못된 보기로 이어질 수 있습니다.

  • 작성자가 사용한 경우 div 및 범위 모든 곳에서 의미적 마크업을 수행하지 않았습니다(즉, 쓰기 <div class="header1"/> 대신에 <h1/>) 여전히 테이블 레이아웃보다 훨씬 낫습니다(기껏해야 언급된 rowspan 및 colspan으로 인해 그리고 페이지가 완전히 폭발하지 않을 가능성이 있기 때문에 </div> 어딘가 누락됨), 하지만 여전히 다음과 같은 마크업에 열광할 수 있습니다.

    </div></div>
</div>
   </div>
  </div>
</div></div>
  </div>

    게다가 스타일시트가 함께 제공되어도 대부분 엉망이었습니다.구별하기 .header, .header1, div.header_level1 그리고 #middle .h1 스타일시트와 마크업 사이를 앞뒤로 이동해야 합니다.

다른 팁

보다 신뢰할 수 있고 제어 가능한 코드 외에도 개발자를위한 주요 장점은 명확한 코드입니다. Semantic XHTML을 작성하면 미래에 다른 개발자 나 자신이 해독하기 어려운 모호한 코드를 작성하지 않을 수 있습니다.

즉. <address> a를 사용하는 것보다 주소를 나열하는 것이 좋습니다 <div> (많은 일이 발생합니다 ...), 동일한 유연성, 스타일링 및 가독성 향상을 가짐으로써.

  1. 웹 사이트에 CSS를 처음으로 작성하겠습니다

모든 웹 사이트마다 모양/레이아웃이 다릅니다. 레이아웃간에 약간의 유사성이 아니라면 처음으로 CSS를 작성해야합니다.

  1. 그리고 미래에 고객이 디자인 변경이 이루어지면.

MVC 디자인 패턴을 사용하여 웹 사이트를 만들 수 있으므로 사이트 디자인의 많은 변경 사항이 높아집니다.

  1. 그리고 테이블 기반 레이아웃이 항상 두 조건에서 더 많은 시간이 걸리는 이유

그들의 마크 업은 우리가 사용하는 DIV 기반 레이아웃에서 더 많이 작성 해야하는 방식으로 설계 되었기 때문에 분명한 그리고 뜨다 주로 레이아웃을 빠르게 만드는 데 큰 도움이됩니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top