• Home
  • About
    • Ryureka Moment photo

      Ryureka

      Sin Prisa, Sin Pausa

    • About Me
    • Facebook
    • Github
    • Youtube
  • Projects
  • Posts
    • Posts
    • ProblemSolvings
    • Tags
    • Blog
    • TIL
    • Examples
  • ProblemSolving
    • ProblemSolving
    • BruteForce
    • DFS
    • DP
    • Optimization
  • FrontEnd
    • FrontEnd
    • HTML
  • BackEnd
    • BackEnd
    • Spring
    • Node.js
    • DataBase
      • MySQL
  • Programming
    • Programming
    • Java
    • Python
  • ComputerScience
    • DataStructure
    • Algorithm

[생활코딩] HTML 수업 - (3) 태그의 중첩과 목록

31 Jan 2020

Reading time ~1 minute

이 포스트는 생활코딩 HTML 수업을 기반으로 작성한 글입니다.

태그의 중첩과 목록에 대하여 알아보겠습니다.

  • 목록을 만들어주는 태그
    • 태그 적용 전
    • 태그 적용 후 (li)
    • 중첩 태그 적용 후 (ol, ul, li)
    • 결론

목록을 만들어주는 태그

태그를 이용하여 목록을 만들어보겠습니다.

태그 적용 전

기술소개
기본문법
하이퍼텍스트와 속성
리스트와 태그의 중첩

최진혁
최유빈
한이람
한이은

기술소개 기본문법 하이퍼텍스트와 속성 리스트와 태그의 중첩

최진혁 최유빈 한이람 한이은

태그 적용 후 (li)

<li>기술소개</li>
<li>기본문법</li>
<li>하이퍼텍스트와 속성</li>
<li>리스트와 태그의 중첩</li>

<li>최진혁</li>
<li>최유빈</li>
<li>한이람</li>
<li>한이은</li>
  • 기술소개
  • 기본문법
  • 하이퍼텍스트와 속성
  • 리스트와 태그의 중첩
  • 최진혁
  • 최유빈
  • 한이람
  • 한이은

중첩 태그 적용 후 (ol, ul, li)

<ol>
    <li>기술소개</li>
    <li>기본문법</li>
    <li>하이퍼텍스트와 속성</li>
    <li>리스트와 태그의 중첩</li>
</ol>
<ul>
    <li>최진혁</li>
    <li>최유빈</li>
    <li>한이람</li>
    <li>한이은</li>
</ul>
  1. 기술소개
  2. 기본문법
  3. 하이퍼텍스트와 속성
  4. 리스트와 태그의 중첩
  • 최진혁
  • 최유빈
  • 한이람
  • 한이은

결론

  1. 목록을 만들기 위해서 list의 약자인 li 태그를 사용합니다.
  2. 목록간에 구분을 주고 싶을 때 ol과 ul을 사용한 후 li 태그를 중첩하여 사용합니다.
  3. ol 태그는 ordered list 즉, 순서가 있는 태그를 의미하고 일반적으로 목록 하나하나를 숫자로 구분합니다.
  4. ul 태그는 unordered list 즉, 순서가 없는 태그를 의미하고 일반적으로 목록 하나하나를 원점으로 구분합니다.


HTML Share