왕초보 엔지니어, 코딩하다

코스 전체목록

닫기

부모 자식과 목록

 

 

---

 

 

이번 시간에는
태그 간의 관계를 나타내는 표현인
부모(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. slowilly
    22.6.25완료~~~
  2. 예스아이캔
    22.06.24
  3. 22.06.24
  4. 코드몰라요
    220619 -html 수강완료. 빨리 배우고 백엔드해야지..
  5. 시대의 흐름
    2022.06.11 수강완료!
  6. 리언
    220610
  7. 원이
    220609
  8. 가비
    2022-06-01 좋은영상 무료로 배포해주셔서 감사합니다^^~
  9. 코딩다람쥐
    20220527
  10. scientist
    220527
  11. 하쿠나마타타
    20220527

    재시작

    감사합니다.
  12. 달걀
    22/05./18
  13. 김재원
    5/12
  14. 생활코수
    5/5
  15. 감사합니다.
  16. 니파타
    2022.04.30
  17. 인생조진웅중
    2022.04.29
  18. 킴컨
    220425 2359 수강완료
  19. rhdwhdgu
    22.04.24
  20. 220421
  21. 고배배
    220416
  22. 매듭달열하루
    22.04.15
    <ul>or<ol>
    <li>
    </li>
    <ul>or</ol>
  23. Sunjoo Im
    Unordered List
    <ul>
    <li></li>
    <li></li>
    </ul>

    Ordered List
    <ol>
    <li></li>
    <li></li>
    </ol>

    <ol>-<li> 부모-자식 관계
    <ul>-<li> 부모-자식 관계
  24. Jisung Song
    22.04.11 수강완료
  25. 서우
    22.04.10.
  26. 22.04.09
  27. Altair58
    22/04/04 (Fri) 완료
  28. _갈비_
    2022/04/03일
    <li>=목차
    <ul>=목록
    <ol>=숫자 자동완성
  29. li는 목차 구분
    ul은 목차 목록 구분
    ol은 숫자 리스트로 작성
  30. 2022/04/01 (금)
    <li> 목차 구분
    <ul> 목차 구분을 구분
    <ol> 숫자로 구분
  31. 너구리기린
    2022.03.24
    <li> <ul> <ol>
  32. jaeho829
    잘보고있습니다. 감사합니다.
    마지막 부분에 table 태그 영상과 동일하게 해봤는데
    테이블 선은 안나오고 텍스트만 보여지는데.. 지금 몰라도 되겠죠?
  33. 조인우
    li, ol 부모자식태그!!

    고맙습니닷!
  34. 프래머
    '부모 자식과 목록' 완료
    2022-03-18

    <li> 태그를 사용하여 목록을 만들 수 있다.
    하지만 목록이 여러개 있을 시, 구분이 가지 않는다.
    그래서 <ul> 태그로 <li> 태그를 감싸서 리스트를 구분할 수 있다.
    그리고 숫자가 필요한 리스트의 경우
    <ol> 태그로 <li> 태그를 감싸서 숫자 리스트를 제작할 수 있다.
  35. 윤재승
    ol ul li 를 배움
  36. 이윤
    220306
  37. OneButton
    220303
  38. ^^
  39. 초스피드로생활코딩님의모든강의마스터
    ul ol 마스터 완!
  40. 전문가
  41. tfx5470h
    2022-02-19
  42. 코충이
    2022.2.17
  43. keepgoing
    22.2.16
    가장 사소해 보이는 것이 가장 중요한 법이다.
    keepgoing
  44. 윾겸
    22.02.17(목)

    <table>태그는 3대가 같이 다닌다.~~

    아 어떡해 넘 재밌음 ㅠ
  45. ywbyeol
    22.2.16
  46. ㅁㄴㅇ
    2022.02.13
  47. 우주에서온 외계인
    2022.02.10
  48. DH니스
    2022.02.10
  49. 푸른초인
    2022.02.08.
  50. 닌늬
    2022.02.02
버전 관리
egoing
현재 버전
선택 버전
graphittie 자세히 보기