마크업 언어 목록만들기 ul,li,ol

마크업 언어 목록 만들기 ul, li, ol

 

마크업대표이미지

 

이전까지 간단하게 표를 만들어 문서를 정리하는 방법에 대해서 포스팅해보았다. 오늘은 마크업 언어 중 목록을 만들어 문장을 정리할 수 있도록 도와주는 태그들 ul, li, ol에 대해서 정리해보려 한다. 책을 펼치거나 홈페이지 등을 방문하여 볼 수 있는 목차 목록들을 살펴보면 제목과 소제목 그리고 그 앞에는 번호나 특수기호 등을 통해 좀 더 가독성을 높여주며 정리되어있는 것들을 쉽게 찾아볼 수 있다. 오늘 마크업 언어는 바로 그런 역할을 해 주는 것들이라 할 수 있다.

 

목록마크업

ul

마크업 언어 ul은 내가 문서에 목록/목차 등을 만들겠다고 선언하는 언어이다. ul은 태그이기에 슬러시 기호를 통해 처음과 끝을 구분해 주어야 하며, 목록/목차를 만들겠다고 명령을 넣었으니 그 사이사이에 li나 ol 등을 사용하여 해당 문서들을 좀 더 보기 좋게 정리해 줄 수 있다.

 

 

li태그적용

결과물_1

 

순서는 상관없이 특수문자 등을 활용하여 목록을 만들고 정리할 때에는 "li"를 사용한다. list item이라는 양자로써 리스트 항목 등을 적어주는 용도로 사용되는 것이다. 마크업 언어 li의 특징은 결과물을 확인하였을 시 자동으로 들여 쓰기 된다는 점이다. 실전으로 적용해 본모습과 결과물은 위의 사진을 보면 알 수 있다. body부분에 h언어를 이용하여 제목을 입력하였고 아래에 "ul"과"li" 마크업 언어를 사용하여 특수문자로 정리된 목차를 만들어 본모습이다.

 

코딩배우기

ol

숫자나 영문 등으로 나열하는 순서를 표시하면서 정리하고 싶은 경우에는 ol태그를 활용한다. 여기에는 몇 가지 속성들을 추가로 입력할 수 있다. 가령 영어로 예시를 든다면 소문자, 대문자로 구별할 수 있는 것들을 말한다. 속성을 추가해줄 수 있는 마크업 언어는 "type"으로 이 뒤에 ( 1, a, Ai, I ) 등을 입력해주면 된다. 이때 1은 차례대로 숫자로 입력할 것을 나타내며 소문자 영어로 하기를 원하면 a , 대문자 영문표기를 하려는 경우에는 A를 입력해주면 되는 것이다. 마지막으로 i, I 경우에는 로마 숫자를 의미한다. vscode를 활용하면 자동으로 목차가 활성화되니 천천히 살펴보면 된다.

 

 

ol적용하는모습

결과물_2

 

 

마크업 언어 ol를 사용하면서 1, A 두 가지를 예시로 위와 같이 적어보았다. 두 번째 이미지를 보면 알 수 있듯이 위처럼 웹문서를 작성하고 서버에 업로드하면 숫자와 영어 대문자가 순차적으로 잘 정리되어 내려오는 것을 볼 수 있다. 한 가지 더 적어보자면 1~4까지 되는 항목이 있는데 이것의 조건부가 2개라서 분리해야 하는 경우는 어떻게 해야 할까? 쉽게 말해 1~2까지 이어지는 중간에 문구 하나를 첨부하고 그 밑에 3~4로 시작하는 표를 만든다고 생각해보면 될 것이다.

 

 

속성추가하는모습

결과물_3

끊겨있던 차례를 이어서 정리하려는

경우에는 "start" 마크업 언어를 사용하면 된다. 두 번째 결과물을 표시한 이미지를 보면 3번까지 입력 후에 4번부터 다 이어서 정리하고 싶다면 "ol type"옆에 start를 입력 후에 어디서부터 시작할지를 속성을 추가해주면 된다. 이는 숫자뿐만 아니라, 로마 숫자나 영어도 동일하게 이용하면 된다.