리스트

리스트를 만들때 굳이 앞에 1. 2. 3. 을 붙여서 만들 필요 없이 태그를 사용해서 리스트를 만들 수 있다.

순서 리스트(Ordered List)

<ol> 태그로 목록을 감싸고 그 안의 항목은 <li> </li> 태그로 감싼다.

순서 없는 리스트(Unordered List)

<ul> 태그로 목록을 감싸고 그 안의 항목은 <li> </li> 태그로 감싼다.

리스트 스타일링

type속성으로 리스트 기호를 바꿀 수 있다.
<ol type=""> 즉 type을 명시하면 스타일링이 가능하다.

type="a" : 영어 소문자
type="A" : 영어 대문자
type="i" : 로마 소문자
type="I" : 로마 대문자
type="1" : 숫자

그리고 이런 스타일링은 CSS로 가능하다.(이게 더 많이 쓰이는 방법이다.)

<style>
  ol {
  	list-style: disc;
  }
</style>

• 군만두
  👆🏻요 점 표시가 disc이다.

그외에도 다양한 스타일이 있고, 리스트 앞에 none도 가능하다.

<style>
  ul {
  	list-style: none;
  	margin: 0;
    padding: 0;
  }
</style>

👆🏻이렇게 하게 되면 리스트 앞에 아무런 기호가 붙지 않는다.

군만두
짜장면
👆🏻라잌 디스

이건 좀 다른 방식으로 잘 활용할 수 있다.

<style>
  ul {
  list-style: none;
  	margin: 0;
    padding: 0;
  }
  ul > li {
  	display: inline-block;
    border: 1px solid #dddddd;
    border-radius: 8px;
    padding: 8px;
  }
</style>

👆🏻만약 이런 식으로 코드를 작성한다면

• 군만두
• 짜장
• 짬뽕
• 탕수육

👆🏻요롷게 구현이 가능하다!