HTML_목차만들기(Ordered List, Unordered List)

박눌찡·2023년 2월 1일
0

HTML&CSS

목록 보기
2/2

HTML로 목차 만들어보기를 해보려고 합니다.

1.HTML<br>
2.CSS<br>
3.JavaScript<br>
<h1>HTML</h1>
<p>Hypertext Markup Language (HTML) is the standard makup language for<strong> creating <u>web</u>pages</strong>></p>

이렇게 br태그로 목록을 작성해도 되고, li태그로 목차를 정리해 줄 수도 있습니다.

<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<h1>HTML</h1>
<p>Hypertext Markup Language (HTML) is the standard makup language for<strong> creating <u>web</u>pages</strong>></p>

여기서 목록을 좀 더 추가해서 li의 부모 태그인 ul태그로 좀더 목록 간의
구분을 지어 줘 보도록 하겠습니다.

<Ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</Ul>
<Ul>
    <li>nulee</li>
    <li>som</li>
    <li>sungmin</li>
</Ul>

<h1>HTML</h1>
<p>Hypertext Markup Language (HTML) is the standard makup language for<strong> creating <u>web</u>pages</strong>></p>

li같은 항목은 어디서부터 어디까지가 연관된 항목인지를 구분하기 위한 부모태그가 필요합니다.

ul을 ol태그로 변경 할 수 있습니다.

<ol>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ol>
<Ul>
    <li>nulee</li>
    <li>som</li>
    <li>sungmin</li>
</Ul>

<h1>HTML</h1>
<p>Hypertext Markup Language (HTML) is the standard makup language for<strong> creating <u>web</u>pages</strong>></p>

ol태그를 사용하면 숫자가 매겨지는 걸 볼 수 있습니다.
이들의 공통점은 l이 붙는다는 건데 이것은 List의 약자라고 보면 됩니다.

profile
개발자 성장 과정 기록

0개의 댓글