wulin.com html 튜토리얼 칼럼으로 돌아가려면 여기를 클릭하십시오.
위 : 마크 업 언어 - 양식
원본 출처 6 장 <strong>, <em> 및 기타 문구 요소
소개 및 이전 장에서 Semantic Tags의 개념은 태그를 사용하여 단순히 태그로 표시 효과를 설정하는 대신 파일의 의미를 식별하기 위해 태그를 사용하여 약간 언급되었습니다. 시맨틱 태그를 완전히 사용하는 웹 페이지를 디자인하는 것은 좋은 생각입니다. 그러나이 목표는 너무 이상적이라고 생각합니다. 물론 목표를 완전히 달성하지 못한다고해서 노력 과정이 가치가 없다는 것을 의미하지는 않습니다. 적어도이 목표를 향해 노력하는 것은 가치가 있습니다.
실제로, 오늘날 유명한 브라우저는 표준을 100%지원할 수 없기 때문에 특정 디자인 목표를 달성하기 위해 비성인 태그를 추가해야합니다. 일부 CSS 규칙은 일부 브라우저에서 올바른 효과를 표시 할 수 없으며 불행히도 특정 설계 목표를 달성하는 과정에서 추가 태그를 사용해야합니다.
진지하게 받아 들여야 할 중요한 개념이 있습니다. 즉, 시맨틱 구조를 가능한 한 많이 쓰려고 노력하면 실질적인 이점을 가져올 것입니다. 동시에 표준에 대한 지원이 100%에 도달하지는 않았지만 네트워크 표준을 충족하는 방법을 사용하여 웹 페이지를 작성할 수 있도록 중요한 점을 넘어 섰습니다. 때때로 우리는 약간의 희생을해야하지만 표준을 준수하는 라벨이 많을수록 미래가 더 쉬워집니다. 디스플레이 효과 대 구조 레이블
이 장에서는 디스플레이 효과와 구조적 레이블의 차이점, 또는 <strong> 대체 <b>와 <em> 대체 <i>를 사용하는 것의 차이점에 대해 설명합니다. 이 장의 뒷부분에서 우리는 표준 호환 구조화 된 라벨 문법 내에서 몇 가지 다른 문구 요소와 그 중요성에 대해서도 논의 할 것입니다.
어떤 사람들은 <strong> 교체 <b>를 대담한 텍스트가 필요할 때 사용하는 것을 제안한다고 들었을 수도 있지만, 그러한 교체가 필요한 이유를 더 이상 알려주지 않습니다. 이유를 모르면 다른 웹 디자이너가 태그를 들었 기 때문에 태그의 사용 습관을 변경하기를 기대하는 것은 정말 어렵습니다. <b> <i>보다 <strong>이 왜 더 나은가?
<b> 및 <i> 태그를 제거하고 <strong> 및 <em>로 대체하면 어떤 이점이 있습니까? 사실,이 모든 것은 효과를 보여주는 것이 아니라 의미론 과 구조를 표현하는 것입니다. 이 책의 모든 예는 또한이 개념을 따르기 위해 노력합니다. 전문가의 말을보십시오
먼저, html4.01 문구 요소 사양 (http://www.w3.org/tr/html4/struct/text.html#h-9.2.1)에서 W3C가 <strong> 및 <em>을 설명하는 방법을 살펴 보겠습니다.
문구 요소는 텍스트 조각에 구조 정보를 추가 할 수 있습니다. 일반적인 문구 요소는 다음과 같은 의미를 갖습니다.
<em> 대표가 강조되었습니다 <strong>은 강조를 강조합니다그래서 여기서 우리는 두 가지 다른 정도의 강조에 대해 논의하고 있습니다. 예를 들어, 단일 단어 나 구입니다. 발음되면 더 큰 톤으로 더 크고, 더 빠른 뚜렷한 뚜렷한 또는 ... 글쎄, 그것은 일반적인 텍스트 내용보다 더 강조됩니다.
그런 다음 W3C는 다음 단락을 설명합니다.
문구 요소의 디스플레이 효과는 브라우저에 따라 다릅니다. 일반적으로, 비주얼 브라우저는 텍스트 내용을 이탤릭체로 표시하고 텍스트 내용을 굵게 표시해야합니다. 음성 합성 소프트웨어는 볼륨, 톤 및 속도 등과 같은 컨텐츠로 합성 매개 변수를 변경할 수 있습니다.
아! 마지막 문장은 특히 흥미 롭습니다. Speech Synthesis Software (화면 리더라고 부르는 데 사용됨)는 강조해야 할 텍스트를 올바르게 처리합니다.
대조적으로, <b> 또는 <i>는 단순한 디스플레이 효과 태그입니다. 우리의 목표는 구조를 디스플레이 효과와 분리하는 것이라면 <strong> 및 <em>를 사용하는 것이 올바른 선택입니다. CSS와 함께 대담하고 이탤릭체를 표시하고 싶습니다. 이 장의 뒷부분에서 더 많은 예가 논의 될 것입니다.
다음으로, 우리가 그들의 차이를 이해하는 데 도움이되는 두 가지 식별 예를 살펴보십시오. 방법 a
향후 참조에 대한 주문 번호는 다음과 같습니다. <b> 6474-82071 </b> .method b
향후 참조를위한 주문 번호는 다음과 같습니다. <strong> 6474-82071 </strong>.
이 상황은 <b>보다 <strong>를 사용하는 완벽한 예입니다. 우리는 문장의 특정 텍스트를 더 중요하게 만들려고합니다. 주문 번호를 굵게 표시하는 것 외에도 스크린 리더가 볼륨 증가, 변화 톤 또는 속도 등이 내용을 표현하는 방식을 변경하기를 바랍니다. 방법 B는 동시에 두 목표를 모두 달성 할 수 있습니다. 그래서 뭐?
마찬가지로 <em> <i>로 대체하면 단순히 텍스트 내용을 이탤릭체로 표시하는 대신 동시에 중요성을 표현할 수 있습니다. 이 두 가지 예를 살펴 보겠습니다. 메소드 a
오늘 아침에 차도를 삽질하는 데 3 시간 </i> </i>
오늘 아침 차도를 삽질하는 데 3 시간이 걸렸다.
이전의 예 (이 책이 작성되었을 때 실제 상황)에서, 나의 목적은이 단어를 크게 읽는 것처럼, 시각적으로 시각적으로, 메소드 B는 대부분의 브라우저에서 이탤릭체로 표시되며 화면 리더는 톤, 속도 또는 볼륨을 적절하게 조정하는 것입니다. 대담하거나 이탤릭체 인 한 괜찮습니다.
많은 경우에, 시각적으로 표시하려면 굵은 체 및 이탤릭체의 텍스트 효과 만 필요하다는 점에 유의해야합니다. 다시 말해, 사이드 바에 링크 목록이 있다고 가정하고 모든 링크를 동일한 효과로 표시하도록합니다. 즉, 대담합니다 (그림 6-1)
그림 6-1. 사이드 바에 배치 된 굵은 링크의 예
시각적 기능 외에도 링크 컨텐츠를 강조하지는 않습니다. 이곳은 CSS와의 링크 모양을 변경하기에 좋은 장소이며, 스크린 리더 및 기타 비 시각 브라우저에서 특히 강조되지 않습니다.
예를 들어, 대담한 링크를 더 빨리, 더 크고 더 높은 톤을 읽기를 원하십니까? 아마도, 여기서 대담한 것은 단지 디스플레이 효과 일뿐입니다. 글꼴 중량은 대담한 것과 같습니다
그림 6-1의 디스플레이 효과를 달성하기 위해 링크 표시 줄이 <Div>에 <Div>에 배치되어 CSS를 사용하여 #SideBar 내의 링크를 BOLD로 표시하도록 지정할 수 있다고 가정 해 봅시다.
#Sidebar a {
글꼴 중량 : 대담한;
}
매우 간단합니다. 언급 할 때 조금 우스운 일이라고 생각하지만, 이것은 실제로 구조와 디스플레이 효과를 분리하는 데 도움이되는 좋은 방법입니다. 대담합니다!
마찬가지로 이탈리아어 텍스트에 대해 생각할 때 비슷한 아이디어를 적용 할 수 있습니다. 컨텐츠를 강조하고 싶지 않고 텍스트를 이탤릭체로 표시하고 싶을 때는 글꼴 스타일 속성을 사용하여 CSS를 통해 이러한 상황을 다시 처리 할 수 있습니다.
예를 들어 같은 #SideBar를 사용합시다. 예를 들어, #SideBar의 모든 링크를 이탤릭체로 표시하려면 다음을 작성할 수 있습니다.
#Sidebar a {
글꼴 스타일 : 이탈리아;
}
또 다른 간단한 개념이지만 구조화 된 마킹 문법 분야에서는 효과 라벨을 표시하는 대신 CSS를 사용하여 CSS를 사용하여 이러한 상황을 논의하는 것이 매우 중요하다고 생각합니다. 때로는 가장 간단한 솔루션도 무시하기가 가장 쉽습니다. 대담하고 이탤릭체를 공유하십시오
텍스트 내용을 대담하고 이탤릭체로 동시에 표시 할 때, 나는 먼저 질문에 대해 생각해야한다고 생각합니다. 어떤 정도의 강조를 전달할 계획입니까? 이 질문에 대한 답을 바탕으로 적절한 레이블 인 <em> (강조) 또는 <강조)를 선택한 다음 선택한 레이블로 텍스트를 표시합니다.
예를 들어, 다음 예제에 관해서는 원래 재미를 대담하고 이탤릭체로 동시에 표시하도록 계획했지만 결국 나는이 단어를 강조하기 위해 <em>를 사용하기로 결정했습니다.
웹 표준을 갖춘 사이트 구축은 <em> fun </em> 일 수 있습니다!
대부분의 브라우저는이 단어를 이탤릭체로 만 표시합니다. 굵은 표현과 이탤릭체를 모두 사용하려면 몇 가지 옵션이 있습니다. 아, 나는 당신이 위의 문장에 동의하기를 바랍니다. 일반 <Span>
한 가지 방법 중 하나는 재미를 벗어난 일반 <Span> 패키지를 사용하고 CSS 규칙을 지정하여 모든 <Span>을 굵게 표시하는 것입니다. 태그 구문은 다음과 같습니다.
웹 표준을 갖는 사이트 구축 사이트는 <em> <pan> fun </span> </em> 일 수 있습니다!
그리고 CSS는 다음과 같습니다.
em span {
글꼴 중량 : 대담한;
}
우리가 추가 태그를 추가했기 때문에 명백한 시맨틱 부분은 좋지 않지만이 방법은 여전히 모든 사람에게 유용합니다. 수업을 강조하십시오
또 다른 방법은 <em> 태그에 대한 클래스를 지정하고 CSS에 대담한 효과를 추가하는 것입니다. 태그 구문은 다음과 같습니다.
웹 표준을 가진 사이트 구축 사이트는 <em class = bold> fun </em>입니다!
그리고 CSS는 다음과 같습니다.
em.bold {
글꼴 중량 : 대담한;
}
<em>를 사용하면 이탤릭체 효과를 달성 할 수 있으며 (의미 적으로 텍스트 내용을 강조하지만) 대담한 클래스를 추가하면 <em> 내부의 텍스트가 굵게 표시됩니다.
<strong>을 수정하는 데 유사한 방법을 사용할 수도 있습니다. 현재 특정 단락을 강조하면 이탤릭체 효과로 이탤릭체 클래스를 설계 한 다음 원래 대담한 효과와 일치 할 수 있습니다.
마크 업 언어는 다음과 같습니다.
웹 표준을 가진 사이트 구축은 <strong class = italic> fun </strong> 일 수 있습니다!
그리고 CSS는 다음과 같습니다.
strong.italic {
글꼴 스타일 : 이탈리아;
}
이전 페이지 1 2 3 4 5 다음 페이지 전체 텍스트 읽기