dev._.note

[HTML] 리스트(List) 본문

Dev/HTML

[HTML] 리스트(List)

Laena 2023. 2. 6. 06:09

순서 없는 목록 ul

<h1>list관련</h1>
<h2>순서없는 목록</h2>
<!-- unordered list / ul>li / bullet타입-->
<!-- ul>li*3 단축명령어 : ul안에 li를 3개 생성 -->
<!-- 
	ul style="list-style-type: 리스트앞에 도형스타일
	웹에서 미리보기가능
	미리보기하는법 : 펑션+f12 -> ul > style > 원하는부분클릭 > element.style > 지우고 방향키
-->
<ul style="list-style-type:square;">
		<li>html5</li>
    <li>css3</li>
    <li>javascript2015</li>
</ul>

<span>안녕</span>
<span>잘가</span>

순서 있는 목록 ol

<h2>순서있는 목록</h2>
<!-- 자동으로 순서번호를 매겨줌 -->
<!-- ol>li*3 단축명령어 : ol안에 li를 3개 생성 -->
<ol>
     <li>html5</li>
     <li>css3</li>
     <li>javascript2015
		 <!-- 목록 안의 목록 ol>li*2 / ul.ol관련없이 다 사용가능 -->
	         <ol>
              <li>react.js</li>
              <li>vue.js</li>
           </ol>
     </li>
</ol>

<!-- 시작하는 번호 지정하는법 -->
<!-- 5번부터 시작 -->
<ol start="5">

<!-- 중간에 다른숫자로 li 번호매기기도 가능 -->
<li value="9">

<ol start="5">
      <li>L</li>
      <li>I</li>
      <li value="9">D</li>
</ol>

결과 :	5. L
	6. I
	9. D

설명 목록(정의 목록) dl > dt > dd (형제)

<h2>설명 목록</h2>
<!-- dl(부모)>dt>dd(형제)-->
<!-- dt와 dd구별 잘할것 -->
<!-- dl>dt>dd*2 -->
<dl>
     <dt>html</dt>
	   <dd>웹페이지의 정보를 담당</dd>
	   <dd>태그를 계층구조로 작성가능</dd>
     <dt>css</dt>
	   <dd>웹페이지의 디자인을 담당</dd>
</dl>

결과화면

 

'Dev > HTML' 카테고리의 다른 글

[HTML] ifram 관련 태그  (0) 2023.02.25
[HTML] Link(링크)  (0) 2023.02.25
[HTML] Image(이미지)  (0) 2023.02.25
[HTML] 테이블(Table)  (0) 2023.02.06
[HTML] 텍스트 관련 태그(Text)  (0) 2023.02.06