FE/인터렉티브 웹

목록 태그 - 메뉴를 깔끔하게 정리하기

이제하네 2023. 9. 18. 20:44

<ul> - 순서가 없는 목록 만들기

  • <ul>태그는 순서가 없는 메뉴를 목록으로 만들때 사용
  • <ul> 태그를 사용할때는 자식태그인<li>태그를 같이사용
<body>
    <h1>내가 좋아하는 과일</h1>

    <ul>
        <li>딸기</li>
        <li>바나나</li>
        <li>사과</li>
    </ul>
</body>

<ul> 실행화면

<ol> - 순서가 있는 목록 만들기

  • 성적 순위, 번호등과 같이 순서가 중요할떄 사용
  • <ul>태그와 작성법은 비슷 <ul> --> <ol> 변경
  • <ol>태그 목록은 앞에 숫자가 표시
<body>
    <h1>A반 시험 석차</h1>

    <ol>
        <li>김영희</li>
        <li>박철수</li>
        <li>홍길동</li>
        <li>이하나</li>
        <li>김길동</li>
    </ul>
</body>

<ol> 실행화면

<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>

<dl> 실행화면

 

'FE > 인터렉티브 웹' 카테고리의 다른 글

비디오 ·오디오 태그 - 멀티미디어 콘텐츠 삽입하기  (0) 2023.09.19
폼 태그 - 사용자 정보 입력받기  (0) 2023.09.18
서식태그 - 텍스트를 넣어 웹 페이지 채우기  (0) 2023.09.18
시맨틱 태그 - 웹 페이지 구조 나누기  (0) 2023.09.18
HTML 파일 둘러보기  (0) 2023.09.17

'FE/인터렉티브 웹'의 다른글

  • 현재글목록 태그 - 메뉴를 깔끔하게 정리하기

관련글

티스토리툴바