지금까지 작업한 내용을 다시 봅시다.
어떤 불만족이 느껴지시나요? HTML, CSS, JavaScript를 줄바꿈을 해서 목록처럼 표현하고 싶지 않나요? 검색해서 직접해보세요.
추천검색어 : html line break tag
<br> 태그를 사용하면 줄바꿈을 할 수 있습니다. (변경사항)
br 태그 보다 좋은 방법이 있습니다. HTML에는 목록을 위한 태그가 마련되어 있습니다. 검색해서 직접해보세요.
추천검색어 : html list tag
br 태그 대신 li 태그를 사용하면 더 목록답게 표현할 수 있습니다. (변경사항)
이번에는 이 수업의 참가자 목록을 표현해보겠습니다. (변경사항)
목록이 2개가 되니까 서로 잘 구분되지 않습니다. 서로 연관된 li 태그끼리 그룹핑을 해서 다른 그룹과 구분하는 기능이 필요합니다. ul 태그로 서로 연관된 li 태그를 묶으면 목록을 구분할 수 있습니다. 몇몇 태그들은 li와 ul처럼 항상 짝을 이루어서 같이 사용됩니다. (변경사항)
수업목록은 앞에 숫자를 표시했습니다. 순서가 있다는 의미입니다. 수작업으로 일을 하는 것 보다 코딩으로 일을 자동화해서 처리하는 것이 더 어렵습니다. 하지만 처리해야 할 일의 양이 충분히 많아지면, 코딩으로 처리하는 것이 더 쉬워질 수 있습니다. 이 때가 코딩을 할 때입니다. 예제의 수업항목이 3개가 아니라 1억개라고 상상해보세요. 완성한 후에 첫번째 항목을 지워야 한다면 1억개의 숫자를 다 바꿔야 할 것입니다. 좌절스럽겠죠. 좌절감을 해결하기 위해서 검색을 통해서 방법을 찾아보세요.
추천검색어 : html ordered list
순서가 있는(ordered) 목록을 표현할 때는 ol 태그를 사용합니다. ol은 ordered list의 약자입니다. ul은 unordered list의 약자이고요. (변경사항)
자동으로 숫자가 붙었습니다. 컴퓨터는 작은양을 다루지 않습니다. 양이 많는 것을 다룰 때 컴퓨터는 가치를 발휘합니다. 어떤 기능을 배울 때 극단적인 상황을 상상해보고, 이 기능이 없다면 어떤 어려움이 있는지를 상상해보세요. 그럼 공부의 보람이 한층커질 것입니다.
참가자 목록은 이제 필요없기 때문에 제거하겠습니다.
웹페이지가 한결 문서답게 개선되었습니다. 이번 시간에 배운 li와 ul은 랭킹은 12번째 사용빈도는 73%에 달하는 중량감 있는 태그입니다.
