Css Yui

YUI 리셋 CSS 문제 해결하기: ``을 기울임꼴로, ``은 굵게 유지하는 방법

웹 개발을 할 때, 브라우저 전반에 걸쳐 일관된 출발점을 위해 YUI의 리셋 CSS를 사용하는 경우가 많습니다. 이는 유익할 수도 있지만, 텍스트 형식에서 예기치 않은 행동을 초래할 수도 있습니다. 리셋 CSS가  및  태그를 수정하여 의도한 대로 표시되지 않게 만드는 것이 일반적인 문제입니다.

이 블로그 포스트에서는 문제를 단계별로 안내하고, 웹 콘텐츠가 깔끔하게 유지될 수 있도록 명확한 해결책을 제공합니다.

문제 이해하기

YUI의 리셋 CSS는 기본 브라우저 스타일을 덮어쓰므로 때로는 복잡한 상황을 유발합니다:

무슨 일이 일어나고 있는가?

YUI 리셋 CSS에서 문제를 일으키는 특정 줄은 다음과 같습니다:

address,caption,cite,code,dfn,em,strong,th,var {
    font-style: normal;
    font-weight: normal;
}

그 결과,  및  태그는 기본 형식을 잃게 됩니다:

 태그는 기울임꼴로 표시되어야 하지만 일반 텍스트로 나타납니다.
 태그는 굵게 표시되어야 하지만 표준 글꼴 두께로 표시됩니다.

갈등

자신의 스타일시트에서 아래와 같이 이 태그들의 형식을 수동으로 재설정할 수 있지만:

strong, b {
  font-weight: bold;
}

em, i {
  font-style: italic;
}

두 태그를 함께 사용할 경우 문제가 심각해집니다. 예를 들어:

<strong>This is bold, <em>and this is italic, but not bold</em></strong>

여기서 에 대한 스타일링 규칙이 작동하더라도, 유니버설 리셋 CSS 규칙이 을 재설정하여 기울임꼴 효과를 무효화합니다.

해결책

YUI 리셋 CSS보다 사용자 정의 스타일이 우선하도록 CSS 규칙을 조정해야 합니다. 방법은 다음과 같습니다:

단계 1: 구체성을 사용하여 오버라이드

스타일링 규칙의 구체성을 다음과 같이 높일 수 있습니다:

strong, b, strong *, b * { 
  font-weight: bold; 
}

em, i, em *, i * { 
  font-style: italic; 
}

이 수정은  및  요소들뿐만 아니라 그 내부의 중첩 요소들도 동일한 스타일을 가지도록 보장합니다.

단계 2: `!important`로 스타일 강제 적용

IE7과 같은 오래된 브라우저를 여전히 지원하고 있다면, !important를 사용하여 스타일을 강제 적용해야 할 수도 있습니다. 이는 다음과 같이 할 수 있습니다:

strong, b, strong *, b * { 
  font-weight: bold !important; 
}

em, i, em *, i * { 
  font-style: italic !important; 
}

단계 3: 스타일 테스트

이러한 변경 사항을 적용한 후, 현대 브라우저와 레거시 브라우저 모두에서 스타일을 테스트하여 모든 것이 예상대로 표시되는지 확인하십시오.

다음은 시도해볼 수 있는 빠른 예입니다:

예제 CSS

/* YUI 스타일 */
address,caption,cite,code,dfn,em,strong,th,var {
  font-style: normal;
  font-weight: normal;
}

/* 당신의 스타일 */
strong, b, strong *, b * {
  font-weight: bold;
}

em, i, em *, i * {
  font-style: italic;
}

예제 HTML

<strong>굵게</strong> - <em>기울임꼴</em> - <strong>굵게 및 <em>기울임꼴</em></strong>

결론

이 블로그에서 설명한 단계를 따르면, YUI의 리셋 CSS로 인한 기본 동작을 성공적으로 오버라이드하여  및  태그를 올바르게 스타일링할 수 있습니다.

앞으로 이러한 문제가 발생한다면, 구체성과 !important 지시문이 CSS 스타일링에 있어 강력한 도구가 될 수 있다는 점을 기억하세요.

행복한 코딩 되세요!

YUI 리셋 CSS 문제 해결하기: <em>을 기울임꼴로, <strong>은 굵게 유지하는 방법