FE/인터렉티브 웹
목록 태그 - 메뉴를 깔끔하게 정리하기
이제하네
2023. 9. 18. 20:44
<ul> - 순서가 없는 목록 만들기
- <ul>태그는 순서가 없는 메뉴를 목록으로 만들때 사용
- <ul> 태그를 사용할때는 자식태그인<li>태그를 같이사용
<body>
<h1>내가 좋아하는 과일</h1>
<ul>
<li>딸기</li>
<li>바나나</li>
<li>사과</li>
</ul>
</body>
<ol> - 순서가 있는 목록 만들기
- 성적 순위, 번호등과 같이 순서가 중요할떄 사용
- <ul>태그와 작성법은 비슷 <ul> --> <ol> 변경
- <ol>태그 목록은 앞에 숫자가 표시
<body>
<h1>A반 시험 석차</h1>
<ol>
<li>김영희</li>
<li>박철수</li>
<li>홍길동</li>
<li>이하나</li>
<li>김길동</li>
</ul>
</body>
<dl>,<dt>,<dd> - 정의형 목록 만들기
- 정의형 목록을 만들때 사용
- 부모태그인<dl> 안에 자식태그인<dt>,<dd>를 넣음
- <dt>에는 정의할 제목, <dd>에는 정의할 내용 입력
- 정의한 내용은 자동으로 들여쓰기하여 나타냄
<body>
<h1>IT 직군</h1>
<dl>
<dt>UI 디자이너</dt>
<dd>기능성과 심미성을 고려한 UI 디자인</dd>
<dt>프론트엔드 개발자</dt>
<dd>사용자가 직접 이용하는 프런트 화면 개발</dd>
<dt>백엔드 개발자</dt>
<dd>사용자 화면 뒤에 있는 웹 서버나 데이터베이스의 입출력 개발</dd>
</dl>
</body>