•  08-06-2019
  •  | 
  •  

문제

현재 내 블로그를 만드는 중이어서 댓글에 마크업을 해야 하는데, 마크업하는 가장 좋은 방법은 무엇인가요?

제가 제시해야 할 정보는 다음과 같습니다.

  1. 사람 이름
  2. 그라바타 아이콘
  3. 댓글 날짜
  4. 댓글

어떤 아이디어라도 매우 감사할 것입니다.

추신:나는 의미론적 HTML 마크업에만 관심이 있습니다.

도움이 되었습니까?

해결책

내 생각에 인용, 인용문 등이 포함된 버전은확실히 작동할 것입니다. 그러나 의미론이 주요 관심사라면 개인적으로 인용 및 인용문은 표현해야 하는 특정 내용이 있으므로 사용하지 않을 것입니다.

blockquote 태그는 다른 출처에서 가져온 인용문을 나타내고 cite 태그는 정보 출처(예: 잡지, 신문 등)를 나타냅니다.

의미 있는 클래스 이름을 사용하여 의미론적 HTML을 사용할 수 있다는 주장이 확실히 제기될 수 있다고 생각합니다.Plain Old Semantic HTML에 대한 이 기사에서는 클래스 이름 사용에 대한 참조를 제공합니다. http://www.fooclass.com/plain_old_semantic_html

다른 팁

다음 CSS를 사용하여 그림을 내용 왼쪽에 띄울 수 있는 한 가지 방법은 다음과 같습니다.

.comment {
  width: 400px;
}

.comment_img {
  float: left;
}

.comment_text,
.comment_meta {
  margin-left: 40px;
}

.comment_meta {
  clear: both;
}
<div class='comment' id='comment_(comment id #)'>
  <div class='comment_img'>
    <img src='https://placehold.it/100' alt='(Commenter Name)' />
  </div>
  <div class='comment_text'>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed mauris. Morbi quis tellus sit amet eros ullamcorper ultrices. Proin a tortor. Praesent et odio. Duis mi odio, consequat ut, euismod sed, commodo vitae, nulla. Suspendisse potenti. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam pede.</p>
    <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas rhoncus accumsan velit. Donec varius magna a est. </p>
  </div>
  <p class='comment_meta'>
    By <a href='#'>Name</a> on <span class='comment_date'>2008-08-21 11:32 AM</span>
  </p>
</div>

div나 클래스를 사용하지 않고도 주석 구조를 잘 표현하는 마크업이 있는지는 모르겠지만 정의 목록을 사용할 수는 있습니다.정의 목록의 컨텍스트에서 여러 dt 및 dd 태그를 사용할 수 있습니다. http://www.w3.org/TR/html401/struct/lists.html#edef-DL

<dl>
  <dt>By [Name] at 2008-01-01<dt>
  <dd><img src='...' alt=''/></dd>
  <dd><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed mauris. Morbi quis tellus sit amet eros ullamcorper ultrices. Proin a tortor. Praesent et odio. Duis mi odio, consequat ut, euismod sed, commodo vitae, nulla. Suspendisse potenti. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam pede.</p>

  <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas rhoncus accumsan velit. Donec varius magna a est. </p>
   </dd>
</dl>

업데이트:이와 같은 접근 방식에 대해 우려되는 점은 스타일 지정 목적으로 CSS를 사용하여 요소를 고유하게 식별하기 어려울 수 있다는 것입니다.스타일을 찾고 적용하려면 JavaScript(여기서는 jQuery가 좋을 것임)를 사용할 수 있습니다.브라우저(IE) 전반에 걸쳐 완전한 CSS 선택기 지원이 없으면 스타일을 지정하기가 더 어려울 것입니다.

나는 아마도 다음과 같은 것을 생각하고 있었을 것입니다.

<ol class="comments">
    <li>
        <a href="">
            <img src="" alt="" />
        </a>
        <cite>Name<br />Date</cite>
        <blockquote>Comment</blockquote>
    </li>
</ol>

div와 단 하나의 클래스만 사용하지 않고 매우 의미가 깊습니다.목록에는 댓글이 작성된 순서, 해당 사람의 웹사이트에 대한 링크, 해당 그라바타에 대한 이미지, 해당 댓글을 작성한 사이트에 대한 인용 태그 및 해당 내용을 담는 블록 인용이 표시됩니다.

사람들은 어떻게 생각하나요?

너의 의도를 알 겠어.좋아요, 그 기사를 다 읽은 후, 이런 것을 시도해 보는 것이 어때요?

<blockquote 
    cite="http://yoursite/comments/feederscript.php?id=commentid" 
    title="<?php echo Name . " - " . Date ?>" >
    <?php echo Comment ?>
</blockquote>

멋진 CSS를 사용하여 보기 좋게 만들어 보세요.

Feederscript.php는 데이터베이스에서 읽을 수 있고 요청된 commentid만 에코할 수 있습니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top