Freecodecamp: [베타] Applied Visual Design은 의미론에 대한 잘못된 생각을 제공합니다.

@ Facundo-Corradini 당신 말이 맞습니다-이것을보고 해 주셔서 감사합니다. 이 문제를 편안하게 고칠 수 있습니까? 그렇다면 기여 가이드 라인 을 참조하십시오. 제목을 Applied Visual Design: Use the em Tag to Emphasize Text 바꿀 수 있습니다.

필요한 경우이 문제를 도와 드리고 싶습니다.

@manuhdez 대단합니다. 기여 가이드 라인을 참조하십시오 .
@raisedadead , @systimotic 이것을 구현해야합니까?

안녕하세요 @ Facundo-Corradini는 문제를 제기하고 문제를 검토하는 데 시간을 할애 해 주셔서 감사합니다.

이 차이의 중요성을 명확히하는 데 도움이되는 문구에 대해 수행해야하는 몇 가지 제안 된 변경 사항에 대해 도움을 주시겠습니까?

나는 현재의 말이 잘못된 개념을 학습에 넣을 수 있다는 것에 동의합니다.

확실한 것. 제안서 작업을 맡기면 업로드하겠습니다. 동의하면 변경 작업을 수행 할 수 있습니다.

섹션이 실제로 의미론이 아닌 시각적 디자인을 다루기 때문에 그렇게 간단하지 않습니다. 따라서 "이탤릭체 텍스트"섹션을 호출하고 각 태그의 사용 사례를 설명해야합니다.

안녕하세요 @ Facundo-Corradini! 어떻게 지내요?

얘들 아,

이것으로가는 방법을 생각하고 커리큘럼을 통해 더 잘 맞는지 확인했습니다. 그러나 이것에서 정말 쉬운 방법은 없습니다. 우리가 선택하는 모든 태그는 다른 사용 사례를 제외하고 단일 도전에서 각 스타일에 대해 서로 다른 사례를 짜내려고하면 비좁은 느낌이들 것입니다. 이 섹션에서는 의미론이 아닌 적용된 시각적 디자인을 다루고 있습니다.

일부 구조적 의미론은 접근성 섹션에서 다루기 때문에 텍스트 수준 의미론을 추가 할 수 있습니다. 또는 나중에 적용된 시각 디자인 섹션에서 시간 제한으로 사용할 수 있습니다. 하지만 커리큘럼 변경이 아직 제 시간에 있는지는 잘 모르겠습니다 (그렇지 않은 것 같습니다).

따라서 옵션은 다음과 같습니다.

0-도전을 그대로 둡니다.

1- 제목을 "텍스트 강조 ..."로 변경하고 텍스트를 기울임 꼴로 만드는 다른 방법이 있음을 설명합니다.
--- 1.A-가상의 새로운 텍스트 수준 의미 섹션에서 나중에 다룹니다.
--- 1.B-텍스트 수준 의미론에 대한 좋은 소스 연결

2- 밑줄, 취소 선, 글꼴 두께 및 기울임 꼴과 같은 텍스트 스타일과 관련된 모든 시각적 디자인 문제를 span과 같은 중립 태그로 변경하고 CSS 기반 문제로 전환하여 기본적으로 스타일입니다.
--- 2.A-가상의 새로운 텍스트 수준 의미 섹션에서 나중에 다룹니다.
--- 2.B-텍스트 수준 의미론에 대한 좋은 소스 연결

최고의 솔루션은 2A이고 1A는 정말 좋은 타협이라고 생각합니다.

그러나 현실적이기 때문에 아마도 1B가 방법입니다. 문제를 해결하는 설명과 최고의 캠프 참가자를위한 링크가있는 의미있는 제목 ... 실제 과제 나 커리큘럼을 변경할 필요없이

생각?

@ Facundo-Corradini, 텍스트 수준 의미론에 대해 어떤 소스를 염두에 두십니까?

@raisedadead ,
문제의 과제는 다음과 같습니다.

여러 제목 요소의 글꼴 크기 설정
여러 제목 요소의 글꼴 두께 설정
단락 텍스트의 글꼴 크기 설정
단락의 줄 높이 설정

좋은 해결책을 찾을 때까지 베타가 끝날 때까지 달라야한다고 생각합니다.
PR을 생성하고 시드에서 제거 할 수 있습니다.

PR을 생성하고 시드에서 제거 할 수 있습니다.

그렇다면 지금 제거하십시오. 더 많은 피드백을 수집 할 수 있도록 그대로 남겨 두는 것이 가장 좋다고 생각합니다.

@raisedadead 는 지금은 그것들을 제거하고 더 정확하게

@ahmadabdolsaheb 왠지 죄송합니다 알림을 놓쳤습니다

인용 한 것 (글꼴 크기, 글꼴 두께 및 줄 높이)은 의미 체계와 직접 관련이 없습니다. 모든 텍스트를 <p> 태그로 지정하고 일부를 헤더로 표시하려고 할 때 글꼴 크기를 조정하는 것과 같은 이상한 작업을 수행하는 경우는 예외입니다. 그러나이 설명은 첫 번째 섹션의 <h> 및 <p> 요소 도입에서 완벽하게 처리되고 _Applied Visual Design : Adjust the Size of a Header Versus a 단락 태그 _ :

헤더 태그의 글꼴 크기 (h1 ~ h6)는 일반적으로 단락 태그의 글꼴 크기보다 커야합니다. 이렇게하면 사용자가 페이지에있는 모든 항목의 레이아웃과 중요도 수준을 시각적으로 쉽게 이해할 수 있습니다. font-size 속성을 사용하여 요소의 텍스트 크기를 조정합니다.

도전 섹션은 다음과 같습니다.

-강력한 태그를 사용하여 텍스트를 굵게 만들기 : <strong> 요소는 더 중요한 콘텐츠 (예 : 경고)를위한 것이고 <b> 요소는 텍스트에주의를 끌기 위해 사용됩니다. 더 중요하다는 것을 나타냅니다. 둘 다 기본적으로 굵게 표시되지만 의미는 동일하지 않습니다.

-텍스트에 밑줄을 긋기 위해 u 태그 사용 : 이것은 아마도 가장 복잡 할 것입니다. W3C 권장 사항을 인용합니다.

u 요소는 텍스트를 중국어 텍스트의 고유 이름 (중국 고유 이름 표시)으로 레이블 지정하거나 텍스트를 틀린 것으로 레이블 지정하는 것과 같이 명시 적으로 렌더링되었지만 텍스트가 아닌 주석이있는 텍스트 범위를 나타냅니다. (...) 대부분의 경우 다른 요소가 더 적절할 수 있습니다.

내가 아는 한, 대부분의 언어에서는 헤더 등에 밑줄 만 표시하고 있으며, 이는 <h(x)> 태그의 스타일 지정으로 해결해야합니다. 맞춤법 오류는 또 다른 사용 사례이지만, 의도적으로 맞춤법 오류를 작성하고 표시하는 것과 같은 시나리오에서는 거의 발생하지 않습니다.

-em 태그를 사용하여 텍스트를 기울임 꼴로 표시 :
<em> 태그는 강조를위한 것입니다. 예를 들어 누군가 텍스트 의미론을 좋아하지만 전문가가 아닌 경우 (: p) "I 'm not _that_ into text semantics"라고 말할 수 있습니다. "that"단어에 대한 강조는 그것에 관심이 있지만 때때로 잘못된 것을 사용하는 것을 막지는 않을 것임을 분명히합니다.
<em> 은 기본적으로 기울임 꼴이지만 원하는 스타일이 무엇이든 <em> 태그를 지정하는 것을 방해하는 것은 없습니다. 나는 보통 더 굵은 글꼴 두께도 추가합니다.
마찬가지로 모든 이탤릭체 텍스트가 강조를 제공하는 것은 아닙니다. 정의, 전문 용어 또는 외국어로 작성된 단어 (일반적으로 라틴 표현)를 생각해보십시오. 그것들은
<i> 태그가 올바른 선택입니다.
또는 <cite> 요소조차도 일반적으로 <q> 또는 <blockquote> 와 함께 사용되는 작품 또는 저자의 이름을 참조 할 때 기울임 꼴 텍스트를 표시하는 올바른 방법 일 수 있습니다.

-델 태그를 사용하여 취소 선 텍스트 :
<del> 는 삭제 된 콘텐츠를위한 것입니다. 예를 들어 git (hub)와 같이 이전 버전의 문서에서 삭제 된 콘텐츠를 취소 선과 빨간색 배경과 취소 선이 아닌 신규 / 변경된 부품에 대한 녹색 배경.
<del> 의 기본 출력은 취소 선이지만 텍스트를 취소 할 때마다 <del> 사용하면 안됩니다.
예를 들어, 할인 된 제품 가격 태그에 참조 정상 가격을 표시 할 때와 같이 더 이상 관련이없는 항목 대신 <s> 요소를 사용할 수 있습니다.
또는 <span> 로 이동하여 위의 정의가 일부 텍스트를 취소해야하는 특정 이유에 적용되지 않는 경우 취소 선으로 스타일을 지정하십시오.

그럼에도 불구하고 이러한 모든 섹션은 Applied Visual Design에 필수적입니다.

따라서 내 권장 사항은 삭제하거나 연기하는 것이 아니라 그대로 유지하고 텍스트 수준 의미 체계의 외부 소스에 연결된 손상된 섹션에 대해 약간의 설명을 추가하는 것입니다.

텍스트 수준 의미론에 대해 제가 가장 좋아하는 소스는 W3C 권장 사항입니다.
https://www.w3.org/TR/2016/REC-html51-20161101/textlevel-semantics.html
예를 들어 각 태그의 사용 사례에 대한 MDN 설명
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong

너무 기술적 일 수 있으므로 초보자에게 더 친숙한 옵션을 검색하거나 원하는 경우 freeCodeCamp 블로그에 직접 작성할 수 있습니다. :)

챌린지 제목과 <em> 를 사용하여 기울임 꼴로 사용하는 것은 완전히 잘못되었으며 이름을 다음과 같이 변경해야한다고 생각합니다.
적용된 시각 디자인 : 기울임 꼴 글꼴 스타일을 사용하여 텍스트 기울임 꼴

다음에서 텍스트를 변경하십시오.

텍스트를 강조하기 위해 em 태그를 사용할 수 있습니다. 브라우저가 글꼴 스타일의 CSS를 적용하므로 텍스트가 기울임 꼴로 표시됩니다. 기울임 꼴; 요소에.

...에

텍스트를 기울임 꼴로 표시하려면 css 규칙 _font-style : italic_을 기울임 꼴로 표시하려는 요소에 적용하십시오.

따라서 <em> 사용은 자체적 인 도전과 함께 Applied Accessibility 섹션에서 더 적절하게 표시 될 수 있습니다.

여러분의 피드백에 감사드립니다. 우리는 과목 기반 커리큘럼에서 멀어 질 것이며 다가오는 프로젝트 기반 커리큘럼에서 의미론에 대한 더 나은 설명을 기대합니다.

@scissorsneedfoodtoo , 생각?

자세한 설명을 해주신 @ Facundo-Corradini에게 감사드립니다. 많은 프로젝트가 아직 개발 중이며 테스트를 마치면 지속적으로 출시 될 예정입니다. 누군가가 현재 시각 디자인 과제의 설명을 업데이트 할 수있는 경우를 대비하여 지금은이 문제를 열어 두는 것이 좋습니다.

이것을 부실 상태로 닫습니다. 대화를 계속하고 싶은 사람이 있으면 언제든지 메시지를 남겨 주시면 다시 열 수 있습니다. 모두에게 감사하고 행복한 코딩을 🎉