반응형
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>리스트 활용1</title>
</head>
<body>
<h1>리스트 중첩</h1><!--예제문제 풀어보기 : 조직도를 리스트화 시켜보자! / 쉽게 해결하는 방법 : 뎁스 순서대로 만들자(1뎁스 다 만들고, 2뎁스 다 만들고, 3뎁스 만들자!)-->
<ul>
<li>대표이사
<ul>
<li>경영관리부문
<ul>
<li>경영관리본부</li>
</ul>
</li>
<li>PLM사업부문
<ul>
<li>PLM광역사업본부</li>
<li>PLM영남사업본부</li>
<li>기술사업본부</li>
</ul>
</li>
<li>솔루션사업부문
<ul>
<li>HPC사업부</li>
<li>INSPUR사업부</li>
<li>CLOUD사업부</li>
<li>SI사업부</li>
<li>MA사업부</li>
</ul>
</li>
<li>신사업부문
<ul>
<li>신사업본부</li>
</ul>
</li>
</ul>
</li>
</ul>
<hr>
<h3>예제문제</h3>
<ul>
<li><a href="#" target="_blank">글라스아트타일</a>
<ul>
<li><a href="#">명화</a></li>
<li><a href="#">일러스트</a></li>
<li><a href="#">풍경화</a></li>
<li><a href="#">동양화</a></li>
<li><a href="#">동,식물</a></li>
<li><a href="#">기타이미지</a></li>
</ul>
</li>
<li><a href="#">타일</a>
<ul>
<li><a href="#">글라스모자이크타일</a></li>
<li><a href="#">자기질모자이크타일</a></li>
<li><a href="#">벽면용타일</a>
<ul>
<li><a href="#">200*200/300mm</a></li>
<li><a href="#">250*400mm</a></li>
<li><a href="#">300*600mm</a></li>
</ul>
</li>
<li><a href="#">바닥용타일(벽면겸용)</a>
<ul>
<li><a href="#">150*150mm</a></li>
<li><a href="#">200*200mm</a></li>
<li><a href="#">300*300m</a></li>
<li><a href="#">폴리싱타일</a></li>
<li><a href="#">기타</a></li>
</ul>
</li>
<li><a href="#">포인트타일(바닥/벽겸용)</a></li>
<li><a href="#">벽화타일</a></li>
<li><a href="#">타일부자재/타일커팅</a></li>
</ul>
</li>
<li><a href="#">욕실장</a></li>
<li><a href="#">기타상품</a>
<ul>
<li><a href="#">액자상품</a></li>
<li><a href="#">시계</a></li>
<li><a href="#">포크아트소품</a></li>
</ul>
</li>
</ul>
<hr>
<h3>중첩의 중첩 예시</h3>
<p><span style="color:red">셀프연습</span></p>
<ul>
<li>코끼리
<ul>
<li>든든한 느낌이 좋다.</li>
<li>몸집이 커서 좋다.</li>
<ol type="A" start="3">
<li>초식동물이라서 좋다.
<li>제일 세서 좋다.</li>
</ol>
</ul>
<li>강아지</li>
<li>고양이</li>
</ul>
</body>
</html>예제1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>리스트 활용1-1.연습문제</title>
</head>
<body>
<h3>리스트 중첩 예제(조직도_3뎁스) 1 풀어보기</h3>
<ul>
<li>대표이사
<ul>
<li>관리부문
<ul>
<li>총무</li>
<li>구매</li>
<li>경리</li>
</ul>
</li>
<li>영업부문
<ul>
<li>설계</li>
<li>영업</li>
</ul>
</li>
<li>기술/생산부문
<ul>
<li>생산</li>
<li>QM</li>
<li>시공</li>
<li>시 운전</li>
<li>A/S</li>
</ul>
</li>
<li>자동화 연구소
<ul>
<li>하드웨어</li>
<li>소프트웨어</li>
</ul>
</li>
</ul>
</li>
</ul>
<hr>
<h3>리스트 중첩 예제(조직도_4뎁스) 2 풀어보기</h3>
<ul>
<li>대표
<ul>
<li>본사
<ul>
<li>영업팀</li>
<li>개발팀</li>
<li>공사팀</li>
<li>관리팀</li>
</ul>
</li>
<li>공장
<ul>
<li>생산1</li>
<li>생산2</li>
<li>관리팀</li>
</ul>
</li>
<li>영업
<ul>
<li>직판영업</li>
<li>해외영업
<ul>
<li>일본</li>
</ul>
</li>
<li>국내영업</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
반응형
'IT > HTML&CSS' 카테고리의 다른 글
| [HTML] 탭제목_기초(2021-08-17) (0) | 2021.11.07 |
|---|---|
| [HTML] 기본프레임 만들기(2021-08-17) (0) | 2021.11.07 |
| [HTML] a태그/속성(2021-08-19) (0) | 2021.11.07 |
| [HTML] 이미지/영상/유튜브 링크 올리기(2021-08-24) (0) | 2021.11.07 |
| [html] 리스트 태그(2021-08-26) (0) | 2021.11.07 |