CSS/HTML: 텍스트를 이탤릭체로 만드는 올바른 방법은 무엇입니까?

CSS/HTML: 텍스트를 이탤릭체로 만드는 올바른 방법은 무엇입니까?

텍스트를 이탤릭체로 만드는 올바른 방법은 무엇입니까?저는 다음과 같은 네 가지 접근법을 보았습니다.

<i>Italic Text</i>

<em>Italic Text</em>

<span class="italic">Italic Text</span>

<span class="footnote">Italic Text</span>

---

<i>

이것이 "옛날 방식"입니다.<i>는 의미론적 의미가 없으며 텍스트를 이탤릭체로 만드는 제시적 효과만 전달합니다.제가 보기에는 이건 의미가 없는 것이기 때문에 분명히 잘못된 것입니다.

---

<em>

이것은 시맨틱 마크업을 순수하게 표현의 목적으로 사용합니다. 그 일이 .<em>기에를고는이다주를로다주yteoyendtsntsto로lc<i>피해야 하지만 그 의미적 의미를 모르는 사람.강조되어 있기 때문에 모든 이탤릭체 텍스트가 이탤릭체인 것은 아닙니다.때로는 사이드 노트나 귓속말처럼 정반대일 수도 있습니다.

---

<span class="italic">

CSS 클래스를 사용하여 프레젠테이션을 진행합니다.이것은 종종 올바른 방법이라고 선전하지만, 저는 이것이 잘못된 것 같습니다.은더지를는로다의다tgeycs은rto는더'yn의지를t <i> 대담함을 이탤릭체 것이 훨씬 더 . 하지만, 지지자들은 울부짖습니다. 만약 여러분이 그것을 대담하게 원했다면, 나중에 모든 이탤릭체 텍스트를 바꾸는 것이 훨씬 더 쉽습니다.하지만 그렇지 않은 이유는 텍스트를 굵게 표현하는 "이탤릭체"라는 클래스를 갖게 되기 때문입니다.게다가, 왜 제가 제 웹사이트의 모든 이탤릭체 텍스트를 바꾸려고 하는지 또는 적어도 이것이 바람직하지 않거나 필요하지 않은 경우를 생각할 수 있는지는 명확하지 않습니다.

---

<span class="footnote">

이것은 의미론에 CSS 클래스를 사용합니다.지금까지는 이것이 최선의 방법으로 보이지만 사실 두 가지 문제가 있습니다.

1. 모든 텍스트가 의미론적 마크업을 보장하기에 충분한 의미를 갖는 것은 아닙니다.예를 들어, 페이지 하단에 이탤릭체로 표시된 텍스트가 정말 각주입니까?아니면 옆에 있나요?아니면 완전히 다른 것.아마도 특별한 의미는 없고 앞에 있는 텍스트와 표현적으로 구분하기 위해 이탤릭체로 렌더링되기만 하면 될 것입니다.

2. 의미적 의미는 그것이 충분한 강도로 존재하지 않을 때 바뀔 수 있습니다.저는 페이지 하단에 있는 텍스트에 근거하여 "각주"에 동의했다고 가정해 보겠습니다.몇 달 후에 하단에 텍스트를 더 추가하려면 어떻게 됩니까?그것은 더이상 각주가 아닙니다.과덜인미를할수까이?까수tswcsac는nesne를게미과인덜이t<em>하지만 이런 문제들을 피할 수 있을까요?

---

요약

이탤릭한 것을 만들고자 하는 욕구가 의미적 의미를 담지 않는 많은 경우에 의미론의 요구는 지나치게 부담스러워 보입니다.

를 , 과 하려는 를 CSS 할 하게 으로 는 를 으로 할 <i>이것이 실제로 덜 유용한 경우가 있을 때.그래서 이것은 나를 겸손한 자들과 함께 되돌려 놓았습니다.<i>태그와 이 생각의 연속이 HTML5 스펙에 남아있는 이유인지 궁금해 하고 있습니다.

이 주제에 대해서도 좋은 블로그 게시물이나 기사가 있습니까?아마도 유지/생성 결정에 관련된 사람들에 의해<i>꼬리표?

사용 사례에 따라 다른 방법을 사용해야 합니다.

1. 하고 싶은는 를 을 합니다 하고 합니다 을 하고 를 <em>.
2. <i>태그는 HTML5에서 "대체 음성 또는 기분의 텍스트 범위"를 나타내는 새로운 의미를 가지고 있습니다.그래서 여러분은 생각이나 부차적인 말이나 관용구 같은 것에 이 태그를 사용해야 합니다.사양에는 선박 이름도 제시되어 있지만 더 이상 책/노래/영화 이름은 제시되지 않습니다.<cite>대신에).
3. 로 된 더문맥의 , 더 큰 요소,즉 의 을 과 에 해야 가 해야 에 을 로 p.intro { font-style: italic; }

<i>정확하지 않기 때문에 틀린 것은 아닙니다.발표하는 것이기 때문에 (통상은) 틀렸습니다.우려의 분리는 기존 정보를 CSS와 함께 전달해야 함을 의미합니다.

일반적으로 이름 짓기가 까다로울 수 있고, 학급 이름도 예외는 아니지만, 그래도 해야 할 일입니다.본문 텍스트에서 블록을 눈에 띄게 만들기 위해 기울임꼴을 사용하는 경우 "흐름 구별"의 클래스 이름이 순서일 수 있습니다.재사용에 대해 생각해 보십시오. 클래스 이름은 범주화를 위한 것입니다. 그 외에 어디에서 동일한 작업을 수행하시겠습니까?그러면 적합한 이름을 확인하는 데 도움이 될 것입니다.

<i>는 HTML5에 포함되어 있지만, 특정 의미론이 주어져 있습니다. 중 한다면,로가서된미중다할이는을면는와다efdioe는t로을gepclsuysengte는fs가c<i> 않으면 그렇지 않으면 안 됩니다.

저는 전문가는 아니지만 의미적이 되고 싶다면 어휘(RDFa)를 사용해야 한다고 말하고 싶습니다.

이로 인해 다음과 같은 결과가 발생합니다.

<em property="italic" href="http://url/to/a/definition_of_italic"> Your text </em>

em이탤릭체로됨) 및에다됩니다)에됩니다.property그리고.href속성은 (기계의 경우) 이탤릭체가 무엇인지에 대한 정의에 연결됩니다.

그런 것에 대한 어휘가 있는지 확인해야 합니다. 아마도 속성이 이미 존재할 수도 있습니다.

RDFa에 대한 자세한 정보는 여기: http://www.alistapart.com/articles/introduction-to-rdfa/

TLDR

텍스트 이탤릭체를 만드는 올바른 방법은 CSS에 도달할 때까지 문제를 무시하고 표현 의미론에 따라 스타일을 지정하는 것입니다.상황에 따라 처음에 제시하신 두 가지 옵션이 맞으실 수 있습니다.마지막 두 개는 틀렸습니다.

더 긴 설명

마크업을 작성할 때는 발표에 대한 걱정을 하지 마세요.이탤릭체로 생각하지 마세요.의미론적인 측면에서 생각해보세요.만약 스트레스 강조가 필요하다면, 그것은em 에 이 과 과 에 이 aside도 있고 대담할 수도 있고 이탤릭체일 수도 있고 형광 녹색일 수도 있습니다.마크업을 쓸 때는 중요하지 않습니다.

CSS에 도달하면 사이트의 모든 발생에 대해 이탤릭체를 사용하는 것이 합리적인 의미 요소가 이미 있을 수 있습니다.em좋은 예입니다.하지만 어쩌면 당신은 모든 것을 원할 수도 있습니다.aside > ul > li이탤릭체로 당신의 사이트에.마크업에 대한 생각과 프레젠테이션에 대한 생각을 분리해야 합니다.

불만을 품은 고트가 언급했듯이,iHTML5에서 의미론적인 것입니다. 하지만 제게는 의미론이 좀 좁게 느껴집니다.사용하는 경우는 드물 것입니다.

의 em강조하기 위해 HTML5에서 변경되었습니다.strong중요성을 나타내기 위해 사용될 수도 있습니다.strong굵기보다는 이탤릭체로 표현할 수 있습니다.브라우저의 스타일시트가 사용자를 제한하지 않도록 하십시오.재설정 스타일시트를 사용하여 기본값 내에서 생각을 중단할 수도 있습니다.(비록 몇 가지 주의 사항이 있습니다.)

class="italic" ◦ 마요. 의미적이지도 않고 전혀 유연하지도 않습니다.표현에는 마크업과는 다른 종류의 의미론이 여전히 존재합니다.

class="footnote"마크업 시맨틱스를 모방하고 있고 또한 틀렸습니다.각주에 대한 CSS가 각주에 완전히 고유해서는 안 됩니다.모든 부분이 다르게 디자인되면 사이트가 너무 지저분하게 보일 것입니다.CSS 클래스로 변환할 수 있는 시각적 패턴이 페이지에 흩어져 있어야 합니다.각주에 대한 스타일과 블록 인용문이 매우 비슷하다면, 유사한 부분을 반복해서 사용하기 보다는 한 클래스에 추가해야 합니다.OOCSS(아래 링크)의 방식을 채택하는 것을 고려해 볼 수 있습니다.

HTML5에서 관심사와 의미론의 분리는 매우 큽니다. 사람들은 종종 마크업만이 의미론이 중요한 곳이 아니라는 것을 깨닫지 못합니다.콘텐츠 의미론(HTML)도 있지만 표현 의미론(CSS)과 행동 의미론(JavaScript)도 있습니다.이들은 모두 별도의 의미론을 가지고 있으며, 이들은 유지보수성과 DRY 유지를 위해 주의를 기울여야 합니다.

OOCSS 리소스

• 객체지향 CSS
• 객체지향 CSS 소개
• 객체지향 CSS 작성 방법
• OOCSS(Object-Orientated CSS) 시작하기
• 객체 지향 CSS: 무엇, 어떻게, 왜
• 객체 지향 CSS에 뛰어들기

아마도 특별한 의미는 없고 앞에 있는 텍스트와 표현적으로 구분하기 위해 이탤릭체로 렌더링되기만 하면 될 것입니다.

특별한 의미가 없다면, 왜 그 앞에 놓인 텍스트와 제시적으로 분리되어야 하는 것일까요?제가 아무 이유 없이 이탤릭체로 썼기 때문에 이 텍스트는 좀 이상하게 보입니다.

그래도 당신의 말을 이해합니다.디자이너가 의미 있는 변화 없이 시각적으로 변화하는 디자인을 만드는 것은 드문 일이 아닙니다.저는 이것을 상자에서 가장 자주 보았습니다. 디자이너들은 스타일과 내용의 의미에 대한 관계 없이 색상, 모서리, 그라디언트, 드롭-섀도의 다양한 조합이 포함된 상자를 제공할 것입니다.

다른 장소에서 재사용되는 비교적 복잡한 스타일(관련 Internet Explorer 문제)이므로 다음과 같은 클래스를 만듭니다.box-1,box-2, 스타일을 다시 쓸 수 있도록.

텍스트를 이탤릭체로 만드는 구체적인 예는 걱정하기에 너무 사소합니다.시맨틱 너터들이 논쟁할 수 있도록 그런 사소한 것들을 남겨두는 것이 좋습니다.

HTML 기울임꼴 텍스트는 텍스트를 기울임꼴 형식으로 표시합니다.

<i>HTML italic text example</i>

어떤 단어나 문장의 중요성을 높이는 데에는 강조점과 강한 요소가 모두 사용될 수 있습니다.

<p>This is <em>emphasized </em> text format <em>example</em></p>

강조 태그는 텍스트의 한 점을 강조할 때 사용해야 하며, 반드시 텍스트를 이탤릭체로 만들 때 사용해야 하는 것은 아닙니다.

자세한 내용은 HTML 텍스트 서식

그i요소는 의미가 없으므로 화면 리더, 구글봇 등을 위해 일종의 투명해야 합니다.span아니면div요소).그러나 개발자에게는 좋은 선택이 아닙니다. 프레젠테이션 계층과 구조 계층을 결합하기 때문입니다. 이는 좋지 않은 관행입니다.

em요소()strong또한)는 프레젠테이션이 아닌 항상 의미적 맥락에서 사용되어야 합니다.그것은 어떤 단어나 문장이 중요할 때마다 사용되어야 합니다.앞 문장의 예를 들어, 나는 다음과 같이 사용해야 합니다.em'항상 사용해야 함' 부분에 더 중점을 두도록 하겠습니다.브라우저는 이러한 요소에 대해 몇 가지 기본 CSS 속성을 제공하지만, 이러한 요소의 올바른 의미를 유지하기 위해 기본값을 재정의해야 합니다.

<span class="italic">Italic Text</span>가장 잘못된 방법입니다.우선 사용이 불편합니다.두 번째로, 텍스트는 이탤릭체여야 한다고 제안합니다.그리고 구조 계층(HTML, XML 등)은 절대로 해서는 안 됩니다.프레젠테이션은 항상 구조물과 분리되어 있어야 합니다.

<span class="footnote">Italic Text</span>각주를 위한 최선의 방법인 것 같습니다.그것은 어떤 발표도 제안하지 않고 마크업만을 설명합니다.피쳐에서 어떤 일이 발생할지 예측할 수 없습니다.각주가 피쳐에서 자라날 경우, 코드에 논리를 유지하기 위해 클래스 이름을 변경해야 할 수도 있습니다.

그래서 중요한 텍스트가 있을 때마다em아니면strong강조하자면.그러나 이러한 요소는 인라인 요소이므로 큰 텍스트 블록을 강조하는 데 사용해서는 안 됩니다.

어떤 것이 어떻게 생겼는지에만 관심이 있고 항상 추가 마크업을 피하기 위해 노력한다면 CSS를 사용하세요.

제 생각에 답은 사용하는 것입니다.<em>당신이 강조할 때.

텍스트를 혼자 읽을 때, 포인트를 강조하기 위해 약간 다른 목소리를 사용한다는 것을 알게 된다면, 그것은 다음을 사용해야 합니다.<em>왜냐하면 당신은 스크린 리더가 같은 일을 하기를 원할 것이기 때문입니다.

만약 당신의 디자이너가 당신의 모든 것을 결정한 것과 같이 그것이 순수하게 스타일의 것이라면.<h2>표제어는 이탤릭체 가라몬드로 더 잘 보일 것이고, 그러면 HTML에 그것을 포함할 의미적인 이유가 없고 당신은 단지 적절한 요소에 대한 CSS를 변경해야 합니다.

사용할 이유가 보이지 않습니다.<i>, CSS가 없는 레거시 브라우저를 특별히 지원해야 하는 경우가 아니라면 말입니다.

쓰라고 하죠.<em>인라인 요소를 강조합니다.텍스트 블록과 같은 블록 요소에 클래스를 사용합니다.CSS든 아니든, 텍스트는 여전히 태그가 지정되어야 합니다.의미론이든 시각적인 도움이든 간에, 당신이 그것을 의미있는 것에 사용할 것이라고 추측합니다.

어떤 이유로든 텍스트를 강조하는 경우에는<em>, 텍스트를 이탤릭체로 만드는 클래스.

때때로 규칙을 어기는 것은 괜찮습니다!

좋아요, 가장 먼저 주목해야 할 것은 감가상각이 끝났다는 것이고, 사용해서는 안 된다는 것입니다. <i>사용을 권장하지 않습니다. 자세한 내용은 주석을 참조하십시오.여러분이 지적하신 프레젠테이션 층에 프레젠테이션을 계속 유지하는 것은 전적으로 어긋나기 때문입니다.유사하게,<span class="italic">틀도 깨지는 것 같아요.

그래서 이제 우리는 두 가지의 진정한 방법을 가지고 있습니다.<em>그리고.<span class="footnote">.그 것을 기억하라.em강조의 약자입니다.단어, 구 또는 문장에 강조를 적용하고 싶을 때, 그것을 집어넣습니다.<em>이탤릭체를 원하든 원하지 않든 관계없이 태그를 지정합니다.다른 방법으로 스타일을 변경하려면 CSS를 사용합니다.em { font-weight: bold; font-style: normal; }. 물론, 당신은 또한 에 수업을 적용할 수 있습니다.<em>tag: 강조된 특정 구문이 빨간색으로 표시되도록 결정한 경우 클래스를 제공하고 CSS에 추가합니다.

Fancy some <em class="special">shiny</em> text?

em { font-weight: bold; font-style: normal; }
em.special { color: red; }

다른 이유로 이탤릭체를 적용하는 경우 다른 방법으로 진행하여 섹션에 수업을 제공합니다.이렇게 하면 HTML을 조정하지 않고 원하는 때마다 스타일을 변경할 수 있습니다. 예를 들어 각주를 강조하지 말아야 합니다. 사실 각주의 요점은 중요하지 않지만 흥미롭거나 유용한 정보를 보여주는 것이기 때문입니다.이 경우 각주에 클래스를 적용하여 프레젠테이션 계층의 하나인 CSS처럼 만드는 것이 훨씬 좋습니다.

다른 스타일이 없는 내용의 이탤릭체로 된 단어/문자가 필요한 경우 <em>을 사용합니다.또한 내용을 의미 있게 만드는 데 도움이 됩니다.

text-style여러 스타일에 더 적합하며 의미론적 필요가 없습니다.

DO

1. 클래스 속성에 데이터의 특성을 나타내는 값을 지정합니다.class="footnote"좋음)

2. 페이지에 대한 CSS 스타일 시트 만들기

3. 요소에 할당하는 클래스에 연결된 CSS 스타일을 정의합니다.

   .footnote { font-style:italic; }

하지마

1. 사용하지않습니다.<i>아니면<em>요소 - 지원되지 않으며 데이터와 프레젠테이션을 너무 가깝게 연결합니다.
2. 클래스에 프리젠테이션 규칙을 나타내는 값을 지정하지 않음(즉, 사용하지 않음)class="italic").

언급URL : https://stackoverflow.com/questions/2108318/css-html-what-is-the-correct-way-to-make-text-italic