17. HTML 리스트(Lists)

① <ul> 태그는 순서없는 리스트(unordered list)를 작성할 때 사용한다.

  ㉠ 각각의 리스트 항목은 <li> 태그를 사용해 작성한다.

  ㉡ 리스트 항목들의 앞은 작은 원이 글머리 기호로 표기된다.

 

메뉴
• 크림파스타
• 로제파스타
• 알리올리오 파스타

  ㉢ 글머리 기호는 CSS의 list-style-type을 이용해 변경할 수 있다.

    ⓐ 값으로 disc를 사용하면 기본값인 작은 원(bullet)이 글머리 기호로 사용된다.

    ⓑ 값으로 circle을 사용하면 원이 글머리 기호로 사용된다.

    ⓒ 값으로 square를 사용하면 사각형이 글머리 기호로 사용된다.

    ⓓ 값으로 none을 사용하면 글머리 기호가 사용되지 않는다.

 

메뉴
• 크림파스타

• 로제파스타

• 알리올리오 파스타

• 할라피뇨 파스타

② <ol> 태그는 순서있는 리스트(ordered list)를 작성할 때 사용한다.

  ㉠ 각각의 리스트 항목은 <li> 태그를 사용해 작성한다.

  ㉡ 리스트 항목들의 앞에 번호가 매겨진다.

 

메뉴
• 크림파스타
• 로제파스타
• 알리올리오 파스타

  ㉢ <ol> 태그의 type 속성을 이용해 리스트 항목의 문자를 변경할 수 있다.

    ⓐ type="1"를 사용하면 기본값인 숫자가 글머리 문자가 된다.

    ⓑ type="A"을 사용하면 대문자가 글머리 문자가 된다.

    ⓒ type="a"를 사용하면 소문자가 글머리 문자가 된다.

    ⓓ type="I"을 사용하면 대문자 로마 숫자가 글머리 문자가 된다.

    ⓔ type="i"을 사용하면 소문자 로마 숫자가 글머리 문자가 된다.

 

1. Amazon

1. Apple

1. Google

1. Microsoft

1. Netflix

  ㉣ 일반적으로는 1부터 수를 세지만, start 속성을 사용해 다른 숫자부터 시작할 수 있다.

 

2. SK하이닉스
3. 네이버
4. 카카오

③ <dl> 태그를 이용해 정의 리스트(description list)를 작성할 때 사용한다.

  ㉠ 각각의 리스트 항목은 <dt> 태그를 이용해 작성한다.

  ㉡ <dd> 태그를 이용해 <dt>태그에 쓰인 내용을 자세히 설명해줄 수 있다.

 

메뉴

신라면

-농심에서 만든 매운 라면-

진라면 순한맛

-오뚜기에서 만든 순한맛 라면-

④ 리스트는 중첩될 수 있다.

 

메뉴
파스타
• 크림파스타
• 로제파스타
• 알리올리오 파스타
라면
• 신라면
• 진라면

⑤ float 속성을 이용해 수평리스트를 만들 수 있다.

 

• 크림파스타
• 로제파스타
• 알리올리오 파스타
• 할라피뇨 파스타