관리 메뉴

DevBlackCat

HTML 하루 15분, 일주일만에 완성하기 - 4.리스트와 순서 구분 본문

웹개발/HTML

HTML 하루 15분, 일주일만에 완성하기 - 4.리스트와 순서 구분

DevBlackCat 2023. 6. 3. 12:32
728x90

HTML 하루 15분, 일주일만에 완성하기 - 4.리스트와 순서 구분

HTML 하루 15분, 일주일만에 완성하기 - 4.리스트와 순서 구분

 

안녕하세요, 여러분! 오늘 우리는 'HTML 하루 15분, 일주일만에 완성하기'의 네 번째 시간에 돌입해서 리스트와 순서 구분을 실습해보도록 하겠습니다. 리스트는 웹페이지에서 아이템을 나열하는데 쓰입니다. 리 구분할 수도 있고, 숫자를 이용해 순서를 표시할 수도 있습니다. 그렇다면 시작하겠습니다.

1.리스트의 두 가지 유형 리스트에는 순서가 있는 목록(ordered list)과 순서가 없는 목록(unordered list)이 있습니다. 순서가 있는 목록: 숫자로 순서가 표시된 목록으로, <ol> 태그로 생성합니다.

 ㄴ순서가 없는 목록: 불릿으로 순서가 표시된 목록으로,  태그로 생성합니다.

 


2.순서가 없는 목록(Unordered list) 생성하기 먼저 순서가 없는 목록을 생성봅시다. <ul> 태그를 사용하며, 각 항목은 <li>(list item) 태그로 작성합니다. 예를 들어 다음과 같이 작성할 수 있습니다.

 

See the Pen Untitled by ad0ad0 (@ad0ad0) on CodePen.

 

 순서가 없는 목록은 위와같이 표시됩니다.

 

3.순서가 있는 목록(Ordered list) 생성하기 순서가 있는 목록을 생성해봅시다. <ol> 태그를 사용하며, 마찬가지로 각 항목은 <> 태그로 작성합니다. 예를 들어 다음과 같이 작성할 수 있습니다.

 

See the Pen Untitled by ad0ad0 (@ad0ad0) on CodePen.

오늘은 리스트와 순서 구분에 대해 배워보았습니다. 다음 시간에는 이미지와 링크에 대해 배워보도록 하겠습니다. 그럼 다음 포스트에서나요!

 

728x90