Eun_Frontend
  • [ Frontend/HTML ]
    [HTML] 목록(리스트) 태그 [3/13 Study]
    2024년 03월 13일 23시 54분 07초에 업로드 된 글입니다.
    작성자: 동혁이

     

    HTML 목록(리스트) 태그

     

     

    <ul>

    : 순서가 없는 리스트 (Unordered List)

    순서가 없기 때문에 앞에 ●과 같은 불릿이 붙는다

    CSS에서 list-style: none; 으로 순서 표시 없앨수 있음

     

     

    <ol>

    : 순서가 있는 리스트 (Ordered List)

    <ul> 태그와 달리 <ol> 태그는 기호가 아닌 숫자나 영문 순서가 들어감

    사용할 수 있는 속성들이 있다

     

    속성!!

     

    1) type="  "

    1 숫자(기본값)
    a 영어 소문자
    A 영어 대문자
    i 로마숫자 소문자
    I 로마숫자 대문자

     

    2) start="  "(중간 부터 시작하고 싶을때)

    <li>

    : list item

    <ul> 태그와 <ol> 태그 안에서 각 항목을 나열할 때 사용한다

     

     

     

     

    마지막으로 <ul>, <ol>, <li> 모두 쓰이는 예제

    <html>
	<body>
		<ol>
			<li>목록1</li>
			<li>목록2</li>
		</ol>

		<ul>
			<li>목록1</li>
			<li>목록2</li>
			<li>목록3</li>
			<ol>
				<li>목록3-1</li>
				<li>목록3-2</li>
			</ol>
		</ul>
	</body>
</html>

     

     

    결과값

    1. 목록1
2. 목록2
● 목록1
● 목록2
● 목록3
	1. 목록3-1
	2. 목록3-2

     

     

     

     

     

    https://inpa.tistory.com/entry/HTML-%F0%9F%8F%B7%EF%B8%8F-%ED%83%9C%EA%B7%B8-%EC%9A%94%EC%95%BD%ED%91%9C

     

    🏷️ HTML 태그</> 종류 총모음

    태그 모음 요약표 html 태그들을 표로 정리한 요약표 이다. 표의 태그 링크를 누르면 예시 코드 페이지로 이동된다. 태그 설명 주석(comment)을 정의함. 해당 문서(document)의 타입을 정의함. 다른 콘

    inpa.tistory.com

    위 블로그에서 참조하면서 다시 한번 공부했다

     

     

     

     

    🔥마무리

    리스트 태그도 자주 쓰이는 태그들 이기 때문에 능숙하게 다뤄야 할 것 같고

    보통 CSS에서 list-style: none; 으로 순서 표시 없앨수 있기에 리스트 태그를 사용하게 된다면 이 기능과 함께  같이 쓴다고 한다

    화이팅😊

      댓글

    티스토리툴바