티스토리 뷰

Skill/html js css

[css] ul li 태그로 리스트 만들기

진열사랑 2020. 12. 9. 17:23

출처 : blog.naver.com/PostView.nhn?blogId=bgpoilkj&logNo=221463341770

 

먼저 결과물을 보여드리겠습니다.

파일을 새로만들어서 HTML코드를 작성합니다.

<!doctype html>
<head>
<meta charset="UTF-8">
<title>리스트 만들기</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
  <h1>ul li 리스트 만들기</h1>
  	<!---기본 메뉴--->
	  <ul>
	  	<li>번호</li>
	  	<li>제목</li>
	  	<li>글쓴이</li>
	  	<li>작성일</li>
	  	<li>조회수</li>
	  </ul>
	  <!--- 리스트 --->
	  <ul>
	  	<li>2</li>
	  	<li>제목</li>
	  	<li>관리자</li>
	  	<li>2019-02-11</li>
	  	<li>1</li>
	  </ul>
</body>
</html>

<ul><li>를 두 개로 나누어서 기본적인 메뉴와 리스트가 표시되는 부분을 나누었습니다. 이렇게 작성하고 브라우저에 로드시키면

이렇게 문자앞에 기호가 생기고 작성했던대로 리스트형식으로 주욱 나열됩니다. 이제 이것을 결과물처럼 만들겠습니다. CSS파일을 새로 만듭니다.

@charset "utf-8";

/* 공통옵션 */
ul li {list-style:none; }
.fl {float:left; }
.tc {text-align:center; }

/* 게시판 목록 */
.board {width: 950px; }
.w70 {width:70px; }
.w500 {width:500px; }
.w120 {width:120px; }
.w100 {width:100px; }

}

첫줄에는 인코딩셋팅을 해주고 공통옵션으로 ul li 태그에는 리스트 스타일을 없애고 fl클래스를 만들어 왼쪽정렬과 tc클래스를 만들어 텍스트들을 가운데로 정렬시키는 속성들을 만듭니다.

다음으로 목록에 들어갈 스타일을 주는데 큰 틀로 board클래스에 950px만큼 너비를 주고, 다음인 w70, w500, w120, w100은 위의 각 <li>에 적용될 너비입니다. <table>태그와는 다르게 <ul><li>태그에는 너비와 높이를 직접 지정해야 합니다. 여기까지 한 결과물입니다.

아래로 쭈욱 나열되는것이 틀이 잡히면서 항목에 맞는 리스트가 만들어지게 됩니다. 만약 틀이 엇갈리거나 할 때는 board너비조정 및 아래의 너비들을 조정하면 됩니다.

.title {
	height: 50px;
	line-height: 50px;
	background:skyblue;
	font-weight: bold;
}
.t_line {border-right:solid 1px gray;}
.lt_line {border-bottom:solid 1px gray;}
.list {
	height: 40px;
	line-height: 40px;
	background: #f3f3f3;
}

마지막으로 위의 스타일을 작성합니다. .title은 번호, 제목, 글쓴이 같은 항목에 스타일을 적용한 것입니다. 높이50px, 글자간격 50px, 배경색 하늘색, 폰트굵게가 설정되어 있고, t_line은 메뉴별 구분선입니다. 왜 board-right을 했냐하면 메뉴들 모두 적용하기 때문에 그냥 border:solid를 하게 되면 왼쪽, 오른쪽에 테두리가 생기기 때문에 오른쪽으로만 해두면 왼쪽에는 테두리가 생기지 않기 때문입니다.

lt_line은 t_line과 같이 리스트들에 적용되는 스타일이며 아래쪽에 1px의 선을 만듭니다. 마지막으로 list는 높이40px, 글간격 40px, 배경색 밝은 회색으로 설정했습니다. 여기까지 했다면 다시 HTML로 돌아와서 각각에 맞는 스타일들을 지정합니다.

<!doctype html>
<head>
<meta charset="UTF-8">
<title>리스트 만들기</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
  <h1>ul li 리스트 만들기</h1>
  	<!---기본 메뉴--->
	  <ul class="board">
	  	<li class="fl tc w70 title t_line">번호</li>
	  	<li class="fl tc w500 title t_line">제목</li>
	  	<li class="fl tc w120 title t_line">글쓴이</li>
	  	<li class="fl tc w100 title t_line">작성일</li>
	  	<li class="fl tc w100 title ">조회수</li>
	  </ul>
	  <!--- 리스트 --->
	  <ul class="board">
	  	<li class="fl tc w70 list t_line lt_line">2</li>
	  	<li class="fl tc w500 list t_line lt_line">제목</li>
	  	<li class="fl tc w120 list t_line lt_line">관리자</li>
	  	<li class="fl tc w100 list t_line lt_line">2019-02-11</li>
	  	<li class="fl tc w100 list  lt_line">1</li>
	  </ul>
	  <ul class="board">
	  	<li class="fl tc w70 list t_line lt_line">1</li>
	  	<li class="fl tc w500 list t_line lt_line">제목</li>
	  	<li class="fl tc w120 list t_line lt_line">관리자</li>
	  	<li class="fl tc w100 list t_line lt_line">2019-02-11</li>
	  	<li class="fl tc w100 list  lt_line">1</li>
	  </ul>
</body>
</html>

기본메뉴부분에는 title클래스가 리스트부분에는 list클래스가 설정되어 있습니다. 그리고 list부분에도 t_line이 되어 있는데 이것 또한 리스트부분에서 오른쪽에 구분짓기 위함입니다. 이제 결과물을 보시면

이렇게 높이가 설정되고 배경색이 적용되며 리스트가 만들어집니다. 아래는 테이블로 작성했을시 결과입니다.

 

저작자표시 비영리

'Skill > html js css' 카테고리의 다른 글

[jquery] validation 사용시 버튼과 <form> 설정 주의  (0) 2021.02.15
[css] 테이블의 선을 단선으로 border-collapse 속성  (0) 2021.02.08
구형브라우저 지원  (0) 2020.12.08
[css] 참고 사이트  (0) 2020.12.07
[정규식]  (0) 2020.11.18
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/11   »
일 월 화 수 목 금 토
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
글 보관함