HTML4 + CSS1,2를
활용한 기초 실무
HTML
<!DOCTYPE html>
<html lang="ko" dir="ltr">
<head>
<title>Mobile web</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" user-scalable=no>
<meta name="format-detection" content="telephone=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="default.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="detail">
<h2>세부 카테고리</h2>
<ul>
<li><a href="#a">이혼.가정</a></li>
<li><a href="#a">이혼.가정</a></li>
<li><a href="#a">상속</a></li>
<li><a href="#a">금전</a></li>
<li><a href="#a">형사.범죄</a></li>
<li><a href="#a">교통사고</a></li>
<li><a href="#a">노무</a></li>
<li><a href="#a">부동산</a></li>
<li><a href="#a">지적재산관</a></li>
<li><a href="#a">세무</a></li>
<li><a href="#a">국제.외국인</a></li>
<li><a href="#a">의료</a></li>
<li><a href="#a">기업법무</a></li>
<li><a href="#a">행정사건</a></li>
<li><a href="#a">재판.분쟁</a></li>
<li class="none"><a href="#a">민사.기타</a></li>
</ul>
</div>
</body>
</html>
CSS
body { padding: 50px;}
.detail ul:after { content:""; display:block; clear:both;}
.detail { padding: 20px 20px; width:297px; border: 1px solid #efefef;}
.detail h2 { font-size: 17px; color:#666; padding: 0 0 12px;}
.detail li { position: relative; float: left; padding: 0 7px 0 0; line-height: 24px;}
.detail li:after { content:""; display: block; position: absolute; right: 3px; top: 6px;
width: 1px; height:13px; background:#cacaca; }
/* 인라인 요소는 가로세로를 제공하지 않기에 블럭 레벨로 강제로 바꿔준다 */
.detail li a { font-size: 13px; color:#666;}
.detail li.none:after {display:none; }
도움: 유튜브 리베하얀님
https://www.youtube.com/watch?v=s7dM0cIHMrQ&list=PL_6yF2upGJYtE8CWiTRu7qvRSSzFy4Hzd&index=7
728x90
반응형
'프로젝트 및 실습 > 웹 따라 만들기' 카테고리의 다른 글
| 실무실습) sitemap 따라 만들기 (진행중) (0) | 2020.05.19 |
|---|---|
| 실무실습) 탭 메뉴 만들기 (0) | 2020.05.17 |
| 실무실습) 조직도 만들기 (0) | 2020.05.13 |
| 실무실습) 로그인 페이지 만들기 (0) | 2020.05.12 |
| 실무실습) 이벤트 게시판 (0) | 2020.05.09 |