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. bseunghoon@daum.net
    감사합니다 동영상에서 설명을 너무 잘해주시는거 같아요~ 감사합니다 ㅎㅎ
    대화보기
    • 김민승
      LI와 UL을 통해서 쌍을 이루는 부모 자식과의 관계같은 태그에 대해서 학습하였습니다.
    • egoing
      같은 의미입니다. 다만 최신 html에서는 br 태그는 그냥 <br>이라고만 해주시면 됩니다.
      대화보기
      • 보안공부중
        br tag 에 관해서요,
        <br> or <br />
        이 두개는 같은 의미인 걸까요? 초보라... 알려주시면 감사하겠습니다!!
      • egoing
        반영했습니다. 진심으로 고맙습니다!
        대화보기
        • 강대성
          ㅎㅎ 2대/3대라고 하니, 쏙속 이해가 되네요.
          2대 : ol / ul + li
          3대 : table + tr + td
        • 설렁탕
          생각해 보니 그러네요 ㅋㅋㅋㅋ
          감사허이!
          대화보기
          • 영원
            줄바꿈을 하는 br을 쓰면 그게 리스트인지 구분할 수 없죠

            ul 태그의 뜻을 찾아보시면 바로 이해되실거라고 생각됩니다.
            대화보기
            • Yunsu Park
              리스트를 구분할 때, ul를 쓰는건 이 태그가 리스트에 최적화 되었기 때문인가요? 줄바꿈을 하는 br을 쓰면 안되나요?
            • Jihyun Lee
              완주까지 고고
            • 이피
              말랑말랑한 코딩을 할수 있기 바라며~~
            • 이근환
              감사합니다!:)
            • 영원
              예시를 하나 들어보겠습니다.

              1. A
              2. B
              3. C
              4. D
              .
              .
              .
              100000000. ASERFFER...

              여기서 만약에 1. A를 지우고


              1. B
              2. C
              3. D
              .
              .
              .
              99999999. ASERFFER...

              이렇게 고치라고 회사에서 상사가 명령했다고 친다면
              한 줄을 고치는데 1초가 걸렸다고 가정한다면
              1억초가 걸립니다.
              어마어마하게 많이 걸리죠?

              그렇기 때문에 ol 태그를 쓰는 것입니다
              대화보기
              • 임현준
                근데 앞에있는걸지우면 맨뒤에있는걸 맨 앞으로두면 구지 1억개를 바꾸지않아도되지않아요?
              • 임현준
                감사합니다
              • 임현준
                li =에라이~

                ㅋㅋ
              • 윤장원
                감사합니다!
              • egoing
                보통 순서가 없는 목록이 더 많이 쓰이기 때문 아닐까요?
                대화보기
                • 설렁탕
                  그런데 <ul>보다 편리한 <ol>테그는 어찌하여 순위권에 들지 않을까요?
                • Jake
                  감사합니다. ^^
                • Jaehak Kim
                  재미있어요~~^^
                • 팽석
                  이번 강의 역시 너무 재밌게 잘 들었습니다!!
                • 컵케익
                  잘 이해했습니다. 감사해요!
                • Kani Kim
                  감사합니다.
                • JN87
                  180111 감사합니다!
                • mercury
                  목소리가 좋으세요.... 쏙쏙 들어옵니다~
                • 카터필러
                  w3C school에서 가져왔네요. 참고하세요?~^^

                  An HTML table is defined with the <table> tag.

                  Each table row is defined with the <tr> tag.
                  A table header is defined with the <th> tag.
                  By default, table headings are bold and centered. A table data/cell is defined with the <td> tag.
                • 코딩학습생
                  잘 봤습니다~
                • 김민영
                  잘봤습니당!
                • aimerthis(이성민)
                  부모와 자식을 잘 알아야되겠네용
                • totoro
                  코딩을 처음 공부하는 초보입니다. 영상을 보고 아래 텍스트도 한번 읽어보고 있는데요. 초보도 이해하기 쉽고 너무 재미있어요. 좋은 수업 감사합니다.
                • Kwangsoo Koh
                  잘 봤습니다 ^^
                • 완료!
                • goosen
                  많이 배우고갑니다 감사합니다^^
                • Deen
                  잘봤습니다 ~ ^^
                  부모와 자식태그 이해 잘했습니다.
                • 김정윤
                  잘봤습니다.
                • 차녕
                  li ; list
                  ul ; unordered list
                  ol ; ordered list.
                • PassionOfStudy
                  2018-01-08 - 첫 번째 수강완료!
                • Seonghee Park
                  목록 완성~~
                • 비오비
                  좋은 강의 감사합니다.
                • 이수현
                  감사합니다.^^
                • 정보권
                  잘봤어요
                • slowandsteady
                  신기하네요~
                • 상원중 건축자
                  잘 봤습니다.
                  선생님이 재밌으셔서 귀에 쏙쏙 들어오네요.
                  신청을 하길 잘 했네요ㅎㅎ^^
                • 강동곤
                  잘봤습니다!
                • 강마에
                  감사히수업듣고있습니다
                  문법에 약간 다르게 표현되어도 이해하고 학습하는데 전혀 문제되지 않고있습니다
                  돈내고 하는 수업보다 훨씬 마음속 깊히 진한 감동이 옵니다
                • BY Chin
                  20180105감사합니다.
                • koreano1cfp@paran.com
                  "태그 간의 관계를 나타내는 표현 인"
                  위에서는 "표현 인"을 "표현인"으로 수정해야 함.

                  "우리 기획서를 한번 보시죠."
                  위에서는 "한번"을 "한 번"으로 수정해야 함.

                  "붉은색으로 표시한 목차부분입니다."
                  위에서는 "목차부분"을 "목차 부분"으로 수정해야 함.

                  "이 부분을 완성할꺼예요."
                  위에서는 "완성할꺼예요."를 "완성할 거에요."로 수정해야 함.

                  "예제에 목차를 추가해볼께요."
                  위에서는 "추가해볼께요."를 "추가해 볼게요."로 수정해야 함.

                  "목차를 표현할 때 쓰라고 태그를 마련해두었습니다."
                  위에서는 "마련해두었습니다."를 "마련해 두었습니다."로 수정해야 함.

                  "앞에 두글자는요?"
                  위에서는 "두글자"를 "두 글자"로 수정해야 함.

                  "아래와 같이 코드를 작성해보셔요."
                  위에서는 "작성해보셔요."를 "작성해 보세요."로 수정해야 함.

                  "우리 수업의 참가자 이름을 적어볼께요."
                  위에서는 "적어볼께요."를 "적어 볼게요."로 수정해야 함.

                  "1억개라고 생각해보세요."
                  위에서는 "생각해보세요."를 "생각해 보세요."로 수정해야 함.

                  "여러분 어떻게 해야하나요?"
                  위에서는 "해야 하나요"를 "해야 하나요"로 수정해야 함.

                  "바로 이런 절망감속에서"
                  위에서는 "절망감속에서"를 "절망감 속에서"로 수정해야 함.

                  "우리를 구원해주는 것이 코딩입니다."
                  위에서는 "구원해주는"을 "구원해 주는"으로 수정해야 함.

                  "예제를 아래와 같이 변경해봅시다."
                  위에서는 "변경해봅시다."를 "변경해 봅시다."로 수정해야 함.

                  "ul 태그가 ol 태그로 변경 되었습니다."
                  위에서는 "변경 되었습니다."를 "변경되었습니다."로 수정해야 함.

                  "이렇게해서 우리의 프로젝트에 목차를 추가했습니다."
                  위에서는 "이렇게해서"를 "이렇게 해서"로 수정해야 함.
                • 김병채
                  수업 잘 들었습니다 ㅎ
                • 이유리
                  감사합니다.
                버전 관리
                egoing
                현재 버전
                선택 버전
                graphittie 자세히 보기