(생활코딩) HTML 부모자식과 목록 <li>, <ul>, <ol>

이제 HTML, CSS, JavaScript에 대한 목차를 만들어보자

 

에디터에 목차이름을 작성하고 저장한 후, 

 

웹페이지를 열어보면 위와 같이 나온다.

여기서 <br>태그로 줄을 바꿔주자.

 

에디터에 <br>을 작성하고 저장한 후,

 

웹페이지를 새로고침하면 위와 같이 줄바꿈이 된 것을 확인할 수 있다.

 

여기서, HTML을 만드는 사람들은 목차(목록)를 쓸 때 사용하라고 어떤 태그를 고안했다.

바로 list로 <li>태그를 사용하면 된다.

 

전에 입력했던 <br>태그를 지우고 <li>태그로 작성해보자.

 

에디터에 <li>을 작성하고 저장한 후,

(여기서 ctrl을 누른상태에서 동일한게 입력하고 싶은곳에 커서를 클릭하면 클릭한 곳에서 동시다발적으로 똑같은 내용을 입력가능하다. (Mac인 경우에는 command))

 

웹페이지를 새로고침하면 목차가 생성된다.

 

여기에 수업참여자들을 목차로 추가하는데 수업과 수업참여자와 구분이 되지 않는다.

 

1/2/3 목차에는 사이에 <li>태그의 부모인 <ul>태그를 작성하여 구분을 해준다. (UL=Unordered List)

(여기서 구분하기 쉽도록 1/2/3목차를 드래그하고 tab키로 들여쓰기 해준다.)

 

웹페이지를 새로고침 하면 1/2/3목차 부분이 구분되어진다.

 

<li>와 같은 항목들은 그 항목이 어디서부터 어디까지가 서로 연관된 항목인지를

경계를 짓기 위한, 그룹핑을 하기위한 부모태그가 필요하다.

 

• <li>태그는 반드시 부모태그를 갖고있다.
• <ul>태그는 반드시 자식태그를 갖고 있다.

여기서 <ul> 을 <ol>로 바꾸면 목록들 앞에 자동으로 숫자가 넘버링이 되므로,

일일이 삭제해야 되는 목록을 삭제하고 앞의 숫자를 다시 안바꿔도 된다. (ol=Ordered List)

 

에디터에서 2.CSS 목록을 삭제하고 저장한 후,

웹페이지를 새로고침하면 2번이 삭제해서 숫자가 1>3으로 꼬인다.

목록이 많지 않으면 수동으로 고치는데 시간이 별로 안걸리지만, 몇천개가 있을경우 어마어마한 시간이 걸린다.

 

<ol>태그를 사용하면 저절로 넘버링되므로 번호대로의 목록에서 수정을 쉽게할 수 있다.