728x90

1. 부모 자식과 목록 : https://opentutorials.org/course/3084/18408

 

부모 자식과 목록 - 생활코딩

--- 이번 시간에는 태그 간의 관계를 나타내는 표현인 부모(parent),자식(child)에 대해서 알아보겠습니다. 아래 코드를 보시죠. (저런 이름의 태그는 없습니다) parent 태그에 대해서 child 태그를 자식 태그라고 합니다. 또 child 태그에 대해서 parent 태그를 부모 태그라고 합니다. 아래 태그를 보시면 p 태그가 a 태그의 부모 a 태그가 p 태그의 자식입니다. opentutorials 그런데 a 태그는 꼭 p 태그의 자식이어야

opentutorials.org

서로 포함관계로 연관되어 있을 때 포함하고 있는 태그를 부모 태그, 포함된 태그를 자식 태그라고 합니다. HTML의 태그는 부모 자식의 관계가 자주 바뀝니다. 태그 중에는 항상 부모-자식 태그로 구성된 태그가 있습니다.

 

목차를 만들어 보려고 합니다. 목록을 표현해주기 위해서는 <li>를 사용합니다.

<li>1. 앨범</li>
<li>2. 공연</li>
<li>3. 방송</li>
<li>4. 영화</li>

<h1><strong><u>아이유</u>(이지은 | IU)</strong></h1>
<img src="iu_profile.jpg" width="30%">
<p>출생     1993년 5월 16일<br>
소속사   카카오M<br>
수상     2018년 제 32회 골든디스크 어워즈 디지털음원부문 대상<br>
사이트   인스타그램, 페이스북, 유튜브<br></p>

<p>대한민국의 가수 겸 배우. 본명은 이지은이며, 아이유(IU)는 예명이다.
아이유(IU)는 '음악으로 너와 내가 하나가 된다'라는 뜻을 가지고 있다.
2008년에 데뷔하였다. 국민 여동생이라고도 불렸다.</p>

<p style="margin-top:40px;">현 시대(2010년대 이후) 여성 솔로 가수 중에서 독보적인 위치를 점하고 있는
한국 가요계의 여왕이자 그 어떤 장르도 소화해내는 만능형 가수라는 평가를 받는다.
2010년 잔소리와 좋은 날로 부흥한 이후 10년째 가요계 정상의 위치를 굳건히 지키며 롱런하고 있는 가수다.</p>

리스트가 1종류이면 괜찮지만 2가지 이상일 때는 구분이 힘든데 이때 <li>의 부모 태그인 <ul>을 사용합니다. ul은 Unordered List의 약자입니다.

<ul>
  <li>1. 앨범</li>
  <li>2. 공연</li>
  <li>3. 방송</li>
  <li>4. 영화</li>
</ul>
<h1><strong><u>아이유</u>(이지은 | IU)</strong></h1>
<img src="iu_profile.jpg" width="30%">
<p>출생     1993년 5월 16일<br>
소속사   카카오M<br>
수상     2018년 제 32회 골든디스크 어워즈 디지털음원부문 대상<br>
사이트   인스타그램, 페이스북, 유튜브<br></p>

<p>대한민국의 가수 겸 배우. 본명은 이지은이며, 아이유(IU)는 예명이다.
아이유(IU)는 '음악으로 너와 내가 하나가 된다'라는 뜻을 가지고 있다.
2008년에 데뷔하였다. 국민 여동생이라고도 불렸다.</p>

<p style="margin-top:40px;">현 시대(2010년대 이후) 여성 솔로 가수 중에서 독보적인 위치를 점하고 있는
한국 가요계의 여왕이자 그 어떤 장르도 소화해내는 만능형 가수라는 평가를 받는다.
2010년 잔소리와 좋은 날로 부흥한 이후 10년째 가요계 정상의 위치를 굳건히 지키며 롱런하고 있는 가수다.</p>

지금은 간단하게 1. 2. 3. 4.의 목차 번호를 주고 있지만 목차 번호를 주는 태그도 있습니다. 부모 태그인 <ul>을 <ol>로 바꿔주면 됩니다. ol은 Unordered List의 약자입니다.

<ol>
  <li>앨범</li>
  <li>공연</li>
  <li>방송</li>
  <li>영화</li>
</ol>
<h1><strong><u>아이유</u>(이지은 | IU)</strong></h1>
<img src="iu_profile.jpg" width="30%">
<p>출생     1993년 5월 16일<br>
소속사   카카오M<br>
수상     2018년 제 32회 골든디스크 어워즈 디지털음원부문 대상<br>
사이트   인스타그램, 페이스북, 유튜브<br></p>

<p>대한민국의 가수 겸 배우. 본명은 이지은이며, 아이유(IU)는 예명이다.
아이유(IU)는 '음악으로 너와 내가 하나가 된다'라는 뜻을 가지고 있다.
2008년에 데뷔하였다. 국민 여동생이라고도 불렸다.</p>

<p style="margin-top:40px;">현 시대(2010년대 이후) 여성 솔로 가수 중에서 독보적인 위치를 점하고 있는
한국 가요계의 여왕이자 그 어떤 장르도 소화해내는 만능형 가수라는 평가를 받는다.
2010년 잔소리와 좋은 날로 부흥한 이후 10년째 가요계 정상의 위치를 굳건히 지키며 롱런하고 있는 가수다.</p>

 

2. 문서의 구조와 슈퍼스타들 : https://opentutorials.org/course/3084/18409

 

문서의 구조와 슈퍼스타들 - 생활코딩

--- 우리는 HTML의 문법을 마스터했다고 말씀드렸습니다. 말하자면 문장을 만드는 방법을 마스터했다고 할 수 있습니다. 더 복잡한 것은 단언컨대 존재하지 않습니다. 문장이 모이면 무엇이 되나요? 페이지가 됩니다. 페이지가 모이면 책이 됩니다. 책에는 표지가 있고, 표지에는 제목과 저자가 표기됩니다. 이처럼 정보가 많아짐에 따라서 정보를 잘 정리정돈하기 위한 체계, 다시 말해서 구조라는 것이 필요합니다. 이번 시간에는 그 구조 만드는 법을 살펴볼 것입니다

opentutorials.org

html에서 가장 많이 사용하는 5가지 태그들입니다.

먼저 <title>태그입니다. 이 태그를 사용하면 크롬이나 익스플로러에 탭에 나타나는 제목을 바꿔줄 수 있습니다.

<title>IU</title>

<ol>
  <li>앨범</li>
  <li>공연</li>
  <li>방송</li>
  <li>영화</li>
</ol>

<h1><strong><u>아이유</u>(이지은 | IU)</strong></h1>

<img src="iu_profile.jpg" width="30%">
<p>출생     1993년 5월 16일<br>
소속사   카카오M<br>
수상     2018년 제 32회 골든디스크 어워즈 디지털음원부문 대상<br>
사이트   인스타그램, 페이스북, 유튜브<br></p>

<p>대한민국의 가수 겸 배우. 본명은 이지은이며, 아이유(IU)는 예명이다.
아이유(IU)는 '음악으로 너와 내가 하나가 된다'라는 뜻을 가지고 있다.
2008년에 데뷔하였다. 국민 여동생이라고도 불렸다.</p>

<p style="margin-top:40px;">현 시대(2010년대 이후) 여성 솔로 가수 중에서 독보적인 위치를 점하고 있는
한국 가요계의 여왕이자 그 어떤 장르도 소화해내는 만능형 가수라는 평가를 받는다.
2010년 잔소리와 좋은 날로 부흥한 이후 10년째 가요계 정상의 위치를 굳건히 지키며 롱런하고 있는 가수다.</p>

현재 HTML로 작성하고 있는 인코딩 방식은 UTF-8입니다. 하지만 웹페이지에서 UTF-8로 구성하지 않으면 글씨가 제대로 나오지 않습니다. 이런 문제를 방지하기 위해서 아래와 같은 방법을 사용합니다.

<title>IU</title>
<meta charset="utf-8">
<ol>
  <li>앨범</li>
  <li>공연</li>
  <li>방송</li>
  <li>영화</li>
</ol>

<h1><strong><u>아이유</u>(이지은 | IU)</strong></h1>

<img src="iu_profile.jpg" width="30%">
<p>출생     1993년 5월 16일<br>
소속사   카카오M<br>
수상     2018년 제 32회 골든디스크 어워즈 디지털음원부문 대상<br>
사이트   인스타그램, 페이스북, 유튜브<br></p>

<p>대한민국의 가수 겸 배우. 본명은 이지은이며, 아이유(IU)는 예명이다.
아이유(IU)는 '음악으로 너와 내가 하나가 된다'라는 뜻을 가지고 있다.
2008년에 데뷔하였다. 국민 여동생이라고도 불렸다.</p>

<p style="margin-top:40px;">현 시대(2010년대 이후) 여성 솔로 가수 중에서 독보적인 위치를 점하고 있는
한국 가요계의 여왕이자 그 어떤 장르도 소화해내는 만능형 가수라는 평가를 받는다.
2010년 잔소리와 좋은 날로 부흥한 이후 10년째 가요계 정상의 위치를 굳건히 지키며 롱런하고 있는 가수다.</p>

<ol>부터는 본문을 말하고 <title>과 <meta>는 본문을 설명합니다. 본문은 <body>로 묶고 본문을 설명하는 부분은 <head>로 묶습니다. 그리고 문서 전체를 <html>로 묶습니다. 그리고 제일 상단에 html로 작성했다는 의미에서 <!doctype>을 기재해줍니다.

<!doctype html>
<html>
  <head>
    <title>IU</title>
    <meta charset="utf-8">
  </head>
  
  <body>
    <ol>
      <li>앨범</li>
      <li>공연</li>
      <li>방송</li>
      <li>영화</li>
    </ol>

    <h1><strong><u>아이유</u>(이지은 | IU)</strong></h1>

    <img src="iu_profile.jpg" width="30%">
    <p>출생     1993년 5월 16일<br>
    소속사   카카오M<br>
    수상     2018년 제 32회 골든디스크 어워즈 디지털음원부문 대상<br>
    사이트   인스타그램, 페이스북, 유튜브<br></p>

    <p>대한민국의 가수 겸 배우. 본명은 이지은이며, 아이유(IU)는 예명이다.
    아이유(IU)는 '음악으로 너와 내가 하나가 된다'라는 뜻을 가지고 있다.
    2008년에 데뷔하였다. 국민 여동생이라고도 불렸다.</p>

    <p style="margin-top:40px;">현 시대(2010년대 이후) 여성 솔로 가수 중에서 독보적인 위치를 점하고 있는
    한국 가요계의 여왕이자 그 어떤 장르도 소화해내는 만능형 가수라는 평가를 받는다.
    2010년 잔소리와 좋은 날로 부흥한 이후 10년째 가요계 정상의 위치를 굳건히 지키며 롱런하고 있는 가수다.</p>
  </body>
</html>

3. HTML 태그의 제왕 : https://opentutorials.org/course/3084/18418

 

HTML 태그의 제왕 - 생활코딩

우리는 지금까지 문서를 만드는 방법을 충분히 자세히 살펴봤습니다. 태그를 결합하는 방법을 완전히 마스터했고, 빈도수가 절대적으로 높은 태그들을 살펴봤습니다. 앞으로 배울 것 보다, 지금까지 배운 것에 기쁨을 느끼셨으면 좋겠습니다. 기쁘시죠? ㅎㅎ 우리 수업에는 두개의 혁명적 순간이 있습니다. 하나는 태그라는 문법을 배운 순간이고, 또 하나는 지금부터 설명할 태그를 알게 된 순간입니다. 이 태그가 무엇일지 맞춰 보세요. 태그가 웹의 왕국이라면 지금부터 설명

opentutorials.org

<a>는 링크를 사용할 때 사용하는 태그입니다. 인스타그램, 페이스북, 유튜브에 링크를 걸어보겠습니다. 링크를 새로운 탭에서 열고 싶을 땐 target="_blank" 값을 주면 됩니다. 링크를 클릭하기 전에 어떤 링크인지 정보를 주고 싶을 때는 title=""값을 주면 됩니다.

<!doctype html>
<html>
  <head>
    <title>IU</title>
    <meta charset="utf-8">
  </head>

  <body>
    <ol>
      <li>앨범</li>
      <li>공연</li>
      <li>방송</li>
      <li>영화</li>
    </ol>

    <h1><strong><u>아이유</u>(이지은 | IU)</strong></h1>

    <img src="iu_profile.jpg" width="30%">
    <p>
      출생     1993년 5월 16일<br>
      소속사   카카오M<br>
      수상     2018년 제 32회 골든디스크 어워즈 디지털음원부문 대상<br>
      사이트   <a href="https://www.instagram.com/dlwlrma/?hl=ko" target="_blank" title="IU instagram">인스타그램</a>,
              <a href="https://www.facebook.com/iu.loen/" target="_blank" title="IU facebook">페이스북</a>,
              <a href="https://www.youtube.com/channel/UC3SyT4_WLHzN7JmHQwKQZww" target="_blank" title="IU youtube">유튜브</a><br>
    </p>

    <p>
      대한민국의 가수 겸 배우. 본명은 이지은이며, 아이유(IU)는 예명이다.
      아이유(IU)는 '음악으로 너와 내가 하나가 된다'라는 뜻을 가지고 있다.
      2008년에 데뷔하였다. 국민 여동생이라고도 불렸다.
    </p>

    <p style="margin-top:40px;">
      현 시대(2010년대 이후) 여성 솔로 가수 중에서 독보적인 위치를 점하고 있는
      한국 가요계의 여왕이자 그 어떤 장르도 소화해내는 만능형 가수라는 평가를 받는다.
      2010년 잔소리와 좋은 날로 부흥한 이후 10년째 가요계 정상의 위치를 굳건히 지키며 롱런하고 있는 가수다.
    </p>
  </body>
</html>

 

728x90
저작자표시

'Project > 생활코딩 코딩야학 7기' 카테고리의 다른 글

생활코딩 코딩야학 7기 - 6일차  (0) 2020.01.15
생활코딩 코딩야학 7기 - 5일차  (0) 2020.01.09
생활코딩 코딩야학 7기 - 3일차  (0) 2020.01.07
생활코딩 코딩야학 7기 - 2일차  (0) 2020.01.06
생활코딩 코딩야학 7기 - 1일차  (0) 2020.01.04

+ Recent posts

티스토리툴바