생활코딩 WEB1 - 12. 부모자식과 목록 > HTML

생활코딩 | WEB1 - 12. 부모자식과 목록

본문

※ 영상을 선명하게 보기 안내

유튜브 영상에서 오른쪽하단에 톱니바퀴를 클릭합니다.
팝업목록에서 "품질" 선택하세요.
원하는 해상도를 선택해주세요.

※ 모바일에서 Wifi가 아니라면 데이타가 소진될 수 있으니 주의바랍니다.

생활코딩님의 HTML강의 청각장애인을 위한 자막

자 지금 보시는 것처럼 현재 2개의 태그가 있네요 페어런트 라는 태그와

차있 이라는 태그는
이렇게 태그가 서로 펌 관계로 연관되어 있을 때
음 포함하고 있는 태그를 부모 태그
또 포함된 택을 자식 태그 라고 부릅니다
html 에 있는 여러 태 그들은 서로 부모 자식 관계가 막 바뀌어요
말이 좀 이상하죠 예 그런데 어떤 태그 들은
자식이 있는 곳에 항상 부모가 있고 부모가 있는 곳에 항상 어떤 특정한
자식 태그가 있는 아주 사이가 좋은 태그 들이 몇 개가 있습니다
이번 시간에는 그런 태그들을 좀 살펴 볼 거고 그리고 우리 기획서를 좀
보죠
자 우리 기획서 에서 지금 아직 우리가 하지 않은 부분이 바로
엄 옥 차입니다 html css 자바스크립트
그래서 저 목차를 완성 할 거고요 그걸 하는 과정에서 부모 자식 관계
예당 되는 태그를 살펴볼 겁니다 자 그러면 저는 여기에서 이 html
이라고 되어 있는 이 제목 위쪽에 다가 목차를 한번 써보겠습니다
이렇게 다가
코 html
css
자 여러분이 자동 완성 되면 취소 하시면 됩니다
얘가 우리가 쓰고 있는 도구가 우리 편하라고 뭔가 자동으로 해주는데 가끔
우리를 귀찮게 할 때가 있어요
자바스크립트 자 이렇게 하고 리로드 하면 어떻게 되나요
이렇게 됩니다 제 근데 이건 우리가 원하는 게 아니란 말이죠 우리는 목
차 답게
줄바꿈이 되었으면 좋겠어요 자 그럼 여러분 줄바꿈 알람 어떻게 될까요
우리가 배웠던 거 있잖아요
여기에 낙하
br
br br 이렇게 하고 그리고 수업에 순서 답게
앞에다가 숫자를 이렇게 붙여주면
그럴 뜻하게 비슷하게 되죠 자 그런데
html 을 만드는 사람들은 목차를 쓸 때
사용하시라고 어떤 태그를 고안해 냈습니다
그 여러분은 그 태그를 쓰셔야 됩니다
그래야지만 그 태그가 의미의 받게 사용되는 거라고 할 수가 있는 것이죠
웹페이지가 더 가치 있게 되는 거죠 자 그럼 그 때 사용하는 것이 바로
목차 인데요
목록 이라고도 할 수 있고요 그럼 목록 이라는 말이 영어로는 뭔가요
리스트 리스트 에서 두 번째 글자
두 글자가 뭔가요 앞에서부터 두고 있자 l 아이죠
즉 여러분은 li 라는 태그를 쓰면 됩니다
자 여기 있는 이 br 이라고 되어 있는 부분을
지워 버리세요 예 그리고 요 앞에 다가
li 라고 이렇게 하시면 됩니다
제가 어떻게 했냐구요 신기 하신가요
왜 보세요 안될수도 있습니다
자 여기에 서 어 맥을 쓰시는 분들은 커맨드 키를 누르고 요
윈도우를 쓰시는 분들은 컨트롤 키를 누르고 있는 상태에서 클릭
클릭을 해보시면 보시는것처럼 신기하게 커서가 여러곳에 생기죠
자 그리고 꺽쇠 에라 일을 해 보시면 요렇게 됩니다
아주아주 편리한 기능이죠
자 이렇게 되면 적이 있는 각각의 항목들이 리스트가 되서 리로드 했을 때
이런 모습이 나옵니다
그랬죠
자 그런데 우리 수업의 그 내용과는 상관 없지만 제가 뭔가 설명하기
위해서
여기에다가 우리 수업의 참가자들의 닉네임을 한번 써볼게요
예를 들면 이 거인
k 880 어 머
유빈 이렇게 하고 여기를 li 로 똑같이 한번 해볼까요
페라 2
li 이렇게
리로드 한번 해 볼게요 자 이렇게 됐습니다
자 제가 지금 밑에 추가한 3개의 목록은
우리 수업의 참여자에 요 위에 있는 우리 수업의
순서 하구요 자 이런 경우에 음
여러분 어떻게 하고 싶겠어요 이렇게 되면 서로 9분이 안 되니까
띄어쓰기를 좀 하고 싶을 거 아니에요 그럼 뭐 이렇게 해 볼 수 있겠죠
자 이렇게 해도 뭐 크게 틀렸다고 할 수는 없겠지만 이런 경우에 쓰라고
고안된 태그가 있어요
바로 li 태그의 부모인
ul 이라는 태그입니다
자 보시는 것처럼 ul 이라는 태그를
이렇게 했어요
이렇게 또 너 때 보기가 싫죠 그럼 이렇게 선택해서
탭 키를 누르시면 안쪽으로 들여쓰기 가 될 겁니다
자 그리고 한번 리로드를 해보면 아까와 결과는 같습니다
즉 li 와 같은 항목들은
그 항목이 어디서부터 어디까지가 서로 연관된 항목 인지를
경계를 짓기 위한 그룹핑 을 하기 위한 부모 태그가 필요한 것이죠 그래서
li 태그는 반드시 부모 태그를 갖고 있다
그리고 부모 태그 인 ul 태그는 반드시 자식 태그를 가지고 있다 라는
것을 기억해 주시면 되겠습니다
이건 더 이상 필요 없으니까 이제 지울게요 자 이렇게 됐습니다
자 제가 여러분께 종종 말씀드리는 건데 우리가 코딩을 공부할 때는
극단적 싸고 가치를 합니다 예
왜냐하면 우리는 행복한 상황에서 코딩을 하지 않습니다 어떤 경우에 코딩을
해요
충분히 불행할 때 어떤 경우에 충분히 불행할 수 있는 점 예제를 보죠
자 여기 있는 것이 세 개가 아니라 1억개 라고 생각해 보세요 그러면
123 이라는 숫자를
1억 뻔 써 줘야 될 겁니다 그런데 누가 여러분들의 더 와서
어 미안해 여기 있는 첫 줄은 이제 주어 줬으면 좋겠어 라고 이렇게 하면
여러분 여기 있는 일을 먼로 바꿔야 되요 1로 바꾸고
2로 바꾸고 해서 이렇게 를 수정해야 됩니다 여러분이 손이 정말 빨러 서
하나의 0.1 초 가 걸린다고 해도
어 제가 옛날에 게서 했던 기억으로는 115 일이 걸립니다
이렇게 면 이런 불행한 경우에 코딩을 하는 것이 코딩을 하지 않는 것보다
쉽겠죠 아 극단적 싸고 를 해야 됩니다
공감할 수 있어야 되요 자 이런 경우에 우리를 구원해 줄 수 있는 방법이
있습니다 뭐냐
여기 있는 요 유에 를 o 엘로 바꾸는 거예요
그리고
여기 있는 숫자를 치우고
한번 리로드 해볼까요 짜잔
앞에 자동으로 숫자가 넘버링 되는 것을 볼 수가 있습니다
만약에 누가 와서 우리한테 그 우리가 싫어하는 그 분이 와서
앞에 html 을 미안해 또 추가해 줘 그러면 우리는 똑같은 표정을
지으면서 0점 0점 이전 아니지 않 1초만에 내용을 추가하고 1시간
뒤에 가서 힘들게 했다 라고 얘기할 수 있게 되는 것이죠 자 보시는
것처럼 이렇게 하면
예 숫자가 자동으로 넘버링 되는겁니다
자 그러면 아까 우리가 봤던 5
지금 우리가 보고 있는 ol 이란 태그와 그리고 아까 왔던
아 ul 이라는 태그 이 두가지는 공통점으로 뭐를 갖고 있어요
l 저의 를 뭐예요 리스트 의 약자입니다
그러면 앞에
ol 로 시작한다.는 거의 건 뭐의 약자 냐 면 o 더 듯 이스트
약자입니다
그러면 6l 음 뭐 약자 일까요
앞에 부정을 의미하는 un 이 붙은 언 오더 드 리스트에 학자 입니다
이렇게 하면 여러분이 기억하기가 좋겠죠
자 이렇게 해서 여러분이 우리 니까 만들고 있는 프로젝트에서 드디어
복록을 완성했고 욕 그리고 빈도수가 매우 높은 li 태그 와 ua 태그
그리고 아쉽게 순위권에 는 들어있지 않지만 ol
태그 까지 3 펴 보았습니다 자 여러분 이렇게 li 와 ul 또는 li
ol 태그를 살펴봐 쓰면 나중에 여러분들이 조금 더 복잡한 것들을 할 때
이를테면 표 를 작성한다.
표는 영어로는 테이블이 거든요 그런 경우에 테이블에 경우에는 이 la
와는 다르게
3대가 같이 다닙니다 예
li 는 2대가 같이 다 있는데 테이블은 3대가 같이 다녀요
그래서 좀더 복잡하지만 여러분 혼자서도 충분히 표를
작성하실 수 있게 될 겁니다 자 이렇게 해서 이번 시간은 여기까지
하겠습니다.