예전에 이런 사장님이 있었는데 사랑, 사랑, 사랑, 사랑 단어를 강조합니다. 이것은 우리가 WYSIWYG 편집기를 사용하기 훨씬 전으로 돌아가서 그 쓰레기를 손으로 코딩해야 했습니다.
<p> I used to have this boss who <em>loved</em>, <strong>loved</strong>, <strong><em>loved</em></strong>, <strong><em><u>loved</u></em></strong> to emphasize words.
</p>
(그가 사용했던 색상으로 들어가지 말자 모아 중요성.)
그 모든 마크업을 작성하는 것은 결코 기분 좋은 일이 아닙니다. 그 노력이 무엇이든 간에요. 그러나 double 또는 그 이상으로 오버로드 콘텐츠를 추가하는 것도 좋은 생각입니다! — 강조?
다른 태그는 다른 강조를 전달합니다
우선, <strong>
및 <em>
태그는 다양한 용도로 설계되었습니다. 우리는 그것들을 HTML5로 되돌렸습니다. 여기서:
그래서, <strong>
내용이 중요하거나 긴급하다는 것을 암시한다는 점에서 내용에 더 많은 가중치를 부여합니다. 경고를 생각하십시오.
경고: 다음 콘텐츠는 훌륭하다고 표시되었습니다.
도달하려는 유혹이 있을 수 있습니다. <em>
같은 일을 할 수 있습니다. 결국 이탤릭체 텍스트는 주의를 끌 수 있습니다. 하지만 내용을 읽을 때 더 강조하라는 힌트로 실제로 의미가 있습니다. 예를 들어, 다음은 강조점이 다른 위치에 있는 동일한 문장의 두 가지 버전입니다.
<p>I ate the <em>entire</em> plate of burritos.</p>
<p>I ate the entire <em>plate</em> of burritos.</p>
두 예 모두 강조를 강조하지만 단어는 다릅니다. 그리고 큰 소리로 읽으면 다르게 들릴 것입니다. 그게 <em>
글에서 어조를 표현하는 좋은 방법입니다. 문장의 의미를 다음과 같이 변경합니다. <strong>
하지 않습니다.
시각적 강조 대 의미론적 강조
콘텐츠를 강조할 때 평가해야 하는 두 가지입니다. 마찬가지로 문장의 의미에 영향을 주지 않고 내용을 이탤릭체로 표시해야 하는 경우가 많이 있습니다. 그러나 이탤릭체를 렌더링하는 다른 태그로 처리할 수 있습니다.
<i>
: 이것이 바로 클래식! HTML5 이전에는 이탤릭체로 강조하는 데 사용되었습니다. 이제는 의미론적 의미를 변경하지 않고 콘텐츠를 시각적으로 이탤릭체로 표시하는 데 순전히 사용됩니다.<cite>
: 사실이나 수치의 출처를 나타냅니다. ("원천: CSS 트릭")<address>
: 실제 주소뿐만 아니라 이메일 주소 및 전화번호와 같은 연락처 정보를 마크업하는 데 사용됩니다. (
)
그것은 그와 같은 일이 될 것입니다 <strong>
. 무거워 보이고 싶은 텍스트 스타일링에 사용하는 것보다 클래식을 사용하는 것이 좋습니다. <b>
필요하지 않은 콘텐츠에 추가 의미를 부여하지 않도록 굵은 글꼴 태그. 제목과 같은 일부 요소는 브라우저의 기본 스타일 덕분에 이미 굵게 표시되어 있습니다. 더 강한 강조를 추가할 필요가 없습니다.
강조된 콘텐츠에 이탤릭체 사용(또는 그 반대)
이미 강조된 줄의 일부를 이탤릭체로 표시해야 하는 합법적인 경우가 있습니다. 또는 이미 이탤릭체로 표시된 약간의 텍스트에 강조를 추가할 수도 있습니다.
인용구가 좋은 예가 될 수 있습니다. 기본 브라우저 스타일에서는 이탤릭체로 표시되지 않지만 스타일을 위해 이탤릭체로 표시되는 경우를 많이 보았습니다.
blockquote { font-style: italic;
}
인용구에 영화 제목을 언급해야 한다면 어떻게 해야 할까요? 이탤릭체로 표시해야 합니다. 스트레스 강조가 필요하지 않으므로 <i>
태그가 됩니다. 그러나 이미 그런 식으로 렌더링되었을 때 무언가를 이탤릭체로 표시하는 것은 여전히 이상합니다.
<blockquote> This movie’s opening weekend performance offers some insight in to its box office momentum as it fights to justify its enormous budget. In its first weekend, <i>Avatar: The Way of Water</i> made $134 million in North America alone and $435 million globally.
</blockquote>
이와 같이 이탤릭체 콘텐츠 내에서 무언가를 이탤릭체로 표시하는 상황에서 우리는 이탤릭체 제거 중첩된 요소에서… <i>
이 경우
blockquote i { font-style: normal;
}
컨테이너 스타일 쿼리 다음과 같은 경우 이러한 인스턴스를 모두 확보하는 데 매우 유용합니다.
blockquote { container-name: quote; font-style: italic;
} @container quote (font-style: italic) { em, i, cite, address { font-style: normal; }
}
이 작은 스니펫은 blockquote를 평가하여 font-style
가 italic
. 그렇다면 다음을 확인합니다. <em>
, <i>
, <cite>
및 <address>
요소는 일반 텍스트로 렌더링되지만 시맨틱 의미는 유지됩니다.
하지만 강조 안의 강조로 돌아가
나는 둥지를 틀지 않을 것이다 <strong>
내부 <em>
이렇게 :
<p>I ate the <em><strong>entire</strong></em> plate of burritos.</p>
…또는 둥지 <em>
내부 <strong>
대신 :
<p>I ate the <em><strong>entire</strong></em> plate of burritos.</p>
렌더링 괜찮네요! 그리고 그것들이 어떤 순서로 있는지는 중요하지 않습니다. 적어도 최신 브라우저에서는요. Jennifer Kyrnin은 다음과 같이 언급합니다. 일부 브라우저는 텍스트에 가장 가까운 태그만 렌더링합니다.,하지만 제한된 테스트에서 아무데도 부딪히지 않았습니다. 하지만 지켜봐야 할 것!
한 형태의 강조를 다른 형태에 중첩하지 않는 이유는 단순히 필요하지 않기 때문입니다. 그것을 요구하는 문법 규칙은 없습니다. 느낌표와 마찬가지로 강조는 한 가지 형태로 충분하며 시각적, 무게감 또는 발표된 강조 여부에 관계없이 추구하는 것과 일치하는 것을 사용해야 합니다.
그리고 일부 스크린 리더는 강조된 내용을 알릴 수 있지만 추가적인 중요도나 강조가 있는 마크업을 읽지 않습니다. 따라서 내가 말할 수 있는 한 추가 접근성 특전도 없습니다.
그러나 나는 정말로 모든 강조를 원합니다!
당신의 상사가 나와 같고 원하는 위치에 있다면 모든 전에, 강조, 강조 유형에 적합한 HTML 태그에 도달한 다음 브라우저 스타일이 처리하지 못하는 모든 항목을 설명하는 데 도움이 되도록 CSS의 의미 체계에 영향을 미치지 않는 태그를 혼합하여 나머지 스타일을 적용합니다.
<style> /* If `em` contains `b` or `u` tags */ em:has(b, u) { color: #f8a100; }
</style> <p> I used to have this boss who <em>loved</em>, <strong>loved</strong>, <strong><em>loved</em></strong>, <strong><em><u>loved</u></em></strong> to emphasize words.
</p>
나는 심지어 그것을 할 수 있습니다 <strong>
태그도 방어 수단으로 사용:
/* If `em` contains `b` or `u` tags */
em:has(b, u),
/* If `strong` contains `em` or `u` tags */
strong:has(i, u) { color: #f8a100;
}
우리가 수비를 하는 동안 강조가 강조된 오류를 빨간색 등으로 강조 표시하여 오류를 식별할 수 있습니다.
/* Highlight semantic emphases within semantic emphases */
em:has(strong),
strong:has(em) { background: hsl(0deg 50% 50% / .25); border: 1px dashed hsl(0deg 50% 50% / .25);
}
그런 다음 다른 기울임꼴 요소에 중첩될 때 요소에서 기본 기울임꼴 스타일을 제거하는 마지막 섹션의 스니펫을 사용할 것입니다.
다른 건 없니?
아마이이이이이:
- SEO 기반 콘텐츠 및 PR 배포. 오늘 증폭하십시오.
- 플라토 블록체인. Web3 메타버스 인텔리전스. 지식 증폭. 여기에서 액세스하십시오.
- 출처: https://css-tricks.com/the-double-emphasis-thing/
- 1
- 11
- 7
- 9
- 98
- a
- 접근성
- 계정
- 추가
- 주소
- 구애
- 영향을
- 에 영향을 미치는
- 후
- All
- 혼자
- 이미
- 미국
- 및
- 발표
- 발표
- 다른
- 어딘가에
- 신청
- 화신
- 뒤로
- 배경
- 때문에
- 전에
- 존재
- 더 나은
- 비트
- 일시: XNUMX년 XNUMX월 XNUMX일 화요일 XNUMX:XNUMXpm - XNUMX:XNUMXpm 장소: 여의도 페어몬트 앰배서더 서울 호텔 XNUMXF 아잘레아스 룸 [약도] 행사 문의: info.korea@rescale.com
- 경계
- 보스
- 보물상자
- 박스 오피스
- 브라우저
- 브라우저
- 예산
- 통화
- 수
- 케이스
- 가지 경우
- 변경
- 변화
- 고전적인
- 색
- CONTACT
- 이 포함되어 있습니다
- 함유량
- CSS
- 태만
- 방위산업
- 방어적인
- 설계
- 다른
- 하지 않습니다
- 말라
- 더블
- 노력
- 중
- 요소
- 이메일
- 강조
- 강조하다
- 강조
- 거대한
- 충분히
- 전체의
- 오류
- 조차
- 예
- 예
- 급행
- 여분의
- 경기
- 그림
- 먼저,
- 신고 된
- 수행원
- 형태
- 에
- 얻을
- 제공
- 기부
- 세계적으로
- Go
- 가는
- 좋은
- 큰
- 핸들
- 도움
- 여기에서 지금 확인해 보세요.
- 강조
- 강조
- HTML
- HTTPS
- 생각
- 확인
- 중요성
- 중대한
- in
- 정보
- 통찰력
- 를 받아야 하는 미국 여행자
- IT
- 제니퍼
- 성
- 제한된
- 라인
- 작은
- 위치
- 긴
- 보기
- 만든
- 확인
- 제작
- 표
- 문제
- 의미
- 측정
- 언급하다
- 수도
- 백만
- 현대
- 기세
- 배우기
- 영화
- 영화 산업
- 무알콜 맥주
- 필요
- Nest
- 표준
- North
- 북아메리카
- 숫자
- 제공
- Office
- ONE
- 열기
- 주문
- 기타
- 부품
- 성능
- 특권
- 전화
- 물리적
- 장소
- 플라톤
- 플라톤 데이터 인텔리전스
- 플라토데이터
- 연주
- 많은
- 전철기
- 위치
- 아마
- 보호
- 전혀
- 도달
- 읽기
- 독자들
- 이유
- 빨간색
- 기억
- 렌더링
- REST
- 유지
- 통치
- 같은
- 화면
- 스크린 리더
- 섹션
- 의미론
- 감각
- 문장
- 세트
- 영상을
- 간단히
- 사태
- So
- 일부
- 무언가
- 소리
- 출처
- 아직도
- 스트레스
- 강한
- 스타일
- 제안
- 감독자
- 가정
- TAG
- 테스트
- XNUMXD덴탈의
- 소스
- 맡은 일
- 일
- 시대
- Title
- 에
- TONE
- 너무
- 참된
- 긴급한
- 사용
- 경고
- 손목 시계
- 주말
- 달다
- 무게
- 뭐
- 여부
- 동안
- 누구
- 의지
- 이내
- 없이
- 말
- 겠지
- 쓰기
- 자신의
- 너의
- 제퍼 넷