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. 감자
    22.11.23 복습 다시시작!
  2. 빵먹고싶다
    22.11.21
  3. 햄봉이
    2022.11.14 야호
  4. 무즈
    22.11.1 가보자고
  5. 신귀중
    감사합니다.. 22.10.28
  6. 22.10.26 화이팅
  7. 221018
  8. Luckyway
    알고있는 언어로 해결이 안되면 다른 언어를 찾아보는 습관을 들여야겠네요.
    친절한 답변 감사해요!
    대화보기
    • 김시준
      자바스크립트를 활용하시면 말씀하신 종류의 반복 작업들을 편리하게 할 수 있습니다 :)
      WEB2 강의를 보시면 도움이 되실 듯하네요!
      https://opentutorials.org......085
      대화보기
      • Luckyway
        입력한 값이 많을 때는 <ol> 태그 내의 내용 모든곳에 <li>를 일일이 입력해야하나요? 좀 더 편리한 방법은 없을까요?

        예시)
        <ol>
        <li>하나</li>
        <li>두리</li>
        <li>석삼</li>
        <li>...

        이런 식으로 1만개씩 이어질때.
      • 엠제이
        10112022
      • 보통사람 박코딩
        할수있다
      • 아아뜨아
        221004
      • 김태현
        221003
      • 다응
        221003
      • been06
        220923
      • 코딩드림
        22.09.21
      • 양양
        5:38 쯤에 탭키를 누르기도 전에 ul만으로도 안쪽으로 들여쓰기가 되던데 맞는건가요? 그후로 탭키를 누르면 똑같더라구요
      • reboots
        완료
      • 코딩왕초보
        2022.09.14
      • solfany
        2022.09.03
      • 당당
        2022.09.03
      • 새싹코린
        2022.09.02
        너무 신기...+0+
      • jwon5273
        목차까지 만드니 뿌듯하네요ㅎㅎ
      • 22.08.28
      • 프라쟌시아
        이거 궁금했는데, 감사합니다!
        대화보기
        • 22.08.20 얼마전 우연히 유투브 클립을 보게되었는데요.

          이건희 회장의 어록...“마누라, 자식만 빼고 다 바꿔봐” “기술과 끈기, 지식이 합친 예술품” / 14F

          https://youtu.be......i-I

          투박한 말이지만, 생각과 행동의 무게가 얼마나 무거운 것인지 새삼 느끼게 합니다.

          동기 부여 차원에서 공유합니다.
        • 참새튀김
          22.08.14
        • 모카
          2022.08.14
        • 김제갈
          22.08.10
        • 이나츄
          22.08.10 완료했습니다.
        • 장훈
          22.08.09 완료
        • 더맑은
          2022.08.09 완료했습니다
        • 헤밍웨이
          22.08.08

          <h1> What I've learned today </h1>
          <ol>
          <li>HTML</li>
          <li>Tag</li>
          <li>Attirbute</li>
          </ol>
        • Daniel
          2022.08.08 완료했습니다.
        • 가능해
          2022.08.05
        • 뿔고래
          HTML의 태그는 혼자서 쓰일 수 있는 <br>태그가 있지만 대부분 쌍을 이루어서 사용된다.
          <p></p>와 같이 쌍을 이루는 태그가 있는데 여기에서 더 나아가 부모와 자식 같은 관계를 이루는 태그도 있다.
          그런 태그들 중 하나인
          <ol>
          <li></li>
          </ol>
          을 배워보자
        • 22.08.02
        • 20220726
          2022.08.01
        • 라라
          20220730
        • 라라
          20220729
        • 22.07.27
        • 히야
          2022년 7월 25일 수강 완료했습니다. 감사드립니다!
        • 220725 감사합니다
        • 코드만다
          22.07.23
        • 동글
          22.07.21 감사합니다:D
        • 코딩러버
          커서를 여러 곳에 한 번에 두는 것을 비쥬얼 스튜디오 코드에서는
          Ctrl + 클릭이 아닌 Alt + 클릭으로 하네요.
        • 엽종
          22.07.12
        • 카시오
          22.07.11
        • 김혜민
          22.07.09
        버전 관리
        egoing
        현재 버전
        선택 버전
        graphittie 자세히 보기