[코딩]글머리 기호를 이용해 리스트를 만들 수 있어요! ② - html 리스트 태그 응용

오늘 배울 내용의 주요 키워드를 먼저 정리해 봅니다.
#<ul>태그      #<ol>태그      #2단 리스트     #속성       #start       

 

 

지난 번에 이어

리스트 태그의 응용편을 포스팅 해 볼게요!

2단 리스트를 작성할 수 있나요?

 

 YES! 우리가 리스트 작성할 때, 대번호 밑에 소번호를 분류해서 쓰고 싶을 때가 많은데요, html 구조를 잘 보고 중첩해서 사용하면 됩니다. 지난 번에 작성했던 버킷리스트 문서를 수정하여,  이루고 싶은 것과 이미 이룬 것으로 분류해서 작성을 해 볼게요!

서른이 되기 직전 작성했던 버킷리스트인데, 꽤 많이 이뤘네요^^ 태그를 중첩하여 사용할 때는, 태그를 열고 닫는 것에 주의합니다. 들여쓰기를 하니, 구조가 훨씬 잘 보이는 것 같아요. 

 

 

ol 태그와 ul태그를 동시에 사용할 수 있나요?

 

YES! 상위 태그는 ul 태그로, 하위 태그는 ol 태그로 작성해 보겠습니다. 이때, 하위 태그의 속성을 서로 다르게 지정해 보기도 할게요. 

 

 

짜쟌! 간단한 수정으로, 저리 휙 바뀌는 웹문서가 신기하고 재밌기도 해요^^ ol 태그는 태그를 쓰는 순간 처음 순번부터 다시 시작하는 걸 확인해 주세요! 

 

 

위 문서에서 숫자를 사용해서 리스트를 작성하되, 숫자가 중간에도 이어지게 할 수 있나요?

 

속성 태그 중에 start="숫자" 태그가 있는데요, 이 속성을 넣어 주면 해당 순번의 문자부터 시작합니다. 

 

로마숫자로 속성을 맞춰 주고, 두번째 목록에서 start 속성을 지정해 주었어요! 어렵지 않죠?^^ 

tip) 칸을 띄고 싶을 때, 빈 문단태그 <p>를 넣어 줄 수 있습니다.

 

 

 

어때요?

이제 좀 익숙해지니, 생각보다 쉬우면서도 재밌지 않나요?

개인적으로 저의 옛 버킷리스트를 생각해 보는 계기도 되어 더 재미있었네요^^

이제 어떤 태그들이 나올지 다음 수업이 기대됩니다!

 

좋은 하루 되세요!

감사합니다^^