##리스트 만들기
<body>
<h1>My upcoming challenges!!!!</h1>
<p><a href="index.html">View today's challenge</a></p>
<p>Repeat what i learned about HTML & CSS</p>
<p>Do the exercises on HTML & CSS</p>
<p>Dive deeper into HTML & CSS and build more complex websites</p>
</body>
에서
<p>Repeat what i learned about HTML & CSS</p>
<p>Do the exercises on HTML & CSS</p>
<p>Dive deeper into HTML & CSS and build more complex websites</p>는 서로 관련된 정보들이 들어있다. 정보들을 단락으로 표시해도 되긴 하나 이는 의미론적 관점에서 옳다고 할 수 없다. 그러므로 리스트 요소를 사용한다. 의미론적인 관점에서 리스트를 사용한다는 점이 중요하다고 한다.
리스트 요소는 두 종류가 있고 두 개의 스타일은 서로 다르다. 왜냐하면 다른 개발자나 브라우저에 내가 입력한 내용의 의미 체계가 무엇인지 정확히 알리기 위해서이다.
-
ol(ordered list): 특정 순서로 이루어진 항목이 있는 목록.
Ex) 월 화 수 목… -
ul(unordered list): 순서가 중요하지 않다. 서로 관련된 정보가 들어있다. 각 항목을 리스트로 묶어 두는게 중요한 경우에 사용한다.
Ex) 토마토 사과 바나나를 슈퍼에서 살 경우, (토마토, 사과, 바나나)와 (바나나, 토마토, 사과)는 차이가 없음.
리스트의 항목은 li태그를 이용하여 나타낼 수 있다. 순서를 유지해야 하므로 ol을 사용하여 리스트를 만들었다.
<ol>
<li>Repeat what i learned about HTML & CSS</li>
<li>Do the exercises on HTML & CSS</li>
<li>Dive deeper into HTML & CSS and build more complex websites</li>
</ol>리스트 스타일링
에서 보기 싫은 왼쪽의 숫자를 제거하려면 CSS파일에서 li선택자를 만들고 list-style속성의 속성 값에 None을 입력한다.
li{
list-style: None;
}다른 속성값들도 찾아서 실험해봐야겠다.
공부 정리용 블로그