생활코딩

Coding Everybody

코스 전체목록

닫기

부모 자식과 목록

 

 

---

 

 

이번 시간에는
태그 간의 관계를 나타내는 표현인
부모(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. Hoxy
    2024.03.14
  2. hanryang
    [부모 자식과 목록]
    1. 부모 : ul (unordered list)
    2. 넘버링 부모 : ol (ordered list)
    3. 자식 : li (list)

    ex)
    <ul>
    <li>1.html</li>
    <li>2.css</li>
    <li>3.javascript</li>
    </ul>

    <ol>
    <li>html</li>
    <li>css</li>
    <li>javascript</li>
    </ol>
  3. ikurpw(iKnowYourPassword) : )
    Oederd List <ol>
    Unordered LIst <ul>

    html에서의 부모, 자식 태그, 그리고 종속관계에 대한 개념을 배웠다.
  4. beginner
    20240228
  5. 사슴튀김소스
    24.2.18
  6. 안제경
    2024.02.15
  7. 김돕희
    태그의 중첩을 부모 자식간의 관계라고 볼 수 있다.
    ul, ol 는 부모 태그이고, li 는 자식 태그라고 보면 된다.
    ol 은 순서가 있는 리스트를 만들 수 있고, ul 은 순서가 없는 리스트를 만들 수 있다.
  8. 미래도비
    0205
  9. 4월의눈꽃
    20240129
  10. 헬로키팅
    2024.01.20
  11. 레나
    2024.01.20 완료
  12. 정현준
    24.01.16 완료
  13. Sansol Park
    멀티 커서 기능이 작동하지 않는다면, 그 원인은 여러 가지가 있을 수 있습니다.

    키보드 단축키 충돌: 사용중인 다른 애플리케이션이나 운영체제 설정에서 동일한 단축키를 사용하고 있는 경우, 해당 기능이 올바르게 작동하지 않을 수 있습니다. 이 경우, 충돌하는 단축키를 변경하거나 끄는 것이 필요합니다.

    소프트웨어 버전: 만약 사용 중인 코드 에디터(예: Visual Studio Code, Sublime Text 등)에서 멀티 커서 기능이 제공되지 않거나, 이전 버전을 사용하고 있는 경우 업데이트가 필요할 수 있습니다.

    에디터 설정: 코드 에디터의 설정이나 확장 프로그램, 플러그인 등에 따라 멀티 커서 기능이 제한되거나 변경될 수 있습니다. 에디터의 설정을 확인하고 필요한 경우 수정해야 합니다.

    잘못된 조작: 멀티 커서 기능을 사용하는 방법이 잘못되었을 수도 있습니다. 예를 들어, 일부 에디터에서는 Ctrl 키를 누른 상태에서 마우스를 클릭하는 대신 Alt키를 누르거나, 특정 키보드 조합을 사용해야 할 수 있습니다.
    이러한 문제들을 확인하고, 문제가 발생한 원인을 찾아 해결해야 합니다.
    대화보기
    • Sansol Park
      Visual Studio Code(VSCode)는 멀티 커서 기능을 지원합니다. 멀티 커서 기능은 여러 위치에서 동시에 편집을 할 수 있어 매우 유용한 기능입니다.

      VSCode에서 멀티 커서를 사용하는 방법은 다음과 같습니다:

      여러 위치를 클릭하면서 Alt 키를 누르고 있습니다. 이렇게 하면 각 클릭 위치에 커서가 추가됩니다.
      커서를 두고 싶은 시작점에서 클릭한 후, Ctrl+Alt+방향키(위/아래)를 눌러 멀티 커서를 생성합니다.
      특정 단어를 모두 선택하고 싶다면, 해당 단어를 클릭한 후 Ctrl+Shift+L을 눌러 해당 단어가 있는 모든 위치에 커서를 추가합니다.
      이 외에도 VSCode에서는 다양한 멀티 커서 관련 기능과 단축키를 제공하고 있습니다. 이를 통해 코드 편집의 효율성을 크게 높일 수 있습니다.
      대화보기
      • ECLECTIC
        시작
      • Sansol Park
        아래는 GPT4가 질문에 답변한 내용입니다.

        Visual Studio Code에서는 여러 줄에 걸쳐 같은 위치에 커서를 두어 동시에 코드를 입력하거나 편집하는 것이 가능합니다. 이를 '멀티 커서(Multi-cursor)' 기능이라고 하며, 다음과 같은 방법으로 사용할 수 있습니다:

        Alt를 누른 상태에서 클릭: 원하는 위치에 커서를 추가합니다.
        Ctrl(또는 Cmd) + Alt + 아래쪽 혹은 위쪽 화살표키: 현재 커서 위치에서 위나 아래에 새 커서를 추가합니다.
        Ctrl(또는 Cmd) + D: 단어를 선택하고 같은 단어를 찾아 다음 커서를 추가합니다.
        Ctrl(또는 Cmd) + Shift + L: 선택한 단어와 일치하는 모든 인스턴스를 찾아 각각에 커서를 추가합니다.
        이 기능들을 사용하면 한 번에 여러 줄에 코드를 입력하거나 편집하는 것이 매우 편리합니다. 그러나 한 번에 여러 줄에 같은 코드를 입력하는 것이 아닌, 여러 줄에 걸쳐서 서로 다른 코드를 입력하는 것은 자동으로는 불가능하며, 각 줄에 대한 입력이 필요합니다.
        대화보기
        • 24.01.10
        • 드솔
          2024.01.08
        • 김현지
          2024.1.4
        • 축구는개발,마음은개발
          24.01.04
          WEB1 - 12
        • 로삶
          2023.12.29
        • 호원빅베어
          완료!
        • 20231215 done
        • 집게사장
          2023.11.20 수강완료
        • 박화경
          2023.11.16.목 - 2nd (5)
        • nicktheman
          23.10.26 good
        • KunWoo
          231023
        • abiooi
          20231021
        • 19.10.2023
        • 샌디에고러버
          231018 수강 완
        • 코린이
          visual studio code는 한번에 지정해서 코드 입력하는게 불가능한가요??
        • 코율
          231015 3일차 완
        • 한비치야
          230927 p 2:48
        • 4Tomorrow
          부모와 자식 관계 태그 있는데 ul과 li의 관계임.
          순서있는 ol.
          br 쓰지 않고 이걸로 씀. 230926
        • 리니웹
          230926 완료
        • 율무차
          2023.09.23 완료
        • 정연세
          230921완
        • LI_ANLI
          23..9.18 완료
        • 이월겨울
          23.09.13 완료
        • 굴러들어온돌맹이
          230908 완
        • 정윤수
          23.09.04 완
        • carpediem
          2023.09.02 완료!!
        • 윤슬
          2023.08.24 완료
        • 30늦은나이아니라고해줘
          답변주셔서 정말 감사합니다.
          제가 해당 글을 회사에서 보고 있었는데 영상을 보지 않고 텍스트로만 봤었습니다.
          <ul> 태그가 아래 참가자 목록이 지워지면서 두개가 있던 <ul>태그중 하나가 없어지자
          자동으로 <ol>태그로 변경된걸로 이해했었습니다. 하지만 오늘 영상을 보니
          <ol> 태그로 변경시 숫자를 부여하지 않아도 리스트가 된다는 것도 알았고, 태그사이트에서 직접 찾아보니 이해가 되네요 답변감사합니다 ㅎㅎ
          대화보기
          • 뭐가 잘못됐다고 생각하시는지 모르겠지만 들여쓰기가 안된다는 말씀이신 거면 tab 설정을 vscode에서 해주시면 됩니다 구글에서 확인해보시면 될 듯!
            대화보기
            • 30늦은나이아니라고해줘
              2023-08-22 완료 근데 변경이 안되요.... vscode 사용중인데

              <ul>
              <li>1. 작가란 무엇일까요?</li>
              <li>2. 작가? 아니 그냥 일반인 난 대단치 않아</li>
              </ul>
              <ul>

              </ul>

              이렇게 나오는데 혹시 뭐가 잘못된걸까요?
            • 나쵸
              20230821 완료
            • 박은서
              3:20 쯤에 여러곳의 커서가 나오는거 안나올수도 있는건가요????
            • 양념묻은비니
              230815 완료
            • 니코니코드
              23.08.10.
            버전 관리
            egoing
            현재 버전
            선택 버전
            graphittie 자세히 보기