저번 글에 이어서 계속해서
HTML에 대해 알려 드리도록 할게요.
저번에 처음 사용한
h1 태그 기억나시나요?
<h1></h1>
이렇게 생겼던 거 말이죠.
저번 시간에 깜박하고 말씀
못 드린 게 있는데.
h1 태크는 h6까지는 있지만 h7은 없습니다.
이렇게 적어줬을 때 실행하게 돼도
이렇게 h7 만 적용되지 않고
단순히 텍스트로 표현되게 되죠
그럼 이번 글은 다른 태그에 대해
알려드리도록 할게요.
바로 LIST tag입니다.
웹사이트를 보다 보면 순서대로
나열된 콘텐츠들도 볼 수 있지만
순서와 상관없이 나열된 것도 볼 수 있죠
그래서 HTML의 LIST의 종류는
두 가지입니다.
첫 번째는 Ordered List
두 번째는 UnOrdered List
즉 1234처럼 차례대로
순서가 있는 목록과
정렬이 돼있지 않은
순서가 없는 목록입니다.
그럼 이제 HTML을 이용해서
LIST를 만드는 걸 알려드릴게요
가장 먼저 ul이라고 입력해주세요
<ul></ul>이라고 입력해주셔야 해요.
* ul은 UnOrdered List의 태그입니다.
모든 태그와 동일하게
<ul> </ul> 사이에 어떠한 태그를
넣던 코딩을 하건 해당 리스트의
일부가 됩니다.
그럼 아무거나 적어볼까요
저는 그냥 제 앞에 보이는
물건들을 적어보았는데요.
저장하고 실행하게 되면
이렇게 글자마다 앞에 공간이 생기고
세로로 적었는데 가로로 쭉 나열돼있는 걸 볼 수 있죠.
왜냐하면 브라우저는 UL이 리스트라는 건
알고 있어도 모니터 키보드 스피커
마우스 핸드폰 텀블러가
무엇인지 모르기 때문이죠.
그래서 LIST 안에 있는 아이템이야 라고
브라우저에게 알려주게 되면 세로로
볼 수 있는 데요.
List 안에 Item 즉 <li></li>를
넣어주면 됩니다.
이렇게 말이죠.
그리고 아까랑 똑같이 실행해주면
이렇게 변한 걸 볼 수 있죠.
(항상 VSC에서 저장하고
브라우저를 새로고침을 해야
변경한 걸 확인할 수 있습니다.)
이런 리스트를 어디서 사용하냐면
나무 위키만 보더라도 쉽게
발견할 수 있습니다.
똑같죠? 흔한 게 볼 수 있는 만큼
자주 사용하게 될 거예요.
그럼 순서가 없는 태그는 UL 이였으니
순서가 있는 태그는 무엇일까요?
UnOrdered LIST = ul
Ordered List = ol
그럼 아까 리스트를 ol로 바꾸게 되면
이렇게 변경되게 됩니다.
즉 리스트 아이템 li와 상관없이
리스트가 순서가 있는지
순서가 없는지 태그만 (ol인지 ul인지)
잘 달아주며 알아서 브라우저가
숫자를 매겨주기도 그냥 점으로
나열하기도 하는 거죠.
쉽죠? 그럼 이번 글은 여기까지 하고
다음 글에 이어서 알려드릴게요
여기까지 궁금한 점이 있다면
댓글로 달아주시고요.
공감과 구독도 부탁드릴게요~
