이전
목록
다음
탈

내용 리스트을 표현할때 어떤 방식이 좋을지요?

벤지
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 · 2014-03-15 (토) 15:32:27 · 3705 · 14
메인 페이지의 일부 화면에 리스트를 표현할때
이리저리 다 해보지만, 어느것이 가장 효율적일지
계속 마음에 걸리더군요.

예)

<section>
    <h4>타이틀</h4>
    <ul>
       <li>
            <a>제목</a>
            <span>작성자</span>
            <i>작성일</i>
       </li>
    </ul>
</section>

위의 li 안에 가로로 쭈욱 표현해서 사용중인데
이렇게 했를때보다 더 좋은 방법이 있를까요?

아니면 그누님들은 어떻게 사용중이신지 궁금합니다.


#퍼블리셔톡 #퍼블리셔
글쓰기

댓글 14개

유우니얌
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 2014-03-15 (토) 20:26:00
전 요즘
게시물 리스트 같은 경우..
<dl><dt></dt><dd></dd></dl> 도 마니 사용해요
벤지
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 2014-03-15 (토) 21:29:54
답변 감사합니다.
그럼...여러줄의 경우는

<dt>제목1</dt>
<dd>작성자1</dd>
<dd>작성일1</dd>

<dt>제목2</dt>
<dd>작성자2</dd>
<dd>작성일2</dd>
~~~~
~~~~
~~~~
<dt>제목10</dt>
<dd>작성자10</dd>
<dd>작성일10</dd>

이렇게 사용중이세요?
유우니얌
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 2014-03-15 (토) 23:50:09
http://uiux.co.kr/70152931029 <dt><dd>는 정의 목록?을 쓸때 쓰는 태그로 정의한다는 글을 보고 ,, 저도 li를 쓰다 dt 로 변형햇어요 , 메인에서 노출되는 게시물 리스트 같은 경우요
벤지
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 2014-03-15 (토) 23:52:13
리스트식으로 이 방식이 될꺼란 생각도 못 했었어요....
큰거 하나 배웠습니다....감사해요...(- -)(_ _)
유우니얌
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 2014-03-16 (일) 00:27:34
저도 최근에 이런 글을보고...써야겟다는 생각에 ㅎㅎㅎㅎ li 마니 안쓸려고 노력중이예여ㅎㅎ
유우니얌
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 2014-03-15 (토) 20:26:44
<tr><th></th><td></td></tr> 의 대체로 보시면될듯용
벤지
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 2014-03-15 (토) 21:32:40
게시판이나, 표은 table 로 사용중인데
메인 페이지에 일부 표현은 사용하기가 좀 꺼려 지더라구요...
지운아빠
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 2014-03-17 (월) 15:56:35
dl 은 정의 목록으로,작성자와 작성일은 제목에 대한 부가정보로 봐야지, 정의내용이라고 보기는 어렵습니다.
또한 의미론적인 마크업도 중요하지만, 제작자의 숙련도도 중요한데, dl 은 이러한 유형의 데이터를 다루기에 쉬운 구조는 아닙니다.
그래서 이 경우에는 ul/ol, table 중 더 적당하고 편한 구조를 선택하시면 될 것 같습니다.
벤지
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 2014-03-17 (월) 17:46:56
감사합니다.....

결론은 ul, ol 이나 table 이용하는게 좋다라는 말씀이신거죠?
지운아빠
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 2014-03-17 (월) 18:01:45
순위나 순서를 표현하고 싶으시다면 ol
순서가 반드시 중요하지 않다면 ul 로 하시면 될 것 같습니다.
벤지
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 2014-03-17 (월) 18:30:46
감사합니다....(ㅡㅡ)(_ _)
css 쪽는 지운아빠님이 백과사전이세요....^-^
퍼블리셔지노군
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 2014-03-18 (화) 13:48:29
<dl>
<dt class="mainTitle">대제목</dt>
<dd>
<ul>
<li class="subTitle">소제목</li>
<li class="txtAuthor">글쓴이</li>
<li class="txtDate">작성일</li>
</ul>
</dd>
</dl>

저는 이렇게 사용하고 있습니다...
벤지
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 2014-03-19 (수) 00:59:14
유우니얌님, 지운아빠님, 퍼블리셔지노군님 ... 감사합니다..(ㅡㅡ)(_ _)
많은 도움이 되었어요...^-^
LaRuota
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 2014-03-20 (목) 15:50:13
지운아빠님이 말씀하신 관점이 제 관점이랑도 부합하네요.
저도 dl은 사전식 정의를 표현하는 목록태그로 인식하고,
게시글쪽은 주로 ul, ol, table을 사용하고 있습니다.

<div class="latest_box" id="notice_lists">
<h2>공지사항 <span class="sound">최근게시물 목록입니다.</span></h2>
<ul class="latest_lists">
<li>
<a href="#" class="latest_subject">글제목</a>
<span class="sound">작성일</span><span class="write_date">2014-03-20</span>
</li>
</ul>
<a href="#" class="btn_more"><img src="/images/btn/btn_more_notice.png" alt="공지사항 게시글 더보기" /></a>
</div>

그누보드 사용을 기준으로 최근게시물 사용시의 예문입니다만..
경우에 따라 구조가 조금씩 달라지긴하겠지만,
대체로 저는 위와 같은 형태를 선호합니다 ㅎ
댓글을 작성하시려면 로그인이 필요합니다.

프로그램

8,188건
태그 필터 (최대 3개) 전체 개발자 소스 기타 mysql 팁자료실 javascript php linux flash 정규표현식 jquery node.js mobile 웹서버 os 프로그램 강좌 썸네일 이미지관련 도로명주소 그누보드5 기획자 견적서 계약서 기획서 마케팅 제안서 seo 통계 서식 통계자료 퍼블리셔 html css 반응형 웹접근성 퍼블리싱 표준화 반응형웹 홈페이지기초 부트스트랩 angularjs 포럼 스크린리더 센스리더 개발자톡 개발자팁 퍼블리셔톡 퍼블리셔팁 기획자톡 기획자팁 프로그램강좌 퍼블리싱강좌
+
제목 글쓴이 날짜 조회
14-10-13 조회 6,475
14-10-11 조회 6,670
14-10-11 조회 6,578
14-10-11 조회 6,464
14-10-10 조회 6,428
14-10-10 조회 6,276
14-10-08 조회 6,956
14-10-07 조회 6,375
14-10-06 조회 6,726
14-10-06 조회 7,513
글쓰기