[list] HTML - <li> 태그 ★ - 리스트목록 (= 리스트아이템 = li태그 = 리태그/리스트태그/엘아이태그) (HTML5수정) ※ 균분 너비

1. <li> 예제 - 리스트 항목
2. <li> 정의
3. <li> 구문
4. <li> 속성
5. <li> 예제 - <li> 개수 상관 없이 자동 균분 너비 설정
6. <li> 예제 - <li> 개수와 margin 고려해 균등 너비 설정
7. <li> 예제 - <li> 요소 간 구분 막대 추가

<li> 예제 - 리스트 항목 

[순서 O]

 

<ol>
  <li>HTML - 홈짱닷컴 (homzzang.com)</li>
  <li>CSS - 홈짱닷컴 (homzzang.com)</li>
  <li>PHP - 홈짱닷컴 (homzzang.com)</li>

  <li>JavaScript - 홈짱닷컴 (homzzang.com)</li>
</ol>

 

결과보기

---

[순서 X]

 

<ul>
  <li>HTML - 홈짱닷컴 (homzzang.com)</li>
  <li>CSS - 홈짱닷컴 (homzzang.com)</li>
  <li>PHP - 홈짱닷컴 (homzzang.com)</li>

  <li>JavaScript - 홈짱닷컴 (homzzang.com)</li>
</ul>

 

결과보기

<li> 정의

순서가 없거나 있는 목록의 세부 항목을 정의할 때 사용 

 

---

 

1. 

• <li> : List 의 약자. 
• <li>태그는 <ul>, <oi>, <menu> 태그의 내부에 사용.
• HTML5에서는 value 속성 사용 O (cf. HTML4.01에서는 value 속성 중요성이 작아 사용 자제됨.)
• HTML5에서는 type 속성 사용 X.
• 시작 태그와 종료 태그로 구성

2.

<ul> 태그나 <ol> 태그에 height 값 없는 상태에서 <li> 태그에 float:left 속성 적용되면 <ul> 태그나 <ol> 태그에 적용한 background 속성이 적용 안 됨. ★★★★★ 예제1, 예제2

 

3. cf.

• each() 메서드 : 선택요소 각각 (예: li)에 대해서 실행.
• toArray() 메서드 : 선택요소에 해당하는 모든 요소 (예: li)를 배열로 가져오기.

 

4. MDN <li> 예제보기

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li

 

<li> 구문

[순서 O]

<ol>
  <li 속성="속성값">목록 요소</li>
  <li 속성="속성값">목록 요소</li> 
</ol>

 

---

[순서 X]

 

<ul>
  <li 속성="속성값">목록 요소</li>
  <li 속성="속성값">목록 요소</li> 
</ol>

 

<li> 속성

<li> 예제 - <li> 개수 상관 없이 자동 균분 너비 설정

<li> 예제 - <li> 개수와 margin 고려해 균등 너비 설정

 

<style>

div * {margin:0; padding:0}

div {

    width:300px; 

    border:1px solid gray; 

    overflow:auto;

}

li {

    float:left; 

    border:1px solid red; 

    width:calc((100% - 30px) / 4); 

    margin-right:10px;

    box-sizing:border-box; 

    list-style:none;

    text-align:center;

}

li:last-child {margin-right:0;}

</style>

 

<div>

    <ul>

        <li>홈</li>

        <li>짱</li>

        <li>닷</li>

        <li>컴</li>

    </ul>

</div>

 

결과보기

<li> 예제 - <li> 요소 간 구분 막대 추가

 

<style>

li {

    float: left;

    position: relative;

    padding: 18px 30px;

    list-style:none;

}

li:not(:first-child)::before {

    content: '';

    display: block;

    position: absolute;

    top: 50%;

    left: 0;

    width: 1px;

    height: 15px;

    margin-top: -8px;

    background: #c3c3c3;

}

</style>

 

<ul>

    <li>홈짱닷컴</li>

    <li>Homzzang.com</li>

    <li>홈페이지 제작</li>

</ul>

 

결과보기