import styles from "./PostList.module.scss";
const PostList = (): JSX.Element => {
return (
<ul className={styles.bl_vertPosts}>
<li className={styles.bl_vertPosts_item}>
<div className={styles.bl_vertPosts_header}>
<time className={styles.bl_vertPosts_date} dateTime="2019-03-29">
2019/03/29
</time>
</div>
{/* /.bl_vertPosts_header */}
<a className={styles.bl_vertPosts_ttl} href="#">
[다국어 사이트를 구축한다] 1 대상 언어/지역 및 URL 방식 선정
</a>
</li>
</ul>
);
};
export default PostList;
JavaScript
복사
.bl_vertPosts {
&_item {
padding-top: 15px;
padding-bottom: 15px;
border-bottom: 1px solid #ddd;
&:first-child {
padding-top: 0;
}
}
&_header {
margin-bottom: 10px;
}
&_date {
font-size: 0.875rem;
}
&_ttl {
text-decoration: none;
&:focus,
&:hover {
text-decoration: underline;
}
}
}
Scss
복사
1. .bl_vertPosts
bl_Posts가 어떤 형태의 포스트 목록일지 판단하기 어렵다.
또한 너무 상세하지 않게 해야 다른 사이트에서도 같은 목적으로 사용할 수 있다.
수직으로 배치된다는 점에서 착안해서 사용했다.
2. div 요소의 존재에 관해
현재 상황만 고려하면 div 없이 아래와 같이 할수도 있다.
<li "bl_vertPosts_item">
<time "bl_vertPosts_date">
<a "bl_vertPosts_ttl">
</li>
HTML
복사
하지만 7장에서 날짜 뒤에 카테고리를 표시하는 라벨을 추가하게 되는 경우 div요소가 필요하므로 넣어둔 것이다.
3. time 요소의 datetime 속성
특정한 시각을 표시할 때 가장 적합하다.
머신리더블하게 마크업한다.
라벨 포스트 목록 - 텍스트에 따라 다른 색상으로 변하는 라벨
p334
