table 대신 ul li span 태그 요소를 사용하여 공지사항 게시글 목록표 만들기
html과 CSS에서 게시판 목록에 대해서 만들고자 할 때, table 태그 요소를 활용해서 만들곤 합니다. 그리고 ul, li 요소로도 얼마든지 꾸밀 수 있습니다. 여기에서는 li를 활용하여 테이블을 구성해 보겠습니다. 먼저 아래의 완성된 모습을 참고해 주시기 바랍니다.
이렇게 완성 됩니다. 그러면 본문 내용과 CSS 스타일 상태를 한번 살펴보겠습니다. 먼저 HTML body 영역 안의 마크업 상태입니다.
<div id="notice">
<h1>공지사항</h1>
<ul>
<li>내용<span>날짜</span></li>
<li><a href="#">아무거라도 좋으니 내용을 입력하세요!!!</a><span>2018-10-24</span></li>
<li><a href="#">아무거라도 좋으니 내용을 입력하세요!!!</a><span>2018-10-24</span></li>
<li><a href="#">아무거라도 좋으니 내용을 입력하세요!!!</a><span>2018-10-24</span></li>
<li><a href="#">아무거라도 좋으니 내용을 입력하세요!!!</a><span>2018-10-24</span></li>
<li><a href="#">아무거라도 좋으니 내용을 입력하세요!!!</a><span>2018-10-24</span></li>
<li><a href="#">아무거라도 좋으니 내용을 입력하세요!!!</a><span>2018-10-24</span></li>
<li><a href="#">아무거라도 좋으니 내용을 입력하세요!!!</a><span>2018-10-24</span></li>
<li><a href="#">아무거라도 좋으니 내용을 입력하세요!!!</a><span>2018-10-24</span></li>
</ul>
</div>
이렇게 마크업 되어 있습니다. ul li에 대한 사용 방법은 주로 메뉴를 구성할 때 많이 사용하는데 이 부분은 이미 세차례에 걸린 드롭다운 강좌에서 많이 언급했으므로 여기에서는 특별한 설명을 생략하도록 하겠습니다. 이번에는 CSS 내용 입니다.
/*RESET*/
* {
margin: 0;
padding: 0;
}
body {
font: 17px 'Nanum Gothic', sans-serif;
}
a {
text-decoration: none;
color: #404040;
}
li {
list-style: none;
}
/*BODY*/
#notice {
width: 500px;
margin: 0 auto;
box-sizing: border-box;
/*outline: 1px dashed black;*/
}
#notice h1 {
font-size: 25px;
text-align: center;
margin: 10px 180px;
padding: 10px;
color: #fff;
background: #007AAE;
border-radius: 30px;
}
#notice ul {
width: 100%;
}
#notice ul li {
line-height: 30px; /*li 세로 간격*/
padding-left: 20px;
}
#notice ul li:first-child {
border-top: 2px solid #6a6a6a;
border-bottom: 2px solid #6a6a6a;
padding-left: 150px;
}
#notice ul li:last-child {
border-bottom: 1px solid #000;
}
#notice ul li:nth-child(2n) {
background: #94D8F6;
border-radius: 20px;
}
#notice ul li span {
display: inline-block;
float: right;
width: 150px;
text-align: center;
}
이렇게 구성해 봤습니다. 주석 처리된 RESET 부분은 말 그대로 전체 HTML 문서에 대한 일괄적용 되는 부분이고 본문인 BODY 부분에 대한 CSS 요소들을 살펴보시면 되시겠습니다. li 끝 부분에 first-child / nth-child / last-child 라고 되어 있는 부분은 각각 li 의 부분 선택 요소들 입니다.
li:first-child → li의 첫번째 요소를 선택
li:last-child → li의 마지막 요소를 선택
li:nth-child(2n) → li의 짝수를 선택
참고로 2n 중 n은 자연수를 말합니다. 1,2,3,4... 이런거죠. 2 곱하기 n 이라는 뜻 입니다. 그러니 짝수밖에 선택되지 않습니다. 그냥 숫자만 넣으면 해당 요소를 선택하게 됩니다. li:nth-child(3) 이라는 것은 세번째 li 를 선택한다는 뜻이 됩니다. li:nth-child(2n-1) 은 홀수 번호만을 선택한다는 뜻이 되지요.
보시면 li 안쪽에 span 태그가 존재합니다. 이 부분은 날짜 부분을 구별짓기 위한 요소로 보시면 inline-block 형태로 속성을 변경해서 모두 오른쪽에 정렬되도록 만들었습니다. 그리고 가로 크기를 고정시켜서 가운데 정렬을 했음을 알 수 있습니다. 이 내용을 참고하시어 li 요소를 활용해서 깔끔하고 멋진 공지사항 표를 만들어 보시기 바랍니다. 끝.
"친절한효자손 취미생활" 을 검색!
