WEB1 - HTML & Internet

부모 자식과 목록

 

 

---

 

 

이번 시간에는
태그 간의 관계를 나타내는 표현인
부모(parent),자식(child)에 대해서
알아보겠습니다.

아래 코드를 보시죠.
(저런 이름의 태그는 없습니다)

<parent>
    <child></child>
</parent>

 

parent 태그에 대해서
child 태그를
자식 태그라고 합니다.

 


child 태그에 대해서
parent 태그를
부모 태그라고 합니다.

 


아래 태그를 보시면
p 태그가 a 태그의 부모
a 태그가 p 태그의 자식입니다.

<p>
    <a href="https://opentutorials.org">opentutorials</a>
</p>

 

 

그런데 a 태그는
꼭 p 태그의 자식이어야 하는 것은 아닙니다.

 

 

마찬가지로
p 태그가 꼭 a 태그의 부모일 필요는 없습니다.

 

 

직장의 상하관계처럼
필요에 따라서 관계가 달라질 수 있습니다.

 

 

그런데 몇몇 태그들은
부모 자식 관계처럼
고정된 관계인 태그들이 있습니다.

 

 

이번 시간에는
그런 태그들을 살펴볼 것입니다.

 

 

우리 기획서를 한 번 보시죠.

 

 

기획서 상에서
아직 진행하지 않은 부분이
붉은색으로 표시한 목차 부분입니다.
이 부분을 완성할 거에요.

 

 

 

예제에 목차를 추가해 볼게요.

 

 

목차 비슷하게 나오죠?

 

 

그런데 HTML을 고안한 사람들은
목차를 표현할 때 쓰라고 태그를 마련해 두었습니다.
그럼 우리는 그걸 써야 합니다.
그래야 웹페이지가 더 가치있게 됩니다.

 

 

목차가 영어로 무엇인가요?
list이죠?
앞에 두 글자는요?
li입니다.

 

 

아래와 같이 코드를 작성해 보세요.

 

 

 

이번에는
우리 수업의 참가자 이름을 적어 볼게요.

 

 

목차와 참가자의 목록이
구분이 가나요?
 

 

이렇게 목록은
다른 목록과 구분할 수 있도록
경계가 필요합니다.
이 때 사용하는 태그가
<ul> 태그입니다.

 

 

보시는 것처럼
li 태그는 ul 태그를 꼭 필요로 합니다.
ul 태그 역시 li 태그가 없다면 존재 가치가 없습니다.
이 둘은 서로 아주 밀접한 관계입니다.

 

 

그런데 위의 코드에서
수업 목록을 자세히 보시죠.

 

 

코딩 공부를 할 때는 항상
극단적으로 생각해야 합니다.
극단적이지 않은 경우에는
코딩을 할 필요가 없기 때문입니다.

 

 

만약 수업의 목록이
3개가 아니라
1억개라고 생각해 보세요.

 

 

1억개의 항목을 간신히 완성했습니다.
그런데 누군가가
저 중에 첫번째 항목을 지워달라고 하면
여러분 어떻게 해야 하나요?

 

 

나머지 항목의 번호를 모두 수정해야 할 것입니다.
이런 상황에 있는 사람은 얼마나 절망스러울까요?

 

 

바로 이런 절망감 속에서
우리를 구원해 주는 것이 코딩입니다.

 

 

예제를 아래와 같이 변경해 봅시다.
(참가자 목록은 이제 필요없기 때문에 지워주세요)

 

 

ul 태그가 ol 태그로 변경되었습니다.
ul은 unordered list의 약자이고,
ol은 ordered list의 약자랍니다.

 

 

이렇게 해서
우리의 프로젝트에 목차를 추가했습니다.

 

 

또 빈도수가 매우 높은 태그들 3개를 살펴봤습니다.

 

 

 

변경사항

 

댓글

댓글 본문
  1. 아이스메아리카노
    완료
  2. 하나두울세엣
    20200708
  3. 뻐끔
    20.07.08
  4. 사각사각
    완료
  5. 이뿐이
    완료
  6. 뽀짝이
    완료
  7. 김현호우짱
    2020 07 06 완료
  8. 우왕왕달려
    20.07.06 완료
  9. MOMO
    20200705 완료
  10. chapter5447
    완료하였습니다
  11. 엠생쿤
    20200705
  12. cottoncandy
    20200703 완료
  13. 띤용
    굿.완료용
  14. gotothetop
    20200629 Fin
  15. 김종찬
    20200629 완료
  16. LikeAHandy
    20200629 완료~
  17. 메텔
    20200629 완료
  18. 김성곤
    20200628 완료
  19. elysium21
    안녕하세요 생활코딩님 강의 항상 감사하게 듣고있습니다. 감사합니다.
  20. ch_mp92
    완료
  21. 0625 완료
  22. 대직도
    20200625
  23. Spica
    200625
  24. deun
    저도 안되어서 궁금했는데 덕분에 해결했네요 감사합니다~
    대화보기
    • 코딩뎅
      atom 프로그램 창에서 crtl+shift+i 누르면 element console source 등등 있는 창이 하나 뜰꺼에요
      그럼 console 로 가신다음
      atom.config.set('core.editor.multiCursorOnClick', true); <- 요거 복붙 하시고 엔터 치시면 true라고 뜨실텐데 그럼 아마도 되실꺼에요. 전 이렇게 해결했네요.
      대화보기
      • 78세 안전모
        2020/06/23
      • 안형빈
        ol = order list = 앞에 숫자가 붙는다
        ul = unorder list = 앞에 숫자가 안붙는다
      • switpotato
        2020-06-21 완료
      • 김경민
      • 8도롱박도롱8
        완료
      • ehgus
        2020/6/19
      • miakimmie
        2020/06/18 완료
      • 3/18 완료
      • pupu
        2020/06/18 완료
      • 이정혁
        20/06/17 완
      • 작은시작
        윈도우를 사용하는데 커서를 여러 개 선택하는 방식이 되지않습니다. 유튜브 댓글 중에는 alt키를 눌러서 했다는 분도 계시는데 저는 alt키를 눌러도 안되는데 어떻게 하면 해결할 수 있을까요??
      • 초초보!!
        2020/06/16
      • Seong Gyeom Kim
        20200616 완료
      • 리다
        20200616 완료!
      • 허심탄회
        20200615 완료
      • 뎁수
        200614 완료
      • 김광현
        6/13완료ㅔ
      • 옴므박탈
        완료
      • 개발신
        복습완료
      • 윤제현
        6/9 <li> </li> 태그는 <ul></ul> 이나 <ol>,</ol>태그와 같이 다니는 자식 부모 태그이다
        ordered list는 숫자까지 자동으로 나타내주는 태그
        ul은 그렇지않은 태그
      • 나미콩
        6/8 완료
      • 반짝반짝
        6/8 여기까지
      • Envyyy
        06.06.2020
      • 김혜린
        6/5 완료!
      • tieon0730
        2020 6/4
      버전 관리
      egoing
      현재 버전
      선택 버전
      graphittie 자세히 보기