HTML 태그 <li>

HTML 태그 <li>

안녕하세요.

오늘은 html에 list를 추가해보려고 합니다.

• html 파일 만들기
• 태그의 부모(parent) 자식(child) 관계
• 리스트(list) 태그

1. html 파일 만들기

지금은 그냥 이렇게 확장자가 html이 되게 만들어주면 됩니다.

간단하죠?

2. 태그의 부모(parent) 자식(child)관계

html에서 둘러싼 태그와 둘러싸인 태그를 부모 자식 관계라고 합니다.

(ex)

<p>  <<--부모 시작

     <h2>제목<h2>  <<--자식

</p>  <<--부모 끝

이런 식으로 되어 있습니다.

이 부모 자식 관계는 필요에 따라서 달라질 수 있습니다.

물론 예외도 있습니다.

3. 리스트 태그

위에서 말한 예외에 해당한다.(고정 관계)

<li>태그로 내용을 감싸 보자(list->li)

(ex) <li>내용</li>

크롬으로 열어보면 리스트로 표현이 되는 것을 알 수 있습니다.

그런데 문제는 리스트에 경계가 표시되지 않는다는 점입니다.

이럴 때 사용하는 부모 태그가 몇 가지 있습니다.

3-1 <ul>태그

이렇게 <ul>태그를 사용해서 리스트를 구분해 줄 수 있습니다.

(ex)

<ul>

  <li>내용</li>

  <li>내용</li>

  <li>내용</li>

</ul>

브라우저로 html문서를 열었을 때 리스트가 구분되는 것을 확인할 수 있습니다.

3-2 <ol>

순서가 표시되는 리스트는 <ol>태그를 사용해 만들 수 있습니다.

html문서를 아래와 같이 수정.

(ex)

<ol>

  <li>내용</li>

  <li>내용</li>

  <li>내용</li>

</ol>

위의 html문서를 브라우저로 실행.

목록에 숫자가 생긴 것을 확인할 수 있습니다.

[웹사이트] - HTML 사진과 속성<img, src>

[웹사이트] - html태그 <줄바꿈, 단락>