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. jethro
    테이블 테두리는 style 속성이 추가 되어야 합니다.
    table, td 태그마다 추가하기에는 많아서
    태그안에 넣지 않고 다음과 같이 해보세요.
    <body>태그 다음에 넣어둬도 동작할 겁니다.
    <style>
    table {
    border: 1px solid gray;
    border-collapse: collapse;
    }
    th, td {
    border: 1px solid gray;
    }
    </style>
    대화보기
    • 내일은프로그래머
      테이블 테두리는 원래 안나오는건가요?^^동영상대로 작성했는데 테두리는 없네요.ㅡㅜ
    • nlds
      감사합니다
    • 이예나
      와..정말 좋은 강의입니다.. 이렇게 코딩이 쉽게 느껴지다니!
    • 블루노트
      강의 감사합니다
    • 햅싸
      감사합니다
    • kiho lee
      감사합니다~^^
    • Shinhee Lee
      이 강의를 기점으로 봤어요가 1000명대에서 900명대로 떨어지는군요! 계속 쭉쭉 나아가보렵니다!!!
    • 김언성
      질문 하나 합니다!
      제가 크롬으로 html파일을 불러와서 작업과 동시에 계속 변화를 확인하면서 나아가는 중입니다.
      <h1>HTML</h1>
      <p>Hypertext Markup Language (HTML) is the standard markup language for <strong>creating <u>web</u> pages</strong> and web applications.Web browsers receive HTML documents from a web server or from local storage and render them into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.
      <img src="coding.jpg" width="100%">
      </p><p style="margin-top:45px;">HTML elements are the building blocks of HTML pages. With HTML constructs, images and other objects, such as interactive forms, may be embedded into the rendered page. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items. HTML elements are delineated by tags, written using angle brackets.
      </p> 여기까지는 크롬상에서 펼쳐봤을때 명령한대로 글자 크기도 바뀌고, 사진도 들어가고 잘 나오는데요!
      리스트를 넣는 순간
      <ol>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
      </ol> 를 입력하는 순간 모든 입력값들이 출력값으로 나오지 않고 입력값 그대로 출력됩니다 ㅠ!
      그래서 뭐가 문제인지 인터넷을 뒤지다
      <!DOCTYPE html>
      <html>
      <head> 을 선언해줬어요. 그렇게 하니 다시 또 잘 출력되더군요!

      위 강의 자료에서는 doctype과 헤드를 선언하지 않아도 출력이 잘되는 이유는 뭔가요?

      .... 다음 강의에 바로 나오군요. 어렵게 배웠군!
    • 별별이
      180423 / 감사합니다
    • heetae
      2018.4.21 좋은 강의 항상 감사합니다ㅎㅎ
    • 빨리 생활코딩과 같은 웹페이지를 만들고 싶네요
    • 김수환
      유용한 태그들 잘 보고 갑니다.
    • 솔백아
      2018.04.17 잘 봤습니다 감사합니다!
    • Dreaming_Joyy
      2대 가족 tag(ex. <li>&<u(o)l>) 와 3대 가족 tag(ex. table)처럼 순서도 하듯 묶음 tag가 있다는 것이군요!! <ul도 여러번 쓰면 계속 단계가 내려가네요ㅎㅎ ul은 앞에 숫자가 붙지 않는 경우에 list 를 하면 되고, ol은 숫자가 붙는 경우에 쓰면 되겠지요!! List tag 오늘 잘 배웠습니다!
    • egoing
      비교 하신 태그들을 정확하게 알려주셔요. 질문이

      ol vs ul 인지
      ol vs li 인지가 불분명하네요.
      대화보기
      • 김은일
        이 동영상만 보면 ul코드와 li 코드의 장점을 잘 모르겠어요.
        리스트를 쓸 때는 ol li가 훨씬 간편하고 효과적인 거 아닌가요?
      • Yuri Kim
        리스트 쓰려고 h1 태그 달아 놓은 앞에 HTML CSS JavaScript 를 썼더니 모든 태그들이 웹 상에서 표현되지 않네요ㅠㅠ 왜 이러는걸까요?? 도와주세요ㅠㅜ
      • 카추
        감사합니다 선생님!!!!!!!!!!!
      • 좋은 강의 감사합니다.
      • 정홍
        유용한 강의 정말 잘 듣고 있습니다!! 질문을 어디에 하고 싶은데... 동영상과 같이 블락을 하고 tab을 눌렀는데, 아토미에서는 반영이 되는데, 웹사이트에서는 반영이 안되네요. 왜일까요 ㅠㅠ 똑같이 했는데 ㅠㅠ
      • 컴과재학생
        정말 감사합니다
        매일 많이 배워가요~
      • 감사합니다
      • 제갈량
        <ul>태그와 <ol> 태그는 기본적인 속성이 정해져있습니다.
        <ul>태그는 "type=circle" 속성이,
        <ol>태그는 "type=1" 속성이 암묵적으로 포함되어 있습니다.
        구지 이걸 적어주지 않으셔도 됩니다.

        하지만, 속성을 바꾸고자 한다면
        <ul>태그 안에 속성을 "type=square"로 속성을 지정하면 원이 아닌 사각형으로 나타나고,
        <ol>태그 안에 속성을 "type=a" 로 지정하면 숫자가 아닌 알파벳으로 나타나게 됩니다.
      • 제갈량
        <br>태그는 어떻게 쓰건 상관은 없습니다.
        </br>로 쓰거나 <br /> 다 통용됩니다.
        저는 편의상 <br /> 로 자주 씁니다.
        대화보기
        • 혹시 설명해주실수 있으신가요? 잘 이해가 안가서요.
          대화보기
          • TiaFenrir
            좋은강의 잘들었습니다.
          • 웅이
            강의 정말 잘 듣고 있습니다.
            질문 한가지 있는데요,
            ul태그에서는 리스트의 숫자 앞에 점이 있는데,
            ol 태그로 넘버링을 하면 그 점들이 없어지네요.
            그 부분까지는 커버가 안되고, 숫자만 일괄적으로 바꿀 수 있는건가요?
          • Jeans Jinpil Kim
            감사합니다~ 잘듣고있습니다 ^^
          • 김현
            하...진짜명강의...이거다듣고 복습할거에요
          • 정삿갓
            감사합니다 ^^
          • 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>테그는 어찌하여 순위권에 들지 않을까요?
                        버전 관리
                        egoing
                        현재 버전
                        선택 버전
                        graphittie 자세히 보기