[HTML] Web1 : 항상 붙어다니는 tag ; 목차태그 li,ul,ol

오늘의 마지막 수업이다! 바로바로 부모자식과 목록이다!

이거 쓰기전에 몸이 여기저기 쑤셔서 낮잠을 자고 왔더니 몸이 좀 갠찮아 진 것 같다.

 

이 수업은 고정된 관계에 있는 태그들에 대해서 배운다. 항상 붙어다니는 태그인 것이다.

말하자면 상하관계가 필연적?인 태그들이다.

 

바로 그것은 목차태그이다.

 

목차는 영어로 list이다. 이것의 약자를 활용한다.

 

 

• 오늘 할 일 적기
• html 강의 3개 듣고 tstory에 정리하기

가장 먼저 배우는 것은 <li>이다.

지금 보이는 이 동그라미 표시가 li를 적용한 것이다.

또 아는만큼 보인다고 티스토리의 목록 옆에 list가 이제서야 눈에 들어온다.

 

그 다음으로는 저 목록과 다른 목록을 구별할 수 있게 만들어주는 태그이다.

<ul>을 사용한다.

<ul>이 먼저 오고, 그 다음에 <li>이 오는 것이다.

 

내가 지금 (기본모드에서)작성하는 글도 확인해보면

이 함께 다니는 태그가 같이 있음을 확인할 수 있다.

이건 내가 html에서 직접 작성한 글이 아니기 때문에

알수없는 속성들이 붙었는데 확인해야하는 것은 이거다.

 

• ul이 먼저오고 li가 다음에 온다! ul은 경계를 구별해주는 것!

그런데 수업시간에는 일일이 1. 2. 3. 을 작성하였지만 이거를 누가 2번 지워줘! 라고 하면 다시 일일이 적어야한다. 그걸 컴퓨터를 이용해서 편하게 사용할 수 있는데 그 기능이 <ol> 이다.

 

 

20200224할일
1. 현미보리차 100ml마시기
2. 도서관가서 토스 공부하기

html로 직접 작성한 이 화면은 아래와 같다.

 

html에서 ul은 unoredered line의 약자이고, ol은 ordered line의 약자이다.

li는 list item의 약자!

 

수업시간에는 배우지 않았지만 티스토리에 있는 리스트는 3개가 있길래 하나를 더 찾아봤다.

• 이렇게 네모 모양으로 된 것은 태그가 무엇으로 나올까.
• 네모니까 각지다의 angular? al? 아니면 square?

 

놀랍게도 ul 과 li를 그대로 사용한 채, 속성값을 square로 바꿨다. 반은 맞고 반은 틀렸다.ㅎㅎ;

그래도 뭐 square는 맞았으니까~ㅎ

저 data-ke-list-type도 언젠가 배우겠지? 웹을 선택하길 잘한 거 같다.

내가 보고 있는 화면도 소스를 다 볼 수 있으니까 더 재밌는 것 같다.