- 이미지

  → 이미지는 <img> 태그를 사용 src라는 속성에 이미지 주소를 넣어주면 된다.
  → 이 주소는 a태그에서 href 속성과 같은 방식으로 쓰면 된다.

  → 이미지에서 중요한 속성 중 하나는 alt 속성으로 이미지에 대한 정보를 텍스트로 적을 수 있는 속성

  → alt 속성을 활용하면 마크업만 보고 어떤 이미지인지 알 수 있고, 
    시각장애인용 스크린 리더기에서 해당 이미지가 어떤 내용인지 읽어줄 수 있다.
    또, 이미지를 다운받는데 실패했을 때에도 이 글자를 보여줄 수 있다.

  → width와 height 속성은 각각 너비와 높이를 정하는 속성으로 이미지를 다운 받지 않아도 크기를 
    알 수 있어서 웹 브라우저 입장에서는 훨씬 효율적으로 동작할 수 있다.
    또, 페이지를 로딩할 때 미리 자리를 비워 놓을 수 있다.

  → HTML 태그 안에서 width와 height의 크기를 지정하더라도 CSS로 얼마든지 크기를 수정할 수 있다.

- 비디오

  → 비디오는 <video>라는 태그를 사용하고, img 태그처럼 src 속성으로 파일 주소를 적어준다.

  → video 태그에는 몇 가지 속성을 더 지정해줘야 하는데 autoplay, muted, controls, width,
    height 등이 있다. 

  → autoplay라는 속성은 페이지가 로딩되면 해당 비디오가 자동으로 재생되는 기능인데,
    속성 이름만 적어주면 해당 속성을 사용하겠다는 뜻
    구글 chrome에서는 해당 기능이 동작을 하지 않고, 사파리에서 열어보면 자동재생이 동작한다

  → 자동 재생 기능은 갑자기 광고가 큰 소리로 재생된다거나 할 수 있기 때문에 사람들에게 거부감을 
    줄 수 있는 기능이다.
    그래서 chrome 브라우저에서는 muted라는 속성과 함께 사용해야 자동재생이 된다.

  → controls라는 속성은 프로그레스 바와 재생 버튼이 나타난다.

  → 비디오의 크기는 이미지와 같이 width, height의 값을 지정할 수 있다.

- 오디오

  → 오디오는 audio라는 태그를 사용하고, 마찬가지로 src 속성으로 파일을 지정할 수 있다. 

  → 기본적으로 audio 태그는 화면에 나타나지 않는데, controls라는 속성을 추가하면 
    화면에 나타난다. 

  → 비디오와 마찬가지로 오디오도 자동 재생 속성이 있는데 autoplay라는 속성을 사용하면
    chrome에서는 동작하지 않지만 사파리에서는 잘 동작한다. 

- Iframe

  → youtube는 공유버튼을 눌러서 Embed에 들어가보면 HTML 코드가 나온다.

  → 이 HTML코드를 보면 iframe이라는 태그를 사용하는데 iframe은 Inline Frame이라는 뜻으로
    예전에는 frame 태그가 있어서 frame 태그를 사용하면 사이트 화면을 나눠서 각각 다른 HTML 파일을
    보여주는 기능이었는데 여러가지 문제점이 많아서 최근에는 사용하지 않는다. 

  → ifrmae은 frame의 인라인 버전으로 HTML 문서 안에서 다른 HTML문서를 보여주는 태그

  → 그냥 비디오를 보여주는 것처럼 보이지만 HTML 페이지이다.

  → 개발자 도구를 열어서 확인해보면 iframe 태그 안에 HTML 태그가 있는걸 볼 수 있다. 

  → <iframe src="current.html"></iframe> 이렇게 작성해보면 우리가 만든 HTML 파일에 
    current.html 이라는 파일이 불러와져 있는 모습을 볼 수 있다. 

  → iframe에도 여러가지 속성이 있는데 width와 height를 지정할 수 있다. 

  → iframe은 지도를 넣고 싶을 때에도 활용할 수 있고, 온라인 쇼핑에서 결제창을 띄우거나
    강의를 보여줄 떄에도 iframe 태그를 사용할 수 있다. 

- 멀티미디어 정리



  이미지 <img>

  → 파일 주소는 src 속성으로 지정
  → 크기는 width와 height 속성으로 단위 없이 지정
    (물론 CSS로도 크기를 조절 가능)
  → 이미지에 대한 설명은 alt라는 속성을 사용
      <img src="poster.jpg" width="750" height="530" alt="영화 명량 포스터">



  비디오 <video>

  → 파일 주소는 src 속성으로 지정
  → 크기는 width와 height 속성으로 단위 없이 지정
    (물론 CSS로도 크기를 조절 가능)
  → 그 외에 자동 재생을 하는 autoplay 속성, 음소거를 하는 muted, 조작하는 버튼들을 
    보여 주는 controls 속성이 있다. 
  → 특히 자동 재생은 불쾌감을 줄 수 있기 때문에 일부 브라우저에서는 반드시 muted와 함께 써야 
    동작한다는 점
      <video autoplay muted controls src="trailer.mp4" width="750" height="530"></video>



  오디오 <audio>

  → 파일 주소는 src 속성으로 지정
  → 자동 재생을 하는 autoplay 그리고 조작하는 버튼들을 보여 주는 controls 속성
      <audio autoplay controls src="intro.mp3"></audio>



  iframe <iframe>

  → 인라인 프레임이라는 뜻으로, 다른 HTML 문서를 문서 안에 집어넣을 때 사용
  → src로 불러올 문서의 경로를 지정
  → 이미지, 비디오, 오디오랑 마찬가지로 크기를 width, height라는 속성으로 지정
      <iframe src="banner.html" width="750" height="135"></iframe>

폼

- 폼이란?

  → 회원가입이나 쇼핑을 하기 위해서는 웹사이트에서 단순히 데이터를 받기만 하는 게 아니라 
    내 데이터를 웹사이트로 보낼 수 있어야 한다. 
    이럴 때 폼(Form)이라는 걸 사용한다. 

  → 회원가입을 할 때에는 아이디와 비밀번호를 적고 확인 버튼을 누르면 내가 적은 내용을 서버로 보내서
    회원 가입이 되는 것 

  → 회원 가입 페이지에 있는 내용을 적는 부분을 폼(Form)이라고 한다. 
    내용을 적는 칸은 인풋(Input)이라고 하고, 각 인풋 옆에 붙은 이름을 라벨(Label)이라고 한다.

  → 보통 버튼이 하나 있어서 버튼을 누르면 입력한 내용을 전송할 수 있다. 

  → 인풋(Input)에는 문자, 숫자, 비밀번호, 라디오, 체크박스, 버튼 등 다양한 형태로 입력 가능

- 폼 만들기

  → 폼을 만들기 위해서는 <form>태그로 감싸야 한다. 
    input을 만들기 위해서는 <input>태그를 사용하고, 사용자가 입력하여 내용을 넣기 때문에 
    닫는 태그 없이 시작 태그만 쓴다. 
    label은 <label>이라는 태그를 사용하고 input에 설명을 적는 용도로 사용된다.

  → input과 label에는 특별한 기능이 있는데 input을 label로 감싸면 label을 클릭할 때마다 input에
    커서가 생긴다. 

  → <label>에는 for라는 속성을 사용하여 signup-email이라고 작성하고, <input>에는 
    id라는 속성으로 signup-email이라고 값을 넣어주면 label과 input이 연결된다.

  → 폼에 입력한 데이터를 전송하려면 input에 name이라는 속성이 꼭 필요하다.
    input에 입력한 데이터에 이름을 붙여주는 기능

  → 입력한 값이 적힌 주소로 이동하는 것을 확인할 수 있다. 

  → form태그가 데이터를 전송할 때 각 데이터의 이름으로 쓰는 것이 name 속성이다.

  → input에서 비밀번호를 입력받을 때 값이 다 보인다면 type이라는 속성을 사용해준다. 
    type="password"라고 적으면 입력한 값이 가려져셔 나오는 것을 확인할 수 있다. 

- 버튼

  → 버튼은 <button>이라는 태그를 사용하여 만들 수 있다. 

  → 버튼 태그는 기본적으로 form 안에 있으면 눌렀을 때 적은 내용을 전송한다. 

  → 버튼 태그에서 type이라는 속성을 바꾸면 버튼 동작을 바꿀 수 있는데 
    button이라는 type을 사용하면 버튼을 눌러도 전송되지 않는다. 
    submit이라는 type은 기본값으로 버튼을 눌렀을 때 데이터를 전송하고,
    reset이라고 type을 지정하면 내용을 초기화하는 버튼을 만들 수 있다. 

  → 버튼이 form태그 바깥쪽에 위치하면 form의 내용을 전송하거나 리셋하지는 않는다. 
  → 간혹 form 없이 버튼만 따로 쓰는 경우가 있으므로 참고로 알아두자.

- 폼 전송하기



  action 속성

  → 폼 내용을 전송할 주소를 정하는 방법을 알아보자
  → 아래는 확인 버튼을 누르면 페이지를 이동하는 코드이다.
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>코드잇</title>
      </head>
      <body>
        <form>
          <div>
            <label for="signup-email">이메일</label>
            <input id="signup-email" name="email" type="email">
          </div>
          <div>
            <label for="signup-password">비밀번호</label>
            <input id="signup-password" name="password" type="password">
          </div>
          <div>
            <label for="signup-password-repeat">비밀번호 확인</label>
            <input id="signup-password-repeat" name="password_repeat" type="password">
          </div>
          <button>
            확인
          </button>
        </form>
      </body>
    </html>

  → 현재 페이지의 주소가 http://127.0.0.1:3000이라고 가정할 때, 
    이메일에 html@codeit.kr 비밀번호로는 ilovehtml이라고 적고 나서 확인 버튼을 누르면
    http://127.0.0.1:3000/?email=html%40codeit.kr&password=ilovehtml&password_repeat=
    ilovehtml
    이렇게 주소창에 주소가 나타난다. 

  → 위의 주소를 풀어보면 다음과 같다.
    http://127.0.0.1:3000/
    ?
    email=html%40codeit.kr
    &
    password=ilovehtml
    &
    password_repeat=ilovehtml

  → 물음표 이후로 폼에 입력한 값이 들어가 있는데 이런 걸 쿼리 문자열(Query String)이라고 한다.

  → <input> 태그마다 name 속성 값이랑 입력한 값이 짝지어 적혀 있다.

  → http://127.0.0.1:3000이라는 부분은 폼이 보이는 현재 페이지의 주소

  → 기본적으로는 현재 페이지 주소의 맨 끝에다 쿼리 문자열을 붙여서 이동

  → 현재 페이지 주소 말고, 다른 주소를 쓰고 싶다면 직접 정해 줄 수도 있다.

  → <form>태그의 action 속성을 사용
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>코드잇</title>
      </head>
      <body>
        <form action="https://google.com/search">
          <input name="q">
          <button>검색</button>
        </form>
      </body>
    </html>

  →  "코드잇"이라고 적고 검색 버튼을 누르면 
     https://google.com/search?q=코드잇이라는 주소로 이동



  method 속성

  → 웹 브라우저는 페이지를 이동하거나, 어떤 데이터를 전송할 때 서버에 "리퀘스트"라는 걸 보내는데
    퀘스트의 종류에는 여러 가지가 있다.

  → GET 리퀘스트는 데이터를 받을 때 사용하고, POST 리퀘스트는 데이터를 보낼 때 사용

  → 폼 버튼을 눌렀을 때 페이지를 이동하는 건, 웹 브라우저가 어떤 서버로 GET 리퀘스트를 보낸 것

  → 프로필 사진 파일을 업로드하는 경우는 파일은 크기가 너무 크기 때문에 GET 리퀘스트와
    쿼리 문자열 만으로는 보낼 수 없다.

  → 이럴 때는 POST 리퀘스트를 주로 사용
    <form> 태그의 method 속성을 바꿔 주면 POST 리퀘스트를 보낼 수 있다.

  → method 속성의 기본 값은 get
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>코드잇</title>
      </head>
      <body>
        <form method="post">
          <div>
            <label for="profile">프로필</label>
            <input id="profile" name="profile" type="file">
          </div>
          <button>
            확인
          </button>
        </form>
      </body>
    </html>

  → POST 메소드를 잘 보내는지  간단히 확인해 보기 위해서 테스트용 서버를 하나 사용해보자.

  → Request Bin(https://requestbin.com/)이라는 서비스를 사용

  → Request Bin을 이용하면 간단한 서버를 만들어서 내가 보내는 리퀘스트를 확인할 수 있다.

  → Create Request Bin을 클릭하고, 간단히 가입하면 아래와 같은 관리 화면이 나오는데, 
    여기서 m.pipedream.net으로 끝나는 주소가 테스트용으로 만들어진 서버

  → 만약에 리퀘스트가 들어오면 왼쪽 화면에 기록되는데 만들어진 서버 주소를 복사해서 새 탭을 열고, 
    접속해보면 다시 관리화면으로 돌아오면 왼쪽에 GET 리퀘스트가 기록된다.

  → 이 주소를 폼의 action 속성으로 붙여 넣고, method 속성으로는 post를 써서 폼을 전송하면
    Request Bin 페이지에 POST 리퀘스트가 들어와 있다.
    body라는 걸 클릭해 보면 아까 작성한 폼의 내용이 보인다.

- 다양한 인풋

  type에 쓸 수 있는 값에는 password 말고도 다른 값을 알아보자.



  체크박스 checkbox

  - 한 항목만 선택하는 경우
      → 아래 예시에서는 "동의합니다"에 체크하는 경우 agreement의 값이 on이라는 문자열로 지정

      <label>
        <input name="agreement" type="checkbox">
        동의합니다
      </label>


  - 여러 항목 중에서 몇 항목을 선택하는 경우

    → <input> 태그에 value 속성으로 값을 지정해 주면, 선택된 항목의 지정된 값이 쓰인다.

    → 예를 들자면 아래 코드에서는 "액션"이랑 "코미디"를 선택했을 때 film의 값으로 action과
      comedy라는 문자열이 지정

    → 폼을 전송했을 때 쿼리 문자열에서는 &film=action&film=comedy처럼 전송

      <label for="film">좋아하는 영화 장르</label>
      <label>
        <input type="checkbox" name="film" value="action">
        액션
      </label>
      <label>
        <input type="checkbox" name="film" value="comedy">
        코미디
      </label>
      <label>
        <input type="checkbox" name="film" value="romance">
        로맨스
      </label>



  날짜 date

  → 선택한 날짜로 값을 지정
    <input name="birthdate" type="date">



  파일 file

  → 파일을 선택할 수 있는 인풋
    <input name="avatar" type="file">


  - 파일 형식 지정하기
      → accept라는 속성을 써서 허용할 파일 확장자들을 지정
      <input name="avatar" type="file" accept=".png,.jpg">

  - 파일 개수 지정하기
    → multiple이라는 참/거짓 속성을 사용하면 여러 개 또는 한 개만 선택하도록 정할 수 있다.

      <input name="photos" type="file" multiple> <!-- 여러 개 선택 가능 -->
      <input name="avatar" type="file"> <!-- 한 개만 선택 가능 -->



  이메일 email

  → 텍스트를 입력할 수 있는 건 똑같지만, 버튼을 눌러서 폼을 전송할 때 올바른 이메일 형식인지 
    자동으로 검사
    <input name="email" type="email">



  숫자 number

  → 숫자를 입력하고, 최소 최대 값이나 버튼을 눌렀을 때 증가, 감소할 양을 정할 수 있다.

    <input type="number">

    <!-- 100에서 1000사이 -->
    <input type="number" min="100" max="1000">

    <!-- 100에서 1000사이, 버튼을 눌렀을 때 100씩 증가, 감소 -->
    <input type="number" min="100" max="1000" step="100">



  비밀번호 password

  → 값을 입력했을 때 입력한 내용이 가려진다.
    <input type="password">



  라디오 radio

  → 동그란 선택 버튼

  → 체크박스와 다르게 여러 항목 중 하나의 항목만 선택할 수 있다.

  → value 속성과 같이 사용하면, 같은 name을 가진 <input> 태그들 중에, 선택한 <input>의 
    value 값을 입력하도록 할 수 있다.

  → 예를 들어서 아래 코드에서 "좋음"을 선택하면 feeling의 값으로 3이라는 값이 들어간다.

    <input id="very-bad" name="feeling" value="0" type="radio">
    <label for="very-bad">아주 나쁨</label>
    <input id="bad" name="feeling" value="1" type="radio">
    <label for="bad">나쁨</label>
    <input id="soso" name="feeling" value="2" type="radio">
    <label for="soso">보통</label>
    <input id="good" name="feeling" value="3" type="radio">
    <label for="good">좋음</label>
    <input id="very-good" name="feeling" value="4" type="radio">
    <label for="very-good">아주 좋음</label>



  범위 range

  → 범위 안에서 선택할 수 있는 인풋
    <label for="signup-feeling">현재 기분</label>
    <input id="signup-feeling" name="feeling" min="1" max="10" type="range">



  텍스트 text

  → 인풋 타입의 기본 값으로 일반적인 텍스트를 입력할 때 사용
    <input name="nickname" type="text">



  옵션 선택 <select>

  → 미리 정해져 있는 여러 값들 중에서 하나를 선택할 수 있는 태그

  → <select> 태그 안에 <option> 태그를 value와 함께 사용

  → 예를 들어서 아래 코드에서 드라마를 선택하면 genre의 값이 drama가 된다.

    <label for="genre">장르</label>
    <select id="genre" name="genre">
      <option value="korean">한국 영화</option>
      <option value="foreign">외국 영화</option>
      <option value="drama">드라마</option>
      <option value="documentary">다큐멘터리</option>
      <option value="vareity">예능</option>
    </select>



  긴 글 <textarea>

  → 긴 글을 입력할 수 있는 인풋

  → <input> 태그와 달리 반드시 종료 태그(</textarea>)를 써 주어야 한다.
    <textarea name="content"></textarea>

- 유용한 인풋 태그 속성

  값이 비어있을 때 보여주는 값 placeholder
  <input name="username" placeholder="이메일 또는 휴대전화">

  → 이때 placeholder 의 디자인을 바꾸려면 CSS 선택자로 ::placeholder 를 활용

    input::placeholder {
      color: #dddddd;
    }



  반드시 입력해야 하는 값 required

  → 폼에서 반드시 입력해야 하는 값이 있다면 required 속성을 써준다.

  → 만약 required인 인풋의 값이 비어있다면, 전송 버튼을 눌러도 전송되지 않는다.
    <input name="email" type="email" required>

  자동 완성 autocomplete

  → 이 속성을 지정해 두면 폼이 전송될 때마다 입력한 값을 웹 브라우저에 저장해 두고, 
    나중에 인풋에 값을 입력할 때 추천

  → 참고로 required와 달리 on이라는 값을 지정해 주어야 동작
    <input name="search" type="text" autocomplete="on">


  → 만약에 이메일을 채워 넣게 하고 싶다면 email이라는 값을 쓸 수 있고, 
    전화번호를 채워 넣고 싶다면 tel이라는 값을 쓸 수 있다.
    <input name="email" type="email" autocomplete="email">
    <input name="telephone" autocomplete="tel">

HTTP attribute

- 폼 정리



  기본적인 폼의 형태

  <form>
    <label for="username">아이디</label>
    <input id="username" name="username">
    <label for="password">비밀번호</label>
    <input id="password" name="password" type="password">
    <button>로그인</button>
  </form>



  라벨
  → <label> 태그로 <input>을 감싸면 라벨을 클릭했을 때 인풋에 포커싱

    <label>
      아이디
      <input name="...">
    </label>

  → 혹은 라벨의 for 속성과 인풋의 id 속성을 일치시키면 클릭했을 때 인풋에 포커싱

      <label for="username">아이디</label>
    <input id="username" name="...">



  인풋 <input>

  → name 속성은 폼을 전송했을 때 입력한 값에 매칭되는 이름
  → 예를 들어서 아래 코드에서는 인풋에 입력한 값이 username이라는 이름에 매칭

      <label for="...">아이디</label>
      <input id="..." name="username">

  → type 속성을 사용하면 다양한 인풋을 사용할 수 있다.
  → 대표적으로 입력한 값을 가려주고 싶을 때는 type="password"를 사용

    <label for="password">비밀번호</label>
    <input id="password" name="password" type="password">

다른 코드 불러오기

- link 태그

  → link 태그는 HTML 문서에서 외부에 있는 걸 불러올 때 사용
    대표적으로 CSS 파일이나 ICON같은 것들을 불러올 때 사용한다. 

  → link태그는 head태그 안에 작성하고, rel이라는 속성과 href 속성을 같이 쓴다.

  → rel은 relation, 관계라는 뜻으로 불러올 파일이 어떤 종류인지 적는다.

  → href는 a태그에서 보는 것과 같이 파일의 주소를 작성

- script 태그

  → 웹사이트를 프로그램처럼 사용할 수 있는 건 JS라는 프로그래밍 언어 덕분

  → JS를 쓰면 웹사이트 안에서 코드를 실행해서 유용한 일들을 할 수 있다.

  → body태그 안에 <script>태그를 작성할 수 있는데 JS도 CSS처럼 파일로 불러올 수 있다.

  → script에서도 src속성으로 JS파일의 경로를 지정하여 적용할 수 있다.

  → 주의할 점은 script 태그는 반드시 닫는 태그가 필요하다.

- link, script 정리



  <link> 태그
  → 외부에 있는 것을 불러올 때 사용하는 태그
  → 어떤 목적인지를 rel 속성에 작성, 위치는 href로 지정하고, 주로 <head> 태그 안에서 
    맨 마지막에 써준다.

  CSS 파일을 불러올 때는 rel="stylesheet"라고 작성
  <head>
    ...
    <link rel="stylesheet" href="style.css">
  </head>


  사이트 아이콘을 불러올 때는 rel="icon"이라고 작성
  <head>
    ...
    <link rel="icon" href="favicon.ico">
  </head>



  <script> 태그
  → 자바스크립트 파일을 불러올 때 사용하는 태그
  → 파일의 위치는 src로 적고, 주로 <body> 태그 안에서 맨 마지막에 써준다.
  → 종료 태그인 </script>를 써야한다.

  <body>
    ..
    <script src="like.js"></script>
  </body>

의미있는 HTML

- 사이트에 대한 정보

  → head 태그는 페이지에 대한 정보를 담고 있는 태그라고 했는데 이런 걸 메타데이터(Metadata)
    라고 한다.

  → head 태그 안에는 컴퓨터가 읽고 사용하는 메타데이터가 담겨 있다.

  → 메타데이터란 데이터에 대한 데이터라고 할 수 있는데 예를 들어 도서관의 책을 생각해보면
    책의 제목과 저자이름, 출간날짜는 데이터 라고 할 수 있고, 도서 분류 번호는 데이터에 대한 
    데이터로 메타데이터라고 할 수 있다.

  → head안에 있는 정보가 모두 메타 데이터라고 할 수 있는데 meta태그는 여러가지 데이터를
    자유롭게 담는데 사용한다. 

- 시맨틱 태그란?

  → 지금까지 배운 태그는 내용을 적을 때 해당 내용이 문서 안에서 어떤 의미인지
    즉, 제목인지, 본문인지, 이미지인지 등을 정해주기 때문에 문서의 구조를 만들 수 있었다.

  → 이런식으로 사이트를 제작할 때 각 영역을 div태그로 나누어서 구조를 만들고, 
    그 안에 내용을 채우고 CSS를 적용하여 스타일링했는데 
    각각의 영역은 똑같은 div 태그로 나누었지만 문서 안에서는 다른 의미를 가진 영역이다.

  → 의미를 가진 태그라고 하여 시맨틱 태그라고 하고,
    이름은 달라도 성질은 div 태그와 완전히 똑같은 태그들이다. 

  → 영역의 위쪽에서 로고나 제목, 메뉴와 같이 영역의 도입부를 담고 있는 header태그
    사이트 안에서 이동하는데 쓰이는 메뉴 영역은 nav태그
    영역의 본격적인 내용에는 main태그
    영역의 아래쪽에서 여러가지 정보를 담고 있는 footer태그

  → main태그는 한 페이지 안에서 딱 한 번만 쓸 수 있는 태그이지만 
    header와 footer 태그는 여러 영역에서 사용이 가능한 태그이다.

  → 블로그 사이트에서 블로그 글 하나는 그 자체로 완성된, 독립된 내용을 가지고 있다. 
    이런 경우에는 article이라는 태그를 사용하여 구분해준다. 
    (= article 안의 내용은 하나의 완전한 내용이라고 볼 수 있다.)

  → 블로그 글 밑에 달린 댓글은 블로그 글의 일부가 아닌 그 자체로 독립적인 내용이므로 
    이것도 하나의 article로 볼 수 있다.

  → 어떤 것의 부분을 나타낼 때 쓰는 section이라는 태그가 있다.
    블로그 사이트 메인 화면에서 글 목록을 보여줄 때 주제별로 앵무새 소식, 먹이 리뷰
    이렇게 여러 부분으로 나누어서 글들을 보여준다면 section으로 나눌 수 있다.

  → 그리고 이미지와 이미지에 대한 설명을 묶어놓은 영역은 figure라는 태그로 사용

  → HTML문서는 단순히 화면을 보여 주기 위한 것만은 아니기 때문에 시맨틱 태그를 사용한다.

  → 시맨틱 태그는 영역을 의미있게 나눌 때 사용하고 div 태그와 기능은 완전히 같다. 
    잘못 쓴다고 해서 동작이 안되는 것도 아니므로 작성하는 사람의 의도가 중요하다.

- 시맨틱 태그를 사용하면 좋은 점


  (1) 검색엔진최적화(Search Engine Optimization)

        → 웹사이트를 만들고 나면 검색 엔진에 등록도 하고 광고도 하게 되는데 
        구글이나 네이버 같은 사이트에서 사람들이 검색해서 방문할 때 어떤 사이트는 맨 위에 뜨고
        어떤 사이트는 아래에 뜬다.

        → 검색 했을 때 우리가 원하는 사람들에게 딱 맞게 보여줄 수 있도록 사이트를 최적화하는 걸
        SEO라고 한다. 

        → SEO를 하는 방법은 여러가지가 있으나, 기본적으로는 head 태그 안에 meta 태그를 
        꼼꼼하게 작성하고 시맨틱 태그를 작성하는 것

        → 검색 서비스들은 각자 검색 엔진 로봇 프로그램을 사용해서 여러 사이트의 정보를 수집
        이때 메타데이터와 시맨틱 태그가 잘 작성되어 있다면 검색 엔진이 사이트를 정확하게 
        파악할 수 있다.



  (2) 웹 접근성(Web Accessibility, A11y)

        → 2020년 기준으로 세계 인구의 15퍼센트는 장애인이라고 한다.
        그 중에서도 시각 장애인은 인터넷을 사용하는데 어려움을 많이 겪는다.

        → 시각 장애인들은 스크린 리더라는 프로그램으로 인터넷을 사용하는데 
        스크린 리더는 화면을 소리내어 읽어주고 웹 서핑을 할 수 있도록 도와준다.

        → div로만 구성되어 있다면 어디가 본문이고 어디가 메뉴인지 알기 힘들다.

        시맨틱 태그로 구성되어 있다면 어디가 어디인지 알 수 있기 때문에 장벽 없는 (Barrier-Free)
        인터넷을 만드는 데 중요한 역할을 한다.



  (3) 개발자 관점

        → 검색 엔진 로봇과 시각 장애인 그리고 개발자들의 공통점은 눈에 보이는 화면이 아니라
        코드를 통해서 사이트를 이해한다는 것

      → 시맨틱 태그를 사용한다면 개발자의 생산성을 높이는데 많은 도움이 된다. 

- 의미있는 HTML 정리


  <head> 태그
  → 페이지에 대한 정보를 담고 있는 태그
  → 이 페이지에 대한 데이터를 담고 있는데, 화면에 보여 주기보다는 웹 브라우저가 읽어서
    처리하는 용도

    <head>
      <meta charset="utf-8">
      <title>코드잇 캠핑장</title>
      <link rel="stylesheet" href="style.css">
      <link rel="favicon" href="favicon.ico">
    </head>



  시맨틱 태그
  → <div>와 기능은 똑같지만, 의미가 담겨있는 태그들을 '시맨틱 태그'
  → 엄격한 사용법이 있는 건 아니고, 작성하는 사람의 의도가 중요
  → 시맨틱 태그를 잘 활용하면 검색 엔진 최적화(SEO)나 접근성(Accessibility)을 높이는데 도움

- 페이지끼리 연결하기

→ index.html 파일 내의 footer영역에 구독 신청하기에 subscribe.html로 이동하는 링크를 걸어보자.
  img 태그와 동일하게 a태그를 사용하여 링크를 클릭했을 때 이동하는 파일의 경로를 설정해주고
  확인해보면 해당 부분을 클릭하면 원하는 파일로 이동하는 것을 확인할 수 있고,
  style을 주어 하얀색으로 보이게 설정해준다.

- 오픈 그래프로 소셜 공유 미리보기 만들기

Open Graph Protocol Facebook Obeject Debugger

→ 소셜 공유 미리보기라는 것을 만들어보자.

→ 소셜 공유 미리보기는 사이트 주소를 SNS에 붙여넣기 하면 미리보기가 뜨는데 이것을 소셜 공유
  미리보기라고 한다.

→ HTML파일 안의 head 태그 안에 meta태그를 사용하여 소셜 공유 미리보기를 할 수 있는데 
  구글이나 페이스북, 트위터(X)와 같은 대형 서비스에서는 각자 요구하는 meta태그가 따로 있다.
  이 태그를 잘 활용하면 우리 사이트를 내가 원하는대로 예쁘게 보여줄 수 있다.

→ 가장 많이 쓰는 것이 페이스북의 오픈그래프라는 것인데 오픈이라는 말에서 알 수 있듯이
  구글, 페이스북, 카카오톡 등 다양한 서비스에서 미리 보기를 만들 때 참고하는 정보

→ <meta property="og:title" content="Weekly Codeit">라고 작성할 수 있는데 오픈 그래프를
  사용할 때에는 og:이라고 쓰며, content 속성에는 오픈 그래프 항목에 맞는 내용을 적어준다.
  og:title 말고도 다양한 오픈 그래프 프로퍼티가 있는데 
  url, type, image, description 이런 프로퍼티들이 있다.

→ 이렇게 facebook debugger에 들어가서 보면 내가 설정한 이미지와 description등 설정한 내용이 
  잘 보인다.

- 구글 애널리틱스로 방문자 수 확인하기

  → 내 사이트에 방문하는 사람의 숫자를 알고 싶을 때에는 구글 애널리틱스를 사용한다.
  → 구글 애널리틱스는 구글에서 만든 방문자 분석 도구로 사이트에 설치하면 관리자 도구로 방문자의
    숫자나 통계 같은 것들을 볼 수 있다.

  → 여기서 속성이라는 것은 하나의 애널리틱스 계정 안에서 여러 개를 측정할 수가 있다.
  → 홈페이지나 모바일 앱 두 가지가 있는 경우에 하나의 계정에서 사이트 하나, 모바일 하나 이렇게 
    두 개의 속성을 측정하는 것

  → 쿠기를 가지고 방문자 통계를 내기 때문에 GDPR에서 쿠기를 사용하기 전에 사용자 동의를 받는
    창이 나타난다.

  → 우리 사이트에서 방문자 데이터를 구글로 보내기 때문에 데이터 스트림, 데이터 흐름이라는 표현을
    쓴다.

  → 측정되는 데이터를 확인해보면 페이지 조회, 스크롤, 이탈 클릭 같은 것들이 있다.

  → 태그하기에 대한 안내에서는 새로운 홈페이지에 태그 추가가 있는데 
    자바스크립트라는 프로그래밍 언어를 사용할 때 쓰는 script 태그가 있다.
  → 해당 코드를 복사해서 head태그 안에 붙여 넣는다.

  → 해당 코드를 head태그 안에 붙여넣고 재배포를 해준 후 애널리틱스 사이트로 돌아가 왼쪽의
    차트가 그려진 아이콘을 눌러서 실시간으로 들어가본다.

- 도메인 설정하기

  → 앞에서 Netlify로 사이트를 인터넷에 올려보았는데,
    https://<사이트 이름>.netlify.app 이런 주소로 접속할 수 있었다.
    그렇다면 https://google.com 이나 https://wikipedia.org 같은 주소는 어떻게 만드는 걸까?

  → google.com 이나 wikipedia.org 같은 걸 "도메인"이라고 부른다
  → 도메인을 갖고 싶으면 보통 업체를 통해서 도메인을 등록하고 사용
  → 무료는 아니고 대부분 유료인데 보통 1년 단위로 등록


  1단계: 도메인 등록하기
  → 우선 가장 먼저 도메인을 등록한다. 보통 대행 서비스를 통해서 비용을 지불한다.
  → 대표적으로 아마존 웹 서비스(AWS Route53)이나, 구글 도메인즈 같은 서비스들이 있다.
  → 구글에서 "도메인 등록 업체(Domain Registrar)"를 검색하면 다양한 업체들이 나오는데
    마음에 드는 업체를 찾아보고 도메인을 구매한다


  2단계: Netlify에서 도메인 추가하기
  → Netlify 사이트에 접속한 다음, 내 프로젝트로 들어가서 Site setting > Domain management
    메뉴로 들어가서 도메인을 추가한다.

  → Site Setting >  Add custom domain 메뉴로 들어 간 모습

  → Add custom domain 버튼을 클릭해서 들어간 모습,
    여기서 내가 등록한 도메인을 입력

  3단계: 도메인 관리 사이트에서 설정하기
  → 도메인 업체 쪽에서 Netlify로 연결해 주도록 설정해보자.
  → 내가 도메인을 등록한 사이트에서 DNS(도메인 네임 서비스) 관리 메뉴로 들어가 설정

  A 레코드 설정
  → 레코드를 추가한다는 건 쉽게 말해서 도메인 서비스에 규칙을 추가하는 것

  → 일단 Host라고 하는 값에는 @를 추가하고, Value라는 값에는 75.2.60.5로 설정
  → 여기서 @는 루트 도메인(이 경우에는 my-petit-domain.io)에 규칙을 추가한다는 뜻
  → 75.2.60.5라는 값은 Netlify에서 운영하는 서버 주소인데, Netlify 공식 문서에서 알려 준 값
  → 정리하자면, 이 레코드는 "내 도메인으로 들어왔을 때 Netlify 서버에 물어봐 주세요!"라는 뜻이다.


  → 다양한 방법이 있지만 DNSChecker라는 사이트에서 확인해보면
    사이트의 A 레코드를 확인해 보면 아래처럼 우리가 설정한 값이 잘 보여야 한다.

- 꿀팁

- 개발자 도구 사용하기

  → 어떤 사이트든지 HTML과 CSS를 확인할 수 있는 개발자 도구를 자주 사용하자
  → Select an element 메뉴를 사용하면 검사할 항목을 선택할 수 있는 기능
  → 개발자 도구에서 설정 값을 다양하게 수정해볼 수 있고 그게 바로 적용되어 보여지기도 하는데
    이 수정과정은 영구적인 것은 아니고 일시적으로 수정했을 떄 어떻게 보이는지 보여주는 정도이므로
    저장되지는 않는다.

- HTML/CSS를 공부하는 법

  → whatwg.org 라는 사이트를 찾아보면 HTML 표준 문서를 확인할 수 있다.
  → MDN 사이트에서 HTML과 관련된 내용을 확인할 수 있다.

- GPTs

- GPT를 직접 만든다면?

→ 이런 방식으로 컬러링북을 만들 수 있지만, 컬러링북을 제작할 때마다 해당 채팅방을 찾거나
  컬러링북을 만드는 프롬프트를 계속해서 입력해야 하는 번거로움이 있다.

→ 왼쪽 상단의 GPT 탐색 혹은 Explore GPTs를 클릭하면 이런 GPT 스토어가 열리는데
  여기서는 사람들이 만든 GPT는 어떤 것들이 있는지 확인할 수 있다.

→ 우리가 컬러링북을 제작하고 있었기 때문에 연관있는 주제로 검색했을 때 컬러링북을 만들어주는 GPT를
  찾을 수 있는데 클릭하고 채팅을 해보면 이전에 컬러링북을 제작하기 위해 입력했던 프롬프트를
  다시 입력하지 않아도 원하는 주제 [공주], [해적선장] 등의 단어만 입력해서 컬러링북 도안이 
  나오는 것을 확인할 수 있다.

→ 특정한 주제에 맞춰 이미지를 제작할 수 있도록 설정된 챗봇기능
→ Featured는 이번주에 인기 있었던 GPT를 소개
  Trending에는 과거부터 현재까지 사람들이 많이 사용한 GPT
→ 사용방법은 원하는 GPT를 클릭하고 채팅을 시작하면 된다.

→ 오른쪽 상단에 +만들기 혹은 +Create버튼을 누르면 GPT를 제작할 수 있는데 (유료기능)
  이렇게 제작한 GPT들은 MyGPTs에서 확인할 수 있다.

→ 주제에 대해 의견을 나누고 다양한 관점을 제공해주면서 친근하게 반말모드로 대화를 하도록 설정

→ GPT를 심화시켜서 제작하면 API 통신까지도 가능한데,
  Chat GPT가 아닌 다른 서비스에서 사용하는 기능을 GPT가 사용할 수 있는 것

- 보이스

※ GPT-4o 모델과 함께 보이스 기능이 한 단계 더 발전했는데 새로운 보이스 기능은 공식 출시 이후에
  레슨이 업데이트 될 예정


- 음성으로 대화 나누기

→ 지금까지는 Chat GPT와 소통할 때 텍스트 기반의 프롬프트로 채팅을 입력하거나 
  파일을 첨부하는 방식이었는데 이번에는 새로운 소통 방식인 보이스 기능으로 Chat GPT와 상호작용
→ 보이스 기능은 무료 플랜에서도 사용이 가능하며 이 기능은 모바일 디바이스에서 사용

→ 우측 하단의 헤드폰 모양 버튼을 누르고, 간단한 안내문을 확인한다.

→ 보이스 스타일도 저장할 수 있고, 선택을 하면 GPT와의 대화를 시작할 수 있다.

→ 말이 길어진다면 중간의 원을 터치하고 홀드한 채로 대화를 하면 된다. 
  ( 그렇지 않으면 말이 끊기는 지점을 GPT가 감지하여 대답한다. )

→ GPT의 말이 길다면 중간에 끊고 싶을 때 위와 같이 중간의 원을 터치하고 홀드한 채로 대화를 중단

→ GPT와 음성대화를 한 부분은 이렇게 텍스트로 기록된다. 
→ 이 기능을 활용해서 영어 회화연습도 가능하다.
→ 설정의 SPEECH메뉴에서 Main Language를 변경하면 종종 내가 하는 말을 못알아듣는 오류를 최소화
  할 수 있다.
→ 채팅창의 내용을 꾹 누르면 나오는 read aloud를 누르면 해당 내용을 GPT가 읽어준다.

글자 색 color

  <span class="red">빨강</span>
  <span class="orange">주황</span>
  <span class="yellow">노랑</span>

    .red {
      color: #F23030;
    }

    .orange {
      color: #F28705;
    }

    .yellow {
      color: #F2CB05;
    }

글자 크기 font-size

  <span class="large">크게</span>
  <span class="medium">중간</span>
  <span class="small">작게</span>

    .large {
      font-size: 24px;
    }

    .medium {
      font-size:  16px; 
    }

    .small {
      font-size: 8px;
    }

글꼴 font-family
- 글꼴 이름을 쉼표로 연결해서 여러 개를 사용할 수 있다.
- 웹 브라우저가 차례대로 확인하면서 적용 가능한 글꼴로 보여준다.

  <html>
  <head>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&family=Poppins&display=swap" rel="stylesheet">
  </head>
  <body>
    <p id="with-poppins">Poppins 있는 노토 산스 케이알</p>
    <p id="without-poppins">Poppins 없는 노토 산스 케이알</p>
  </body>
  </html>

    #with-poppins {
      font-family: Poppins, "Noto Sans KR", sans-serif;
    }

    #without-poppins {
      font-family: "Noto Sans KR", sans-serif;
    }

글자 굵기 font-weight

  <span class="bold">굵게</span>
  <span class="regular">중간</span>
  <span class="light">얇게</span>

  .bold {
    font-weight: 600;
  }

  .regular {
    font-weight: 400; 
  }

  .light {
    font-weight: 200;
  }

줄 높이 line-height
- 줄과 줄 사이의 간격을 조절할 때 CSS에서는 줄의 높이로 조절
- 줄 높이의 값인 line-height는 단위 없이 쓰는 글자 크기에 상대적인 값

  <p class="loose">
    넓게<br>
    넓게<br>
    넓게
  </p>
  <p class="regular">
    보통<br>
    보통<br>
    보통
  </p>
  <p class="tight">
    좁게<br>
    좁게<br>
    좁게
  </p>

    .loose {
      font-size: 16px;
      line-height: 1.7; /* 16px * 1.7 = 27.2px */
    }

    .regular {
      font-size: 16px;
      line-height: 1.5; /* 16px * 1.5 = 24px */
    }

    .tight {
      font-size: 16px;
      line-height: 1; /* 16px * 1 = 16px */
    }

텍스트 꾸미기 text-decoration
- 텍스트에 밑줄을 넣거나, 취소선을 넣거나 하는 데 사용하는 속성
- 속성 값으로는 none, underline, line-through 등이 있다.
- none은 <a> 태그에 기본으로 들어 간 밑줄을 없애는 데 많이 사용

  <a href="https://codeit.kr">
    링크
  </a>
  <br>
  <a class="none" href="https://codeit.kr">
    밑줄 없는 링크
  </a>
  <br>
  <span class="underline">
    밑줄
  </span>
  <br>
  <span class="line-through">
    취소선
  </span>

    .none {
      text-decoration: none;
    }

    .underline {
      text-decoration: underline;
    }

    .line-through {
      text-decoration: line-through;
    }

2. 배경 이미지 : background-image

- url 이라는 속성 값에 배경 이미지로 삽입하려는 이미지의 경로를 작성해준다.
- 단, 따옴표로 굳이 감쌀 필요는 없지만, 특수문자가 있다면 반드시 감싸주어야 한다.
- 배경 이미지는 기본적으로 주방 타일처럼 반복하여 깔린다.
  background-repeat : no-repeat;을 하게 되면 반복되지 않도록 한다.
  backgorund-position : center;은 이미지를 어떤 위치를 기준으로 배치할지 정하는 것
  background-size : cover;은 이미지의 크기를 정하는 것으로 cover라고 하면 꽉 차게 하는 것

3. 그라디언트 : linear-gradient

- 그라디언트는 background-image라는 속성으로 넣을 수 있다.
- 그라디언트도 일종의 배경 이미지처럼 사용하는 것
- background-image : linear-gradient(90deg, rgba(0,0,0,1), rgba(0,0,0,0))
- 그라디언트는 다양하게 만들 수 있기 때문에 직접 만드는 것보다는 Gradient generator를 검색

- 배경 이미지 위에다가 반투명한 그라디언트를 겹쳐넣음으로서 글자를 더 잘보이게 하는 효과

4. 그림자 : box-shadow

- box-shadow는 세로, 가로, 경계의 흐림정도, rgba값을 사용하여 작성
- 구글에서 box-shadow generator를 검색해보면 다양한 값을 조절하여 만들 수 있다.

5. 불투명도 : opacity

- 페퍼로니 햄이 다 떨어져서 품절되었다고 홈페이지를 수정하고자 한다
- opacity의 주의할 점은 태그 전체가 반투명해진다.

6. 새로 배운 CSS 속성 정리

배경 이미지 background-image

  - url(...)이라는 문법으로 배경 이미지를 넣는다.
    background-image: url('flowers.png');

  - 배경 이미지는 여러 개 넣을 수 있다.
    background-image:
      url('a.png'), /* 제일 위에 보이는 이미지 */
      url('b.png'),
      url('c.png');



배경의 위치 background-position

  - 기본값은 left top(왼쪽 위)이고, 가운데 정렬을 하려면 아래처럼 center를 사용
    background-position: top; /* 위 */
    background-position: right; /* 오른쪽 */
    background-position: bottom; /* 아래 */
    background-position: left; /* 왼쪽 */
    background-position: left top; /* 왼쪽 위 (지정하지 않았을 때 기본값) */
    background-position: center;



배경의 반복 background-repeat

  - 기본값은 repeat(반복)이고, no-repeat으로 하면 반복되지 않게 할 수 있다.
    background-repeat: repeat; /* 반복하기 (지정하지 않았을 때 기본값) */
    background-repeat: no-repeat; /* 반복 안 함 */



배경의 크기 background-size

  - 직접 가로 세로 크기를 지정할 수도 있고, 비율을 유지하면서 영역에 꽉 차게(cover)하거나, 
    영역 안에서 최대한 크게(contain)할 수도 있다.
    background-size: cover; /* 비율 유지하면서 꽉 차게. 이미지 잘릴 수 있음 */
    background-size: contain; /* 비율 유지하면서 최대한 크게. 이미지 잘리지 않음 */
    background-size: 40px 30px; /* 가로 40px 세로 30px */



그라디언트 linear-gradient()

  -기본적으로 시작 색상과 종료 색상으로 사용할 수 있다.
   background-image: linear-gradient(#000000, #ffffff);

  - 기본 방향의 각도는 180도 (위에서 아래로 내려오는 방향)
  - 이 각도를 바꾸고 싶다면 맨 앞에다가 각도를 써 주면 된다. 각도의 단위는 deg이다.
    background-image:
    linear-gradient(45deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.2));



그림자 box-shadow

  - 가로, 세로 위치, 흐린 정도(Blur), 퍼지는 정도(Spread), 색상의 순서로 작성

    box-shadow: 5px 10px 15px 8px rgba(0, 0, 0, 0.6);
    /*
      가로: 5px
      세로: 10px
      흐린 정도(Blur): 15px
      퍼지는 정도(Spread): 8px
      색상: rgba(0, 0, 0, 0.6)
    */



불투명도 opacity

  - 요소 전체의 불투명도를 조절할 때 사용합니다. 0에서 1 사이의 소수 값으로 단위 없이 사용
    opacity: 0; /* 투명 */
    opacity: 0.6;
    opacity: 1; /* 불투명 */

1. 기본 개념

- CSS 핵심 개념 소개

  → 이전에는 스타일을 적용할 HTML 태그 옆에 원하는 스타일 속성과 속성 값을 입력하여 CSS 적용
  → 만일 여러 개의 h3 태그에 스타일을 지정하려면 각각의 h3 태그를 찾아서 일일이 복사/붙여넣기로
    CSS를 적용
  → 만일 h3태그가 훨씬 많은데 이 모든 태그에 스타일을 적용하려면 어떻게 해야 할까?
    이 때는 스타일을 하나하나 넣는게 아니라 규칙을 정하면 된다.

  → style 태그 안에 작성하는 코드를 CSS 규칙이라고 한다

- CSS 규칙

  → HTML 태그에 style 속성을 사용하면 스타일을 적용할 수 있다.
  → 그러나 태그의 개수가 많아지면 스타일을 추가하고 수정하는 과정이 번거로워진다.

  → 관심사의 분리는 HTML 파일에는 HTML 태그로 작성된 내용만을 두고, CSS 파일에는 
    각 태그에 적용되야 하는 스타일만 작성하는 것이다.
  → 관심사의 분리 장점은 내용과 스타일을 따로따로 고치기도 편하고, 코드가 나눠져 있으므로
    따로 저장하기도 편하다.

  → CSS에서 h3하고 중괄호로 감싼 코드를 CSS 규칙이라고 한다.
  → CSS 규칙은 선택자와 선언으로 이루어져 있고, h3에 해당하는 것이 CSS 선택자(=CSS Selector)
    즉, 어떤 요소에 규칙을 적용할 지 선택하는 것
  → 글자 색을 지정한 부분을 CSS 선언(CSS Declaration)이라고 하며, 어떤 스타일을 적용할 것인지
    선언하는 것으로 CSS 속성과 콜론, CSS 속성 값 그리고 세미콜론으로 작성한다.

- 아이디

  → body 태그 안에 img, h1, p, h3 등이 있다.
  → CSS의 선택자에는 태그 이름 외에도 다양한 것들을 쓸 수 있다.
  → 같은 태그가 여러 개가 있는 상황에서 특정 태그에만 스타일링을 하고 싶다면 ID라는 선택자를 사용

  → 태그 옆에 ID 값을 지정하고 CSS에서 선택자 위치에 #ID를 작성 후 스타일링 해준다.
  → 그러면 ID 값으로 선택한 특정한 태그에만 우리가 지정한 CSS가 스타일링 된다.
  → ID를 만들 때에 주의할 점은 ID의 이름은 중복해서 작성할 수 없다.
    각 요소마다 고유한 이름을 지어 줘야 하므로 반드시 주의해야 한다.

- 클래스

  → 만일 여러 개의 동일한 태그 중에서 2개, 3개 등 다수를 선택하고 싶다면 클래스(Class)를 사용

  → class를 정해주고, CSS 코드에서 선택자 위치에 .class를 작성 후 스타일링 해준다.
  → class를 적용해준 곳에만 원하는 스타일링이 잘 적용되었다.
  → class 선택자를 사용하면 태그 여러 개를 선택하여 스타일을 지정할 수 있다.

- CSS 파일

  → index.html 처럼 style.css 파일을 만들고 앞서 HTML 파일 내의 style 태그 내에 있던 내용을
    적어주면 외부 CSS 파일을 만들 수 있다.
  → CSS 파일을 따로 만들게 되면 HTML 파일 내의 <style>태그를 지우고 link 태그를 사용하여 
    외부 CSS 파일을 연결해주면 끝이다.

- 개발자 도구로 선택자 확인하기

  → 개발자 도구에서 특정 영역을 클릭 후 Styles라는 탭을 보면 CSS 규칙을 확인할 수 있다.
  → user agent styelsheet라는 것은 웹브라우저에서 제공하는 기본 스타일
  → 개발자 도구를 사용하면 CSS 규칙이 잘 적용되고 있는지 확인이 가능하고, 특히 선택자가 어디에
    적용되고 있는지 한눈에 확인이 가능

- 다양한 색상 단위

  → 색상을 나타내는 방법에는 색상 이름으로 표기하는 것과 색상 코드로 표기하는 방식이 있다.

  색상 이름(Color Name)
  → 빨강, 노랑, 하양처럼 색상에 이름을 붙인 것을 의미
  → 영어로 된 색상 이름(Red, Yellow, White, ...)
  → 세세한 색깔을 나타내는 것이 어려워 잘 사용하지 않는다.

  색상 코드(Color Codes)
  → CSS에서 가장 많이 사용하는 방식
  → #으로 시작하여 숫자와 문자(a~f)로 조합한 여섯 자리를 의미
  → # 뒤에 오는 숫자와 문자 조합을 알기 위해서는 색상을 만드는 두 가지 방법에 대해 알아야 한다.
  → 빨강, 초록, 파랑의 세기를 각각 두 자리씩(00~ff)까지 표시

  → 색상을 만드는 방법은 CMYK 방식과 RGB 방식 두 가지가 있는데 
    CMYK는 물감을 섞어서 만드는 방법과 RGB는 빛으로 만드는 방법으로 나누어진다.
  → 안료를 섞을 때 Cyan, Magenta, Yellow 이 세 가지를 섞어서 만든다.
  → 빛으로 색상을 만들 때에는 Red, Green, Blue 이 세 가지를 섞어서 만든다.
  → CSS는 모니터에서 보이는 색상을 만드는 것이므로 빛의 삼원색인 RGB를 사용한다.

  → 각 빛의 세기는 0부터 255까지의 세기로 나타낼 수 있는데
  → 빨간 빛의 경우 0(16진수로 00)부터 64(16진수로 40), 128(16진수로 80), 192(16진수로 cO),
    255(16진수로 ff)까지 늘어난다.
  → 00에서 ff로 갈수록 큰 값이구나 정도만 알고 넘어가도록 하자.
  → #ff0000에서 빨강은 ff 최대의 값이고, 초록과 파랑은 00으로 없다.

- 다양한 크기 단위

  → width, height, font-size, padding, margin 등을 넣을 때 px이라는 단위를 사용
  → px 말고도 크기를 나타내는 다양한 단위가 있는데 크기를 나타내는 단위는 절대적인 단위와
    상대적인 단위 두 가지가 있다.
  → 절대적인 단위는 대표적으로 픽셀(px)가 있고, 상대적인 단위는 대표적으로 %, em, rem이 있다.

  → pixel per Inch, PPI는 모니터에서 1인치 정사각형 안에 픽셀이 몇 개나 들어가는지 나타내는 단위

  → 모니터에 따라서 보여주는 크기는 조금씩 다를 수 있다.

  → em과 rem은 글자 크기를 기준으로 상대적인 크기를 정하는 것

  → 페이지의 글꼴 크기를 전체적으로 다루고 싶다면 html의 font-size만 px로 정할 수 있다.

  → em과 rem은 font-size 말고도 다양한 곳에서 사용할 수 있다.
  → 글자 크기에 맞춰서 여백을 주고 싶다면 위와 같이 사용할 수 있다.

- 기본 개념 정리

  CSS 규칙

  선택자 {
    속성: 속성값;
    속성: 속성값;
  }

  → CSS 속성을 하나하나 태그에 넣기보다는 CSS 규칙을 정해 놓고 사용하는 걸 권장

  CSS 선택자
  → 규칙에서 요소를 선택하는 데 사용하는 부분


    (1) 태그 이름
    → h1, div 같은 걸 쓰면 그 태그에 해당하는 요소들에 모두 스타일을 적용
    → 예를 들어서 모든 h3 태그의 글자 크기를 24px로 하려면 아래와 같이 작성

    h3 {
      font-size: 24px;
    }


    (2) 아이디 (id)
    → 맨 앞에 샵을 붙여서 #아이디_이름과 같은 문법으로 작성
    → 아이디는 한 페이지 안에서 중복으로 쓸 수 없다.
    → 예를 들어서 아이디 이름이 hallasan인 태그에 글자색을 넣으려면 아래와 같이 작성

    <h3>우도</h3>
    <h3 id="hallasan">한라산 국립공원</h3>
    <h3>성산 일출봉</h3>
    <h3>군산 오름</h3>

    #hallasan {
      color: #f56513;
    }


    (3) 클래스 (class)
    → 아이디는 여러 개의 요소에 중복해서 쓸 수 없기 때문에 클래스를 사용
    → 맨 앞에 마침표를 붙여서 .클래스_이름과 같은 문법으로 작성
    → 예를 들어서 클래스 이름이 place인 모든 태그에 글자 크기와 굵기를 넣으려면 아래와 같이 작성

    <h3 class="place">우도</h3>
    <h3 class="place" id="hallasan">한라산 국립공원</h3>
    <h3 class="place">성산 일출봉</h3>
    <h3 class="place">군산 오름</h3>

    .place {
      font-size: 16px;
      font-weight: 400;
    }


  색상 단위

      (1) 색상 이름
    → red, green, yellow 같은 영어로 된 색상 이름
    → 세세한 색 표현이 어려워서 자주 쓰지는 않는다.


    (2) 색상 코드
    → 샵(#)으로 시작하는 여섯 글자의 코드
    → 빨강, 초록, 파랑 값을 0 ~ 255 사이 정수로 표현한 다음, 이걸 16진수로 만들어서 
      각각 두 글자씩, 총 여섯 글자를 연속으로 써놓은 값
      #FFFF00


    (3) RGB
    → 빨강, 초록, 파랑 값을 우리가 평소에 쓰는 10진수로 써서 색상
    → 빨강, 초록, 파랑은 0 ~ 255 사이 정수 값
    rgb(255, 255, 0)


    (4) RGBA
    → 빨강, 초록, 파랑, 알파 값을 순서대로 써서 색상을 나타낸다.
    → 빨강, 초록, 파랑은 0 ~ 255 사이 정수 값이고, 알파는 0 ~ 1 사이의 소수 값
    → 알파 값은 1에 가까울수록 불투명해지고, 0에 가까울수록 투명
    rgba(255, 255, 0, 0.5)


    절대적인 크기 단위

    (1) 픽셀 px
    → 절대적인 단위로서 화면을 표시하는 기준이 되는 크기


    상대적인 크기 단위

    (1) 퍼센트 %
    → 부모 태그의 크기에 상대적으로 지정할 때 사용

    <div id="parent">
      저는 높이가 320px입니다.
      <div id="child">
        저는 높이가 160px이에요!
      </div>
    </div>

    #parent {
      background-color: #A655ED;
      height: 320px;
    }

    #child {
      background-color: #6942D6;
      height: 50%;
    }


    (2) em
    → em은 전통적으로 인쇄술에서 대문자 M의 크기를 나타내는 단위
    → CSS에서 em은 부모 태그 font-size의 크기

    <div id="parent">
      저는 16px입니다.
      <div id="child">
        저는 64px이에요!
      </div>
    </div>

    #parent {
      font-size: 16px;
    }

    #child {
      font-size: 4em;
    }


    (3) rem
    → rem은 루트(root) em이라는 의미의 단위
    →  CSS에서 rem은 <html> 태그의 font-size  크기

    <html>
      <body>
            저는 18px 입니다.
            <div id="other">
          저는 32px이에요!
            </div>
      </body>
    </html>

    html {
      font-size: 16px;
    }

    body {
      font-size: 18px;
    }

    #other {
      font-size: 2rem;
    }

- 코멘트

  코멘트 문법

  /* 찜하기 버튼 */
  .zzim-button {
    font-size: 24px;
    padding: 8px;
  }

  → 코멘트는 /* 로 시작해서 */ 로 끝나는 코드
  → 코드를 읽는 사람들을 위한 거고, 실행에는 아무런 영향을 주지 않는다.

  /*
    마켓 코드잇 CSS
    v1.5.0
  */

  /* 찜하기 버튼 */
  .zzim-button {
    font-size: 24px;
    padding: 8px; /* 임시로 정한 값 */
  }

  → 이런 식으로 코멘트는 여러 줄로 쓸 수도 있고, CSS 규칙 안에도 들어갈 수 있다.


  코멘트는 언제 다는 게 좋을까?
  → 코멘트는 실행에 영향을 주지 않으니 얼마든지 사용할 수 있으나, 너무 많이 달게 되면 읽기 어렵다

  → CSS 선택자를 쉽게 이해할 수 있도록 고쳐 본다.
    그럼에도 이해가 어려울 거 같다면 코멘트를 달아본다.

- CSS 버전

  CSS 버전이란?
  → 웹 사이트를 만드는 기술은 지금도 계속 발전하고 있고, CSS도 마찬가지로 계속해서 변화하는 기술
  → 1996년 맨 처음 CSS 버전 1이 나온 이후로 버전 2, 버전 3까지 나왔다.

  옛날 버전도 쓸 수 있어요
  → 월드와이드 웹은 1991년부터 본격적으로 쓰기 시작
  → 만들어진 지 오래된 사이트들도 많다.
    이런 경우를 대비해서 CSS는 항상 옛날 버전을 지원하면서 다음 버전으로 넘어간다.
    이런 걸 하위 호환성(backwards compatibility)이라고 한다.
  → 최신 브라우저에서는 반드시 옛날 CSS 문법도 호환

  CSS4는 없다
  → CSS는 세계 곳곳에서 사용하는 기술이기 때문에, 여러 나라의 사람들이 모여서 
    논의하고 하나의 표준으로 정한다.
  → 논의를 통해서 CSS1, CSS2, CSS3 이런 식으로 새로운 버전들을 만들어 왔는데
    이렇게 하면 한 가지 단점이 있다.
  → 어떤 기능은 논의가 오래 걸리고, 어떤 기능은 논의가 금방 끝나기 때문에 논의가 오래 걸리는 
    기능 때문에 다른 기능들을 못 쓴다
  → 그래서 나온 해결책이 바로 모듈(Module)이다. 
    CSS 전체를 하나의 버전으로 발전시키는 게 아니라 비슷한 기능들끼리 모듈이라는 이름으로 모아서 발전
    이 모듈에다가 버전 같은 레벨(Level)을 붙이게 된다. 

Chat GPT로 웹 개발 맛보기

- Chat GPT로 웹 개발 맛보기

  → 코딩을 거의 하지 않고 웹사이트를 하나 제작해보자.
  → 위의 이미지와 같은 느낌의 웹사이트를 제작해보려고 한다. 
    GPT가 매번 같은 답변을 해주는 것은 아니라서 조금 다른 코드가 나오겠지만
    비슷한 느낌의 웹 사이트를 몇 분 만에 만들 수 있다.


  Chat GPT의 한계와 유용성

  → Chat GPT는 아직까지는 맡긴 일에 대해서 처음부터 끝까지 완벽하게 수행하지 못한다.
  → 그렇기 때문에 원하는 디자인이나 기능을 자유자재로 구현하려면 어느 정도는 프로그래밍을 해야 한다.
  → 그럼에도 불구하고 Chat GPT를 사용하여 웹 개발을 해보는 이유는 머릿속의 아이디어를
    작게나마 구현해볼 수 있으므로 시작 단계에서 시간을 들이지 않고 초안을 만들 수 있고,
    개발 도중 문제가 생기거나 궁금한 부분이 있다면 Chat GPT에게 도움을 받아 빠르게 해결할 수도 있다


  개념 소개

  → 우선 웹 개발의 가장 기초가 되는 건 HTML, CSS, 그리고 JavaScript이고,
    HTML은 웹사이트의 뼈대로서 웹사이트에 어떤 순서로 어떤 내용들이 들어갈지를 정해준다.
  → HTML로 웹사이트의 뼈대를 구성한 뒤 스타일링을 위해서는 CSS를 사용한다.
  → 웹사이트가 동작이 없으면 재미가 없기 때문에 동작이 일어나는 등의 인터랙션은 JS로 구현한다.

- 웹 개발 기초 지식

  → index.html 파일은 이름 그대로 HTML 파일인데 이 파일이 웹 사이트에서 하나의 페이지가 된다.
  → index.html은 어떤 사이트를 들어갔을 때 나오는 홈 화면, 메인 페이지를 의미한다.

  → 각 태그마다 브라우저에서 기본적으로 정해주는 디자인 스타일이 있다.
  → head 태그 안의 있는 내용은 사이트에 나타내기 위한 목적이 아닌 웹 사이트의 기본적인 속성을 나타냄

  → CSS를 작성하는 방법에는 HTML 파일 내에 head 태그 안쪽에 style 태그를 사용하여 작성하는 방법과
    외부에 CSS 파일을 따로 작성하는 방법 두 가지가 있다.
  → 스타일을 주고 싶은 선택자를 작성 후 괄호 안에 원하는 스타일링 속성과 스타일링 값을 작성해주면
    스타일링 준 내용이 반영된다.

  → JS는 button을 눌렀을 때 alert이 뜨도록 작성해주면 이렇게 팝업으로 메시지가 나타난다.
  → JS도 마찬가지로 HTML 안에서 직접 자바스크립트를 작성하는 경우도 있고,
    외부에 JS 파일을 새로 생성하여 작성하는 경우 두 가지가 있다.

  → 우선 위와 같이 작성하면,
    h1 태그를 myHeading이라는 곳에 담아두고, myHeading을 클릭하면 h1 태그의 색상이 보라색으로 
    변경된다.

  → 이런식으로 클릭하면 h1 태그의 색상이 변경된 것을 확인할 수 있다.

  → Bootstrap에서 CDN을 복사해서 HTML 파일 내에 적절한 위치에 붙여넣기 한다.

  → 그리고 사이트 내의 Docs 메뉴에서 원하는 컴포넌트를 선택 후 사용하면 된다.

  → 그럼 이렇게 일일이 CSS를 지정하지 않더라도 빠르게 버튼을 꾸밀 수 있다.

  → 또 이렇게 구현하기 어려운 부분도 역시나 코드를 복사해서 붙여넣으면 복잡한 기능도 빠르게
    구현이 가능하다.

로고 제작 사이트1, 로고 제작 사이트2 배경 제거 사이트

- 서비스 이름, 슬로건, 로고 정하기

  → 사이트를 제작하기 전 제작하고자 하는 사이트의 이름을 정하기 위해서 GPT에게 요청을 하면
    위와 같이 다양한 이름을 추천해준다.
  → 추천 받은 이름 혹은 내가 새롭게 만든 이름을 가지고 슬로건 추천을 부탁해서
    이름과 마찬가지로 슬로건을 추천받은 후 로고를 제작해보자.
  → 로고는 생성형 AI를 사용해서 제작할 수도 있으나, 캔바에서 제작할 수도 있다.

- 내비게이션 바 만들기

  → 내비게이션 바는 사이트 위에 있는 메뉴바를 내비게이션 바라고 한다.
  → 혼자서 만들려면 만들수는 있지만, 반응형 홉페이지에서 브라우저의 창크기에 따라 보여지는 부분을
    고려하는 등의 귀찮은 요소들이 있다.
  → 우리는 여기서 GPT와 Bootstrap에서 제공되는 네비게이션을 사용하여 빠르게 제작해보자.

  → 이런 식으로 Bootstrap에서 제공되는 기본 내비게이션 코드를 가지고 우리가 요청한 대로 코드를
    작성해준다. 결과물을 보고 우리가 수정이 필요하다고 느껴지는 부분에 대해 요청해보자.

  → 내비게이션 바의 영역에서 세로를 기준으로 정가운데에 위치할 수 있도록 코드를 수정해달라고 했다.
  → 운이 좋게 한 번에 수정이 되었으나, GPT가 우리의 요구사항을 이해하지 못하는 경우에는
    지속적으로 원하는 바를 명확하고 자세하게 지시를 하거나 대화를 새로 시작하거나 혹은
    우리가 직접 코드를 구현하고 조금 더 쉬운 요구 사항을 요청하는 수 밖에 없다.

  → 네비게이션 바에 서비스 소개와 로그인 링크를 넣어달라고 부탁한 후 전달받은 코드로 
    적용해보면 오른쪽에 있는 메뉴에 내가 요청한 내용이 담긴 것을 확인할 수 있다.

- 구독 목록 만들기

  → 위의 내비게이션 바를 제작하는 것은 어느 웹 사이트나 공통적으로 만들 수 있는 부분이지만
    지금부터 제작할 콘텐츠 영역은 우리 사이트에 특화된 내용이므로 GPT에게 조금 더 상세하고
    명확하게 요청을 해야 한다.
  → 먼저 사이트의 개요를 이야기하고 Bootstrap 라이브러리를 사용하여 제작할 것임을 알려준 후
    원하는 내용을 코드로 작성해달라고 하였다. 

  → 적용해보면 위와 같이 내가 원하는 형태로 잘 나타나는 것을 확인할 수 있다.

  → 제작된 카드 안에 원하는 내용을 넣기 위해서 GPT에게 프롬프트를 작성해주고,
    괄호 열고 어떤 내용이 들어가야 하는지 예시를 2개씩 들어주었다.

  → 요청한 내용이 담겨 있는 모습을 확인할 수 있고, 이후의 수정을 원한다면 추가적으로 GPT에게
    수정 사항을 요청하고 받은 코드를 다시 적용하는 식으로 사이트를 제작하면 된다.

  → 수정 과정에서 전체 코드를 받아서 수정하는 것이 어렵다면 GPT에게 수정을 해야 하는 부분에
    관련된 코드만 전달해 달라고 하면 코드에 대한 설명과 함께 수정해야 하는 코드를 받을 수 있다.

  → 내가 원하는 부분에 대해서 어떻게 수정을 해야 하고, 이 코드가 무엇을 의미하는지에 대해
    자세한 설명이 쓰여 있다.
  → 같은 방식으로 추가로 넣어야 하는 데이터가 있다면 위의 방법을 사용하여 내용을 추가 할 수 있다.
  → 디자인이나 추가적인 수정을 위해서는 개인의 지식을 넣어서 수정을 할 수도 있고,
    GPT에게 원하는 스타일에 대한 내용을 말하고 코드를 요청해서 수정할 수도 있다.

- Chat GPT를 잘 활용하려면

  → Chat GPT가 작성해주는 코드는 의도한 대로 작동하지 않기도하고, 오류를 발생시키기도 한다.
    대부분은 코드 수정을 요청하여 해결할 수 있지만 간혹 여러번 반복하여 요청하였지만
    원하는 코드가 나오지 않을 때도 있다.
  → 짧고 간단한 코드는 Chat GPT가 작성해줄 수 있지만 복잡한 기능을 수행하는 코드나 
    여러 파일에 걸쳐서 작성해야 하는 방대한 양의 코드는 Chat GPT에게도 무리이다.
  →
  →
  →
  →
  →
  →
  →
  →
  →

코드 실행하기

- 코드 작성하고 실행까지 한 번에

  → 파일의 형식을 바꾸는 것도 코드로 할 수 있다.
    [ 현재 폴더에 있는 WEBP 이미지 파일들을 PNG 형식으로 변환하는 파이썬 코드를 작성해줘 ]

  → GPT가 작성해준 코드를 실행시켜보면 정상적으로 PNG 파일이 생성되었다.
  → 이렇게 사용하기 위해서는 PC에 파이썬을 구동할 수 있는 환경이 구성되어야 한다. (Chat GPT-3.5)

  → Chat GPT-4부터는 코드 인터프리터 기능을 활용하면 내가 코딩에 대해서 전혀 지식이 없더라도
    Chat GPT가 직접 파이썬 코드를 작성하고 바로 실행까지 해준다.
  → 파일을 첨부하고, 해당 파일을 PNG 파일로 변경하는 파이썬 코드를 작성하여 실행시켜달라고 요청하자
    해당하는 코드를 작성 후 Download 링크까지 나타난다.
  → 코드 인터프리터는 파이썬 코드만 실행이 가능하다.

- 데이터 분석하고 시각화하기

  → 코드 인터프리터의 기능이 한 단계 더 발전한 것이 Advanced Data Analysis 줄여서 ADA라고 한다.
  → 데이터 분석 시에도 파이썬 언어를 많이 사용하는데 데이터 분석이 필요한 파일을 첨부하고,
    GPT에게 요청만 하면 가능하다.

  → Kaggle 사이트에서 가져온 한국 드라마 데이터 셋을 사용하여 데이터를 분석해보자.
  → 지난 몇 년간 방영된 드라마 중 상위 100개에 대한 정보가 담겨있는 데이터 셋이다.

  → GPT에 데이터 셋 파일을 첨부하고 해당 데이터에 대해서 분석을 요청하고 난 뒤
    GPT가 데이터 셋의 내용을 이해하고 있는지 체크한 후에 데이터 분석을 요청하자.
  → 데이터를 분석하기 위해서 명확한 아이디어가 떠오르지 않으면 GPT에게 해당 데이터를 사용하여 
    어떠한 데이터 분석 주제가 가능할 지 요청할 수도 있고, 
    원하는 아이디어가 있다면 그것을 요약하거나 분석하는 코드를 작성해달라고 요청할 수 있다.
  → 또한, 분석한 데이터를 시각화하는 코드를 작성해달라고 요청하면
    그래프로 해당 내용을 나타내준다.

이미지 다루기

- 프롬프트로 이미지 제작하기

  → Chat GPT에는 DALL-E라는 이미지 생성 모델도 포함되어 있다.
  → GPT-4를 선택하면 텍스트 입력으로 그림을 그릴 수 있다.

  → 더 구체적인 프롬프트를 짤 수록 좋은 결과물을 얻을 수 있다.
  → 가끔 두 가지 이미지를 제시하는 경우도 있는데 그럴 때에는 마음에 드는 이미지를 선택하면 된다.

  → 출력 가능한 사이즈를 지정할 수도 있고, 원하는 사이즈에 맞춰서 그려달라고 요청할 수도 있다.
  → 또한, 이미지가 사실적으로 보인다면 반고흐풍 등 원하는 스타일을 요청해서 그려달라고 할 수도 
    있다.
  → 이런 식으로 프롬프트를 한 번 보내고 바로 원하는 결과물을 얻기보다는 원하는 부분을 요청해서 
    나온 결과물을 보고 추가적으로 수정 요청을 통해서 원하는 결과물을 얻을 수 있다.

  → 이렇게 제작된 생성형 AI 이미지의 경우 판매가 가능한지, 저작권은 어떻게 되는지 궁금할 때에는 
    OpenAI의 HELP 페이지에 가면 
    [ 재인쇄, 판매 및 상품화에 대한 권리를 포함하여 DALL-E로 생성한 이미지를 소유 ] 하게 된다
    이 말인즉, 제작한 이미지를 판매할 수도 있다는 것이다.

- 이미지로 대화하기

  → Chat GPT와 대화를 할 때, 텍스트를 기반으로 하여 대화를 하였지만
    이미지를 첨부하고 첨부한 이미지에 대해서 대화를 나눌 수도 있다.
  → 이 기능은 GPT-4 with 비전 혹은 GPT-4V라고 부른다.
    이미지를 통하여 정보를 얻거나 이미지 속 텍스트를 인식하는 방법을 뜻한다.

  → 외에도 코드가 적혀있는 스크린 샷을 올리면서 이미지를 텍스트로 변환해달라고 요청할 수 있다.
  → 코드에 대한 대략적인 설명까지 곁들여서 코드를 텍스트로 변환해준다.

Chat GPT 활용법

- Chat GPT 활용 방법

  (1) 새로운 개념을 배우는 것

     → 구글에서 검색하는 것과 달리 이해가 안되는 부분이 있다면 파고들면서 질문할 수도 있고,
       너무 어려우면 조금 더 쉽게 설명해달라고 요청할 수도 있다.
     → 다만, Chat GPT는 부정확할수도 있고, 최신 정보는 반영이 잘 되지 않지만 
       오래된 개념같은 경우에는 방대한 양을 학습해서 편하게 물어볼 수 있다.
     → 해외에서는 ELI5라고 해서 Explain Like I`m 5라는 개념으로 마치 다섯 살에게 설명하듯이
       설명해달라는 표현이 있다.
     → 또한, Chat GPT의 장점은 대화식으로 궁금한 걸 계속해서 물어볼 수 있다는 것이므로 
       아무런 부끄럼 없이 호기심을 쏟아낼 수 있다.


  (2) 모르는 개념에 대해서 공부를 하고 싶은데 막연할 때 커리큘럼을 짜달라고 요청할 수 있다.

     → GPT가 짜준 커리큘럼을 기반으로 직접 자료를 찾아서 공부할 수도 있으나,
       GPT에게 설명을 해달라고 요청할 수도 있다.


  (3) Chat GPT에게 아이디어를 구하는 것

     → 영상이나 글이나 마케팅 콘텐츠를 만들어야 할 때, 아이디어를 구하고 초안을 작성해달라고 
       할 수 있다.
     → 그대로 바로 활용할 수 있는 수준은 아니지만 시작을 할 수 있다는 점에서 큰 의미가 있다.
     → 답변의 내용이 마음에 들지 않는다면 Regenerate Response를 눌러 새로운 답변을 받을 수 있다
     → 대부분의 경우 영어 답변의 퀄리티가 훨씬 높으므로 번역기를 사용해서라도 
       영어로 답변하는 것을 추천


  (4) 역할을 바꿔서 Chat GPT가 우리에게 질문하고, 우리가 답변하는 형태로 사용해보자

     → 예를 들어서 면접 연습 혹은 시험 공부를 한다거나 할 때
       GPT가 질문을 하고 우리가 답변하는 형태로 사용할 수도 있다.

- Chat GPT 활용 사례

     → Chat GPT로 공부를 할 때에는 ' 파레토 법칙 '을 생각하면 된다.
       파레토 법칙은 80:20 법칙이라고도 하는데 결과의 80%는 원인의 20%에서 발생한다는 뜻이다
     → 어떤 주제에 대해서 20%의 지식만 갖춰도 80%정도의 상황에서는 충분하다는 뜻이다.

     → 또, GPT에게 글에 대한 피드백을 구할 수도 있다. 
       GPT는 특히 영어를 잘하기 때문에, 영어가 모국어가 아닌 상황에서 영어를 써야한다면
       GPT에게 영어 글에 대한 첨삭을 부탁할 수 있다.
     → 글을 고치는 작업 외에도 피드백을 달라고 할 수도 있고, 코드를 짜는 개발자의 경우
       작성한 코드에 대한 피드백을 구할 수도 있다

     → 긴 글이 있는데 읽어볼 시간이 충분하지 않다면 GPT를 사용하여 해당 글을 요약해달라고
       부탁할 수 있다.         

Chat GPT 맞춤 설정 하기

- Custom instructions

  → 한 채팅방에서 대화가 오래 이어져서 새 채팅방을 만들면 기존 대화의 맥락이 새 채팅방에서는
    이어지지 않으므로 채팅방을 새로 열 때마다 프롬프트를 다시 입력하여 
    Chat GPT에게 배경 정보와 대화 방식을 알려줘야 한다.

  → 이런 고민을 해결할 수 있는 기능을 Custom instructions라고 하는데
    답변에 항시 반영시키고 싶은 정보나 요청 사항을 자유롭게 설정하는 기능
    설정을 마치면 이후 생성되는 모든 채팅방에 설정이 적용되기 때문에, 
    채팅방을 만들 때마다 일일이 지침을 내릴 필요가 없어진다.

  적용하는 방법은 다음과 같다.

  → 오른쪽 위 사용자 프로필을 누른 뒤, 메뉴에서 Customize ChatGPT 버튼 클릭

  → custom instructions를 설정할 수 있는 창이 나타나는데
    하단의 Enable for new chats 버튼을 켜면 입력이 가능해진다.

  → 설정할 수 있는 항목은 두가지로
     (1) 사용자에 대한 정보
         입력창을 누르면 팁을 볼 수도 있다.

     (2) Chat GPT에게 바라는 답변의 형식과 태도
         이 항목에 대한 팁을 보면 답변의 격식과 길이, 객관선은 물론이고 사용자를 어떻게 부르면 
         좋을지에 대한 부분도 설정할 수 있다.

  → custom instructions 기능을 사용하여 Chat GPT를 보조 선생님으로 만들어보자.

    (1) 입력창에는 현재 상황에 대한 정보를 입력

    (2) 입력창에는 어떤 식으로 답변을 받고 싶은지 적는다.
        입력을 마치면 SAVE 버튼을 눌러준다.
        이후 새롭게 열리는 채팅방에서 custom instructions가 적용된 챗GPT와 대화를 나눌 수 있다

  → Custom instructions 설정 후에 새로운 채팅방에서 말을 걸어 보면
    아무런 상황 설명 없이 [태양계] 라는 단어만 입력해도 설정된 방식으로 답변해준다.

  → Custom instructions적용을 원하지 않을 때에는 설정을 끄고 
    새로운 채팅방에서 대화를 나누면 된다.

1. Chat GPT로 프로그래밍 맛보기

- Chat GPT로 프로그래밍 맛보기

  프로그래밍이란?
  → '프로그래밍(코딩)'이란 컴퓨터에게 명령을 내려서 무언가를 시키는 것

  업무 자동화
  → 사람이 직접 하면 매일 반복적으로 해야 하는 귀찮은 업무를 컴퓨터가 대신 해 주도록 하는 것

  데이터 분석
  → 프로그래밍을 통해 데이터를 분석하면 새로운 인사이트를 찾아 의미 있게 활용
  → 예를 들어 어떤 서비스에 대한 데이터 분석을 통해 회사와 서비스를 어떻게 성장시켜야 할지
    전략을 짤 수 있다.

- Chat GPT로 파이썬 코드 작성하기

  파이썬 코드를 작성해서 아래처럼 * 문자로 5층짜리 트리를 출력
  *
  **
  ***
  ****
  *****

  Q. Chat GPT에게 아래의 글을 그대로 보여주며 코드를 출력해달라고 하자.

  *
  **
  ***
  ****
  *****

  이렇게 * 문자로 5층짜리 트리를 출력하는 파이썬 코드를 작성해 줘.

- 구구단 출력하기

  → GPT에게 구구단이 출력되는 코드를 짜달라고 부탁하자.
    ( 가운데의 점 세 개는 중략을 뜻하며, 실제로는 1단부터 9단까지 총 81줄이 출력 )

- Chat GPT로 업무 자동화하기

  → 바탕화면에 icons라는 새폴더를 만들고 download 폴더 내의 png 파일들을 모두 새로운 폴더로 
    옮기는 작업을 자동화 해보자.
  → 추가로 모든 이름 앞에 "icon_"가 붙도록 해보자.

  → Desktop 내에 "organize_png.py" 파일을 생성하고, Chat GPT가 생성한 내용을 붙여넣는다.

  → 파일을 실행해보면, Download 폴더 내의 png 파일이 모두 사라졌고,

  → 바탕화면에 가면 icons라는 폴더가 새로 생성된 것을 확인할 수 있고, 
    그 안에 png 파일들이 전부 옮겨진 것을 확인할 수 있다.

  → 또, 모든 파일 앞에 icon_이라는 단어를 붙여 이름이 변경된 것도 확인할 수 있다.
  → 지금 만든 프로그램의 경우, 요구 사항이 명확하고, 비교적 간단한 프로그램이라 오류없이 잘 작동
    그러나 하고 싶은 업무가 조금씩 복잡해질수록 ChatGPT가 잘 동작하는 코드를 써 줄 가능성이
    조금씩 낮아진다.
  → GPT가 코드를 짜주더라도 결국은 프로그래밍 공부가 필수적

- Chat GPT로 데이터 분석하기

  → 위와 같이 K드라마, 한국 드라마 데이터 셋이 있을 때, 
    여기에는 지난 몇 년 동안 방영된 드라마 중 상위 100개가 담여있는 데이터 셋이다.
  → 데이터 셋에는 드라마 제목, 방영을 시작한 연도, 방영 기간, 방영 요일, 에피소드의 수,
    방송사, 에피소드 당 길이, 줄거리, 출연진, 장르, 태그, 순위, 평점이 있다

  → 테이블 형태로 엑셀처럼 나타나고 있지만, 사실 파일은 csv 파일로 데이터 사이언스에서 흔히 쓰이는
    방식으로 나타난다.


  → Chat GPT에 마찬가지로 
    [ 너는 지금부터 데이터 사이언티스트야. 내가 부탁하는 대로 파이썬 코드를 써 줘. ]라고 
    역할을 부여한다.
  → 데이터 셋에 대한 안내를 먼저 해준다.
    [ 우선 데이터 셋에 대해 설명을 해줄게. 한국 탑 100 드라마에 대한 데이터 셋이고, 
      top100_kdrama.csv라는 파일에 있어. 파일의 첫 다섯 줄을 보여 줄게 ] 라고 작성한 뒤
    csv 파일의 첫 5줄을 붙여넣기 한다. csv 파일의 첫 줄은 데이터 셋의 컬럼들 즉,
    이 데이터 셋에는 어떠한 내용들이 들어 있는지가 나와있다.
    [ csv 파일의 첫 줄을 보고 데이터 셋에 어떤 컬럼이 있는지 블릿 포인트 형식으로 알려줘 ] 라고
    작성한 뒤 확인해보면

  → 실제로 우리가 확인한 내용과 동일한 내용이 들어 있는지, 들어 있다면 Chat GPT가 내용을 제대로 
    확인했다는 뜻이 되므로 데이터 셋을 파악했다고 할 수 있다.

  → 데이터 분석에는 정답이 없으므로 Chat GPT에게 어떤 분석을 하면 좋을지 아이디어를 구해보면
    이런 식으로 몇 가지 아이디어를 제공해준다.

  → 원하는 내용에 대해 파이썬 코드를 작성해달라고 요청하면 빠르게 코드를 작성해준다.

  → 코드를 복사하여 Jupyter Notebook이라는 데이터 사이언스에서 주로 활용하는 프로그램에 실행시켜
    보면 인기 있는 장르 탑 5를 보여준다.

  → 여기서 장르가 여러 장르를 하나의 장르로 인식하고 있기 때문에 Chat GPT에게 이 장르 묶음을
    개별적인 장르로 인식해달라고 부탁해보자.

  → 작성해준 코드를 사용하여 다시 실행시켜보면, 원하는 대로 개별적인 장르가 나온다.
  → 결과물을 보면 같은 Drama라는 장르가 두 개로 나타나는데 앞 뒤의 띄어쓰기 여부에 따라 
    다른 장르로 인식하는 것 같기 때문에 다시 한 번, Chat GPT에게 가이드를 주면

  → 문제로 지적한 부분을 개선하여 원하는 답이 나올 수 있도록 코드를 다시 짜준다.
  → 그 외에도 해당 결과물을 시각적으로 표현하는 코드를 작성해달라고 하거나,
    다른 데이터를 분석해 볼 수 있는 코드를 작성해달라고 해도 역시 원하는 결과를 얻을 수 있도록
    GPT가 코드를 작성해준다.

- 티셔츠 판매량 분석하기

  매장,파란 티셔츠,하얀 티셔츠,검은 티셔츠
  A 매장,78,90,63
  B 매장,98,50,95
  C 매장,93,76,85
  D 매장,99,54,65
  E 매장,74,72,59
  F 매장,74,61,58
  G 매장,59,104,59
  H 매장,89,78,78
  I 매장,56,67,86
  J 매장,96,70,95

  → 위와같은 데이터 셋이 있을 때, 티셔츠 총판매량이 많은 순서대로 매장 이름을 한 줄씩 출력해보자.

    import pandas as pd

    # 데이터 파일 경로
    file_path = "data/sales.csv"

    # CSV 파일 읽기
    df = pd.read_csv(file_path)

    # 티셔츠 총 판매량 계산
    df["총 판매량"] = df["파란 티셔츠"] + df["하얀 티셔츠"] + df["검은 티셔츠"]

    # 총 판매량 기준으로 내림차순 정렬
    sorted_df = df.sort_values(by="총 판매량", ascending=False)

    # 매장 이름만 출력
    for store in sorted_df["매장"]:
        print(store)


  → GPT가 직접 짜준 코드는 위와 같다.

    J 매장
    C 매장
    H 매장
    B 매장
    A 매장
    G 매장
    D 매장
    I 매장
    E 매장
    F 매장

  → 결과를 출력해보면 다음과 같이 출력된다.

1. 시작하기

- HTML 이란?

  → HTML은 웹 사이트 내용을 담당하고 CSS는 웹 사이트의 스타일을 담당하는 언어
  → HTML은 Hyper Text Markup Language의 약자로 
    Hyper Text의 의미는 서로 링크로 연결된 문서를 의미하며, 
    Markup Language는 마크업하는 프로그래밍 언어 
    즉, 내용에 추가적인 정보를 표시하는 프로그래밍 언어를 뜻한다.
  → 다시 말해서 HTML은 서로 링크로 연결된 문서를 만들 때 쓰이며, 내용 뿐만 아니라 추가적인 
    정보도 표시 한다.

  → 글쓴 사람이 어떤 내용이 제목이고 본문인지 정확하게 표시해주는 것이 마크업의 역할
  → 마크업을 사용하면 왼쪽과 같이 이런 글로 쓰인 정보를 문서의 구조와 의미를 만들 수 있다.


- HTML의 기본 문법

  <a href="reservation.html">예약</a>

  → 꺾쇠로 감싸져 있는 것을 태그라고 부르고, 꺾쇠 바로 옆에 적혀 있는 것이 태그의 이름을 뜻한다.

  → 태그 중에서도 앞에 있는 것을 시작 태그, 뒤에 있는 것을 종료 태그라고 한다.
  → 시작 태그와 종료 태그 사이에 있는 것은 내용이라고 한다.

  → 시작 태그에는 속성이 있는데, 속성에는 속성 이름과 값으로 나누어진다.

  → 참, 거짓을 값으로 하는 속성에서는 속성 이름만 쓰는 방법이 있다.
  → 속성 값을 참으로 하고 싶으면 이렇게 속성 이름만 작성하고, 속성 값을 거짓으로 하고 싶으면 
    아예 아무 것도 쓰지 않는 방식

  → 기본적으로 HTML 파일의 구조는 위와 같다
  → 맨 처음에는 무조건 <!DOCTYPE html> 이라고 작성해야 하는데
    이것은 이 문서가 HTML로 작성되었다고 적어주는 것
  → 그 다음에는 <html></html> 태그로 전체를 감싸준다.
    이 태그는 HTML 문서 전체를 감싸는 용도의 태그
  → <head></head>에는 페이지에 대한 정보가 들어가고, 
    <body></body>에는 화면에 보이는 내용이 들어간다.

  → HTML 문서에서 태그를 작성할 때에는 위와 같이 들여쓰기를 하는데 
   <html></html>태그로 <body></body> 태그를 감싼 것처럼 태그로 태그를 감싸는 경우에는
   그 안에 있는 시작 태그와 종료 태그를 두 칸씩 들여쓰기를 해서 사용한다.
  → 들여쓰기는 동작이나 내용에 영향을 주지는 않고, 코드를 읽기 편하도록 만드는 용도

- 코멘트

  → 코멘트는 웹사이트에 아무런 영향을 주지 않는다. (브라우저가 무시하기 때문)
  → 코멘트는 메모를 남길 때 사용한다.
    코드를 쓰다보면 메모를 남기고 싶을 때가 있는데 코드에 코멘트를 작성하면 다른사람이 코드를
    볼 때에도 도움이 된다.
  → 또, 코멘트는 코드를 잠깐 감추고 싶을 때 사용한다.
    코드에서 문제가 생기면 어떤 부분이 문제인지 확인하기 위해 잠깐 숨길 때 사용
  → CTRL + /를 누르면 해당 코드가 코멘트(주석)처리가 된다.

2. 링크

- 링크의 상대 주소

  → 웹사이트에서 링크는 페이지와 페이지를 이어주는 것으로 링크를 만들 때에는 <a>태그를 사용
  → href라는 속성이 있고, 여기에 주소를 속성 값으로 적으면 링크를 클릭했을 때 해당 주소로 이동

  → index.html 파일에는 링크가 2개가 있는데 하나는 네이버 영화 사이트로 이동, 
    다른 하나는 contents.html 파일로 이동하는 링크이다.
  → 이런식으로 파일 경로를 써주면 현재 경로를 기준으로 이동한다.
  → href의 값으로는 기본적으로 사이트 주소 전체를 쓰거나 경로를 쓸 수 있다.

  → 여기서 http://127.0.0.1:3000 이런식으로 적혀져 있는데 
    이것은 라이브 프리뷰가 서버를 실행해서 내 컴퓨터에서만 쓰는 주소로 접속할 수 있게 해준 것

  → index.html 파일에는 숨은 기능이 있는데 같은 index.html 파일이지만 하나는 movies라는
    폴더 내에 있을 때, 경로를 movies/라고만 써도 된다.
  → index.html 파일은 이런 식으로 폴더의 경로로 접속했을 때 기본으로 보여주는 파일

  → 상대적인 주소에서는 지금처럼 파일의 이름만 써도 되지만, 상대적인 경로를 써서 표현할 수 있다.
  → 상위 폴더로 이동할 때에는 ../ 여기서 .는 현재 폴더를 의미하고, ..는 상위(부모)폴더를 의미

  → 상위의 상위폴더로 이동할 때에는 ../../를 두 번 써주면 된다.

  → 문제는 폴더가 많아지고 폴더에 폴더의 폴더가 생기면 여러번 써서 쓸 수가 없으로 
    최상위 폴더를 기준으로 작성한다.

- 페이지 안에서 이동하기

  → URL 프래그먼트는 주소 맨 마지막에 붙어서 해당 주소의 일부분을 가르키는 용도
  → id 속성에다가 이름을 지정해놓으면 주소의 맨 마지막에 프래그먼트로 사용할 수 있다.
  → id와 URL 프래그먼트는 꼭 똑같을 필요는 없다.
  → 주의할 점은 id 값을 주소에 쓰는 것이므로 띄어쓰기 등은 쓸 수 없다.

  → href 속성 뒤의 속성 값으로 각 태그의 id 값을 넣어주었다.

- 새 창 열기

  → a태그에서 href속성 값만 쓰게 되면 현재 탭에서 링크로 이동하는데 
    만일 새 창에서 href의 속성 값으로 쓰인 주소 혹은 경로로 이동하길 원한다면 target이라는 속성을
    사용할 수 있다.

  → href 속성값 뒤에 target속성을 사용할 수 있는데 다양한 속성 값을 필요에 의해 지정하여 사용
    (1) target="_blank"는 새 창 혹은 새 탭으로 여는 것
    (2) target="_self"는 현재 창에서 열리는 것을 의미하며 target을 정하지 않으면 이 값이 기본값
    (3) target="movie" 이런식으로 내가 원하는 단어로 지정하게 된다면 새 탭에서 열린다.
        그렇다면 해당 창의 이름은 movie라는 이름의 창이 된다.


- 다양한 링크 동작

  → 링크는 보통 해당 주소의 페이지로 연결해준다.
  → [페이지연결] 외에도 다른 동작들도 가능한데 https:// 혹은 http:// 대신에 다른 내용을 넣는
    이러한 약속들을 URL 스킴(URL SCHEME)이라고 한다.


  이메일 보내기

  → mailto:<이메일 주소>를 사용하면 이메일을 보낼 수 있다.
  → 이 링크를 클릭하면 이메일 프로그램이나 이메일 앱을 열 수 있고,
    받는 사람의 주소에 링크에 적힌 이메일 주소를 자동으로 입력해준다.

  <!-- test@example.com으로 이메일 보내기 -->
  <a href="mailto:test@example.com">메일 보내기</a>


  전화 걸기

  → tel:<전화번호>를 사용하면 전화를 걸 수 있다.
  → 데스크톱 컴퓨터에서는 전화 기능이 없지만, 스마트폰에서 이 링크를 클릭하면 전화앱으로 연결

  <!-- 한국의 010-1234-0123으로 전화걸기 -->
  <a href="tel:+821012340123">전화 걸기</a>

IANA의 URL 스킴 목록

- 링크 정리

  링크의 상대 주소(Relative URL)
  → 현재 폴더는 점 한 개(./)로 표시하고, 상위 폴더는 점 두 개(../)로 표시
  → 최상위 폴더는 경로 맨 앞에 / 로 시작
  → index.html 파일은 이름을 생략하고 폴더 이름만 쓸 수 있다.

  → myeong-ryang.html에서 최상위 폴더에 있는 index.html로 연결하는 링크 예시

  <a href="../../index.html">홈페이지로 가기</a>
  <a href="../../">홈페이지로 가기</a>
  <a href="/index.html">홈페이지로 가기</a>
  <a href="/">홈페이지로 가기</a>


  URI 프래그먼트(URI Fragment)
  → 페이지의 특정 부분을 가리키는 주소
  → 원하는 곳에 id 속성을 지정해 두고, 링크 주소로 사용할 때는 맨 끝에 #으로 시작하는
    #아이디-이름을 쓴다.

  팀 버너스리는 "인터넷 사용 자체가 인권"<a href="#note-1">[1]</a>이라고 말했다.
  ...
  <p id="note-1">[1] 서울디지털포럼 2013 기조연설</p>


  target 속성
  → 새 창(새 탭)으로 열거나 현재 창 또는 내가 원하는 창으로 열 수 있다.

  <a href="https://movie.naver.com" target="_blank">
  <!-- 새 창으로 열기 -->
    네이버 영화 
  </a>

  <a href="https://movie.naver.com" target="_self">
  <!-- 현재 창 -->
    네이버 영화
  </a>

  <a href="https://movie.naver.com" target="movie">
  <!-- 내가 원하는 창 -->
    네이버 영화
  </a>

  <a href="https://movie.daum.net" target="movie">
  <!-- 내가 원하는 창 -->
    다음 영화
  </a>

  <a href="https://imbd.com" target="movie">
  <!-- 내가 원하는 창 -->
    imbd
  </a>

3. 텍스트

- 자주 쓰는 텍스트 태그

  마크업의 의미를 이해하자

  제목 태그 <h1> ~ <h6>
  → 문서의 제목을 나타내는 태그

    <h1>한국 영화</h1>

    <h2>한국 영화의 역사</h2>
    <h3>1950년대: 침체기</h3>
    <h3>1960년대: 황금기</h3>
    <h3>1970년대: 쇠퇴기</h3>
    <h3>1980년대: 암흑기</h3>
    <h3>1990년대: 전환점</h3>
    <h3>2000년대: 르네상스</h3>
    <h3>2010년대: 최전성기</h3>
    <h3>2020년대: 대격변</h3>

    <h2>유명한 한국 감독</h2>
    <h3>박찬욱</h3>
    <h3>봉준호</h3>
    <h3>임권택</h3>
    <h3>김기덕</h3>
    <h3>김기영</h3>
    <h3>최동훈</h3>

  → 위 HTML 코드에 담겨 있는 정보의 구조를 그려보면 아래처럼 나타난다.
    이런 식으로 문서에서 제목을 나누는 태그

    - 한국 영화
      - 한국 영화의 역사
        - 1950년대: 침체기
        - 1960년대: 황금기
        - 1970년대: 쇠퇴기
        - 1980년대: 암흑기
        - 1990년대: 전환점
        - 2000년대: 르네상스
        - 2010년대: 최전성기
        - 2020년대: 대격변
      - 유명한 한국 감독
        - 박찬욱
        - 봉준호
        - 임권택
        - 김기덕
        - 김기영
        - 최동훈


  본문 <p>
  → 본문을 작성할 때 쓰는 태그

    <h1>한국 영화</h1>

    <h2>한국 영화의 역사</h2>
    <h3>1950년대: 침체기</h3>
    <p>
        1950년대에는 한국전쟁이 일어나면서 영화계는 침체를 맞게 됩니다.
        하지만 1950년대 중반을 지나서 그 사이 발전된 기술에 힘입어
        점점 많은 영화가 나오기 시작하더니 1950년대 후반에 들어서는 1년에 100편 가까이
        제작되었습니다.
    </p>
    <h3>1960년대: 황금기</h3>
    ...

  → 위 HTML 코드에 담겨 있는 정보의 구조는 다음과 같습니다.

    - 한국 영화
      - 한국 영화의 역사
        - 1950년대: 침체기
          - 1950년대에는 한국전쟁이 일어나면서 영화계는 침체를 맞게 됩니다.
              하지만 1950년대 중반을 지나서 그 사이 발전된 기술에 힘입어 ...
        - 1960년대: 황금기
        ...


  줄바꿈 <br>
  → 제목이나 본문 같은 데서 줄을 바꿀 때 사용하는 태그
  → 줄 바꿈이 없으면 보통 아래처럼 한 문단으로 이어서 보여준다.

    <p>
        1950년대에는 한국전쟁이 일어나면서 영화계는 침체를 맞게 됩니다.
        하지만 1950년대 중반을 지나서 그 사이 발전된 기술에 힘입어
        점점 많은 영화가 나오기 시작하더니 1950년대 후반에 들어서는 1년에 100편 가까이
        제작되었습니다.
    </p>

  → 만약에 여기에 강제로 줄 바꿈을 하고 싶으면 <br> 태그를 사용

    <p>
        1950년대에는 한국전쟁이 일어나면서 영화계는 침체를 맞게 됩니다.<br>
        하지만 1950년대 중반을 지나서 그 사이 발전된 기술에 힘입어
        점점 많은 영화가 나오기 시작하더니 1950년대 후반에 들어서는 1년에 100편 가까이 제작되었습니다.
    </p>

  중요 <strong>
  → 중요한 내용을 강조해서 표시할 때 사용하는 태그

    <p>
        코드잇 영화관에서는 영화 상영 전 광고없이 정시에 상영을 시작합니다.
        정시에 입장하여 관람중인 관객들을 위해
        <strong>상영 시작 10분 후에는 입장이 제한됨을 알려드립니다.</strong>
    </p>

  → 크롬 브라우저에서는 기본적으로 <strong> 태그를 두꺼운 글씨로 보여준다.
    주의할 점은 두꺼운 글씨를 쓰고 싶다고 이 태그를 사용해서는 안된다.
  → 꾸미기를 위해 두꺼운 글씨를 쓸 때에는 CSS로 두꺼운 글씨를 만들고 의미상 강조의 의미인 경우만
    <strong>태그를 사용


  강조 <em>
  → HTML에서도 <em> 이라는 태그를 사용해서 강조를 나타낼 수 있다.

    <p>
      제 이름은 윤 <em>여정</em>입니다. 요정도 아니고 유정도 아니고 여정이죠.
    </p>

  → 참고로 크롬 브라우저에서는 <em> 태그의 기본 디자인을 기울어진 글씨로 보여주는데
    영어권에서 강조할 때 주로 사용하는 표시


  취소 <s>
  → 어떤 내용을 적었다가 지우지 않고, 지웠다는 표시만 남기고 싶을 때 내용이 취소 혹은 제거 되었다는
    의미를 표현할 때 <s>태그를 사용

    <p>
        <s>단체 관람을 원하시는 분들은 코드잇 홈페이지에서 예약해주세요.</s>
        <br>
        현재 코로나 방역으로 인해 극장 입장을 20인으로 제한하고 있어 단체 관람이 어렵습니다.
    </p>

  인용 <blockquote>, <q>
  → 다른 곳에서 가져온 내용을 긴 글로 인용할 때 사용

    <blockquote>
        또 감사드릴 분이... 저는 경쟁을 싫어합니다. 제가 어떻게 글렌 클로즈를
        이기겠어요? 저는 그녀의 영화를 수없이 많이 봤습니다. 5명 후보가 모두 각자 다른
        영화에서의 수상자입니다. 우리는 각자 다른 역을 연기했잖아요. 우리끼리 경쟁할
        순 없습니다. 오늘 제가 여기에 있는 것은 단지 조금 더 운이 좋았을 뿐이죠.
        여러분보다 조금 더 운이 좋았네요. 그리고 아마도 미국인들이 한국 배우를
        대접하는 방법일 수도 있죠. 아무튼 감사합니다.
        <br>
        - 윤여정, 오스카 수상소감 중에서
    </blockquote>

  → 글 안에서 짧게 인용할 때는 <q> 를 쓰면 된다.

    <p>
        윤여정은 오스카에서 김기영 감독에 대한 애정을 표시하기도 했습니다.
        <q>
            저는 이 상을 저의 첫 번째 감독님, 김기영에게 바치고 싶습니다.
            아주 천재적인 분이셨고 제 데뷔작을 함께 했습니다.
        </q>
        수상 소감의 마지막을 그녀가 존경하는 한국의 천재 감독을 언급한 것이죠.
    </p>

  → 크롬 브라우저에서는 기본적으로 <q> 태그를 따옴표로 감싸는 디자인으로 보여진다.


  위 첨자, 아래 첨자
  → 약간 작은 크기의 글자를 위나 아래에 붙여서 쓰는 걸 위 첨자, 아래 첨자라고 한다.

    <p>
        물의 화학식은 H<sub>2</sub>O이고, 3의 제곱(3<sup>2</sup>)은 9이다.
    </p>

  주제 전환(Thematic Break)
  → 과거에는 가로 선(Horizontal Line)이라고 불러서 <hr> 라고 쓰지만, 
    최근 HTML에서는 글에서 주제를 전환할 때 쓰는 태그
  → 브라우저에서는 기본적으로 가로 선을 그어서 보여진다.

    <p>
        윤여정은 오스카에서 김기영 감독에 대한 애정을 표시하기도 했습니다.
        <q>
            저는 이 상을 저의 첫 번째 감독님, 김기영에게 바치고 싶습니다.
            아주 천재적인 분이셨고 제 데뷔작을 함께 했습니다.<sup>[1]</sup>
        </q>
        수상 소감의 마지막을 그녀가 존경하는 한국의 천재 감독을 언급한 것이죠.
    </p>
    <hr>
    <p>
        [1] "윤여정, 오스카 최고의 수상소감"…미국 '들썩', KBS뉴스 2021.04.27.
    </p>

  미리 서식이 정해진 텍스트 <pre>
  → 본문 태그인 <p> 처럼 글을 이어서 보여주는 게 아니라, HTML에 적혀있는 그대로 보여주는 태그
  → 보통 코드 같을 것을 쓸 때에 많이 사용

    <p>body 태그의 배경색과 글자색을 바꾸는 CSS 코드입니다.</p>
    <pre>
        body {
            background-color: #000000;
            color: #ffffff;
        }
    </pre>

  코드 <code>
  → 글 안에서 짧은 코드를 작성할 때 사용한다.

    <p><code>body</code> 태그의 배경색과 글자색을 바꾸는 CSS 코드입니다.</p>
    <pre>
        body {
            background-color: #000000;
            color: #ffffff;
        }
    </pre>

4. 리스트

- 순서 리스트 (Ordered List, ol)

  → 위와 같이 상영작의 순위를 작성한다고 하였을 때, 숫자를 일일이 입력하여 순위를 작성할수도 있으나
    다음주가 되어 새로운 1위가 나타나고 나머지 순위를 내려야 하는 경우에는 작업이 귀찮아진다.
  → 이럴때 순서 리스트를 쓰면 훨씬 편하게 바꿀 수 있다.
  → 순서 리스트는 <ol></ol>태그를 사용하여 작성할 수 있으며 각 항목에는 List Item이란 뜻의
    <li></li>태그를 사용하여 감싸준다.

  → 순서 리스트는 태그 자체가 순서의 의미를 가지고 있기 때문에 코드에 적혀 있는 순서대로
    내용에 순서가 생긴다.

- 순서 없는 리스트 (Unordered List, ul)

  → 순서가 없는 리스트를 작성할 때에는 <ul></ul>태그를 사용하고, 마찬가지로 List Item, 
    <li></li>태그를 사용


- 리스트 스타일링

  → 순서 리스트와 순서 없는 리스트를 쓰면 HTML로 그 의미를 분명하게 나타낼 수 있어 좋다.
  → 리스트의 스타일링을 위해서는 type이라는 속성을 사용할 수 있다.
  → 겉모양만 스타일링하는 것이 아니라 마크업으로 순서를 어떻게 표시할지 정하는 것

  → <ol type="a">라고 작성하면 abc 순서로 순서가 매겨진다.

  → <ol type="A">라고 작성하면 ABC 순서로 순서가 매겨진다.

  → <ol type="i">라고 작성하면 소문자로 로마 숫자를 사용할 수 있다.

  → <ol type="I">라고 작성하면 대문자로 로마 숫자를 사용할 수 있다.

  → 이러한 방식 외에도 CSS로 보여주는 모양만 바꿀 수도 있다.

  → 이렇게 다양한 속성 값들이 있어서 필요에 따라 맞춰서 속성 값을 사용하면 된다.
  → 여기서 decimal-leading-zero라는 값은 앞에 숫자 0을 채워서 보여주는 것을 의미
  → 또, hangul이라는 속성 값은 한글로 순서를 표기하는 방식을 의미

  → 이런 식으로 ul태그의 list-style을 none으로 설정하면, 리스트가 마치 그냥 본문처럼 보인다.
  → 개발자 도구로 확인해보면 li 태그들이 div 태그처럼 보인다.
  → HTML태그 상으로는 리스트이지만 겉모습은 내가 원하는 대로 꾸미고 싶을 때 사용한다.

  → 예를 들어서 ul 태그 안에 있는 li 태그들을 인라인 블록으로 만들고, 테두리를 넣으면 위와 같다.
  → 이런 식으로 스타일을 넣어주면 내가 원하는 디자인으로 보여주면서도, HTML에서는 목록이라는 
    의미를 분명하게 나타낼 수 있다.


- 글로벌 내비게이션 바

  웹사이트는 주로 화면 맨 위쪽에 메뉴가 있습니다. 
  이런 걸 글로벌 내비게이션 바(Global Navigation Bar)라고 하는데요.      
  style.css 파일을 수정해서 아래 스크린샷처럼 리스트 스타일링을 해 보세요.

  → 먼저 리스트에 있는 동그라미 기호부터 없앤 뒤에 
  → 리스트 항목 앞에 붙는 기호를 바꾸려면 list-style이라는 CSS 속성을 사용
  → ul.menu 선택자에다 list-style: none이라고 추가한다.
  → 이렇게 하면 HTML 코드 상으로는 목록이라는 의미가 있지만, 겉모습은 내가 원하는 대로 꾸밀
    수 있습니다.

  ul.menu {
    display: inline-block;
    margin: 0;
    list-style: none;
  }

  → 각 리스트 항목을 한 줄로 만들고, ul.menu > li라는 선택자에서 display: inline-block을 추가

  ul.menu > li {
    margin: 16px;
    display: inline-block;
  }

index.html

    <!DOCTYPE html>
    <html lang="ko">
    <head>
      <meta charset="utf-8">
      <title>코드잇</title>
      <link rel="stylesheet" href="style.css">
    </head>
    <body>
      <div class="gnb">
        <img id="logo" src="logo.svg">
        <ul class="menu">
          <li>커리어</li>
          <li>스킬</li>
          <li>챌린지</li>
          <li>커뮤니티</li>
        </ul>
      </div>
      <div class="main">
        <h1>배움의 기쁨을 세상 모두에게</h1>
      </div>
    </body>
    </html>


style.css

    .gnb {
      border-bottom: 1px solid #dddddd;
    }

    #logo {
      height: 20px;
    }

    ul.menu {
      display: inline-block;
      margin: 0;
      list-style: none;
    }

    ul.menu > li {
      margin: 16px;
      display: inline-block;
    }

    .gnb,
    .main {
      padding: 16px;
    }

- 리스트 정리

  순서 리스트(Ordered List)
  → 항목들 사이에 순서가 있는 목록을 작성할 때 <ol>이라는 태그를 감싸고, 그 안에 항목은 
    <li> 태그를 사용

    <h2>상영작 순위</h2>
    <ol>
      <li>라라랜드</li>
      <li>명량</li>
      <li>극한직업</li>
      <li>신과함께: 죄와 벌</li>
      <li>국제시장</li>
      <li>어벤져스: 엔드게임</li>
    </ol>


  순서 없는 리스트(Unordered List)
  → 항목들 사이에 순서가 없는 목록을 작성할 때 <ul>이라는 태그를 감싸고, 그 안에 항목은 
    <li> 태그를 사용

    <h2>카테고리</h2>
    <ul>
      <li>한국 영화</li>
      <li>외국 영화</li>
      <li>드라마</li>
      <li>예능</li>
      <li>영화</li>
      <li>프로야구</li>
    </ul>


  리스트 스타일링
  → 순서 리스트에서는 type 속성으로 기호를 바꿀 수 있다.

  <ol type="I">
    <li>라라랜드</li>
    <li>명량</li>
    <li>극한직업</li>
    <li>신과함께: 죄와 벌</li>
    <li>국제시장</li>
    <li>어벤져스: 엔드게임</li>
  </ol>

  → list-style이라는 CSS 속성으로도 바꿀 수 있다.

    ul {
      list-style: disc; /* 동그라미 */
    }

  → 기호를 없애고 싶을 때는 none을 사용

    ul {
      list-style: none; 
    }

  → 리스트 항목을 한 줄로 쓰고 싶으면 display: inline-block을 활용
  → 내가 원하는 디자인으로 보여주면서도 HTML에서는 목록이라는 의미를 분명하게 나타낼 수 있다.

    ul > li {
      display: inline-block;
    }

5. 테이블

- 테이블 태그

  → pre-formatted라는 뜻을 가진 <pre>태그는 미리 모양이 정해져 있다고 생각하고,
    코드에 적힌 모양대로 보여주는 태그를 뜻한다.
  → 위와 같이 표를 만든다고 했을 때 매번 이렇게 스페이스로 줄을 맞추는 것도 어렵고,
    내용이 깔끔해보이지도 않는다.

  → 표를 만들 때에는 <table></table>이라는 태그를 사용하는데 안에는 <tr><td><th>등의 태그로
    감싼다.
  → <tr>태그는 table row의 약자로 표에서 가로에 해당하는 행을 나누는 태그이다.
  → 그리고 나서 세로에 해당하는 열을 나누어 주면 되는데 <tr>태그 안에서 <td>라는 태그를 사용한다.
  → <td>태그는 table data cell의 약자로 표에서 한 칸을 의미한다. 
  → HTML에서 표를 나타낼 때에는 table이라는 태그를 쓰고 먼저 tr, table row로 각 행을 나눈 다음
    각각의 항목들을 td, table data cell로 나누어준다.

- 머리글 바닥글

  → <thead>, table head라는 태그를 감싸주어 표현할 수 있다.
  → 표 안에서도 제목에 해당하는 셀들은 데이터가 아니라 제목이므로 <th>, table header라는 태그로 
    바꾸어준다.
  → 크롬 브라우저에서는 table header를 굵은 글씨로 보여준다.
    보이는 모양은 CSS로 얼마든지 바꿀 수 있으므로 HTML 태그로 사용했을 때에는 이렇게 나오는구나
    정도만 참고로 알아두자.

  → <tbody>, table body라는 태그로 감싸주어 본문의 내용을 표현할 수 있다.
  → <tfoot>, table foot이라는 태그도 있는데 이것은 바닥글에 사용하는 태그이다.
  → 각 줄에서도 table header로 해당되는 모바일+태블릿+PC, TV, 화질, 동시 시청, 다운로드 부분은
    td 대신에 th, table header로 바꾸어준다.
  → 이렇게 작성하면 table row안에서도 어떤 것이 헤더인지 마크업만 보고 알 수 있다.

  → 크롬 브라우저에서 헤더는 굵은 글씨에 가운데 정렬을 하여 보여준다.

  → 이런 마크업을 사용하면 정보를 좀 더 명확하게 코드로 표현할 뿐만 아니라
    스타일링 할 때에도 편리한 점이 많으므로 잘 알아두자.

- 테이블 스타일링

  → 테두리를 지정하는 방법은 table 태그와 th, td 이 태그들에 적용할 수 있다.
  → 다시 말해서 테이블 전체에 테두리를 정하거나 각 셀마다 테두리를 정할 수 있다.
  → 원하는 부분에 스타일링을 하고 싶다면, 선택자를 사용해서 CSS를 적용할 수 있다.

  → 테두리 사이의 간격은 기본적으로 표에 있는 여백이 표시되는데 
    border-collapse: collapse;라고 하면 이 공간이 사라진다.
  → 테두리들끼리 겹쳐서 어떤 테두리는 안 보이는데 테이블에 지정한 테두리는 안보이고, 
    table head 안에서 지정한 테두리는 다 보인다.
    또, table data cell에 지정한 테두리가 보입니다.

  → 기본적으로 테두리 사이의 간격이 줄어들면 thead, tfoot에 있는 border가 우선적으로 보이고,
    그 다음으로 th, td 그리고 table 순으로 보인다.
  → 테이블의 테두리를 굵게 지정하면 굵은 테두리를 우선적으로 보여준다.

  → 테이블 사이의 공간을 늘릴 때에는 border-spacing 이라는 속성을 사용해서 늘릴 수 있다.


- 테이블 정리

  테이블
  → 정보를 표로 나타낼 때는 <table> 태그를 사용
  → 테이블의 행은 <tr> (Table Row)태그로 감싼다. 각 데이터들은 <td> Table Data 태그로 넣는다.

    <table>
      <tr>
        <td></td>
        <td>Premium</td>
        <td>Standard</td>
        <td>Basic</td>
      </tr>
      <tr>
        <td></td>
        <td>₩15,900</td>
        <td>₩10,900</td>
        <td>₩8,900</td>
      </tr>
      <tr>
        <td>화질</td>
        <td>최대</td>
        <td>FHD</td>
        <td>HD</td>
      </tr>
      <tr>
        <td>다운로드</td>
        <td>무제한</td>
        <td>월 30회</td>
        <td>불가</td>
      </tr>
    </table>


  머리글
  → 표에서 머리글은 <thead> 태그로 감싸면 된다.
  → 행은 <tr> 태그로 감싸 주면 된다. 
  → 각 행 안에 있는 것들은 제목이기 때문에 <td>가 아니라 <th>라는 태그를 넣는다.
  → 본문에 해당하는 행들은 <tbody>라는 태그로 감싼다.

    <thead>
      <tr>
        <th></th>
        <th>Premium</th>
        <th>Standard</th>
        <th>Basic</th>
      </tr>
      <tr>
        <th></th>
        <th>₩15,900</th>
        <th>₩10,900</th>
        <th>₩8,900</th>
      </tr>
    </thead>
    <tbody>
      <tr> ... </tr>
      ...
    </tbody>


  바닥글
  → 표에서 바닥글은  <tfoot> 태그로 감싸면 된다.
  → <thead>와 마찬가지로 행은 <tr>로 감싼다.
  → 제목으로 쓰는 칸은 <th> 태그를 넣는다.

    <table>
      <thead>
        <tr>
          <th></th>
          <th>Premium</th>
          <th>Standard</th>
          <th>Basic</th>
        </tr>
      </thead>
      <tbody>
        ...
      </tbody>
      <tfoot>
        <tr>
          <th></th>
          <th>₩15,900</th>
          <th>₩10,900</th>
          <th>₩8,900</th>
        </tr>
      </tfoot>
    </table>

  테이블 스타일링

  테두리 넣기
  → border 속성을 사용해서 테두리를 넣을 수 있다.
  → 표 전체에 테두리를 넣고 싶으면 <table> 태그에 적용하고, 각 셀에 적용하고 싶으면 <td> 태그에
    적용

    table {
      border: 1px solid red; 
      /* 표 전체의 테두리를 빨간색으로 */
    }

    th {
      border: 1px solid green; 
      /* 제목 셀의 테두리를 초록색으로 */
    }

    td {
      border: 1px solid blue; 
      /* 각 셀의 테두리를 파란색으로 */
    }

  테두리 겹치기
  → 기본적으로 표의 테두리는 서로 간격이 있어서 표 전체, 각 셀마다 보인다.
  → 이 간격을 없애고 테두리끼리 겹치고 싶다면 border-collapse 속성을 활용

      table {
      border: 1px solid red;
      border-collapse: collapse;
    }

    th {
      border: 1px solid green;
    }

    td {
      border: 1px solid blue;
    }

  테두리 간격
  → 테두리 사이의 간격을 직접 조절하고 싶다면 border-spacing이라는 속성을 사용

    table {
      border: 1px solid red;
      border-spacing: 10px;
    }

    th {
      border: 1px solid green;
    }

    td {
      border: 1px solid blue;
    }

1. AI와 대화하는 기술

→ 언어를 배울 때에도 말을 많이 해보는 것이 중요하듯이, AI 프롬프트를 구성할 때에도 가장 좋은 
  방법은 많이 말을 걸어보면 어떤 질문에 어떻게 답을 하는지 패턴을 알 수 있다.

→ Chat GPT는 한국어와 영어 두 가지 모두 지원한다.
→ 하지만 Chat GPT가 더 잘하는 언어도 있는데 학습된 데이터의 양에서도 차이가 있고, 
  언어 구조상 컴퓨터가 좀 더 쉽게 학습할 수 있는 언어가 있고, 그렇지 않은 언어도 있다.

→ DeepL이라는 딥러닝 기반의 번역 서비스를 사용하여 물어보고 싶은 내용을 번역한 뒤 Chat GPT에
  입력하게 되면 조금 더 빠르고 정확한 답을 얻을 수 있다.
→ 만일 DeepL을 사용하여 번역하는 과정이 귀찮다면 Chrome 브라우저의 확장팩 중에 
  [프롬프트 지니]를 사용하면 이 과정을 줄일 수 있다.

Chat GPT에게 원하는 답을 얻는 방법

1. 역할을 줘라

  → Chat GPT에게 원하는 답을 얻어내고 싶으면, 
    내가 얻고자 하는 것이 무엇인지 명확한 상황을 설명하는 것이 중요하다.
  → 그것을 가장 쉽게 해낼 수 있는 방법 중 하나는 ChatGPT에게 역할을 부여하는 것이다.

  A : 너가 내과 의사라고 가정하고, 내가 말하는 증상에 따라 조언을 해 줘.
  B : 너가 개발자라고 가정하고, 내가 말하는 요구사항에 따라 필요한 코드를 써 줘.



2. 배경 정보와 목표를 말해라.

   → Chat GPT가 나와 같은 방향을 바라보도록 하기 위해서는 초반에 상황을 잘 설명하는 것이 중요
   → 대화를 통해 내가 달성하고자 하는 것이 무엇인지 이야기를 하고, Chat GPT가 목표 달성에 도움을
     주기 위해 알면 좋은 배경 정보를 충분히 제공

   애플스토어에서 지니어스로 일하고 싶어서 지원하려고 해. 500자 이내로 자기소개서를 작성해 줘.

   참고로 나는 이런 사람이야
   - 이름은 소금빵
   - 맥북, 아이폰, 아이패드, 에어팟, 애플워치를 사용함
   - 컴퓨터를 전공해서 프로그래밍 가능하고 개발자로 1년 동안 인턴한 경험이 있음
   - 싱가폴에서 3년 살아서 영어 가능



3. 원하는 답변 형태를 명시해라 

   → Chat GPT는 다른 챗봇들에 비해서 대화의 맥락을 잘 파악하기도 하고, 살짝 모호하게 질문하더라도
     최선을 다해서 대답을 해준다. 하지만, 원하는 답변의 형태가 있다면, Chat GPT에게 명확하게 요구


포맷팅

 → 가장 기본적인 방법은 원하는 답변의 포맷(형태)를 명시하는 것

   (1) 불릿 포인트 형태로 써 줘
   (2) 테이블 형태로 써 줘.
   (3) 마크다운 포맷으로 써 줘.
   (4) "네", "아니오"로만 대답해 줘.
   (5) 200 글자 이내로 써 줘.


   와인을 아무것도 모르는 사람이 와인ㅔ 대해 공부해 볼 수 있도록 커리큘럼을 짜 줘.
   배워야 되는 개념들을 테이블 형태로 써 줘.


   "--" 사이에 있는 수강 후기가 긍정적인지 부정적인지 알려줘.

   -----
   딕션 좋고, 컨텐츠 짧아서 좋고, 이해 잘 되고 지금까지 부트캠프, 온라인 강의 등등 여러가지 
   경험했지만 가장 간결하고 쉬웠습니다.
   -----


   답변은 한 단어로만 해 줘. 선택지는 아래의 세 가지야.
   - 긍정
   - 부정
   - 중립



  타겟

  → Chat GPT가 작성한 글을 어딘가에 활용하려고 한다면, 어디서 어떻게 활용할 계획이고,
    읽게 될 대상이 누구인지 미리 명시하면 좋다.
    그러면, Chat GPT가 기본적으로 어떤 톤으로 어떤 형태의 글을 써야할지 파악할 것이다.


  AI의 위험성에 대해 200자 이내의 링크드인 포스트를 작성해 줘.

  나는 스타트업 창업자고, 이 글은 회사 직원들과 투자자들이 보게 될 거야.



4. 예시를 줘라

   → 원하는 목표와 배경 정보 그리고 원하는 답변의 형태를 제공하면 좋은 답변을 얻을 수 있지만
     그렇지 않을 수도 있다.
   → 원하는 예시를 제공하지 않는 것을 zero-shot learning이라고 하며, 
     원하는 예시를 하나 제공하면 one-shot learning, 
     원하는 예시를 2개 이상 제공하면 few-shot learning이라고 한다.
   → 많은 경우에 few-shot learning을 통해 원하는 답변을 정확하게 얻을 수 있다.



  역대 최고의 축구 선수들에 대해서 짧게 소개해 줘:

  이름: 리오넬 메시
  국적: 아르헨티나
  출생: 1987년 6월 24일
  뛰었던 팀: FC 바르셀로나, 파리 생제르맹 FC
  국가대표: 174경기 102골
  프로 통산 득점: 805골

  이름: 크리스티아노 호날두
  국적: 포르투갈
  출생: 1985년 2월 5일
  뛰었던 팀: 스포르팅 CP, 맨체스터 유나이티드 FC, 레알 마드리드 CF, 유벤투스 FC, 
            맨체스터 유나이티드 FC, 알 나스르 FC
  국가대표: 198경기 122골
  프로 통산 득점: 835골

  이름: 지네딘 지단
  국적: 
  출생: 
  뛰었던 팀: 
  국가대표: 
  프로 통산 득점: 

  이름: 펠레
  국적: 
  출생: 
  뛰었던 팀: 
  국가대표: 
  프로 통산 득점: 

  이름: 디에고 마라도나
  국적: 
  출생: 
  뛰었던 팀: 
  국가대표: 
  프로 통산 득점: 

  이름: 요한 크루이프
  국적: 
  출생: 
  뛰었던 팀: 
  국가대표: 
  프로 통산 득점: 

1. 토픽 시작하기

→ Chat GPT는 24년 5월 13일 버전 GPT-4o라는 모델이 출시

ChatGPT의 무료기능

2. 외부 정보 활용하기

→ 공공 데이터 포털에서 받은 국내외 외식 트렌드에 관한 300페이지 보고서가 있다.
→ 이 보고서에 어떠한 내용이 들어있는지 확인하려면 다 읽어봐야 하는데 시간이 오래 걸린다.
→ 이럴 때 GPT에서 사용할 수 있는 파일 업로드 기능을 활용해보자.

→ 파일을 직접 업로드하거나 채팅창에 드래그앤 드롭하여 첨부하면 된다.
→ 여러 개의 파일을 한 번에 첨부할 수도 있고 압축된 ZIP파일도 전달할 수 있다.
→ 이 파일을 읽고 내용을 정리해달라고 프롬프트를 입력하면 끝

→ 요약된 내용을 보고 중요한 내용이 있다면 그 부분에 대해서 추가적으로 질문을 할 수 있다.
→ ChatGPT는 거짓말을 할 수도 있으니 몇 페이지에 나오는지 출처에 대해서도 물어보자.

→ 실제로 확인해보니 GPT가 말한 페이지에 해당 내용이 나오는 것을 확인할 수 있다.
→ 마지막으로 이 자료를 통해서 얻을 수 있는 인사이트와 앞으로 외식트렌드가 어떻게 변화할지 물어보자.

→ 파일 업로드 기능을 활용하면 오래 걸릴 수 있는 업무를 최소한의 시간으로 정확하게 해결할 수 있다.

※ ChatGPT에 파일을 첨부할 때 새로운 기능이 추가되었다.
   Google Drive나 Microsoft OneDrive에서도 파일을 첨부할 수 있다.

→ 인터넷에서 정보를 얻을 때, 주로 검색 엔진을 활용한다.
→ 실제로 필요한 주제를 찾기 위해 검색 엔진에서 검색을 하면 많은 링크가 나와서 확인하는데 시간이
  걸리고, 어떤 링크는 불필요한 정보를 가지고 있다.
→ 이럴 때 사용할 수 있는 것이 ChatGPT 브라우징 기능이다.

ChatGPT 브라우징 기능
→ 대부분의 경우에는 브라우징이 필요할지 ChatGPT가 스스로 판단하고 답변을 준다.
→ 만일 답변 내용에 링크가 포함되어 있지 않다면 hallucination이 발생했을 가능성이 있다.
→ 그럴 때에는 더 명시적으로 브라우징 기능을 사용해달라고 요청하거나 출처와의 링크를 부탁하면 된다.

→ Chat GPT는 사람과 대화를 하는 AI 챗봇
→ Chat GPT는 어떠한 주제든 상관없이 우리가 질문을 하면, 원하는 답변을 해준다.
→ 지금까지 나온 AI는 [무언가 한 가지를 잘하는]이라고 느껴졌으나, 
  Chat GPT는 [다방면]으로 잘하는 AI라고 생각된다.

→ AI, Artificial Intelligence, 인공지능을 의미한다.
  컴퓨터가 사람처럼 생각하고 행동할 수 있게 만들겠다는 것이 목표
→ AI는 1956년에 처음 생긴 표현이고 굉장히 오랜 기간동안 연구되어 왔다.
→ 머신러닝, 딥러닝, 강화학습 등의 다양한 연구 결과를 통해서 신기한 기술이 등장

Chat GPT의 탄생배경 ?

→ Chat GPT는 OpenAI라는 회사에서 만든 서비스
→ IT 업계의 유명한 사람들이 함께 참여한 비영리 단체여서 많은 자본을 들여 빠르게 성장
→ Chat GPT는 GPT-3.5라는 언어 AI 기술을 기반으로 만들어진 서비스
→ GPT는 Generative Pre-trained Transformer의 약자로 GPT의 개념은 Transformer라는 기술
→ OpenAI는 비영리 단체로 AI시대에 어느 한 기업이 기술을 독점하지 않도록 공적인 취지에서 설립
→ OpenAI가 영리 기업으로 전환하고, 마이크로소프트가 막대한 자본을 투자하면서 사실상 OpenAI를 소유
→ Chat GPT의 가장 중요한 특징은 "대화"라는 특수한 목적에 맞춰 제작되었다.
→ AI가 등장할 때마다 윤리에 대한 문제가 나오게 되는데 
  Chat GPT는 이러한 것을 검열하는 모더레이션 기능이 탑재

Chat GPT는 거짓말을 할 때도 있습니다.

[참고]
→ 2024년 5월 기준으로 달라진 점은 여전히 종종 거짓말을 하지만 예전보다는 확실히 성능 개선
→ GPT-3.5는 업데이트를 거쳐 이제는 2022년 1월까지의 정보를 알고 있다
  GPT-4와 GPT-4o는 2023년의 정보까지 학습
→ GPT-4와 GPT-4o는 사용자가 업로드한 문서 파일을 바탕으로 답변을 생성하거나, 웹 검색을 통해
  최신 정보를 반영하여 답변을 생성

→ Chat GPT에게 알고 있는 내용을 질문하는 것이 아니라면 끊임없이 의심하며 확인해야 한다.
→ 이런 식으로 거짓된 정보들을 꾸며내는 이슈를 [hallucination], 환각이라고 한다.
→ 환각문제는 GPT를 사용하는 내내 있을 수 있다고 생각해야 하고, 환각을 최대한 피할 수 있도록
  프롬프트를 정교하게 짜는 것도 중요
→ GPT는 언어 모델, 즉 언어 AI로 엄청나게 많은 양의 글을 학습시켜 대화가 가능해지게 만든 AI

2. Chat GPT 사용법

→ Chat GPT에게 원하는 질문에 대한 답을 얻고 싶으면 구체적으로 질문을 해야 한다.

Chat GPT의 답변이 끝나면 답변 아래에 여러 버튼이 나타난다.

(1) Read Aloud: 챗GPT의 답변을 음성으로 재생해 줍니다.
(2) Copy: 답변을 클립보드에 복사합니다.
(3) Regenerate: 동일한 메시지에 대해 새로운 답변을 생성합니다.
(4) Bad response: 답변이 만족스럽지 못할 때 OpenAI에 피드백을 전달합니다.
(5) Change model: 다른 모델의 답변을 새롭게 생성합니다.


Regenerate 버튼을 누르면 새로운 답변을 해준다.

→ 답변 아래 '2/2'는 지금 보고 있는 답변이 두 가지 답변 중 두 번째임을 나타내고,
  양옆의 화살표 버튼을 누르면 다른 버전의 답변으로 이동할 수 있다.
→ Chat GPT의 답변 중에 특히 대화를 더 이어가고 싶은 부분이 있다면 블록 설정한 뒤 Reply 버튼을 누르면
  블록 설정한 내용이 입력창에 회색 글씨로 나타나고, 그 내용에 대해 GPT와 더 많은 대화를 나눌 수 있다

→ Chat GPT와 대화를 나누다가 화면 왼쪽 위에 있는 New chat 버튼을 누르면 새로운 채팅방이 나타난다.
→ 새 채팅방에서 메시지를 입력하면 사이드바에 채팅방이 추가
→ Chat GPT는 사람처럼 대화의 맥락을 기억할 수 있는데 
  대화의 맥락은 대화가 이루어진 채팅방 안에서만 기억된다.

→ Rename 버튼을 누르면 원하는 대로 채팅방 이름을 바꿀 수 있다.

→ Delete 버튼을 누르면 채팅방을 정말로 삭제할 건지 묻는 창이 나타나며, 
  여기서 Delete 버튼을 눌러야 채팅방이 없어진다.
  채팅방 삭제는 돌이킬 수 없기 때문에 신중하게 결정

→ Archive 버튼을 누르면 채팅창을 지우지 않고도 사이드바에서 숨기고 바로 채팅방이 보관
  보관된 채팅방은 오른쪽 위의 프로필을 누르고 메뉴에서 Settings버튼을 클릭
  Settings 창에서 Archived chats 항목의 Manage 버튼을 누르면 된다.

→ 보관함에 들어 있는 채팅방은 Unarchive conversation버튼을 통해 다시 사이드바로 옮길 수도 있고, 
  Delete conversation 버튼으로 삭제할 수도 있다.

→ Settings 창에서는 모든 채팅방을 통째로 관리하는 것도 가능
→ Archive all chats 항목의 Archive all 버튼을 누르면 
  사이드바에 있는 채팅방이 모두 보관함으로 이동
→ Delete all chats 항목의 Delete all 버튼은 사이드바에 있는 채팅방은 물론이고 보관해 둔 
  채팅방까지 모두 삭제하는 버튼

→ Chat GPT와 나눈 대화 내용은 채팅방 단위로 공유 가능
→ 현재 채팅방의 대화를 공유하고 싶다면 오른쪽 위에 있는 채팅방 공유 버튼을 누르거나, 
  사이드바의 채팅방 메뉴에서 Share 버튼을 누른다.
→ Share public link to chat 이라는 창이 뜨고, 여기서 Create link 버튼을 눌러 링크를 생성하고 
  클립보드에 복사 가능
  이 링크를 원하는 사람들에게 전달하고, 링크에 접속하면 채팅방에서 나눈 대화가 모두 표시
→ 링크가 공유된 채팅방들을 한 번에 확인하고 관리하는 방법은
  프로필 메뉴를 통해 Settings 창을 연 뒤, Data controls 항목으로 이동
  Shared links 항목에 Manage 버튼을 누르면 현재 어떤 채팅방이 링크가 생성되어 공유되고 있는지 
  확인 가능하고, 
  View source chat 버튼으로 채팅방으로 돌아가거나, 
  Delete shared link 버튼으로 링크를 삭제하고 공유를 중단하는 것도 가능

대화를 학습하는 Chat GPT

→ 우리가 Chat GPT와 나누는 대화는 GPT 모델의 학습데이터로 사용
  Chat GPT가 많은 데이터를 학습할수록 Chat GPT의 답변은 정교해진다.

→ 문제는 사용자의 개인 정보나 기밀 정보, 중요한 소스 코드 등 보안에 민감한 정보도 Chat GPT의 학습에 사용될 수 있어 사용이 금지되는 기업들이 있다.

→ 정보 보안에 민감한 기업 고객을 위해 OpenAI는 Team 요금제와 Enterprise 요금제를 제시
  기업용 요금제를 구독하는 경우, Chat GPT와 나누는 대화가 학습데이터로 사용되지 않는다.


  Chat GPT와의 대화가 모델 학습에 사용되지 않도록 설정하는 방법

  (1) Improve the model for everyone 설정 끄기

      → OpenAI 입장에서는 데이터를 최대한 많이 수집하고 싶을 테니 
        Improve the model for everyone 설정은 기본적으로 활성화되어 있다.
      → Settings 창에 들어가면 왼쪽에 Data controls 항목

      → Settings 창에 들어가면 왼쪽에 Data controls 항목이 있다.
      → 들어가 보면 가장 위에 Improve the model for everyone 항목을 누른다.

      → 여기서 토글 버튼을 끄면 앞으로 챗GPT와 나누는 대화는 모델 학습에 사용되지 않는다.
      → 대화가 OpenAI 서버에 보관되긴 하는데 문제될 만한 내용을 모니터링하려는 것이며, 
        이마저도 30일이 지나면 완전히 삭제

      → 참고로 Improve the model for everyone 설정은 계정 단위로 적용됩니다. 
        다른 웹 브라우저나 기기에서도 동일한 계정으로 로그인하면 설정이 반영



  (2) Temporary chat 기능 사용하기

      → Improve the model for everyone 설정이 계정 단위로 적용되는 보안 설정이었다면, 
        temporary chat은 말 그대로 임시 채팅방을 열어 대화를 하는 기능

      → 임시 채팅방에서 나누는 대화는 모델 학습에 사용되지 않으며 채팅방이 사이드바에 남지도 않는다.

      → 화면 상단에 ChatGPT라고 표시된 버튼을 눌러 보면 선택창이 나타난다.
        아래쪽에 Temporary chat 항목과 토글 버튼을 켜보면  temporary chat 기능이 활성화되면서
        임시 채팅방이 열린다.

      → 화면 상단과 중앙에 temporary chat 표시가 있고, 특히 중앙에는 여기서 나누는 대화는 기록에
        남지 않으며 모델 학습에도 사용되지 않는다고 명시되어 있다.

      → 다시 일반 채팅방에서 대화를 나누려면 New chat 버튼을 누르거나 
        Temporary chat 토글 버튼을 끄면 된다.

     → 임시 채팅방을 벗어나면 임시 채팅방에서 나눈 대화는 복구할 수 없으니 주의

   - 사이트를 만들다보면 요소를 세로로 정렬하거나 요소를 양 끝에 배치하고 싶을 때가 있다.
   - 이럴 때는 flexbox를 사용

   → Flexbox는 1차원으로 요소를 배치하는 방식
     가로 방향으로 배치하거나 세로 방향으로 배치할 수 있다.

   → Flexbox를 쓰려면 배치할 방향을 정해야 한다.
     가로 또는 세로 중에 고르면 됩니다.

   → 여기에 요소를 배치하는데 박스 앞 부분에 정렬하거나 박스 뒷 부분에 정렬할 수도 있고, 
     양 끝으로 나눠서 배치할 수도 있다.

   → 중앙정렬도 가능

   → 요소의 개수가 많아져서 넘치면 어떤 식으로 보여줄지도 정할 수 있고,
     요소들 사이의 간격을 정할 수도 있다.

   → 요소의 크기를 유연하게 늘리거나 줄일 수도 있다.

   → Flexbox에서는 배치할 방향을 정하고, 어떻게 정렬할지, 요소가 넘칠 때는 어떻게 배치할지, 
     요소들 상의 간격은 얼마나 조절할지, 크기는 어떻게 늘이거나 줄일 것인지를 정할 수 있다.

   → 배치할 방향을 정하는 데는 flex-direction, 정렬할 때는 justify-content, align-items, 
     요소가 넘칠 때는 flex-wrap, 간격에는 gap이라는 속성을 사용,
     크기를 늘리거나 줄일 때는 flex-grow, flex-shrink라는 속성을 사용하고
     flex-basis라는 속성으로 유연하게 크기를 정할 수 있다.

2. 배치 방향

   → container라는 div 클래스 안에 div 태그 세 개를 배치
     red box, green box, blue box
   → css 코드를 보면 container div에는 회색 점선 테두리가 있고, 너비와 높이는 500px로 정했다.
   → box클래스에서는 border-radius로 모서리를 둥글게 하고, padding을 30px로 해서 여기 box랑
     글자 사이에 공간을 둔다.

   → container div를 flexbox로 만들고, 배치 방향을 정한다.
   → display : block대신 display : flex라고 하면 flexbox를 만들 수 있다.

   → 기본적으로 flex-direction의 값이 row로 기본 설정되어 있다.
     row는 왼쪽에서 오른쪽 가로 방향을 뜻한다.

   → 세로 방향으로 바꿀 때에는 flex-direction : column; 이라고 하면 위에서 아래로 배치
   → display : block으로 배치하는 것과 다른 점은 
     나중에 정렬이나 크기를 조절할 때 차이점을 알 수 있다.

   → 방향을 반대로 하는 방법은 flex-direction : row-reverse라고 하여 가로방향이지만, 
     오른쪽에서 왼쪽으로 배치
     flex-direction : column-reverse라고 하면 아래에서 위쪽으로 배치

3. 이달의 플레이리스트1

   → 이달의 플레이스트들을 가로로 배치

   템플릿 코드 설명

   → <section> 태그 안에 제목이 있고, .playlists라는 클래스로 모든 플레이리스트들을 감싸고
     있습니다. 각각의 플레이리스트는 .playlist라는 클래스로 감싸고 있습니다.

   index.html

   <section>
      <h2 class="section-title">이달의 플레이리스트</h2>
      <div class="playlists">
        <div class="playlist">
          <img class="playlist-thumb" src="images/img_playlist_1.png">
          <div class="playlist-title">
            여행을 떠나요
          </div>
          <div class="playlist-artist">
            Codeit Music
          </div>
        </div>
        <div class="playlist">
          <img class="playlist-thumb" src="images/img_playlist_2.png">
          <div class="playlist-title">
            금요일 저녁의 카페에서
          </div>
          <div class="playlist-artist">
            Codeit Music
          </div>
        </div>
        ...
        </div>
      </div>
    </section>


    style.css

    .playlists {
    }

    .playlist {
      width: 240px;
      margin: 12px;
    }

    .playlist-thumb {
      width: 100%;
      border-radius: 16px;
    }

    .playlist-title {
      font-weight: 700;
      font-size: 24px;
      line-height: 29px;
      margin: 16px 0 8px;
    }

    .playlist-artist {
      color: #868686;
      margin: 0;
    }

   [ 해설 ]

   → 플렉스박스를 만들려면 display 속성을 flex로 바꾸면 된다.
   → 플레이리스트 전체를 감싸고 있는 태그에 .playlists 클래스가 적용
     이 클래스를 플렉스박스로 만든다.

   .playlists {
      display: flex;
    }

   → 배치 방향을 정해야 한다.
   → 플렉스박스의 배치 방향을 바꾸려면 flex-direction 속성
   → row이면 왼쪽에서 오른쪽, column이면 위에서 아래로 배치
   → flex-direction: row를 추가

   .playlists {
      display: flex;
      flex-direction: row;
    }

   → 이렇게 해줘도 가로로 배치가 되지만, 플렉스박스의 기본 배치 방향은 왼쪽에서 오른쪽
   → 다시 말해서 flex-direction의 기본값은 row라는 건데요. 그래서 사실 이 코드는 지워도 됩니다.

   .playlists {
      display: flex;
    }

index.html

  <!DOCTYPE html>
  <html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>Codeit Music</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <section>
      <h2 class="section-title">이달의 플레이리스트</h2>
      <div class="playlists">
        <div class="playlist">
          <img class="playlist-thumb" src="images/img_playlist_1.png">
          <div class="playlist-title">
            여행을 떠나요
          </div>
          <div class="playlist-artist">
            Codeit Music
          </div>
        </div>
        <div class="playlist">
          <img class="playlist-thumb" src="images/img_playlist_2.png">
          <div class="playlist-title">
            금요일 저녁의 카페에서
          </div>
          <div class="playlist-artist">
            Codeit Music
          </div>
        </div>
        <div class="playlist">
          <img class="playlist-thumb" src="images/img_playlist_3.png">
          <div class="playlist-title">
            이제 집중할 시간
          </div>
          <div class="playlist-artist">
            Codeit Music
          </div>
        </div>
        <div class="playlist">
          <img class="playlist-thumb" src="images/img_playlist_4.png">
          <div class="playlist-title">
            몰디브 한 잔
          </div>
          <div class="playlist-artist">
            Codeit Music
          </div>
        </div>
      </div>
    </section>
  </body>
  </html>


style.css

  * {
    box-sizing: border-box;
  }

  html {
    word-break: keep-all;
    font-family: Pretendard, sans-serif;
    font-size: 16px;
    line-height: 19px;
  }

  body {
    background-color: #000;
    color: #d9d9d9;
    margin: 0;
  }

  section {
    max-width: 1120px;
    width: 100%;
    margin: 80px auto;
    padding: 0 36px;
  }

  .section-title {
    font-weight: 700;
    font-size: 32px;
    line-height: 38px;
    margin: 40px 0;
  }

  .playlists {
    display: flex;
  }

  .playlist {
    width: 240px;
    margin: 12px;
  }

  .playlist-thumb {
    width: 100%;
    border-radius: 16px;
  }

  .playlist-title {
    font-weight: 700;
    font-size: 24px;
    line-height: 29px;
    margin: 16px 0 8px;
  }

  .playlist-artist {
    color: #868686;
    margin: 0;
  }

4. 정렬

   → flex-direction으로 배치 방향을 정하고, 요소가 배치되는 방향을 기본 축(Main Axis)라고 한다.

   → 기본 축에 수직인 방향을 교차 축(Cross Axis)라고 한다.

   → 만일 flex-direction의 값이 column이라면, 기본 축은 위에서 아래로 가는 방향이고,
     교차 축은 왼쪽에서 오른쪽으로 가는 방향

   → 기본적으로 요소들은 기본 축 방향 순서대로 배치되고, 교차 축 방향으로는 꽉 채워서 배치
   → 기본 축 방향에서 정렬을 하기 위해서는 justify-content라는 속성을 쓴다.

   → justify-content:center; 라고 하면 기본 축에서 중앙정렬이 된다.
   → flex-end는 기본 축에서 맨 끝에 정렬, flex-start는 기본 축에서 맨 앞에 정렬

   → space-around라고 하면 기본 축의 공간을 나눠 띄엄띄엄 배치
     기본 축 방향으로 양쪽에 모두 같은 공간이 생긴다.

   → space-between은 기본 축 방향으로 양 끝을 늘어뜨려서 배치

   → space-evenly는 빈 공간의 크기가 모두 동일하도록 배치

   → 교차 축에 대해서 정렬을 하게되면 align-items:center;라고 하면 교차 축에서 중앙 정렬
   → 크기를 꽉 채워서 배치되던 것이 요소의 원래 크기로 변하였다.
   → 여기서 요소의 height 값을 지정하면 높이를 유지하면서 중앙정렬된다.

   → flex-end는 교차 축 방향에서 끝쪽에 정렬하는 방식

   → flex-start는 교차 축에서 앞쪽에 정렬하는 방식

   → stretch라는 것은 교차 축에 늘려서 배치하는 방식 (기본동작)

   → 방향을 바꿀 때에는 flex-direction : column; 으로 작성
   → 기본 축이 위에서 아래로, 교차 축이 왼쪽에서 오른쪽이다.

   → 기본 축 정렬 시에는 justify-content를 작성하고, 교차 축 정렬에는 align-items를 작성
   → 속성 값으로는 center와 space-between은 반드시 기억

5. 아티스트 프로필

   → 플레이리스트 제목 아래에 아티스트 프로필이 적혀 있고, 아티스트 프로필 이미지(코드잇 로고) 옆에
     아티스트 이름(코드잇)이 적혀 있습니다. 이번 실습에서는 이미지와 이름을 세로로 정렬


    템플릿 코드 설명

   → 아티스트 프로필은 .artist라는 클래스로 감쌌고, 
     프로필 이미지는 .artist-profile이라는 클래스로 스타일링

   index.html

   <div class="artist">
     <img
       src="images/img_codeit.png"
       alt="코드잇 프로필"
       class="artist-profile"
    >
     코드잇
   </div>


   style.css

   .artist {
      color: #7d7c8a;
      font-weight: 400;
      font-size: 16px;
      line-height: 19px;
    }

    .artist-profile {
      overflow: hidden;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      margin-right: 8px;
    }

   [ 해설 ]

   → 우선 display 속성을 flex로 하고 플렉스박스를 만든다.
   → 가로 또는 세로 방향으로 요소들을 배치, 기본 배치 방향은 왼쪽에서 오른쪽
   → 세로로 정렬하려면 기본 배치 방향으로 일단 만들고 교차 축(위에서 아래 방향)에서 중앙 정렬

   .artist {
      color: #7d7c8a;
      font-weight: 400;
      font-size: 16px;
      line-height: 19px;
      display: flex;
    }

   → 기본 축(요소가 배치되는 방향)에서 정렬하려면 justify-content 속성을 사용
   → 교차 축(기본축에서 수직인 방향)에서 정렬하려면 align-items 속성을 사용
   → align-items: center라고 하면 교차 축에서 중앙 정렬 = 세로로 중앙 정렬

   .artist {
      color: #7d7c8a;
      font-weight: 400;
      font-size: 16px;
      line-height: 19px;
      display: flex;
      align-items: center;
    }

index.html

  <!DOCTYPE html>
  <html lang="ko">
    <head>
      <meta charset="utf-8">
        <title>Codeit Music</title>
      <link
        rel="stylesheet"
        as="style"
        crossorigin
        href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.6/dist/web/static/pretendard.css"
     >
      <link rel="stylesheet" href="style.css">
    </head>
    <body>
      <header>
        <div class="wrap">Codeit Music</div>
      </header>
      <main class="wrap">
        <div class="info">
          <div class="cover">
            <img
              class="cover-image"
              src="images/img_cafe.png"
              alt="카페에서 일할 때 커버 이미지"
           >
          </div>
          <h1 class="playlist-title">
            카페에서 일할 때
            <span class="hot-badge"> 인기 </span>
          </h1>
          <div class="artist">
            <img
              src="images/img_codeit.png"
              alt="코드잇 프로필"
              class="artist-profile"
           >
            코드잇
          </div>
          <div class="description">
            차분하게 흐르는 따뜻한 음악과 함께하는 휴식. Codeit Music 에디터가
            매달 업데이트하는 플레이리스트입니다. 마음에 드는 곳이 있다면 보관함에
            추가해 보세요.
          </div>
          <button class="play-button">▶️ 지금 듣기</button>
        </div>
      </main>
    </body>
  </html>


style.css

  * {
    box-sizing: border-box;
  }

  html {
    word-break: keep-all;
    font-family: Pretendard, sans-serif;
  }

  body {
    margin: 0;
    background-color: #000;
    color: #fff;
  }

  .wrap {
    margin: 0 auto;
    padding: 32px;
    max-width: 1080px;
    width: 100%;
  }

  header {
    padding: 16px;
    background-image: linear-gradient(
      180deg,
      #000000 15.1%,
      rgba(0, 0, 0, 0) 100%
    );
    font-weight: 700;
    position: sticky;
    top: 0;
  }

  .info {
    margin-bottom: 40px;
    padding: 40px;
    border-bottom: 1px solid #595864;
  }

  .cover {
    width: 252px;
    height: 252px;
    border-radius: 24px;
    overflow: hidden;
  }

  .cover-image {
    width: 100%;
    height: 100%;
  }

  .playlist-title {
    margin: 40px 0 16px;
    font-weight: 700;
    font-size: 40px;
    line-height: 48px;
  }

  .hot-badge {
    position: relative;
    top: -20px;
    padding: 4px 8px;
    border-radius: 8px;
    background-color: #2a2a31;
    color: #8e8ea0;
    font-weight: 700;
    font-size: 16px;
    line-height: 19px;
  }

  .artist {
    color: #7d7c8a;
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
    display: flex;
    align-items: center;
  }

  .artist-profile {
    overflow: hidden;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    margin-right: 8px;
  }

  .description {
    margin: 16px 0 32px;
    color: #7d7c8a;
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
  }

  .play-button {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    background-color: #4b1bb1;
    color: #ffffff;
    font-weight: 500;
    font-size: 16px;
    line-height: 19px;
  }

6. 배너 광고

   → 코드잇 뮤직에서는 플레이리스트 페이지 맨 아래에 배너 광고를 추가
   → 배너 광고에 있는 텍스트와 버튼을 배치


   템플릿 코드 설명

   → 주어진 코드에서는 배너 전체를 .promotion이라는 클래스로 감쌌고, 배너의 버튼은 
     .promotion-button이라는 클래스로 스타일링
   → 텍스트와 버튼이 왼쪽 위에 배치되어 있는데요. 이걸 세로로 가운데 정렬

   index.html

   <section class="promotion">
     <div class="promotion-content">
       <h2>모든 음악과 뮤직 비디오<br>3개월 내내 33% 할인</h2>
       <p>평생 오직 한 번 뿐인 혜택</p>
     </div>
     <button class="promotion-button">멤버십 가입하고 혜택 받기</button>
   </section>


   style.css

   .promotion {
      background-color: #280357;
      margin: 200px 0;
      padding: 80px 180px;
    }

    .promotion-content h2 {
      font-weight: 400;
      font-size: 40px;
      line-height: 48px;
      margin: 24px 0;
    }

    .promotion-content p {
      font-size: 24px;
      line-height: 29px;
    }

    .promotion-button {
      background-color: transparent;
      border: 1px solid #fff;
      padding: 24px;
      border-radius: 16px;
      font-size: 24px;
      line-height: 29px;
      color: #fff;
    }

  [ 해설 ]

   → 세로 정렬을 하기 위해서 .promotion 클래스를 플렉스박스로 만들어준다.
   → 안에 있는 요소들이 가로로 배치되어야 하니까, 방향은 기본 값인 flex-direction: row
   → 기본 축 방향에서 양쪽으로 배치하려면 justify-content: space-between
   → 교차 축 방향에서 중앙 정렬을 하려면 align-items: center

   .promotion {
      background-color: #280357;
      margin: 200px 0;
      padding: 80px 180px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

index.html

  <!DOCTYPE html>
  <html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>Codeit Music</title>
    <link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.6/dist/web/static/pretendard.css">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <section class="promotion">
      <div class="promotion-content">
        <h2>모든 음악과 뮤직 비디오<br>3개월 내내 33% 할인</h2>
        <p>평생 오직 한 번 뿐인 혜택</p>
      </div>
      <button class="promotion-button">멤버십 가입하고 혜택 받기</button>
    </section>
  </body>
  </html>


style.css

  html {
    font-family: Pretendard, sans-serif;
    word-break: keep-all;
  }

  body {
    background-color: #000;
    color: #fff;
    margin: 0;
  }

  .wrap {
    max-width: 1080px;
    width: 100%;
    margin: 0 auto;
    padding: 32px;
  }

  .promotion {
    background-color: #280357;
    margin: 200px 0;
    padding: 80px 180px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .promotion-content h2 {
    font-weight: 400;
    font-size: 40px;
    line-height: 48px;
    margin: 24px 0;
  }

  .promotion-content p {
    font-size: 24px;
    line-height: 29px;
  }

  .promotion-button {
    background-color: transparent;
    border: 1px solid #fff;
    padding: 24px;
    border-radius: 16px;
    font-size: 24px;
    line-height: 29px;
    color: #fff;
  }

7. 코딩을 넘어, 음악의 즐거움까지 2

   → "코딩을 넘어 / 음악의 즐거움까지.”라는 텍스트가 중앙은 아니고, 
     중앙에서 살짝 위로 정렬되어 있다.
   → 우선 <h1> 태그를 가운데로 정렬한 다음, <h1> 태그의 위쪽 마진을 -160px로 지정


   템플릿 코드 설명

   → 주어진 코드에서는 .hero라는 클래스로 요소 전체를 감싸고 있습니다. 
   → 여기서 .bg 클래스는 비디오 태그를 꾸며 주고, .hero-heading 클래스에서는 absolute 포지션을
     사용해서 영역이 비디오 위에 완전히 겹치도록 배치하였다.
   → 반투명한 그라디언트 배경을 적용

   <section class="hero">
      <video src="videos/bg.mp4" class="bg" autoplay loop muted></video>
      <div class="hero-heading">
        <h1>
          <span class="small">코딩을 넘어</span><br>
          <span class="big">음악의 즐거움</span>까지.
        </h1>
      </div>
    </section>

    .hero {
      position: relative;
    }

    .bg {
      width: 100%;
      opacity: 0.5;
    }

    .hero-heading {
      position: absolute;
      inset: 0;
      margin: 0;
      padding: 24px;
      background-image: linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 100%);
    }

    .hero-heading h1 {
      margin: 0;
      font-weight: 400;
      font-size: 80px;
      line-height: 95px;
      text-align: center; 
      color: #ffffff;
    }

    .hero-heading .small {
      font-size: 48px;
      line-height: 57px;
      text-align: center;
      color: rgba(217, 217, 217, 0.5);
    }

    .hero-heading .big {
      font-weight: 700;
    }

  [해설]

   → 우선 정렬을 하기 위해서 .hero-heading 클래스를 플렉스박스로 만들어준다.
   .hero-heading {
      position: absolute;
      inset: 0;
      margin: 0;
      padding: 24px;
      display: flex;
      background-image: linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 100%);
    }

   → 기본축 방향으로 정렬하려면 justify-content 속성을 쓰고, 교차축 방향으로 정렬하려면 
     align-items 속성을 사용
   → 기본 축으로도 가운데 배치하고, 교차 축으로도 가운데 배치해야 하니까 둘 다 center로 정렬

   .hero-heading {
      position: absolute;
      inset: 0;
      margin: 0;
      padding: 24px;
      display: flex;
      justify-content: center;
      align-items: center;
      background-image: linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 100%);
    }

   → <h1> 태그에는 위쪽 마진을 -160px으로 지정

   .hero-heading h1 {
      margin: -160px 0 0;
      font-weight: 400;
      font-size: 80px;
      line-height: 95px;
      text-align: center; 
      color: #ffffff;
    }

index.html

  <!DOCTYPE html>
  <html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>Codeit Music</title>
    <link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.6/dist/web/static/pretendard.css">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <section class="hero">
      <video src="videos/bg.mp4" class="bg" autoplay loop muted></video>
      <div class="hero-heading">
        <h1>
          <span class="small">코딩을 넘어</span><br>
          <span class="big">음악의 즐거움</span>까지.
        </h1>
      </div>
    </section>
  </body>
  </html>


style.css

  html {
    font-family: Pretendard, sans-serif;
    word-break: keep-all;
  }

  body {
    background-color: #000;
    color: #fff;
    margin: 0;
  }

  .hero {
    position: relative;
  }

  .bg {
    width: 100%;
    opacity: 0.5;
  }

  .hero-heading {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 100%);
  }

  .hero-heading h1 {
    margin: -160px 0 0;
    font-weight: 400;
    font-size: 80px;
    line-height: 95px;
    text-align: center; 
    color: #ffffff;
  }

  .hero-heading .small {
    font-size: 48px;
    line-height: 57px;
    text-align: center;
    color: rgba(217, 217, 217, 0.5);
  }

  .hero-heading .big {
    font-weight: 700;
  }

8. 요소가 넘칠 때

   → container라는 클래스로 Flexbox를 만들고, 9개의 div 태그를 배치
     방향은 따로 정하지 않고 왼쪽에서 오른쪽으로 배치, 정렬도 기본 동작 그대로 
     요소가 많아서 Flexbox으로 요소가 튀어나왔다.
     이럴 떄에는 줄바꿈 하듯이 배치하는 방법을 사용한다.
   → container에 flex-wrap:wrap;이라고 작성하면 넘치는 요소는 교차 축 방향으로 넘어가서 배치

   → 기본 축의 방향을 column으로 바꾸게 된다면, (=flex-direction:column) 마찬가지로 
     교차 축 방향으로 넘어가서 배치
   → 웹 사이트를 만들다보면 요소의 개수가 다양하게 변하는 경우가 있는데 이 때 flex-wrap을 
     잘 사용하면 잘 배치할 수 있다.

9. 이달의 플레이리스트2

   → 앞에서 만들었던 플레이리스트에 요소를 추가했더니 첫 번째 스크린샷처럼 가로로 계속 배치되면서
     크기가 작게 보인다.
   → 두 번째 스크린샷처럼 요소가 넘쳤을 때 아래 줄로 넘어가도록 배치


   템플릿 코드 설명

   → 플레이리스트 전체는 .playlists라는 클래스로, 각각의 플레이리스트는 .playlist로 감쌌습니다. 
     주어진 코드에서 .playlists에 display: flex라는 코드가 있어서 플렉스박스가 있다.
     요소들이 왼쪽에서 오른쪽으로 배치

   <section>
      <h2 class="section-title">이달의 플레이리스트</h2>
      <div class="playlists">
        <div class="playlist">
          <img class="playlist-thumb" src="images/img_playlist_1.png">
          <div class="playlist-title">
            여행을 떠나요
          </div>
          <div class="playlist-artist">
            Codeit Music
          </div>
        </div>
        <div class="playlist">
          <img class="playlist-thumb" src="images/img_playlist_2.png">
          <div class="playlist-title">
            금요일 저녁의 카페에서
          </div>
          <div class="playlist-artist">
            Codeit Music
          </div>
        </div>
        ...
      </div>
    </section>


    .playlists {
      display: flex;
    }

    .playlist {
      width: 240px;
      margin: 12px;
    }

   [ 해설 ]

   → 플렉스박스에서 요소가 넘치면 flex-wrap 속성으로 넘겨서 배치할 것인지 정할 수 있다.
   → flex-wrap: wrap이라 하면 요소가 넘쳤을 때 줄을 넘겨서 배치

   .playlists {
      display: flex;
      flex-wrap: wrap;
    }

index.html

  <!DOCTYPE html>
  <html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>Codeit Music</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <section>
      <h2 class="section-title">이달의 플레이리스트</h2>
      <div class="playlists">
        <div class="playlist">
          <img class="playlist-thumb" src="images/img_playlist_1.png">
          <div class="playlist-title">
            여행을 떠나요
          </div>
          <div class="playlist-artist">
            Codeit Music
          </div>
        </div>
        <div class="playlist">
          <img class="playlist-thumb" src="images/img_playlist_2.png">
          <div class="playlist-title">
            금요일 저녁의 카페에서
          </div>
          <div class="playlist-artist">
            Codeit Music
          </div>
        </div>
        <div class="playlist">
          <img class="playlist-thumb" src="images/img_playlist_3.png">
          <div class="playlist-title">
            이제 집중할 시간
          </div>
          <div class="playlist-artist">
            Codeit Music
          </div>
        </div>
        <div class="playlist">
          <img class="playlist-thumb" src="images/img_playlist_4.png">
          <div class="playlist-title">
            몰디브 한 잔
          </div>
          <div class="playlist-artist">
            Codeit Music
          </div>
        </div>
        <div class="playlist">
          <img class="playlist-thumb" src="images/img_playlist_5.png">
          <div class="playlist-title">
            K-Pop 믹스
          </div>
          <div class="playlist-artist">
            Codeit Music
          </div>
        </div>
        <div class="playlist">
          <img class="playlist-thumb" src="images/img_playlist_6.png">
          <div class="playlist-title">
            공부를 위한 클래식
          </div>
          <div class="playlist-artist">
            Codeit Music
          </div>
        </div>
        <div class="playlist">
          <img class="playlist-thumb" src="images/img_playlist_7.png">
          <div class="playlist-title">
            한국 시티팝 20선
          </div>
          <div class="playlist-artist">
            Codeit Music
          </div>
        </div>
        <div class="playlist">
          <img class="playlist-thumb" src="images/img_playlist_8.png">
          <div class="playlist-title">
            편안하게 느긋하게
          </div>
          <div class="playlist-artist">
            Codeit Music
          </div>
        </div>
        <div class="playlist">
          <img class="playlist-thumb" src="images/img_playlist_9.png">
          <div class="playlist-title">
            고요한 밤을 위한 BGM
          </div>
          <div class="playlist-artist">
            Codeit Music
          </div>
        </div>
      </div>
    </section>
  </body>
  </html>


style.css

  * {
    box-sizing: border-box;
  }

  html {
    word-break: keep-all;
    font-family: Pretendard, sans-serif;
    font-size: 16px;
    line-height: 19px;
  }

  body {
    background-color: #000;
    color: #d9d9d9;
    margin: 0;
  }

  section {
    max-width: 1120px;
    width: 100%;
    margin: 80px auto;
    padding: 0 36px;
  }

  .section-title {
    font-weight: 700;
    font-size: 32px;
    line-height: 38px;
    margin: 40px 0;
  }

  .playlists {
    display: flex;
    flex-wrap: wrap;
  }

  .playlist {
    width: 240px;
    margin: 12px;
  }

  .playlist-thumb {
    width: 100%;
    border-radius: 16px;
  }

  .playlist-title {
    font-weight: 700;
    font-size: 24px;
    line-height: 29px;
    margin: 16px 0 8px;
  }

  .playlist-artist {
    color: #868686;
    margin: 0;
  }

10. 간격

   → 여백을 넣을 때에는 margin 속성을 사용하였는데 flexbox 안에서도 margin을 사용할 수 있다.

   → 요소 순서가 바뀌거나 요소가 추가되면 margin 코드를 수정해야 되는 단점
     굳이 margin으로 해결하려면 선택자를 활용

   → 위의 방식을 사용하면 코드가 복잡해지므로 flexbox에서는 이런 걸 편하게 해주는 gap 속성 사용

   → container에 gap을 주게 되면 위의 복잡한 코드와 동일하게 동작
   → gap의 장점은 가로 방향 뿐만 아니라 세로 방향으로도 적용 가능

   → 임의로 넘치는 요소를 만들어서 동일하게 적용되는지 확인해보면 위와 같다.

   → 세로와 가로의 간격을 다르게 줄 수도 있다. 
     gap: 30px 60px이라고 하면 세로 방향으로는 30px, 가로 방향으로는 60px을 주게 된다.
   → gap 속성의 값은 기본 축, 교차 축과 상관없이 무조건 세로, 가로의 순서
     flex-direction으로 방향을 바꿔봐도 똑같이 세로, 가로의 순서
     gap 속성은 grid와 같이 쓰는 속성이므로 margin 속성을 쓸 때와 같다고 보면 된다.

11. 이달의 플레이리스트3

    → 마진을 사용해서 간격을 정했기 때문에 플레이리스트 전체 영역의 가장자리에 불필요한 여백
      (빨간색 부분)이 생긴다.
    → 플렉스박스 안에서 요소들 사이에서만 간격을 정해보자.
      마진 대신에 플렉스박스에서의 간격을 24px로 하고 불필요한 가장자리 여백을 제거해보자.


    템플릿 코드 설명

    → 플레이리스트 전체를 .playlists라는 클래스로 감싸고 여기에 플렉스박스를 만들어서
      (display: flex) 줄 넘김이 되도록 만들고, 각 플레이리스트에는 .playlist라는 클래스로 여백을 
      12px로 적용(margin: 12px)

    <section>
      <h2 class="section-title">이달의 플레이리스트</h2>
      <div class="playlists">
        <div class="playlist">
          <img class="playlist-thumb" src="images/img_playlist_1.png">
          <div class="playlist-title">
            여행을 떠나요
          </div>
          <div class="playlist-artist">
            Codeit Music
          </div>
        </div>
        <div class="playlist">
          <img class="playlist-thumb" src="images/img_playlist_2.png">
          <div class="playlist-title">
            금요일 저녁의 카페에서
          </div>
          <div class="playlist-artist">
            Codeit Music
          </div>
        </div>
        ...
      </div>
    </section>

    .playlists {
      display: flex;
      flex-wrap: wrap;
    }

    .playlist {
      width: 240px;
      margin: 12px;
    }

    [ 해설 ]

    → 플렉스박스에서 간격을 정하려면 gap 속성을 사용
    → 플렉스박스에서 정하는 거기 때문에 .playlist가 아니라 .playlists 클래스에 적용
    → gap: 24px로 간격을 정해주고요. 각 플레이리스트에서 넣어 주던 마진은 삭제

    .playlists {
      display: flex;
      flex-wrap: wrap;
      gap: 24px;
    }

    .playlist {
      width: 240px;
    }

index.html

  <!DOCTYPE html>
  <html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>Codeit Music</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <section>
      <h2 class="section-title">이달의 플레이리스트</h2>
      <div class="playlists">
        <div class="playlist">
          <img class="playlist-thumb" src="images/img_playlist_1.png">
          <div class="playlist-title">
            여행을 떠나요
          </div>
          <div class="playlist-artist">
            Codeit Music
          </div>
        </div>
        <div class="playlist">
          <img class="playlist-thumb" src="images/img_playlist_2.png">
          <div class="playlist-title">
            금요일 저녁의 카페에서
          </div>
          <div class="playlist-artist">
            Codeit Music
          </div>
        </div>
        <div class="playlist">
          <img class="playlist-thumb" src="images/img_playlist_3.png">
          <div class="playlist-title">
            이제 집중할 시간
          </div>
          <div class="playlist-artist">
            Codeit Music
          </div>
        </div>
        <div class="playlist">
          <img class="playlist-thumb" src="images/img_playlist_4.png">
          <div class="playlist-title">
            몰디브 한 잔
          </div>
          <div class="playlist-artist">
            Codeit Music
          </div>
        </div>
        <div class="playlist">
          <img class="playlist-thumb" src="images/img_playlist_5.png">
          <div class="playlist-title">
            K-Pop 믹스
          </div>
          <div class="playlist-artist">
            Codeit Music
          </div>
        </div>
        <div class="playlist">
          <img class="playlist-thumb" src="images/img_playlist_6.png">
          <div class="playlist-title">
            공부를 위한 클래식
          </div>
          <div class="playlist-artist">
            Codeit Music
          </div>
        </div>
        <div class="playlist">
          <img class="playlist-thumb" src="images/img_playlist_7.png">
          <div class="playlist-title">
            한국 시티팝 20선
          </div>
          <div class="playlist-artist">
            Codeit Music
          </div>
        </div>
        <div class="playlist">
          <img class="playlist-thumb" src="images/img_playlist_8.png">
          <div class="playlist-title">
            편안하게 느긋하게
          </div>
          <div class="playlist-artist">
            Codeit Music
          </div>
        </div>
        <div class="playlist">
          <img class="playlist-thumb" src="images/img_playlist_9.png">
          <div class="playlist-title">
            고요한 밤을 위한 BGM
          </div>
          <div class="playlist-artist">
            Codeit Music
          </div>
        </div>
      </div>
    </section>
  </body>
  </html>


style.css

  * {
    box-sizing: border-box;
  }

  html {
    word-break: keep-all;
    font-family: Pretendard, sans-serif;
    font-size: 16px;
    line-height: 19px;
  }

  body {
    background-color: #000;
    color: #d9d9d9;
    margin: 0;
  }

  section {
    max-width: 1120px;
    width: 100%;
    margin: 80px auto;
    padding: 0 36px;
  }

  .section-title {
    font-weight: 700;
    font-size: 32px;
    line-height: 38px;
    margin: 40px 0;
  }

  .playlists {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
  }

  .playlist {
    width: 240px;
  }

  .playlist-thumb {
    width: 100%;
    border-radius: 16px;
  }

  .playlist-title {
    font-weight: 700;
    font-size: 24px;
    line-height: 29px;
    margin: 16px 0 8px;
  }

  .playlist-artist {
    color: #868686;
    margin: 0;
  }

12. 요소 꽉 채우기

    → 요소 크기를 늘리거나 줄여서 flexbox 안에 요소를 꽉 채우는 방법
    → flex-grow라는 속성을 사용하여 요소를 늘리고 빈공간을 꽉 채우면 된다.

    → flex-grow : 1에서 숫자 1은 상대적인 값 flex-grow는 0이 기본값
      숫자를 쓰게 되면 숫자에 비례해서 더욱 많이 늘어난다.

    → container의 너비가 500px이고, 각각의 box가 width 300으로 되어 있다면 900px이 되어
      요소가 container의 밖으로 삐져나올 거 같으나 실제로 적용하면 그렇지 않다.
    → flexbox에서 각 요소의 크기를 줄여준 것으로 flex-shrink라는 속성으로 인해 다 같이 줄어든 것
    → flex-shrink와 flex-grow는 값이 클수록 더 많이 줄어든다.

    → flexbox에서 요소를 늘리거나 줄일 때에는 요소를 얼마나 늘릴지 정하려면 flex-grow를 쓰고, 
      줄이기 위해서는 flex-shrink를 사용
    → 대부분의 경우 빈 공간을 채우고 싶을 때, flex-grow:1을 쓰고 
      요소의 크기를 원하는 대로 고정하고 싶을 때에는 flex-shrink:0을 쓴다.

13. 플레스 요소의 크기

    flex-basis 속성

    + (위 예시에서는 width 값이 큰 값이지만, flex-shrink에 의해서 줄어들었습니다.)


    → flex-grow와 flex-shrink를 쓰면서 요소들의 크기를 정할 때 특이한 점은
      우리가 정한 width나 height 값으로 크기가 결정되지 않는다는 것
    → 플렉스박스에서는 고정된 크기가 있는 게 아니라 시작 크기와 최종 크기가 있다.
      기본 축에서는 시작 크기를 정해 놓으면 플렉스박스 안에서 유연하게 최종 크기가 결정
      크롬 개발자 도구에서 플렉스박스의 요소를 검사해 보면 빗금을 친 부분만큼의 시작 크기에서, 
      화살표만큼 최종 크기로 늘어나거나 줄어드는 걸 볼 수 있다.

    → 플렉스박스에서 요소의 시작 크기는 flex-basis라는 속성으로 지정
      flex-basis 값을 따로 정해 주지 않으면 기본값은 auto이고,
      width나 height를 참고해서 시작 크기를 정하고 기본 축의 방향이 가로 방향이면 width를, 
      세로 방향이면 height를 참고해서 시작 크기를 정한다.
    → 사실 대부분의 경우 width나 height만 잘 정해주면 별문제 없이 동작
    → 플렉스박스에서 크기를 정하고 싶을 때는 보다 정확하게 flex-basis를 사용하는 걸 추천


    flex 속성

    → flex-basis를 사용하면 좋은 점은 flex라는 속성으로 코드를 짧게 쓸 수 있다는 것
    → flex 속성은 순서대로 flex-grow, flex-shrink, flex-basis 값을 한 번에 쓸 수 있는 속성
    → 아래의 코드는 모두 같은 역할을 하는 코드


    width 속성으로 시작 크기를 지정하기
    flex-grow: 1;
    flex-shrink: 0;
    width: 100px;

    flex-basis 속성으로 시작 크기를 지정하기
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 100px;

    flex 속성으로 짧게 쓰기
    flex: 1 0 100px;

14. 곡 목록

    → 이번 실습에서는 플레이리스트 페이지에서 곡 목록을 만들어 보겠습니다. 
      아래를 참고해서 주어진 코드를 수정

    (1) 트랙 숫자 영역은 폭을 24px로 한다.
    (2) 트랙 제목 영역의 크기를 늘려서 플렉스박스에 꽉 채운다.
    (3) 아이콘들은 크기가 늘거나 줄어들지 않는다.


    템플릿 코드 설명

    → 전체 트랙은 .tracks라는 클래스로 감쌌고, 순서 리스트이지만 CSS 속성을 통해서 리스트 아이템을
      마치 <div> 태그처럼 배치
    → 각 트랙에 해당하는 .track이라는 클래스에 플렉스박스를 만들었다.
    → 안에 있는 요소들(트랙 숫자, 트랙 제목, 아티스트 이름, 그리고 여러 아이콘들)을 왼쪽에서 
      오른쪽으로 배치
    → 각각 클래스 이름을 살펴보자면, .track-number는 트랙 숫자 영역
    → .track-title은 트랙 제목 영역, .track-artist는 아티스트 이름 영역, 그리고 
      .track-icon은 각각 아이콘에 사용

    <ol class="tracks">
        <li class="track">
          <div class="track-number">1</div>
          <div class="track-title">자주자주(디깅클럽부산 Ver.)</div>
          <div class="track-artist">지조</div>
          <img
            class="track-icon"
            src="images/icon_playlist.svg"
            alt="플레이리스트에 넣기"
         >
          <img class="track-icon" src="images/icon_more.svg" alt="더 보기">
        </li>
        <li class="track">
          <div class="track-number">2</div>
          <div class="track-title">All</div>
          <div class="track-artist">천예린</div>
          <img
            class="track-icon"
            src="images/icon_playlist.svg"
            alt="플레이리스트에 넣기"
         >
          <img class="track-icon" src="images/icon_more.svg" alt="더 보기">
        </li>
        ...
      </ol>

    .tracks {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .track {
      display: flex;
      align-items: center;
      padding: 24px 32px;
      gap: 16px;
    }

    .track.active {
      border-radius: 16px;
      background-color: #19191F;
    }

    .track-number {
    }

    .track-title {
    }

    .track-icon {
      width: 16px;
      height: 16px;
    }

    [해설]

    트랙 숫자 영역은 폭을 24px로 한다.

    → width 속성을 써도 되지만, 플렉스박스에서는 flex-basis를 사용
    → flex-basis 속성으로 플렉스박스에서 요소의 시작 크기를 지정
    → 24px로 하고 싶다면 flex-basis: 24px

    .track-number {
      flex-basis: 24px;
    }


    트랙 제목 영역의 크기를 늘려서 플렉스박스에 꽉 채운다.

    → 플렉스박스에서 요소의 크기를 늘려서 꽉 채우려면 flex-grow 속성을 사용
    → 트랙 제목 영역에 해당하는 .title에다가 flex-grow: 1
    → 기본적으로 flex-grow의 값은 0이기 때문에 이렇게 하면 제목 영역을 늘려서 꽉찬다.

    .track-title {
      flex-grow: 1;
    }


    아이콘들은 크기가 늘거나 줄어들지 않는다.

    → 플렉스박스에서 요소의 크기를 늘리지 않으려면 flex-shrink 속성을 사용
    → flex-shrink의 기본 값은 1이고, 기본적으로 요소가 넘치면 크기를 줄여주기 때문
    → 이 값을 0으로 하면 줄어들지 않는다. 
    → flex-grow:0과 flex-shrink: 0을 추가

    .track-icon {
      flex-shrink: 0;
      width: 16px;
      height: 16px;
    }

index.html

  <!DOCTYPE html>
  <html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>Codeit Music</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <header>
      <div class="wrap">Codeit Music</div>
    </header>
    <main class="wrap">
      <div class="info">
        <div class="cover">
          <img
            class="cover-image"
            src="images/img_cafe.png"
            alt="카페에서 일할 때 커버 이미지"
         >
          <img
            src="images/icon_play.png"
            alt="재생 아이콘"
            class="cover-play-icon"
         >
        </div>
        <h1 class="playlist-title">
          카페에서 일할 때
          <span class="hot-badge"> 인기 </span>
        </h1>
        <div class="artist">
          <img
            src="images/img_codeit.png"
            alt="코드잇 프로필"
            class="artist-profile"
         >
          코드잇
        </div>
        <div class="description">
          차분하게 흐르는 따뜻한 음악과 함께하는 휴식. Codeit Music 에디터가
          매달 업데이트하는 플레이리스트입니다. 마음에 드는 곳이 있다면 보관함에
          추가해 보세요.
        </div>
        <button class="play-button">▶️ 지금 듣기</button>
      </div>
      <ol class="tracks">
        <li class="track">
          <div class="track-number">1</div>
          <div class="track-title">자주자주(디깅클럽부산 Ver.)</div>
          <div class="track-artist">지조</div>
          <img
            class="track-icon"
            src="images/icon_playlist.svg"
            alt="플레이리스트에 넣기"
         >
          <img class="track-icon" src="images/icon_more.svg" alt="더 보기">
        </li>
        <li class="track">
          <div class="track-number">2</div>
          <div class="track-title">All</div>
          <div class="track-artist">천예린</div>
          <img
            class="track-icon"
            src="images/icon_playlist.svg"
            alt="플레이리스트에 넣기"
         >
          <img class="track-icon" src="images/icon_more.svg" alt="더 보기">
        </li>
        <li class="track active">
          <div class="track-number">3</div>
          <div class="track-title">나는 어떻게 (Feat. 천예린)</div>
          <div class="track-artist">심원찬</div>
          <img
            class="track-icon"
            src="images/icon_playlist.svg"
            alt="플레이리스트에 넣기"
         >
          <img class="track-icon" src="images/icon_more.svg" alt="더 보기">
        </li>
        <li class="track">
          <div class="track-number">4</div>
          <div class="track-title">시간을 거슬러(Feat. 지조)</div>
          <div class="track-artist">오키</div>
          <img
            class="track-icon"
            src="images/icon_playlist.svg"
            alt="플레이리스트에 넣기"
         >
          <img class="track-icon" src="images/icon_more.svg" alt="더 보기">
        </li>
        <li class="track">
          <div class="track-number">5</div>
          <div class="track-title">우르르</div>
          <div class="track-artist">핫트</div>
          <img
            class="track-icon"
            src="images/icon_playlist.svg"
            alt="플레이리스트에 넣기"
         >
          <img class="track-icon" src="images/icon_more.svg" alt="더 보기">
        </li>
        <li class="track">
          <div class="track-number">6</div>
          <div class="track-title">당신이 맞다는 대답을 할 거예요</div>
          <div class="track-artist">이강하</div>
          <img
            class="track-icon"
            src="images/icon_playlist.svg"
            alt="플레이리스트에 넣기"
         >
          <img class="track-icon" src="images/icon_more.svg" alt="더 보기">
        </li>
      </ol>
    </main>
  </body>
  </html>


style.css

  * {
    box-sizing: border-box;
  }

  html {
    word-break: keep-all;
    font-family: Pretendard, sans-serif;
  }

  body {
    margin: 0;
    background-color: #000;
    color: #fff;
  }

  .wrap {
    margin: 0 auto;
    padding: 32px;
    max-width: 1080px;
    width: 100%;
  }

  header {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 16px;
    background-image: linear-gradient(
      180deg,
      #000000 15.1%,
      rgba(0, 0, 0, 0) 100%
    );
    font-weight: 700;
  }

  .info {
    margin-bottom: 40px;
    padding: 40px;
    border-bottom: 1px solid #595864;
  }

  .cover {
    width: 252px;
    height: 252px;
    border-radius: 24px;
    overflow: hidden;
    position: relative;
  }

  .cover-image {
    width: 100%;
    height: 100%;
  }

  .cover-play-icon {
    display: none;
    width: 72px;
    height: 72px;
    position: absolute;
    left: 28px;
    bottom: 28px;
  }

  .cover:hover .cover-play-icon {
    display: block;
  }

  .playlist-title {
    margin: 40px 0 16px;
    font-weight: 700;
    font-size: 40px;
    line-height: 48px;
  }

  .hot-badge {
    position: relative;
    top: -20px;
    padding: 4px 8px;
    border-radius: 8px;
    background-color: #2a2a31;
    color: #8e8ea0;
    font-weight: 700;
    font-size: 16px;
    line-height: 19px;
  }

  .artist {
    display: flex;
    align-items: center;
    color: #7d7c8a;
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;

    gap: 8px;
  }

  .artist-profile {
    overflow: hidden;
    width: 24px;
    height: 24px;
    border-radius: 50%;
  }

  .description {
    margin: 16px 0 32px;
    color: #7d7c8a;
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
  }

  .play-button {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    background-color: #4b1bb1;
    color: #ffffff;
    font-weight: 500;
    font-size: 16px;
    line-height: 19px;
  }

  .tracks {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .track {
    display: flex;
    align-items: center;
    padding: 24px 32px;

    gap: 16px;
  }

  .track.active {
    border-radius: 16px;
    background-color: #19191F;
  }

  .track-number {
    flex-basis: 24px;
  }

  .track-title {
    flex-grow: 1;
  }

  .track-icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
  }

15. 음악 플레이어

    (1) 앨범 커버 이미지와 제목, 아티스트 이름 사이의 간격은 16px로 해 주세요.
    (2) 앨범 커버 이미지, 제목, 아티스트 이름은 왼쪽에 배치해 주세요.
    (3) 이전 곡, 일시 정지, 다음 곡 아이콘들은 전체 상자의 정중앙에 배치해 주세요.
    (4) 재생 시간 텍스트는 오른쪽으로 배치해 주세요.
    (5) 음악 플레이어 안의 모든 요소들은 세로로 가운데 정렬해 주세요.


    템플릿 코드 설명

    → 음악 플레이어 전체는 .player라는 클래스의 <div>로 감싸고, 음악이 얼마나 재생되고 있는지
      보여주고 있는 .progress-bar 클래스의 <div> 태그가 있다.
    → 음악 플레이어의 내용이 들어있는 .player-main 클래스의 <div> 태그가 있다.
    → .player-main 안에는 총 세 개의 자식 요소가 있습니다. 
       순서대로 .info 클래스, .controls 클래스 그리고 .time 클래스가 있다. 
      .info 안에는 앨범 커버 이미지, 제목, 아티스트 이름이 있고요, .controls 안에는 이전 곡, 
      일시 정지, 다음 곡 아이콘이 있습니다. 마지막으로 .time에는 재생 시간 텍스트가 있다.

    <div class="player">
      <div class="progress-bar">
        <div class="progress"></div>
      </div>
      <div class="player-main">
        <div class="info">
          <img class="current" src="images/img_current_song.png" alt="현재 재생 중인 곡">
          <div class="title">After Sunset</div>
          <div class="artist">Benjamin</div>
        </div>
        <div class="controls">
          <img src="images/icon_before.svg" alt="이전 곡" width="48" height="48">
          <img src="images/icon_pause.svg" alt="일시정지" width="48" height="48">
          <img src="images/icon_after.svg" alt="다음 곡" width="48" height="48">
        </div>
        <div class="time">
          2:34 / 5:67
        </div>
      </div>
    </div>


    * {
      box-sizing: border-box;
    }

    html {
      font-family: Pretendard, sans-serif;
      word-break: keep-all;
    }

    body {
      margin: 0;
      background-color: #000;
      color: #fff;
      font-size: 16px;
      line-height: 24px;
    }

    .progress-bar {
      height: 6px;
      background: linear-gradient(0deg, #4d4d54, #4d4d54),
        linear-gradient(0deg, #4d4d54, #4d4d54), #4d4d54;
    }

    .progress {
      width: 70%;
      height: 100%;
      background-color: #7000ff;
    }

    .player-main {
      padding: 16px 40px;
      background-color: rgba(48, 48, 55, 0.7);

      backdrop-filter: blur(15px);
    }

    .info,
    .time {
    }

    .info {
    }

    .current {
      border-radius: 14px;
    }

    .title {
      color: #d9d9d9;
    }

    .artist {
      color: #8c8993;
    }

    .playing {
      width: 48px;
      height: 48px;
    }

    .icon {
      width: 24px;
      height: 24px;
    }

    .controls {
    }

    .time {
      color: #8c8993;
    }

    [ 해설 ]

    → 앨범 커버 이미지랑 제목, 아티스트 이름을 가로로 배치하기 위해서 .info 클래스를 
      플렉스박스로 만들고 세로로 정렬하여 간격을 16px로 준다.

    .info {
      display: flex;
      align-items: center;
      gap: 16px;
    }


    → .info , .control 그리고 .time을 정렬한다.
      우선, .player-main 클래스를 플렉스박스로 만들고, space-between으로 정렬하면 
      요소들을 펼쳐서 배치
    → justify-content: space-between을 적용해서 기본 축에서 펼쳐서 배치하고, 
       align-items: center로 세로 정렬

    .player-main {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px 40px;
      background-color: rgba(48, 48, 55, 0.7);
      backdrop-filter: blur(15px);
    }


    → 정렬이 안 맞는 이유는 맨 왼쪽의 요소와 맨 오른쪽의 요소의 너비가 달라서 그렇기 때문에 
      flex-basis의 값을 설정.
      .info 클래스와 .sub-controls 클래스에서 flex-basis 값을 똑같이 설정한다.
      각각 따로 써 줘도 되지만, 값을 똑같이 하고 싶은 거기 때문에 아래처럼 선택자 목록으로 써준다.

    .info,
    .time {
      flex-basis: 300px;
    }


    → .controls와 .time에 있는 요소들의 정렬이 안 맞는 부분은 .controls에서는 정중앙으로 정렬을, .time에서는 기본 축 방향에서 맨 끝으로 정렬을 해준다.
      justify-content: flex-end로 속성 값을 주면 된다.

    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .time {
      display: flex;
      justify-content: flex-end;
      color: #8c8993;
    }

index.html

  <!DOCTYPE html>
  <html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>Codeit Music</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="player">
      <div class="progress-bar">
        <div class="progress"></div>
      </div>
      <div class="player-main">
        <div class="info">
          <img class="current" src="images/img_current_song.png" alt="현재 재생 중인 곡">
          <div class="title">After Sunset</div>
          <div class="artist">Benjamin</div>
        </div>
        <div class="controls">
          <img src="images/icon_before.svg" alt="이전 곡" width="48" height="48">
          <img src="images/icon_pause.svg" alt="일시정지" width="48" height="48">
          <img src="images/icon_after.svg" alt="다음 곡" width="48" height="48">
        </div>
        <div class="time">
          2:34 / 5:67
        </div>
      </div>
    </div>
  </body>
  </html>


style.css

  * {
    box-sizing: border-box;
  }

  html {
    font-family: Pretendard, sans-serif;
    word-break: keep-all;
  }

  body {
    margin: 0;
    background-color: #000;
    color: #fff;
    font-size: 16px;
    line-height: 24px;
  }

  .progress-bar {
    height: 6px;
    background: linear-gradient(0deg, #4d4d54, #4d4d54),
      linear-gradient(0deg, #4d4d54, #4d4d54), #4d4d54;
  }

  .progress {
    width: 70%;
    height: 100%;
    background-color: #7000ff;
  }

  .player-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 40px;
    background-color: rgba(48, 48, 55, 0.7);
    backdrop-filter: blur(15px);
  }

  .info,
  .time {
    flex-basis: 300px;
  }

  .info {
    display: flex;
    align-items: center;
    gap: 16px;
  }

  .current {
    border-radius: 14px;
  }

  .title {
    color: #d9d9d9;
  }

  .artist {
    color: #8c8993;
  }

  .playing {
    width: 48px;
    height: 48px;
  }

  .icon {
    width: 24px;
    height: 24px;
  }

  .controls {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .time {
    display: flex;
    justify-content: flex-end;
    color: #8c8993;
  }

16. 미니 프로젝트 : 코드잇 항공

    → 필요한 경우 <div> 태그를 추가하면서 정렬
    → 포지션, 플렉스박스를 사용해서 사이트 전체를 배치해 보는 것이 목표이니까 세세한 여백이나 크기는 다르더라도 괜찮습니다.


    템플릿 코드 설명

       → 추천순, 최저가, 최단 시간이 적혀있는 부분과 일반, 비즈니스, 퍼스트 좌석의 정보가 적혀있는 
      부분은 각각 .flight-header-col이란 클래스와 .cabin이라는 클래스로 스타일링
      둘 다 너비를 147px로 지정

    .flights-header-col {
      width: 147px;
      padding: 18px;
      color: #b1bac9;
    }

    /* ... */

    .flight-card > .cabin {
      width: 147px;
      border-left: 1px solid #e5e9f3;
    }


    → 본문 내용을 모두 감싸고 있는 .container 클래스에서는 앞에서 배우지 않은 max-width라는 
      속성을 쓰고 있다.
      기본적으로 너비를 100%로 꽉 채우면서도 최대 880px까지만 늘어나게 하는 코드
      flex-grow, flex-shrink 등을 설정하고 브라우저 창 너비를 바꿔 보면서 각각이 어떻게 변하는지
      확인

    .container {
      margin: 0 auto;
      padding: 0 24px;
      width: 100%;
      max-width: 880px;
    }

    [ 해설 ]

    → 플렉스박스에서 정렬을 쓰기 위해서 <div> 태그를 몇 개 추가한 다음 정렬
    → 맨 위의 .trip 영역은 .trip-route라는 <div>를 나누고 부모 태그인 .trip <div>에서 플렉스박스로 양쪽 정렬(space-between)
    → 세로로 정렬하기 위해서 align-items: center도 적용

    <div class="trip">
      <div class="trip-route">
        <div class="trip-title">
          <img
            class="trip-depart-icon"
            src="images/fa-solid_plane-departure.svg"
         >
          출국
        </div>
        <div class="trip-airports">ICN → YYZ</div>
      </div>
      <span class="trip-date">일요일, 4월 20일, 2025</span>
    </div>


    .trip {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 40px 0 24px;
      padding: 24px 32px;
      border-radius: 8px;
      background: #ebeff8;
    }

    .trip-title {
      color: #b3bdd5;
      font-weight: 700;
      font-size: 16px;
      line-height: 23px;
    }

    .trip-depart-icon {
      margin-right: 8px;
      height: 12px;
    }

    .trip-airports {
      margin: 8px 0;
      color: #000000;
      font-weight: 600;
      font-style: normal;
      font-size: 32px;
      font-family: 'Titillium Web';
      line-height: 32px;
    }

    .trip-date {
      display: inline-block;
      margin: 16px 0;
      padding: 8px 24px;
      border-radius: 4px;
      background: #ffffff;
      color: #000000;
    }

    →  .flights-header는 일단 안에 있는 요소들이 전부 아래쪽으로 몰려 있으니까 교차축 방향으로 
       정렬, 즉 align-items: flex-end를 한다.
    → 그 안에 있는 요소 중에서, "120개의 결과"라고 쓰여 있는 영역은 .flights-header-result라는 
      클래스에 해당
    → 이 영역을 늘리고 꽉 차게 배치하려고 flex-grow: 1이라는 값을 주고, 
      나머지 영역들("추천순", "최저가", "최단 시간")은 크기가 변하지 않도록 flex-shrink: 0 준다
      이렇게 하면 크기가 .flights-header-col의 너비값인 147px로 고정

    <div class="flights-header">
      <div class="flights-header-result">120개의 결과</div>
      <div class="flights-header-col">
        <div class="order-by">추천순</div>
        <div>
          ₩439,400<br>
          평균 3시간 40분
        </div>
      </div>
      <div class="flights-header-col active">
        <div class="order-by">최저가</div>
        <div>
          ₩113,060<br>
          평균 4시간 35분
        </div>
      </div>
      <div class="flights-header-col">
        <div class="order-by">최단 시간</div>
        <div>
          ₩863,200<br>
          평균 2시간 33분
        </div>
      </div>
    </div>


    .flights-header {
      display: flex;
      align-items: flex-end;
      margin-bottom: 40px;
    }

    .flights-header-result,
    .flights-header-col {
      padding-bottom: 18px;
      border-bottom: 1px solid #d6dbe8;
    }

    .flights-header-result {
      flex-grow: 1;
    }

    .flights-header-col {
      flex-shrink: 0;
      width: 147px;
      padding: 18px;
      color: #b1bac9;
    }

    .flights-header-col.active {
      border-bottom: 3px solid #2a3251;
      color: #2a3251;
    }

    → 출발, 걸리는 시간, 도착을 각각 하나의 <div> 태그로 묶은 다음에 이걸 space-between으로 정렬

    <div class="departure-arrival">
      <div class="departure">
        <h3 class="label">출발</h3>
        <div>오전 10:30</div>
      </div>
      <div class="journey">
        <h3 class="label">04h 15m</h3>
        <img class="flight-icon" src="images/img_journey.svg">
      </div>
      <div class="arrival">
        <h3 class="label">도착</h3>
        <div>오후 2:29</div>
      </div>
    </div>


    .flight-card .departure-arrival {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-weight: 700;
    }

    → 오른쪽의 일반, 비즈니스, 퍼스트 좌석에 해당하는 .cabin <div> 들은 정중앙으로 정렬

    <div class="cabin">
      <h3 class="name">일반</h3>
      <p class="price">₩129,000</p>
      <p class="left">100석 남음</p>
      <button class="reserve">예약하기</button>
    </div>
    <div class="cabin soldout">
      <h3 class="name">비즈니스</h3>
      <p class="price">₩419,000</p>
      <p class="left">0석 남음</p>
      <button class="reserve" disabled>매진</button>
    </div>
    <div class="cabin soldout-soon">
      <h3 class="name">퍼스트</h3>
      <p class="price">₩699,000</p>
      <p class="left">1석 남음</p>
      <button class="reserve">예약하기</button>
    </div>


    .cabin {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    → 위쪽의 .flights-header랑 정렬이 일치하도록, 왼쪽 영역은 늘어날 수 있도록 
      flex-grow: 1을 지정 (.flight-card > .ticket 부분)
    → 각 좌석에 해당하는 영역은 크기가 변하지 않도록 flex-shrink: 0 을 지정
    → 마찬가지로 .cabin의 너비값인 147px로 고정(.flight-card > .cabin 부분)

    <div class="flight-card">
      <div class="ticket">
        <h2 class="ticket-label">AIR TICKET 01</h2>
        <div class="content">
          <div class="departure-arrival">
            <div class="departure">
              <h3 class="label">출발</h3>
              <div>오전 10:30</div>
            </div>
            <div class="journey">
              <h3 class="label">04h 15m</h3>
              <img class="flight-icon" src="images/img_journey.svg">
            </div>
            <div class="arrival">
              <h3 class="label">도착</h3>
              <div>오후 2:29</div>
            </div>
          </div>
          <div class="planes">
            <h3 class="label">운행 항공편</h3>
            <div>CL117, CL2402</div>
          </div>
        </div>
      </div>
      <div class="cabin">
        <h3 class="name">일반</h3>
        <p class="price">₩129,000</p>
        <p class="left">100석 남음</p>
        <button class="reserve">예약하기</button>
      </div>
      <div class="cabin soldout">
        <h3 class="name">비즈니스</h3>
        <p class="price">₩419,000</p>
        <p class="left">0석 남음</p>
        <button class="reserve" disabled>매진</button>
      </div>
      <div class="cabin soldout-soon">
        <h3 class="name">퍼스트</h3>
        <p class="price">₩699,000</p>
        <p class="left">1석 남음</p>
        <button class="reserve">예약하기</button>
      </div>
    </div>


    .flight-card {
      display: flex;
      margin: 24px 0;
      border-radius: 8px;
      background: #ffffff;
      box-shadow: 0px 4px 15px rgba(18, 23, 42, 0.1);
    }

    .flight-card > .ticket {
      flex-grow: 1;
    }

    .flight-card > .cabin {
      flex-shrink: 0;
      width: 147px;
      border-left: 1px solid #e5e9f3;
    }

    .ticket-label {
      margin: 0;
      padding: 8px 24px;
      background-image: url('images/bg_ticket_label.svg');
      background-position: 0 0;
      background-size: contain;
      background-repeat: no-repeat;
      color: #16bf97;
      font-size: 12px;
      font-family: 'Titillium Web';
      line-height: 18px;
    }

    .flight-card .content {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 24px 24px 32px;
      color: #1a345e;
      font-weight: 700;
      gap: 16px;
    }

    .flight-card .label {
      margin-bottom: 8px;
      color: #b6bfd3;
      font-weight: 500;
      font-size: 12px;
      line-height: 17px;
    }

    .flight-card .departure-arrival {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-weight: 700;
    }

    .flight-card .journey {
      text-align: center;
    }

    .cabin {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    .cabin .name,
    .cabin .price,
    .cabin .left {
      margin: 0;
    }

    .cabin .name {
      font-weight: 500;
      font-size: 16px;
      line-height: 23px;
    }

    .cabin .price {
      font-weight: 700;
      font-size: 16px;
      line-height: 23px;
    }

    .cabin .left {
      font-weight: 500;
      font-size: 12px;
      line-height: 17px;
    }

    .cabin .reserve {
      margin-top: 23px;
    }

    .soldout.cabin .left {
      color: #b6bfd3;
    }

    .soldout-soon.cabin .left {
      color: #dc534a;
    }

    → 광고 영역은 이전 요소의 뒷부분으로 가서 겹쳐져있으므로 요소를 뒤로 보내려면 
      z-index 값을 낮게 설정 (z-index의 값의 기준은 0이니까, 음수로 지정)
    → .ad 클래스에서 position: relative; top: -40px; z-index: -1; 이렇게 해주면 현재 위치를
      기준으로 뒤쪽에 겹치면서 배치

    → relative 포지션은 원래 위치를 기준으로 배치되고, 원래 자리는 그대로 차지
    → top: -40px 대신에 margin-top: -40px이라고 배치
    → 아래의 요소들이 함께 올라오는데 z-index 설정을 하려면 요소가 포지셔닝되어 있어야 하기 때문에 
      position: relative는 지우지 않고 그대로 남겨 둡니다.

    .ad {
      position: relative;
      z-index: -1;
      display: flex;
      align-items: center;
      flex-direction: column;
      margin-top: -40px;
      padding: 47px;
      border-radius: 8px;
      background-color: #ebeff8;
    }


    → .ad 안에 있는 각각의 요소들의 간격이 8px이니까 gap 속성을 사용해서 간격을 지정

    .ad {
      position: relative;
      z-index: -1;
      display: flex;
      align-items: center;
      flex-direction: column;
      margin-top: -40px;
      padding: 47px;
      border-radius: 8px;
      background-color: #ebeff8;
      gap: 8px;
    }

index.html

  <!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8">
      <title>Codeit Airline</title>
      <link rel="preconnect" href="https://fonts.googleapis.com">
      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
      <link
        href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&family=Titillium+Web:wght@300;600&display=swap"
        rel="stylesheet"
     >
      <link rel="stylesheet" href="style.css">
    </head>
    <body>
      <div class="header">
        <div class="container">
          <img id="logo" src="images/logo.png">
        </div>
      </div>
      <div class="content">
        <div class="container">
          <div class="trip">
            <div class="trip-route">
              <div class="trip-title">
                <img
                  class="trip-depart-icon"
                  src="images/fa-solid_plane-departure.svg"
               >
                출국
              </div>
              <div class="trip-airports">ICN → YYZ</div>
            </div>
            <span class="trip-date">일요일, 4월 20일, 2025</span>
          </div>

          <div class="flights-header">
            <div class="flights-header-result">120개의 결과</div>
            <div class="flights-header-col">
              <div class="order-by">추천순</div>
              <div>
                ₩439,400<br>
                평균 3시간 40분
              </div>
            </div>
            <div class="flights-header-col active">
              <div class="order-by">최저가</div>
              <div>
                ₩113,060<br>
                평균 4시간 35분
              </div>
            </div>
            <div class="flights-header-col">
              <div class="order-by">최단 시간</div>
              <div>
                ₩863,200<br>
                평균 2시간 33분
              </div>
            </div>
          </div>

          <div class="flight-card">
            <div class="ticket">
              <h2 class="ticket-label">AIR TICKET 01</h2>
              <div class="content">
                <div class="departure-arrival">
                  <div class="departure">
                    <h3 class="label">출발</h3>
                    <div>오전 10:30</div>
                  </div>
                  <div class="journey">
                    <h3 class="label">04h 15m</h3>
                    <img class="flight-icon" src="images/img_journey.svg">
                  </div>
                  <div class="arrival">
                    <h3 class="label">도착</h3>
                    <div>오후 2:29</div>
                  </div>
                </div>
                <div class="planes">
                  <h3 class="label">운행 항공편</h3>
                  <div>CL117, CL2402</div>
                </div>
              </div>
            </div>
            <div class="cabin">
              <h3 class="name">일반</h3>
              <p class="price">₩129,000</p>
              <p class="left">100석 남음</p>
              <button class="reserve">예약하기</button>
            </div>
            <div class="cabin soldout">
              <h3 class="name">비즈니스</h3>
              <p class="price">₩419,000</p>
              <p class="left">0석 남음</p>
              <button class="reserve" disabled>매진</button>
            </div>
            <div class="cabin soldout-soon">
              <h3 class="name">퍼스트</h3>
              <p class="price">₩699,000</p>
              <p class="left">1석 남음</p>
              <button class="reserve">예약하기</button>
            </div>
          </div>

          <div class="flight-card">
            <div class="ticket">
              <h2 class="ticket-label">AIR TICKET 02</h2>
              <div class="content">
                <div class="departure-arrival">
                  <div class="departure">
                    <h3 class="label">출발</h3>
                    <div>오전 11:30</div>
                  </div>
                  <div class="journey">
                    <h3 class="label">04h 15m</h3>
                    <img class="flight-icon" src="images/img_journey.svg">
                  </div>
                  <div class="arrival">
                    <h3 class="label">도착</h3>
                    <div>오후 3:29</div>
                  </div>
                </div>
                <div class="planes">
                  <h3 class="label">운행 항공편</h3>
                  <div>CL118, CL2403</div>
                </div>
              </div>
            </div>
            <div class="cabin">
              <h3 class="name">일반</h3>
              <p class="price">₩129,000</p>
              <p class="left">42석 남음</p>
              <button class="reserve">예약하기</button>
            </div>
            <div class="cabin soldout">
              <h3 class="name">비즈니스</h3>
              <p class="price">₩419,000</p>
              <p class="left">0석 남음</p>
              <button class="reserve" disabled>매진</button>
            </div>
            <div class="cabin soldout">
              <h3 class="name">퍼스트</h3>
              <p class="price">₩699,000</p>
              <p class="left">0석 남음</p>
              <button class="reserve" disabled>매진</button>
            </div>
          </div>

          <div class="ad">
            <h3>이 항공편이 마음에 드셨나요?</h3>
            <p>항공편의 가격이 오르거나 내려가면 알려드릴게요.</p>
            <button>알림 받기</button>
          </div>

          <div class="flight-card">
            <div class="ticket">
              <h2 class="ticket-label">AIR TICKET 03</h2>
              <div class="content">
                <div class="departure-arrival">
                  <div class="departure">
                    <h3 class="label">출발</h3>
                    <div>오후 12:30</div>
                  </div>
                  <div class="journey">
                    <h3 class="label">04h 15m</h3>
                    <img class="flight-icon" src="images/img_journey.svg">
                  </div>
                  <div class="arrival">
                    <h3 class="label">도착</h3>
                    <div>오후 4:29</div>
                  </div>
                </div>
                <div class="planes">
                  <h3 class="label">운행 항공편</h3>
                  <div>CL119, CL2404</div>
                </div>
              </div>
            </div>
            <div class="cabin">
              <h3 class="name">일반</h3>
              <p class="price">₩129,000</p>
              <p class="left">120석 남음</p>
              <button class="reserve">예약하기</button>
            </div>
            <div class="cabin soldout">
              <h3 class="name">비즈니스</h3>
              <p class="price">₩419,000</p>
              <p class="left">0석 남음</p>
              <button class="reserve" disabled>매진</button>
            </div>
            <div class="cabin soldout-soon">
              <h3 class="name">퍼스트</h3>
              <p class="price">₩699,000</p>
              <p class="left">1석 남음</p>
              <button class="reserve">예약하기</button>
            </div>
          </div>
        </div>
      </div>
    </body>
  </html>


style.css

  * {
    box-sizing: border-box;
  }

  body {
    margin: 0;
    background: #f7f8fd;
    color: #0b1f66;
    font-family: 'Noto Sans KR', sans-serif;
  }

  button {
    padding: 8px 16px;
    border: none;
    border-radius: 8px;
    background-color: #16bf97;
    box-shadow: 0px 4px 15px rgba(18, 23, 42, 0.03);
    color: #ffffff;
    font-weight: 700;
  }

  button:disabled {
    background-color: #f5f6f9;
    color: #b6bfd3;
  }

  .container {
    margin: 0 auto;
    width: 880px;
  }

  .header {
    position: sticky;
    top: 0;
    padding: 18px 0;
    background-color: #2a3251;
    color: #ffffff;
  }

  #logo {
    height: 24px;
  }

  .header > .divider {
    color: #3b4252;
  }

  .trip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 40px 0 24px;
    padding: 24px 32px;
    border-radius: 8px;
    background: #ebeff8;
  }

  .trip-title {
    color: #b3bdd5;
    font-weight: 700;
    font-size: 16px;
    line-height: 23px;
  }

  .trip-depart-icon {
    margin-right: 8px;
    height: 12px;
  }

  .trip-airports {
    margin: 8px 0;
    color: #000000;
    font-weight: 600;
    font-style: normal;
    font-size: 32px;
    font-family: 'Titillium Web';
    line-height: 32px;
  }

  .trip-date {
    display: inline-block;
    margin: 16px 0;
    padding: 8px 24px;
    border-radius: 4px;
    background: #ffffff;
    color: #000000;
  }

  .flights-header {
    display: flex;
    align-items: flex-end;
    margin-bottom: 40px;
  }

  .flights-header-result,
  .flights-header-col {
    padding-bottom: 18px;
    border-bottom: 1px solid #d6dbe8;
  }

  .flights-header-result {
    flex: 1 1 auto;
  }

  .flights-header-col {
    flex: 0 0 147px;
    padding: 18px;
    color: #b1bac9;
  }

  .flights-header-col.active {
    border-bottom: 3px solid #2a3251;
    color: #2a3251;
  }

  .order-by {
    margin-bottom: 8px;
    font-weight: 700;
  }

  .flight-card {
    display: flex;
    margin: 24px 0;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0px 4px 15px rgba(18, 23, 42, 0.1);
  }

  .flight-card > .ticket {
    flex: 1 1 auto;
  }

  .flight-card > .cabin {
    flex: 0 0 147px;
    border-left: 1px solid #e5e9f3;
  }

  .ticket-label {
    margin: 0;
    padding: 8px 24px;
    background-image: url('images/bg_ticket_label.svg');
    background-position: 0 0;
    background-size: contain;
    background-repeat: no-repeat;
    color: #16bf97;
    font-size: 12px;
    font-family: 'Titillium Web';
    line-height: 18px;
  }

  .flight-card .content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 24px 24px 32px;
    color: #1a345e;
    font-weight: 700;

    gap: 16px;
  }

  .flight-card .label {
    margin-bottom: 8px;
    color: #b6bfd3;
    font-weight: 500;
    font-size: 12px;
    line-height: 17px;
  }

  .flight-card .departure-arrival {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 700;
  }

  .flight-card .journey {
    text-align: center;
  }

  .cabin {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
  }

  .cabin .name,
  .cabin .price,
  .cabin .left {
    margin: 0;
  }

  .cabin .name {
    font-weight: 500;
    font-size: 16px;
    line-height: 23px;
  }

  .cabin .price {
    font-weight: 700;
    font-size: 16px;
    line-height: 23px;
  }

  .cabin .left {
    font-weight: 500;
    font-size: 12px;
    line-height: 17px;
  }

  .cabin .reserve {
    margin-top: 23px;
  }

  .soldout.cabin .left {
    color: #b6bfd3;
  }

  .soldout-soon.cabin .left {
    color: #dc534a;
  }

  .ad {
    position: relative;
    z-index: -1;
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-top: -40px;
    padding: 47px;
    border-radius: 8px;
    background-color: #ebeff8;
  }

  .ad > h3 {
    margin: 0 0 8px;
    font-weight: 700;
    font-size: 16px;
    line-height: 23px;
  }

  .ad > p {
    margin: 0 0 16px;
    color: #b6bfd3;
    font-size: 12px;
    line-height: 17px;
  }

17. Flexbox정리

    플렉스박스 만들기
    → display: flex;

    → 기본 축과 교차 축

    배치 방향
    → flex-direction을 사용하면 기본 축의 방향을 정할 수 있습니다. 이때 기본 값은 row

    기본 축 정렬: justify-content
    → justify-content를 사용하면 기본 축 방향으로 정렬할 수 있습니다. 기본 값은 flex-start입니다.

    교차 축 정렬: align-items
    → 교차 축 방향으로 정렬할 때는 align-items를 사용합니다. 
      기본 값은 stretch(늘려서 배치하기) 입니다.

    요소가 넘칠 때: flex-wrap
    → 요소가 넘치는 경우 flex-wrap: wrap을 지정해주면 교차 축 방향으로 넘어가서 배치

    간격: gap
    → 숫자를 하나만 쓰면, 모든 방향의 간격을 지정
    → 세로, 가로 순서대로 숫자를 두 개 쓰면 세로 간격, 가로 간격을 지정
    → 세로와 가로는 기본 축 방향이랑은 상관없다.

    요소 늘려서 채우기: flex-grow
    → 기본 값은 0입니다. flex-grow 값이 클수록 많이 늘어난다.

    요소 줄여서 채우기: flex-shrink
    → 요소들의 크기가 커서 넘치는 경우, 요소의 크기를 줄여서 플렉스박스 안에 가득 채운다.
    → flex-shrink의 기본 값이 1이기 때문에 기본적으로 요소를 줄여서 배치하고, 
      0으로 지정하면 크기가 줄어들지 않는다.
    → flex-shrink 값이 클수록 상대적으로 많이 줄어든다.

18. 인라인 안에서 Flexbox 만들기

    → 인라인 요소 안에서 플렉스박스를 쓰는 방법
    → 가끔씩 인라인 안에서 세로 정렬을 하고 싶을 때가 있습니다. 
      예를 들어서 이렇게 링크 안에 작은 새 창 열기 아이콘을 하나 넣는다면

    <p>
      코딩, 쉬워질 때도 됐다. 
      <a class="new-window-link" href="https://codeit.kr">
        코드잇
        <img class="icon" src="new-window-link.svg" alt="새 창 열기" width="13" height="13">
      </a>
      에서 지금 바로 시작해보세요.
    </p>

    .logo {
      width: 13px;
      height: 13px;
    }

    .new-window-link {
    }

    → 새 창 열기 아이콘을 정확히 글 가운데다가 세로로 정렬하고 싶을때, 
      <a> 태그에 적용된 .new-window-link 클래스에다가 display: flex로 플렉스박스를 만들고, 
      여기다 정렬이랑 간격을 넣어준다.

    .new-window-link {
      display: flex;
      align-items: center;
      gap: 4px;
    }

    → 이런 식으로 아예 줄이 넘어가 버립니다
    → .new-window-link 클래스에서 
      <a> 태그의 display: inline이라는 기본 값을 display: flex로 바꿔 줬기 때문
    → display: flex라고 하면 그 안에서는 플렉스박스의 규칙에 따라 배치되고, 
      그 바깥에서 플렉스박스 전체에 대해서는 마치 display: block처럼 위에서 아래로 배치
    → 이럴 때는 display: inline-flex를 써서 플렉스박스를 만들면서 
      동시에 플렉스박스 전체를 마치 display: inline처럼 배치하는 방식

    .new-window-link {
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }

    → 이제 "코드잇"이라는 링크랑 "-에서 지금 바로 시작해 보세요."가 
      한 줄로 붙는다.
    → 플렉스박스가 인라인처럼 배치된다.
      앞으로 인라인 안에서 플렉스박스를 만들고 싶을 때는 display: inline-flex를 활용

19. Flexbox안에서 포지셔닝하기

    → 플렉스박스와 포지션을 함께 쓸 때 어떻게 하면 좋을까?
    → position 속성을 배우면서 relative, absolute, fixed 그리고 sticky까지 
      다양한 포지션이 있다.

      이번에는 플렉스박스의 요소에 position을 지정하면 어떻게 될까?

    → 자기 자신의 원래 위치를 기준으로 배치되는 static(기본값), relative, sticky를 제외하고는
      플렉스박스의 흐름에서 벗어나서 배치
    → 흐름에서 벗어난다는 건, 플렉스박스 바깥에 있는 요소처럼 동작
    → 앞에서 absolute랑 fixed는 원래 자리를 차지하지 않고, 글의 흐름에서 아예 빠진다.
      플렉스박스에서도 마찬가지로 플렉스박스의 영향을 받지 않습니다.


    플렉스박스에 배치되는 경우: relative, sticky

    <div class="container">
      <div class="red box">RED</div>
      <div class="green box">GREEN</div>
      <div class="blue box">BLUE</div>
    </div>

    .container {
      border: 5px dashed #cacfd9;
      width: 100%;
      height: 500px;
      display: flex;
      position: relative;
      align-items: flex-start;
    }

    .box {
      border-radius: 15px;
      color: #f9fafc;
      padding: 10px;
    }

    .red {
      background-color: #e46e80;
    }

    .green {
      background-color: #32b9c1;
      flex-grow: 1;
      position: relative;
      top: 100px;
      left: 100px;
    }

    .blue {
      background-color: #5195ee;
    }

    → relative 포지션은 요소의 원래 위치를 기준으로 배치
    → 플렉스박스 안에서 다른 요소들처럼 배치된 다음에 그 위치를 기준으로 배치
    → 즉, 원래 자리를 차지하고 있다.

    → sticky로 바꿔도 마찬가지이다.
    → sticky 포지션은 기본적으로 static처럼 원래 위치에 있다가, 지정한 위치에 스크롤되면 
      fixed처럼 화면에 고정
    → 그렇기 때문에 일단은 플렉스박스 안에서 배치되고 그다음에 sticky로 배치

    .green {
      background-color: #32b9c1;
      flex-grow: 1;
      position: sticky;
      top: 0;
    }

    → (스크롤 하는 경우 sticky로 동작합니다.)

    플렉스박스에서 벗어나는 경우: absolute, fixed

    → absolute 포지션은 포지셔닝된 가장 가까운 조상을 기준으로 배치되고, 
      fixed는 브라우저 화면을 기준으로 배치된다
    → 이 둘의 공통점은 요소의 원래 자리를 차지하지 않는다
      즉, 글의 흐름에서 벗어나는 것으로 플렉스박스 안에서도 아예 벗어난다.
      그래서 이런 경우에는 마치 플렉스박스와 상관없는 요소처럼 배치된다.

    <div class="container">
      <div class="red box">RED</div>
      <div class="green box">GREEN</div>
      <div class="blue box">BLUE</div>
    </div>


    .container {
      border: 5px dashed #cacfd9;
      width: 100%;
      height: 500px;
      display: flex;
      position: relative;
      align-items: flex-start;
    }

    .box {
      border-radius: 15px;
      color: #f9fafc;
      padding: 10px;
    }

    .red {
      background-color: #e46e80;
    }

    .green {
      background-color: #32b9c1;
      flex-grow: 1;
      position: absolute;
      top: 100px;
      left: 100px;
    }

    .blue {
      background-color: #5195ee;
    }

    → absolute 포지션에서 플렉스박스 안에서는 마치 .green <div>가 없는 것처럼 배치된다.
      아예 흐름에서 벗어나게 된다. 
      또, flex-grow: 1도 적용이 안 된다. 
      (만약 적용되었더라면 플렉스박스 너비만큼 꽉 채우게 된다.)


    → fixed 포지션을 보면, 

    .green {
      background-color: #32b9c1;
      flex-grow: 1;
      position: fixed;
      top: 100px;
      left: 100px;
    }

    → (스크롤 했을 때)

    → fixed는 브라우저 화면을 기준으로 배치되기 때문에 마찬가지로 플렉스박스와 상관없이 배치됩니다. 
      나머지 요소들은 마치 .green <div>가 없는 것처럼 배치되고,
      flex-grow도 적용이 안됩니다.


    정리 

    → 간단히 정리하자면 relative, sticky는 요소의 원래 자리를 차지하기 때문에 플렉스박스의 
      영향을 받는다.
    → absolute랑 fixed는 요소의 원래 자리에서 빠져버리기 때문에 글의 흐름에서 빠지는 것처럼
      플렉스박스랑 상관없이 배치됩니다.

   → 기본적으로 HTML, CSS에서는 글의 흐름대로 요소가 배치
   → 일반적인 글의 흐름을 노말 플로우(Normal Flow)라고 한다

   → position은 이 흐름에서 벗어나 위치를 직접 지정하는 방식

   → flex box는 박스를 만들고 방향을 정해서 요소를 배치하는 방식

   → grid는 쉽게 말해 바둑판이나 엑셀처럼 칸을 나눈 다음, 여기에 요소를 배치하는 방식

2. Position

    - position 속성

         → 디스플레이는 글의 흐름에서 요소를 어떻게 배치할지 정하는 것
      → 블록(block)은 위에서 아래로 블록처럼 배치되고, h1, div, p 태그가 디스플레이 블록
      → 인라인(inline)은 평소에 글쓰는 방향으로 배치되고, a, span, img 태그가 있다.

      → 인라인은 위아래로 크기가 없으므로 크기를 주고 싶다면 인라인 블록(inline block)을 사용

      → 이 흐름에서 벗어나 배치를 하고 싶을 때, 예를 들어 이미지나 영상 위에 글자를 겹치거나
        화면 위쪽 메뉴가 스크롤을 해도 계속 떠 있는 것과 같이 글의 흐름과 상관없이 배치하고 싶을때
        position이라는 속성을 사용

      → postion의 속성은 static, relative, absolute, fixed, sticky 5가지 속성이 있다.

      → 위치의 기준을 정하는 것은 position 속성이고, 구체적인 위치 top, right, bottom, left
        이런 속성으로 정한다.

      static
      → position 속성의 기본 값
      → 원래 있어야 할 위치에 그대로 배치하는 것을 의미
      → 즉, 일반적인 글의 흐름을 따르는 방식
        만일 postion의 값을 다른 값으로 바꾼다면 일반적인 글의 흐름에서 벗어나 배치할 수 있다.

    - relative 포지션

      → div 태그는 블록 디스플레이이므로 위에서부터 차례대로 쌓이면서 원래 있어야 할 공간에 위치
      → relative는 한국어로 상대적인 이라는 의미를 가지고 있다.

      → margin과 postion relative의 차이점은 margin의 경우 margin 값이 들어간 요소와 주변의 
        요소들이 같이 밀려나 이동하는 반면, position relative는 position이 적용된 요소만 이동

      → inline-block으로 바꾸게 되면 div 태그들이 글 쓰는 방향으로 배치
      → relative 포지션을 사용하면 원래 있어야 하는 위치를 기준으로 배치
      → 이동 전 원래 있던 공간은 그냥 그대로 비워놓고 배치

    - 인기 플레이리스트

    → 인기 있는 플레이리스트 제목에 "인기" 배지의 위치를 원래 위치에서 20px 위쪽으로 수정해서 
      오른쪽 위에 배치해 보세요.

    .hot-badge {
        position: relative;
        top: -20px;
        padding: 4px 8px;
        border-radius: 8px;
        background-color: #2a2a31;
        color: #8e8ea0;
        font-weight: 700;
        font-size: 16px;
        line-height: 19px;
     }

    - absolute 포지션

      → absolute 포지션은 가장 가까운 포지셔닝이 된 조상 요소를 기준으로 위치 지정
      → 기본적으로 다 왼쪽 위에 쏠려서 생성된다.

      → green 색상에 position을 relative로 주면 원래 위치에서 40px 공간이 생기고,
        왼쪽으로 90px의 공간이동을 한다.

      → blue 색상에 position을 absolute로 주면 원 위치에서 이동이 아닌 green을 따라 
        움직인 위치에서의 이동이 일어난다.

      → blue의 가장 가까운 조상은 green이고 green은 relative로 값이 포지셔닝 되어 green의 
        이동된 위치를 기준으로 이동한 것

      → 포지셔닝이 되었다는 의미는 position의 속성을 기본값인 static이 아닌 다른 값으로 
        지정했다는 뜻이다.

      → green의 position을 지우고, red에 position 값을 relative로 바꾸면 
        위의 이미지와 같이 이동한다.

      → 가장 까운 포지셔닝이 된 조상요소를 기준으로 위치를 잡는다고 하였는데
        blue의 부모는 green인데 green은 position이 static 상태이므로 green을 건너뛰고
        더 상위 조상인 red를 확인하였을 때, position이 relative로 바뀌었으므로 blue는 red를
        기준으로 position을 잡게 된다.

      → absolute의 경우 기존의 배치에서 완전히 벗어나서 배치된다는 특징이 있다.
      → absolute 포지션을 쓰면 relative 포지션과는 다르게 원래 배치에서 자리를 차지 하지 않는다.

      → blue와 orange에서 너비를 지워보면 orange는 블록 디스플레이이므로 기본적으로 부모
        영역에서 너비가 꽉차도록 배치되는데 blue는 아예 보이지 않는다.
        왜냐하면 blue는 absolute 포지션이므로 원래 위치에서 빠져버리게 되니
        블록 디스플레이처럼 부모 영역의 너비만큼 늘어나지 않는다.

      → blue라고 텍스트를 적어보면 텍스트만큼의 너비가 생성된다.
        absolute 포지션에서 크기를 정해주지 않으면, 기본적으로 안에 있는 내용만큼의 크기를 갖는다

      → 영역 전체를 꽉 차도록 겹쳐놓고 싶을 때에는 다음과 같은 코드를 작성한다.

        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;

      → inset: 0으로 작성하면 모든 방향에 대한 위치를 0이라고 할 수 있다.

    - 호버 재생 버튼

      .cover {
        width: 252px;
        height: 252px;
        border-radius: 24px;
        /* overflow: hidden; */
      }

      → .cover 클래스의 overflow: hidden을 잠깐만 주석 처리하고 실행
        커버에 마우스를 올렸을 때 아래에 이상한 위치에 재생 버튼이 생성
      → 이 버튼을 커버 이미지랑 겹치게 배치
        커버 이미지의 왼쪽에서 28px, 아래쪽에서 28px만큼 이동한 위치에 배치


      → 커버 이미지는 .cover 클래스 <div> 안에 있고, 재생 버튼에는 .cover-play-icon이라는
        클래스를 씁니다.

      <div class="cover">
        <img
          class="cover-image"
          src="images/img_cafe.png"
          alt="카페에서 일할 때 커버 이미지"
       >
        <img
          src="images/icon_play.png"
          alt="재생 아이콘"
          class="cover-play-icon"
       >
      </div>

      → .cover 클래스에서는 252px의 정사각형으로 이미지를 꽉 채워서 보여 주고 있습니다. 
      → overflow: hidden과 border-radius: 24px을 사용해서 둥근 모서리로 처리
      → .cover-play-icon이라는 클래스는 기본적으로 display: none으로 화면에서 안 보이다가
        .cover에 마우스를 올리는 경우 display: block으로 화면에 보여 줍니다.

      .cover {
        width: 252px;
        height: 252px;
        border-radius: 24px;
        overflow: hidden;
      }

      .cover-image {
        width: 100%;
        height: 100%;
      }

      .cover-play-icon {
        display: none;
        width: 72px;
        height: 72px;
      }

      .cover:hover .cover-play-icon {
        display: block;
      }

index.html

  <!DOCTYPE html>
  <html lang="ko">
    <head>
      <meta charset="utf-8">
        <title>Codeit Music</title>
      <link
        rel="stylesheet"
        as="style"
        crossorigin
        href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.6/dist/web/static/pretendard.css"
     >
      <link rel="stylesheet" href="style.css">
    </head>
    <body>
      <header>
        <div class="wrap">Codeit Music</div>
      </header>
      <main class="wrap">
        <div class="info">
          <div class="cover">
            <img
              class="cover-image"
              src="images/img_cafe.png"
              alt="카페에서 일할 때 커버 이미지"
           >
            <img
              src="images/icon_play.png"
              alt="재생 아이콘"
              class="cover-play-icon"
           >
          </div>
          <h1 class="playlist-title">
            카페에서 일할 때
            <span class="hot-badge"> 인기 </span>
          </h1>
          <div class="artist">
            <img
              src="images/img_codeit.png"
              alt="코드잇 프로필"
              class="artist-profile"
           >
            코드잇
          </div>
          <div class="description">
            차분하게 흐르는 따뜻한 음악과 함께하는 휴식. Codeit Music 에디터가
            매달 업데이트하는 플레이리스트입니다. 마음에 드는 곳이 있다면 보관함에
            추가해 보세요.
          </div>
          <button class="play-button">▶️ 지금 듣기</button>
        </div>
      </main>
    </body>
  </html>



style.css

  * {
    box-sizing: border-box;
  }

  html {
    word-break: keep-all;
    font-family: Pretendard, sans-serif;
  }

  body {
    margin: 0;
    background-color: #000;
    color: #fff;
  }

  .wrap {
    margin: 0 auto;
    padding: 32px;
    max-width: 1080px;
    width: 100%;
  }

  header {
    padding: 16px;
    background-image: linear-gradient(
      180deg,
      #000000 15.1%,
      rgba(0, 0, 0, 0) 100%
    );
    font-weight: 700;
  }

  .info {
    margin-bottom: 40px;
    padding: 40px;
    border-bottom: 1px solid #595864;
  }

  .cover {
    width: 252px;
    height: 252px;
    border-radius: 24px;
    overflow: hidden;
    position: relative;
  }

  .cover-image {
    width: 100%;
    height: 100%;
    position: relative;
  }

  .cover-play-icon {
    display: none;
    width: 72px;
    height: 72px;
    position: absolute;
    left: 28px;
    bottom: 28px;
  }

  .cover:hover .cover-play-icon {
    display: block;
    position:absolute;

  }

  .playlist-title {
    margin: 40px 0 16px;
    font-weight: 700;
    font-size: 40px;
    line-height: 48px;
  }

  .hot-badge {
    position: relative;
    top: -20px;
    padding: 4px 8px;
    border-radius: 8px;
    background-color: #2a2a31;
    color: #8e8ea0;
    font-weight: 700;
    font-size: 16px;
    line-height: 19px;
  }

  .artist {
    color: #7d7c8a;
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
  }

  .artist-profile {
    overflow: hidden;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    margin-right: 8px;
  }

  .description {
    margin: 16px 0 32px;
    color: #7d7c8a;
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
  }

  .play-button {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    background-color: #4b1bb1;
    color: #ffffff;
    font-weight: 500;
    font-size: 16px;
    line-height: 19px;
  }

    - 코딩을 넘어, 음악의 즐거움까지 1

      → 주어진 코드에서 텍스트 영역을 비디오 영역에 완전히 겹치도록 배치
      → 참고로 조상 요소에 꽉 차게 배치하려면 위쪽에서 0px, 오른쪽에서 0px, 아래쪽에서 0px,
        왼쪽에서 0px로 배치

      → <video> 태그가 있는데, .bg라는 클래스로 비디오의 너비를 화면에 꽉 차게 100%로 했습니다.
      → .hero-heading 안에는 <h1> 태그가 있는데, 배경을 투명한 검정에서 점점 불투명한 검정으로
        변하는 그라디언트 배경을 적용
      → 이 모든 걸 감싸고 있는 .hero에서는 position: relative로 포지셔닝 했습니다.
        따로 위치를 지정하지 않았기 때문에 사실상 원래 위치 그대로 배치
        하지만 이렇게 하면 그안에 있는 요소를 이 안에서 자유롭게 배치할 수 있겠죠?

      <section class="hero">
        <video src="videos/bg.mp4" class="bg" autoplay loop muted></video>
        <div class="hero-heading">
          <h1>
            <span class="small">코딩을 넘어</span><br>
            <span class="big">음악의 즐거움</span>까지.
          </h1>
        </div>
      </section>


      .hero {
        position: relative;
      }

      .bg {
        width: 100%;
        opacity: 0.5;
      }

      .hero-heading {
        margin: 0;
        padding: 24px;
        background-image: linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 100%);
      }

      .hero-heading h1 {
        margin: 0;
        font-weight: 400;
        font-size: 80px;
        line-height: 95px;
        text-align: center; 
        color: #ffffff;
      }

      .hero-heading .small {
        font-size: 48px;
        line-height: 57px;
        text-align: center;
        color: rgba(217, 217, 217, 0.5);
      }

      .hero-heading .big {
        font-weight: 700;
      }

index.html

  <!DOCTYPE html>
  <html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>Codeit Music</title>
    <link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.6/dist/web/static/pretendard.css">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <section class="hero">
      <video src="videos/bg.mp4" class="bg" autoplay loop muted></video>
      <div class="hero-heading">
        <h1>
          <span class="small">코딩을 넘어</span><br>
          <span class="big">음악의 즐거움</span>까지.
        </h1>
      </div>
    </section>
  </body>
  </html>


style.css

html {
  font-family: Pretendard, sans-serif;
  word-break: keep-all;
}

body {
  background-color: #000;
  color: #fff;
  margin: 0;
}

.hero {
  position: relative;
}

.bg {
  width: 100%;
  opacity: 0.5;
}

.hero-heading {
  margin: 0;
  padding: 24px;
  background-image: linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 100%);
  position: absolute;
  inset: 0;
}

.hero-heading h1 {
  margin: 0;
  font-weight: 400;
  font-size: 80px;
  line-height: 95px;
  text-align: center; 
  color: #ffffff;

}

.hero-heading .small {
  font-size: 48px;
  line-height: 57px;
  text-align: center;
  color: rgba(217, 217, 217, 0.5);
}

.hero-heading .big {
  font-weight: 700;
}

    - fixed 포지션

      → fixed라는 것은 영어로 고정되었다는 뜻
      → 아무리 스크롤을 하더라도 화면을 기준으로 고정된 자리에 고정되어 있다.

      → position : relative일 때에는 원래 요소의 자리가 공백이었는데,
        position : fixed를 하면 원래 있던 자리와 전혀 상관없이 기존 배치에서 완전히 빠져서
        자리를 차지하지 않는다. ( position:absolute )

      → fixed 포지션은 주로 내비게이션에서 사용된다.
      → 기존 배치에서 완전히 빠지는 것이므로 따로 크기를 지정하지 않으면, 
        기본 크기는 요소 안에 있는 내용만큼으로 지정되므로 width : 100% 처럼 크기를 지정하거나
        아니면 right : 0 이렇게 좌우 위치를 모두 정하는 식으로 해야 요소를 꽉 채울 수 있다.

      → 또 다른 문제점은 내비게이션이랑 내용이 겹쳐서 안 보이는 부분이 생긴다.
        fixed를 쓰면 이 흐름에서 완전히 빠지므로 원래 있던 공간이 남아 있지 않는다.
        이럴때에는 위에 내비게이션의 높이만큼 margin을 넣어주면 된다. 

    - 내비게이션 바 1

      → <body> 태그 안에 있는 태그들 중 가장 위쪽에 <header> 라는 태그
        여러 가지 스타일을 적용하고 있는데, 그중에서도 높이가 90px

      <header>
        <div class="wrap">Codeit Music</div>
      </header>

      header {
        height: 90px;
        padding: 16px;
        background-image: linear-gradient(
          180deg,
          #000000 15.1%,
          rgba(0, 0, 0, 0) 100%
        );
        font-weight: 700;
      }

      → fixed 포지션은 브라우저 화면을 기준으로 배치
      → 화면을 기준으로 고정된 위치에 요소를 배치해서 항상 떠 있는 것 같은 효과
      → 왼쪽에서 0px, 위쪽에서 0px로 배치하고 width: 100% 를 하거나, 오른쪽에서 0px

      header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 90px;
        padding: 16px;
        background-image: linear-gradient(
          180deg,
          #000000 15.1%,
          rgba(0, 0, 0, 0) 100%
        );
        font-weight: 700;
      }

      → 맨 위로 스크롤했을 때 본문이랑 내비게이션이 겹쳐서 보이는 문제
      → 본문 내용이랑 겹치지 않으려면 내비게이션 높이만큼 여백을 추가
      → 내비게이션의 높이는 90px이고요, 저는 <body> 태그에 위쪽 마진을 90px만큼 추가

      body {
        margin: 90px 0 0;
        background-color: #000;
        color: #fff;
      }

index.html

  <!DOCTYPE html>
  <html lang="ko">
    <head>
      <meta charset="utf-8">
        <title>Codeit Music</title>
      <link
        rel="stylesheet"
        as="style"
        crossorigin
        href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.6/dist/web/static/pretendard.css"
     >
      <link rel="stylesheet" href="style.css">
    </head>
    <body>
      <header>
        <div class="wrap">Codeit Music</div>
      </header>
      <main class="wrap">
        <div class="info">
          <div class="cover">
            <img
              class="cover-image"
              src="images/img_cafe.png"
              alt="카페에서 일할 때 커버 이미지"
           >
          </div>
          <h1 class="playlist-title">
            카페에서 일할 때
          </h1>
          <div class="artist">
            <img
              src="images/img_codeit.png"
              alt="코드잇 프로필"
              class="artist-profile"
           >
            코드잇
          </div>
          <div class="description">
            차분하게 흐르는 따뜻한 음악과 함께하는 휴식. Codeit Music 에디터가
            매달 업데이트하는 플레이리스트입니다. 마음에 드는 곳이 있다면 보관함에
            추가해 보세요.
          </div>
          <button class="play-button">▶️ 지금 듣기</button>
        </div>
        <div class="tracks">
          <div class="track">
            <div class="track-number">1</div>
            <div class="track-title">자주자주(디깅클럽부산 Ver.)</div>
          </div>
          <div class="track">
            <div class="track-number">2</div>
            <div class="track-title">All</div>
          </div>
          <div class="track active">
            <div class="track-number">3</div>
            <div class="track-title">나는 어떻게 (Feat. 천예린)</div>
          </div>
          <div class="track">
            <div class="track-number">4</div>
            <div class="track-title">시간을 거슬러(Feat. 지조)</div>
          </div>
          <div class="track">
            <div class="track-number">5</div>
            <div class="track-title">우르르</div>
          </div>
          <div class="track">
            <div class="track-number">6</div>
            <div class="track-title">당신이 맞다는 대답을 할 거예요</div>
          </div>
        </div>
      </main>
    </body>
  </html>


style.css

  * {
    box-sizing: border-box;
  }

  html {
    word-break: keep-all;
    font-family: Pretendard, sans-serif;
  }

  body {
    margin: 90px 0 0;
    background-color: #000;
    color: #fff;
  }

  .wrap {
    margin: 0 auto;
    padding: 32px;
    max-width: 1080px;
    width: 100%;
  }

  header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 90px;
    padding: 16px;
    background-image: linear-gradient(
      180deg,
      #000000 15.1%,
      rgba(0, 0, 0, 0) 100%
    );
    font-weight: 700;
  }

  .info {
    margin-bottom: 40px;
    padding: 40px;
    border-bottom: 1px solid #595864;
  }

  .cover {
    width: 252px;
    height: 252px;
    border-radius: 24px;
    overflow: hidden;
  }

  .cover-image {
    width: 100%;
    height: 100%;
  }

  .playlist-title {
    margin: 40px 0 16px;
    font-weight: 700;
    font-size: 40px;
    line-height: 48px;
  }

  .artist {
    color: #7d7c8a;
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
  }

  .artist-profile {
    overflow: hidden;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    margin-right: 8px;
  }

  .description {
    margin: 16px 0 32px;
    color: #7d7c8a;
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
  }

  .play-button {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    background-color: #4b1bb1;
    color: #ffffff;
    font-weight: 500;
    font-size: 16px;
    line-height: 19px;
  }

  .track {
    padding: 24px 32px;
  }

  .track.active {
    border-radius: 16px;
    background-color: #19191F;
  }

  .track-number {
    display: inline;
    margin-right: 16px;
  }

  .track-title {
    display: inline;
  }

    - sticky 포지션

      → fixed 포지션으로 네비게이션 바를 만들었는데 이번에는 네비게이션 위에 커다란 영역을 배치
      → 웹 사이트에서는 로고라든지 광고라든지 이러한 것들이 들어가는 공간
      → 스크롤하다가 브라우저 상단에 내비게이션이 닿으면, 달라붙어서 고정되는 것을 만들어보자.

      → 스크롤하다가 내비게이션이 브라우저 상단에 닿을 때, fixed 포지션으로 바뀌어야 한다.
      → 이러한 역할을 해주는 것이 sticky 포지션이다.
      → fixed와 달리 sticky는 원래 위치에서 공간을 차지
      → 기본적으로는 static처럼 배치 웹 브라우저 상단에 닿으면 fixed로 포지션이 변경된 것처럼 고정

      ※ sticky 포지션은 요소를 웹 브라우저에 달라붙도록 배치하는 것
        지정한 위치로 스크롤되기 전까지는 마치 static 포지션처럼 원래 위치에 있다가
        지정한 위치에 닿으면 fixed 포지션처럼 고정
        → 위치의 기준은 fixed 포지션처럼 브라우저의 화면 기준

      → 한 가지 특별한 성질이 있는데 부모 요소 안에 갇혀 있다.
        static처럼 배치되니까 부모 요소에 소속되어 있다라고 이해하면 편하다
        만일, 부모 요소가 화면 밖으로 사라지면 같이 사라진다.

    - 내비게이션 바 2

      → fixed 로 배치한 내비게이션은 sticky 포지션으로 바꿔 보세요.
      → <body> 태그 안에 있는 태그들 중에 가장 위쪽에 <header>라는 태그
        <header>
          <div class="wrap">Codeit Music</div>
        </header>
      → header 선택자에서  fixed 포지션으로 위쪽에서 0px, 왼쪽에서 0px로 배치, 
        그리고 너비 100%, 높이는 90px,
        내비게이션이랑 본문이 겹치지 않도록 body 선택자에서 높이만큼 90px 여백
        body {
          margin: 90px 0 0;
          background-color: #000;
          color: #fff;
        }

        .wrap {
          margin: 0 auto;
          padding: 32px;
          max-width: 1080px;
          width: 100%;
        }

        header {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 90px;
          padding: 16px;
          background-image: linear-gradient(
            180deg,
            #000000 15.1%,
            rgba(0, 0, 0, 0) 100%
          );
          font-weight: 700;
        }

      → fixed 포지션을 sticky로 변경하면 스크롤 했을 때, 화면의 위쪽에 달라붙긴 하지만
        맨 위로 스크롤을 하게 되면 이상한 여백이 생긴다. fixed 포지션으로 배치 시 넣어준 여백
        body 안의 margin: 90px 0 0; 값을 0으로 바꿔주고, 불필요한 여백을 삭제
      → sticky 포지션은 위에 배치된 다음 스크롤하다가 정해진 위치에 닿으면 달라붙는다.
        <header>태그의 원래 배치는 div 태그와 마찬가지로 display:block 이므로 위에서부터
        아래로 쌓이면서 배치
        left : 0; width : 100%;은 sticky에서 필요없는 속성

        header {
          position: sticky;
          top: 0;
          height: 90px;
          padding: 16px;
          background-image: linear-gradient(
            180deg,
            #000000 15.1%,
            rgba(0, 0, 0, 0) 100%
          );
          font-weight: 700;
        }

index.html

  <!DOCTYPE html>
  <html lang="ko">
    <head>
      <meta charset="utf-8">
        <title>Codeit Music</title>
      <link
        rel="stylesheet"
        as="style"
        crossorigin
        href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.6/dist/web/static/pretendard.css"
     >
      <link rel="stylesheet" href="style.css">
    </head>
    <body>
      <header>
        <div class="wrap">Codeit Music</div>
      </header>
      <main class="wrap">
        <div class="info">
          <div class="cover">
            <img
              class="cover-image"
              src="images/img_cafe.png"
              alt="카페에서 일할 때 커버 이미지"
           >
          </div>
          <h1 class="playlist-title">
            카페에서 일할 때
          </h1>
          <div class="artist">
            <img
              src="images/img_codeit.png"
              alt="코드잇 프로필"
              class="artist-profile"
           >
            코드잇
          </div>
          <div class="description">
            차분하게 흐르는 따뜻한 음악과 함께하는 휴식. Codeit Music 에디터가
            매달 업데이트하는 플레이리스트입니다. 마음에 드는 곳이 있다면 보관함에
            추가해 보세요.
          </div>
          <button class="play-button">▶️ 지금 듣기</button>
        </div>
        <div class="tracks">
          <div class="track">
            <div class="track-number">1</div>
            <div class="track-title">자주자주(디깅클럽부산 Ver.)</div>
          </div>
          <div class="track">
            <div class="track-number">2</div>
            <div class="track-title">All</div>
          </div>
          <div class="track active">
            <div class="track-number">3</div>
            <div class="track-title">나는 어떻게 (Feat. 천예린)</div>
          </div>
          <div class="track">
            <div class="track-number">4</div>
            <div class="track-title">시간을 거슬러(Feat. 지조)</div>
          </div>
          <div class="track">
            <div class="track-number">5</div>
            <div class="track-title">우르르</div>
          </div>
          <div class="track">
            <div class="track-number">6</div>
            <div class="track-title">당신이 맞다는 대답을 할 거예요</div>
          </div>
        </div>
      </main>
    </body>
  </html>


style.css

  * {
    box-sizing: border-box;
  }

  html {
    word-break: keep-all;
    font-family: Pretendard, sans-serif;
  }

  body {
    margin: 90px 0 0;
    background-color: #000;
    color: #fff;
  }

  .wrap {
    margin: 0 auto;
    padding: 32px;
    max-width: 1080px;
    width: 100%;
  }

  header {
    position: sticky;
    top: 0;
    height: 90px;
    padding: 16px;
    background-image: linear-gradient(
      180deg,
      #000000 15.1%,
      rgba(0, 0, 0, 0) 100%
    );
    font-weight: 700;
  }

  .info {
    margin-bottom: 40px;
    padding: 40px;
    border-bottom: 1px solid #595864;
  }

  .cover {
    width: 252px;
    height: 252px;
    border-radius: 24px;
    overflow: hidden;
  }

  .cover-image {
    width: 100%;
    height: 100%;
  }
  .playlist-title {
    margin: 40px 0 16px;
    font-weight: 700;
    font-size: 40px;
    line-height: 48px;
  }

  .artist {
    color: #7d7c8a;
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
  }

  .artist-profile {
    overflow: hidden;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    margin-right: 8px;
  }

  .description {
    margin: 16px 0 32px;
    color: #7d7c8a;
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
  }

  .play-button {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    background-color: #4b1bb1;
    color: #ffffff;
    font-weight: 500;
    font-size: 16px;
    line-height: 19px;
  }

  .track {
    padding: 24px 32px;
  }

  .track.active {
    border-radius: 16px;
    background-color: #19191F;
  }

  .track-number {
    display: inline;
    margin-right: 16px;
  }

  .track-title {
    display: inline;
  }

    - z-index

      → 같은 sticky 포지션을 red와 blue 모두에게 주었을 때, blue가 red를 덮어버리는 문제 발생
        만일 red가 blue보다 앞쪽에 위치하길 바라면 어떻게 해야할까?
      → z-index는 앞뒤의 순서를 정하는 것
      → z-index를 정하지 않으면 코드의 밑의 줄에 있을수록 화면에서는 앞쪽에 보인다.
      → z-index 뒤의 숫자는 1,2,3 뿐만 아니라 -1,-2,-3과 같이 마이너스 값도 사용 가능

    - 내비게이션 바 3

      → 스크롤할 때마다 내비게이션 앞쪽에 커버 이미지랑, 배지가 보입니다. 
        커버 이미지랑 배지를 내비게이션 뒤쪽에 보이도록 고쳐 보세요.

index.html

  <!DOCTYPE html>
  <html lang="ko">
    <head>
      <meta charset="utf-8">
        <title>Codeit Music</title>
      <link
        rel="stylesheet"
        as="style"
        crossorigin
        href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.6/dist/web/static/pretendard.css"
     >
      <link rel="stylesheet" href="style.css">
    </head>
    <body>
      <header>
        <div class="wrap">Codeit Music</div>
      </header>
      <main class="wrap">
        <div class="info">
          <div class="cover">
            <img
              class="cover-image"
              src="images/img_cafe.png"
              alt="카페에서 일할 때 커버 이미지"
           >
           <img
              src="images/icon_play.png"
              alt="재생 아이콘"
              class="cover-play-icon"
           >
          </div>
          <h1 class="playlist-title">
            카페에서 일할 때
            <span class="hot-badge"> 인기 </span>
          </h1>
          <div class="artist">
            <img
              src="images/img_codeit.png"
              alt="코드잇 프로필"
              class="artist-profile"
           >
            코드잇
          </div>
          <div class="description">
            차분하게 흐르는 따뜻한 음악과 함께하는 휴식. Codeit Music 에디터가
            매달 업데이트하는 플레이리스트입니다. 마음에 드는 곳이 있다면 보관함에
            추가해 보세요.
          </div>
          <button class="play-button">▶️ 지금 듣기</button>
        </div>
        <div class="tracks">
          <div class="track">
            <div class="track-number">1</div>
            <div class="track-title">자주자주(디깅클럽부산 Ver.)</div>
          </div>
          <div class="track">
            <div class="track-number">2</div>
            <div class="track-title">All</div>
          </div>
          <div class="track active">
            <div class="track-number">3</div>
            <div class="track-title">나는 어떻게 (Feat. 천예린)</div>
          </div>
          <div class="track">
            <div class="track-number">4</div>
            <div class="track-title">시간을 거슬러(Feat. 지조)</div>
          </div>
          <div class="track">
            <div class="track-number">5</div>
            <div class="track-title">우르르</div>
          </div>
          <div class="track">
            <div class="track-number">6</div>
            <div class="track-title">당신이 맞다는 대답을 할 거예요</div>
          </div>
        </div>
      </main>
    </body>
  </html>


style.css

  * {
    box-sizing: border-box;
  }

  html {
    word-break: keep-all;
    font-family: Pretendard, sans-serif;
  }

  body {
    margin: 0;
    background-color: #000;
    color: #fff;
  }

  .wrap {
    margin: 0 auto;
    padding: 32px;
    max-width: 1080px;
    width: 100%;
  }

  header {
    position: sticky;
    top: 0;
    height: 90px;
    padding: 16px;
    background-image: linear-gradient(
      180deg,
      #000000 15.1%,
      rgba(0, 0, 0, 0) 100%
    );
    font-weight: 700;
  }

  .info {
    margin-bottom: 40px;
    padding: 40px;
    border-bottom: 1px solid #595864;
  }

  .cover {
    position: relative;
    width: 252px;
    height: 252px;
    border-radius: 24px;
    overflow: hidden;
    z-index: -1;
  }

  .cover-image {
    width: 100%;
    height: 100%;

  }

  .cover-play-icon {
    position: absolute;
    bottom: 28px;
    left: 28px;
    display: none;
    width: 72px;
    height: 72px;
  }

  .cover:hover .cover-play-icon {
    display: block;
  }

  .playlist-title {
    margin: 40px 0 16px;
    font-weight: 700;
    font-size: 40px;
    line-height: 48px;
  }

  .playlist-title span{
    z-index: -1;
  }

  .hot-badge {
    position: relative;
    top: -20px;
    padding: 4px 8px;
    border-radius: 8px;
    background-color: #2a2a31;
    color: #8e8ea0;
    font-weight: 700;
    font-size: 16px;
    line-height: 19px;
  }

  .artist {
    color: #7d7c8a;
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
  }

  .artist-profile {
    overflow: hidden;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    margin-right: 8px;
  }

  .description {
    margin: 16px 0 32px;
    color: #7d7c8a;
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
  }

  .play-button {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    background-color: #4b1bb1;
    color: #ffffff;
    font-weight: 500;
    font-size: 16px;
    line-height: 19px;
  }

  .track {
    padding: 24px 32px;
  }

  .track.active {
    border-radius: 16px;
    background-color: #19191F;
  }

  .track-number {
    display: inline;
    margin-right: 16px;
  }

  .track-title {
    display: inline;
  }

    - z-index가 내 맘대로 안될 때

      → z-index를 쓰다 보면 종종 마음대로 동작하지 않을 때가 있는데요.
      → 쌓임 맥락(Stacking Context)이라는 개념에 대해 알아보겠습니다. 

      z-index: 9999로도 해결이 안 되는 이유

      → 빨강, 초록, 파랑 사각형 세 개를 배치했는데 원하는 대로 배치가 되지 않는 경우

      <div class="red">
        <div class="green"></div>
      </div>
      <div class="blue"></div>

      .red {
          background-color: #e46e80;
          position: absolute;
          width: 100px;
          height: 100px;
          top: 100px;
          left: 100px;
          z-index: 1;
        }

       .green {
          background-color: #32b9c1;
          position: absolute;
          width: 50px;
          height: 50px;
          top: 25px;
          left: 25px;
          z-index: 3;
        }

       .blue {
          background-color: #5195ee;
          position: absolute;
          width: 100px;
          height: 100px;
          top: 150px;
          left: 150px;
          z-index: 2;
        }

      → .red, .green, .blue는 모두 absolute 포지션이고, z-index가 1, 3, 2니까 
        초록, 파랑, 빨강 순서로 앞에 보일 거 같습니다. 

      → z-index: 2인 .blue가 z-index: 3인 .green 보다 앞 쪽에 보입니다. 
      → 분명 z-index 값이 크면 앞 쪽에 보인다고 배웠는데, 이러니까 이상합니다.
      → 심지어 z-index: 3을 z-index: 9999로 바꿔도 안 됩니다. 

      → z-index 값은 단순히 서로 비교만 하는 게 아니라, 쌓임 맥락(Stacking Context)
        안에서 비교하기 때문


      쌓임 맥락

      → z-index를 묶어서 생각하는 범위라고 할 수 있다.

      → <body> 태그 아래에 이렇게 .red, .green 그리고 .blue가 배치
      → 그리고 각각 z-index 값이 있다.
      → .green 태그의 위치는 .red 태그의 자식이다.
        마침 조건이 맞아서 .red에는 쌓임 맥락이 만들어진 상태

      → .red 태그에서 쌓임 맥락이 만들어졌기 때문에 .red의 모든 자손 태그들은 (빗금 친 영역)
        마치 .red와 마찬가지로 z-index: 1로 묶어서 생각될 수 있다.
      → 항상 .blue 뒤쪽에 배치

      → 심지어 .green에서 z-index: 9999라고 하더라도, 바깥에서 보면 쌓임 맥락 때문에 
        z-index: 1과 마찬가지로 처리되어 아무런 효과가 없다.

      → 쌓임 맥락의 장점은 쌓임 맥락 안에서는 바깥을 신경 쓰지 않고 z-index 값을 쓸 수 있다는 점
      → HTML 태그가 수백 개, 수천 개, 수만 개 있다고 생각해보시면 이것들의 z-index를 고려해서
        CSS 코드를 쓰는 게 만만치 않다.
      → 쌓임 맥락만 분명하다면 바깥은 신경 쓰지 않고 코드를 쉽게 쓸 수 있다.
      → 내비게이션을 만들 때도 z-index 숫자를 무한정 크게 하지 않아도 깔끔하게 값을 쓸 수 있다.


      쌓임 맥락 만들기

      → 쌓임 맥락이 만들어지는 조건은 굉장히 복잡하다.

      (1) 문서의 루트 요소(<html>)
      (2) position이 absolute이거나 relative이고, z-index가 auto가 아닌 경우
      (3) position이 fixed이거나 sticky인 경우
      (4) 플렉스박스(우리가 다음 챕터에서 배울 개념)나 그리드(우리가 다음 다음 챕터에서 배울 내용)의
          자식 중 z-index가 auto가 아닌 경우
      (5) opacity가 1보다 작은 요소

      → 앞서 봤던 예시에서는 두 번째 조건인 "position이 absolute이거나 relative이고, 
        z-index가 auto가 아닌 경우"에 해당했기 때문에 쌓임 맥락이 만들어졌다.

쌓임 맥락과 관련된 문서

    z-index가 원하는 대로 동작하지 않을 때

    → 가장 손쉬운 방법은 해당 요소를 쌓임 맥락 바깥으로 옮RLSMS QKDQJQ
      앞에서 본 코드를 예로 들자면, .green의 <div>를 상위 태그로 옮기고 CSS도 약간 수정

    <div class="red"></div>
    <div class="green"></div>
    <div class="blue"></div>

    .green {
        background-color: #32b9c1;
        position: absolute;
        width: 50px;
        height: 50px;
        top: 125px;
        left: 125px;
        z-index: 3;
      }

    z-index 값이 너무 많아지고 복잡해질 때

    → 적절하게 쌓임 맥락을 만들어주면 된다.
    → (relative 포지션)을 이용하면 간단하게 쌓임 맥락을 만들 수 있다.
    → 예를 들어서 .container라는 <div> 안에 쌓임 맥락을 만들고 싶으면 아래처럼 position 속성과 
      z-index를 추가

    <div class="container">
      ...
    </div>

    .container {
      position: relative;
      z-index: 0;
    }

    → position: relative는 원래 위치를 기준으로 요소를 배치
      이때 따로 위치를 정하지 않으면 그냥 원래 위치에 있다.
    → z-index의 기본 값은 auto인데, 0으로 지정한다고 해서 요소들 사이에 쌓이는 순서가 
      바뀌지는 않습니다. (auto 와 0의 가장 큰 차이는 쌓임 맥락을 만드느냐 아니냐의 차이)

    → 예를 들어서 내비게이션 바를 만든다고 할 때, 
      <header> 태그와 <main> 태그로 일단 영역을 크게 두 개로 나누고, <main>에 쌓임 맥락을 만들어
      놓으면 <header> 태그는 무슨 일이 있어도 <main> 태그 안에 있는 것들 보다 앞쪽에 보인다.

    <header>
      ...내비게이션
    </header>
    <main>
      ...본문 내용
    </main>

    header {
      position: sticky;
      top: 0;
      z-index: 1;
    }

    main {
      position: relative;
      z-index: 0;
    }

    - 미니 프로젝트 : 리드잇북스

      → 주어진 코드를 수정해서 사이트를 완성

      (1) 상단 내비게이션이 항상 위쪽에 고정되도록 배치해 주세요.
      (2) 하단 배너 광고가 항상 아래 쪽에 고정되도록 배치해 주세요.
      (3) "에디터의 선택" 제목 옆에 붙은 배지의 위치를 원래 위치에서 위에서 -10px, 
          왼쪽에서 10px 위치에 배치해 주세요.
      (4) 책 표지 이미지랑 겹치게 15% 할인 배지를 아래에서 8px, 왼쪽에서 8px 위치에 배치해 주세요.

      참고로 이번 실습은 position 속성을 활용해서 배치를 해 보는 것이 목적이니까, 
      세세한 여백이나 크기는 다르더라도 괜찮습니다.


      → 상단 내비게이션은 .nav 클래스를 쓰고 있고, 
        하단 배너 광고는 .ad-banner 클래스를 쓰고 있다.
        이 두 개를 고정으로 배치하기 위해서 각각 position: sticky를 적용

      .nav {
          position: sticky;
          top: 0;
          padding: 20px 80px;
          border-bottom: 1px solid #e1e6f1;
          background-color: #ffffff;
          box-shadow: 0px 0px 20px rgba(27, 39, 50, 0.05);
        }

        ...

        .ad-banner {
          position: sticky;
          bottom: 0;
          padding: 40px;
          background: rgba(49, 58, 71, 0.9);
          color: #fff;
          text-align: center;

          backdrop-filter: blur(6px);
        }

      → "에디터의 선택" 옆에 붙은 배지의 위치는 원래 위치를 기준으로 배치하는 것이기 때문에 
        position: relative를 적용

      .hot-badge {
          position: relative;
          top: -10px;
          left: 10px;
          padding: 2px 4px;
          border-radius: 4px;
          background-color: #ea5493;
          color: #ffffff;
          font-weight: 500;
          font-size: 12px;
          line-height: 17px;
        }

      → 책 표지 이미지랑 겹치게 15% 할인 배지를 배치하려면, position: absolute를 
        .book-promotion-badge에 적용

      .book-promotion-badge {
          position: absolute;
          bottom: 8px;
          left: 8px;
          padding: 4px 8px;
          border-radius: 4px;
          background-color: #ea5493;
          color: #ffffff;
          font-weight: 500;
          font-size: 12px;
          line-height: 17px;
        }

      → 그런데 absolute 포지션은 가장 가까운, 포지셔닝이 된 조상을 기준으로 배치
      → 책 표지 이미지와 할인 배지를 모두 포함하는 영역의 클래스인 .book-thumb 클래스에
        position: relative를 적용

      .book-thumb {
          overflow: hidden;
          margin-top: -56px;
          width: 128px;
          height: 200px;
          border: 2px solid #595d6d;
          border-radius: 4px;
          filter: drop-shadow(0px 4px 23px rgba(16, 20, 32, 0.1));
          position: relative;
        }

      → 고정된 상단 내비게이션 앞으로 "HOT" 배지랑 책 표지 이미지가 보인다
      → z-index를 지정하면 내가 원하는 요소를 앞에다 보여줄 수 있다.
      → .nav 클래스에서 z-index: 1을 추가
      → main 태그에 position: relative와 z-index: 0을 추가해 주면 쌓임 맥락을 만들어서 
        <main> 태그 아래에 있는 모든 요소들은 반드시 상단 내비게이션 뒤쪽에 보이기 때문에 
        훨씬 견고한 코드를 짤 수 있다.

      .nav {
        position: sticky;
        top: 0;
        z-index: 1;
        padding: 20px 80px;
        border-bottom: 1px solid #e1e6f1;
        background-color: #ffffff;
        box-shadow: 0px 0px 20px rgba(27, 39, 50, 0.05);
      }

      /* ... */

      main {
        position: relative;
        z-index: 0;
        padding: 40px 80px;
      }

index.html

  <!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8">
      <title>Readit Books</title>
      <link rel="preconnect" href="https://fonts.googleapis.com">
      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
      <link
        href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap"
        rel="stylesheet">
      <link rel="stylesheet" href="style.css">
    </head>
    <body>
      <div class="nav">
        <div class="logo"><span class="logo-accent">READIT</span> BOOKS</div>
        <ul class="menu">
          <li class="menu-item active">에디터의 선택</li>
          <li class="menu-item">베스트 100</li>
          <li class="menu-item">이 달의 특가</li>
        </ul>
      </div>
      <main>
        <h1 class="title">에디터의 선택<span class="hot-badge">HOT</span></h1>
        <p class="description">리딧북스의 에디터가 직접 엄선한 추천 도서.</p>
        <div class="book">
          <div class="book-container">
            <div class="book-thumb">
              <img class="book-thumb-image" src="images/pachinko.jpeg">
              <div class="book-promotion-badge">15%</div>
            </div>
            <h2 class="title">
              <a href="https://codeit.kr">Pachinko (Paperback)</a>
            </h2>
            <p class="book-description">Min Jin Lee | Head of Zeus | 2017년 8월</p>
            <p class="book-info">
              지금 택배로 주문하면 <span class="date">10월 8일</span>에 받아 볼 수
              있어요
            </p>
          </div>
        </div>
        <div class="book">
          <div class="book-container">
            <div class="book-thumb">
              <img class="book-thumb-image" src="images/shokos-smile.jpeg">
            </div>
            <h2 class="title">Shoko's Smile (Paperback)</h2>
            <p class="book-description">
              EunYoung Choi | Penguin Books | 2021년 6월
            </p>
            <p class="book-info">
              지금 택배로 주문하면 <span class="date">11월 14일</span>에 받아 볼 수
              있어요
            </p>
          </div>
        </div>
        <div class="book">
          <div class="book-container">
            <div class="book-thumb">
              <img class="book-thumb-image" src="images/white.jpeg">
              <div class="book-promotion-badge">15%</div>
            </div>
            <h2 class="title">The White Book (Paperback)</h2>
            <p class="book-description">Kang Han | Granta Books | 2018년 4월</p>
            <p class="book-info">
              지금 택배로 주문하면 <span class="date">10월 8일</span>에 받아 볼 수
              있어요
            </p>
          </div>
        </div>
      </main>
      <div class="ad-banner">
        <h2 class="ad-banner-title">
          신간도 베스트셀러도<br>
          월 구독으로 부담 없이
        </h2>
        <div class="ad-banner-description">모두 무제한으로</div>
        <a href="#" class="ad-banner-cta">
          첫 달 무료로 시작하기
        </a>
      </div>
    </body>
  </html>


style.css

  body {
    margin: 0;
    font-family: 'Noto Sans KR', sans-serif;
  }

  a {
    color: #12172a;
    text-decoration: none;
  }

  a:hover {
    text-decoration: underline;
  }

  .nav {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 20px 80px;
    border-bottom: 1px solid #e1e6f1;
    background-color: #ffffff;
    box-shadow: 0px 0px 20px rgba(27, 39, 50, 0.05);
  }

  .logo {
    display: inline;
    margin-right: 56px;
    font-weight: 900;
    font-size: 16px;
    line-height: 23px;
  }

  .logo-accent {
    color: #ea5493;
  }

  .menu {
    display: inline;
    margin: 0;
    padding: 0;
  }

  .menu-item {
    display: inline;
    margin: 0 12px;
    color: #717f8e;
    list-style: none;
    font-weight: 500;
  }

  .menu-item.active {
    color: #000000;
  }

  main {
    position: relative;
    z-index: 0;
    padding: 40px 80px;
  }

  .title {
    margin: 0 0 8px;
    color: #12172a;
    font-weight: 700;
    font-size: 24px;
    line-height: 35px;
  }

  .hot-badge {
    position: relative;
    top: -10px;
    left: 10px;
    padding: 2px 4px;
    border-radius: 4px;
    background-color: #ea5493;
    color: #ffffff;
    font-weight: 500;
    font-size: 12px;
    line-height: 17px;
  }

  .description {
    margin: 0;
    color: #717f8e;
    font-weight: 400;
    font-size: 16px;
    line-height: 23px;
  }

  .book {
    margin: 64px 0;
    padding: 24px 48px;
    border-radius: 8px;
    background: #f4f5f9;
    box-shadow: 0px 4px 15px rgba(18, 23, 42, 0.03);
  }

  .book-container {
    margin: 0 auto;
    width: 324px;
  }

  .book-thumb {
    overflow: hidden;
    margin-top: -56px;
    width: 128px;
    height: 200px;
    border: 2px solid #595d6d;
    border-radius: 4px;
    filter: drop-shadow(0px 4px 23px rgba(16, 20, 32, 0.1));
  }

  .book-thumb-image {
    display: block;
    width: 100%;
    height: 100%;
  }

  .book-promotion-badge {
    position: absolute;
    bottom: 8px;
    left: 8px;
    padding: 4px 8px;
    border-radius: 4px;
    background-color: #ea5493;
    color: #ffffff;
    font-weight: 500;
    font-size: 12px;
    line-height: 17px;
  }

  .book .title {
    margin: 24px 0 8px;
    color: #12172a;
    font-weight: 700;
    font-size: 24px;
    line-height: 35px;
  }

  .book-description {
    font-weight: 400;
    font-size: 12px;
    line-height: 17px;
    margin: 8px 0;
  }

  .book-info {
    margin: 24px 0;
    padding: 12px;
    border-radius: 12px;
    background-color: #2e3846;
    color: #ffffff;
    text-align: center;
    font-weight: 400;
    font-size: 12px;
    line-height: 17px;
  }

  .book .date {
    font-weight: 700;
  }

  .ad-banner {
    position: sticky;
    bottom: 0;
    padding: 40px;
    background: rgba(49, 58, 71, 0.9);
    color: #fff;
    text-align: center;
    backdrop-filter: blur(6px);
  }

  .ad-banner-title {
    margin: 0;
    font-weight: 700;
    font-size: 24px;
    line-height: 35px;
  }

  .ad-banner-description {
    margin: 16px 0;
    color: #cbcbcb;
    font-weight: 500;
  }

  .ad-banner-cta {
    display: block;
    margin: 0 auto;
    padding: 12px;
    width: 390px;
    border-radius: 16px;
    background-color: #ea5493;
    color: #ffffff;
    text-align: center;
    text-decoration: none;
  }

    - 포지셔닝 정리

      position 속성

      → 글의 흐름에서 벗어나서 요소를 자유롭게 배치할 때 쓰는 속성
      → position에 따라서 위치를 정하는 기준이 달라진다.
      → 기본 값은 static이고, static인 경우 원래 있어야 할 위치에 배치

      위치 정하기

      → 위치를 정하는 기준에 대해서 top, right, bottom, left 속성으로 위치를 정할 수 있다.

      → 값이 모두 똑같은 경우 inset 속성을 쓸 수 있다.

      relative 포지션

      → 요소의 원래 위치를 기준으로 배치합니다. 이때 요소의 원래 자리는 그대로 차지

      .green {
        position: relative;
        top: 15px;
        left: 10px;
      }

      absolute 포지션

      → 가장 가까운 포지셔닝이 된 조상 요소를 기준으로 배치
      → 이때 포지셔닝이 되었다는 건 static이 아니라는 (position 속성을 지정했다는) 의미
      → 예시에서는 .red가 relative 포지션이어서 .blue는 .red를 기준으로 배치
      → 글의 흐름에서 완전히 빠져서, 요소의 원래 자리는 차지하지 않습니다.

      .red {
        position: relative;
        top: 0;
        left: 10px;
      }

      .blue {
        position: absolute;
        right: 10px;
        bottom: 15px;
      }

      fixed 포지션

      → 브라우저 화면을 기준으로 고정된 배치
      → 글의 흐름에서 완전히 빠져서, 요소의 원래 자리는 차지하지 않습니다. 
      → 내비게이션을 만들거나 할 때 겹치지 않도록 마진을 넣어준다.

      .red {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
      }


      sticky 포지션

      → static처럼 원래 위치에 배치되어 있다가, 정해진 위치에 브라우저가 스크롤되면 
        그때부터 fixed처럼 고정되어 배치
      → 기본적으로는 static처럼 배치되기 때문에 요소의 원래 자리를 차지

      .red {
        position: sticky;
        top: 0;
        left: 0;
        width: 100%;
      }


      z-index값

      → 앞뒤 순서를 정할 때 쓰는 값
      → 순서기 때문에 단위 없이 사용
      → 값이 높을수록 화면에서 앞쪽, 값이 같으면 코드에서 아래 줄에 있는 요소가 앞쪽에 보여진다.

      → 구글에서 Color Picker라고 검색하면 위와 같은 색상 선택 도구가 나타남
      → 여기서 HEX(16진수)가 색상 코드를 의미하며, 샵(#)을 붙이고 숫자 여섯글자로 된 코드
      → 색상 코드는 대소문자를 구분하지 않으므로 #FFFFFF와 #ffffff는 같은 색상

    - 배경색

      → style 속성은 태그에다가 CSS를 적용할 때 사용하는 속성
      → background-color는 CSS 속성을 부르는 문법
      → CSS 속성 이름 : CSS 속성 값 이런 형태로 작성

        <div style="background-color: #7542E0;">
          <h1>Weekly <span>Codeit</span></h1>
          <p>금요일에 만나는 코딩 한 스푼</p>
        </div>

    - 구독 페이지 : 배경색 넣기

      → 구독 페이지에 배경색을 넣으려고 미리 div 태그로 영역을 나누었다.
        들어갈 색상과 예시 이미지를 참고해서 div 태그와 p 태그에 배경색을 지정

        들어갈 색상
        (1) 첫 번째 div 영역 : #703fda
        (2) 두 번째 div 영역 : 배경색 넣지 않음
        (3) 세 번째 div 영역 : #f6f6fb
            안에 있는 p 태그 : #ffffff
        (4) 네 번째 div 영역 : #7844e8
        (5) 다섯 번째 div 영역 : #5b2eb0

  <!DOCTYPE html>
  <html>
    <head>
      <title>Weekly Codeit 구독하기</title>
        <meta charset="utf-8">
      </head>
      <body>
      <div style="background-color: #703fda">
        <h1>Weekly Codeit</h1>
        <p>
          금요일에 만나는<br>
          코딩 한 스푼
        </p>
      </div>
      <div>
        <h2>
          코드잇이 엄선한<br>
          프로그래밍 꿀팁
        </h2>
        <img src="banner-programming.png">
        <p>
          컴퓨터 개론, 프로그래밍 기초, 업무 자동화 ...<br>
          인기 코드잇 강의를 뉴스레터로 만나보세요.
        </p>
        <p>
          유용한 팁과 개발 지식을 매주 금요일 여러분의 메일함으로 보내드려요.
        </p>
        <p>
          <a href="https://codeit.kr/catalog">
            수업 살펴보기
          </a>
        </p>
      </div>
      <div style="background-color: #f6f6fb">
        <h2>
          배움의 기쁨을 세상 모두에게.<br>
          많은 코둥이들이 구독하고 있어요!
        </h2>
        <img src="banner-students.png">
        <div style="background-color: #ffffff">
          <p>
            iloveprincess 님<br>
            안녕하세요, 5년차 코둥이입니다! 제가 구독 중인 뉴스레터 중 가장 읽기 편하고 재밌어요.
            매주 금요일이 기다려지네요 :) 
          </p>
          <p>
            코드냠냠 님<br>
            뉴스레터 정말 잘 보고 있습니다. 다양한 주제에 대한 소개 덕분에 기술 면접에서도 당황하지 않을 수 있었어요!
            항상 감사드립니다.
         </p>
          <p>
            냐리 님<br>
            덕분에 프로그래밍 상식이 풍부해지는 느낌임. 깊이있는 내용을 알기 쉽게 소개해줘서 더 좋은듯.
            초보 코둥이들에게 추천해요.
          </p>
          <p>
            <a href="https://codeit.kr/reviews">
              후기 더 보기
            </a>
          </p>
        </div>
      </div>
      <div style="background-color: #7844e8">
        <h2>
          코딩이 즐거워지는 뉴스레터,<br>
          Weekly Codeit
        </h2>
      </div>
      <div style="background-color: #5b2eb0">
        <p>
          Weekly Codeit
        </p>
        <p>
          Weekly Codeit 을 아직 구독하지 않으셨다면? 구독 신청 Subscribe<br>
          최신 뉴스레터들을 놓치지 않기 위해 weekly@codeit.kr을 메일 주소록에 추가해주세요
        </p>
        <p>
          (주)코드잇 | 서울 중구 청계천로 100 시그니쳐타워 동관 10층 | 수신 거부 Unsubscribe
        </p>
      </div>
      </body>
  </html>

    - 글자색

      → 글자색은 color라는 속성을 사용하여 변경할 수 있다.

        <div style="background-color: #7542E0;">
          <h1 style="color: #ffffff;">Weekly <span>Codeit</span></h1>
          <p style="color: #ffffff;">금요일에 만나는 코딩 한 스푼</p>
        </div>

      → 그런데 이렇게 많은 글이 들어 있는 페이지에서는 글자 색을 일일이 바꿔주는 것이 번거롭다
      → 페이지 전체에 있는 글자에 색을 바꾸고 싶을 때에는 페이지 전체를 감싸는 태그에
        글자 색을 넣어주면 된다.

  <!DOCTYPE html>
  <html lang="ko">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Weekly Codeit</title>
  </head>
  <body style="color: #737373;">
    <div style="background-color: #7542E0;">
      <h1 style="color: #ffffff;">Weekly <span>Codeit</span></h1>
      <p style="color: #ffffff;">금요일에 만나는 코딩 한 스푼</p>
    </div>

    <div>
      <img src="thumbnail-unix.png" alt="">
      <h2 style="color: 2e2e2e;">생산성을 높여줄 유닉스 커맨드 꿀팁</h2>
        <p>생각만하면 모든게 이루어진다! 꿈 같은 이야기죠? 하지만 유닉스 커맨드를 사용하면 더 이상 꿈이 아니랍니다. 마우스 대신에 유닉스 명령어들을 사용하면 복잡한 일도 한 번에 뚝딱하거든요.
          유닉스 커맨드를 사용할 때 알아두면 좋은, 작업 효율성을 UP! UP! 시켜주는 꿀팁 몇 가지를 준비해봤으니까, 한 번 살펴보세요!</p>
        <a href="https://blog.codeit.kr/post/6052b25f701df852a9157516">자세히 보기</a>
    </div>

    <div style="background-color: #fbfbff;">
      <img src="thumbnail-machine-learning.png" alt="">
      <h2 style="color: 2e2e2e;">머신 러닝을 통한 추천 시스템 (내용 기반, 협업 필터링)</h2>
        <p>넷플릭스나 애플 뮤직은 어떻게 영화나 음악을 추천해주는 걸까요? 일단 추천 시스템이란 유저에게 유저가 좋아하거나 구매할 만한 상품을 추천해 주는 프로그램을 의미합니다.
          내가 평소에 쓰는 서비스들은 이미 추천 서비스를 사용하고 있을지도 모릅니다. (놀랍죠?) 유저 별로 아마존이나 쿠팡에서 물건들을, 넷플릭스에서 영화들을, 애플 뮤직에서 노래를 보여주는 것. 모두 추천 시스템을 사용해서 첫 화면에 보여주기 때문이죠.
        </p>
        <a href="https://blog.codeit.kr/post/6054359298b173400407da01">자세히 보기</a>
    </div>

    <div>
      <img src="thumbnail-emmet.png" alt="">
      <h2 style="color: 2e2e2e;">Tips & Tricks: HTML 코드 편하게 입력하는 법</h2>
        <p>HTML 파일을 작성하려면 DOCTYPE, html, head, body ... 적어야 할 것이 참 많습니다. 이럴때 유용하게 쓸 수 있는 기능이 있는데요. VS Code에서는 !(느낌표)를 입력하고 Tab 키나 Enter 키를 누르면 HTML  코드를 한번에 입력할 수 있답니다!
          이건 Emmet 이라고 부르는 문법의 일부인데요. Emmet은 개미라는 뜻이랍니다. 개미는 자기 몸집의 50배나 넘는 물건을 옮길 수 있다는데요. 개미처럼 Emmet의 문법도 짧은 단어만 입력하면 긴 HTML 코드를 뚝딱 만들어 낼 수 있으니까, 한 번 살펴보시는 것도 좋을 거 같네요.
        </p>
    </div>

    <div style="background-color: #fbfbff;">
      <h2 style="color: 2e2e2e;">코둥이 퀴즈</h2>
      <p style="background-color: #f6f1ff; color: #7844e8;">머신 러닝에서 유저에게 유저가 좋아하거나<br>구매할만할 상품을 추천해 주는 프로그램을<br>□□ □□□ (이)라고 부른다.
        빈 칸에 들어갈 다섯 글자를 답장으로 보내주세요.<br>선착순 200분께 코드잇 시그니쳐 굿즈를 보내드려요.</p>
    </div>

    <div style="background-color: #46415a; color: #ffffff;">
      <p>Weekly Codeit</p>
      <p>(주)코드잇 | 서울 중구 청계천로 100 시그니쳐타워 동관 10층</p>
      <p>Weekly Codeit 을 아직 구독하지 않으셨다면? 구독 신청하기</p>
      <p>뉴스레터가 보이지 않는다면, weekly@codeit.kr을 메일 주소록에 추가해주세요.</p>
      <p>수신 거부 Unsubscribe</p>
    </div>
  </body>
  </html>

    - 구독 페이지 : 링크에 색상 넣기

      → 링크 태그 a에 글자 색을 넣어보자
      → 사용할 색상 : 글자 색 #7844e8

  <!DOCTYPE html>
  <html>
    <head>
      <title>Weekly Codeit 구독하기</title>
        <meta charset="utf-8">
      </head>
      <body>
      <div style="background-color: #703fda">
        <h1>Weekly Codeit</h1>
        <p>
          금요일에 만나는<br>
          코딩 한 스푼
        </p>
      </div>
      <div>
        <h2>
          코드잇이 엄선한<br>
          프로그래밍 꿀팁
        </h2>
        <img src="banner-programming.png">
        <p>
          컴퓨터 개론, 프로그래밍 기초, 업무 자동화 ...<br>
          인기 코드잇 강의를 뉴스레터로 만나보세요.
        </p>
        <p>
          유용한 팁과 개발 지식을 매주 금요일 여러분의 메일함으로 보내드려요.
        </p>
        <p>
          <a href="https://codeit.kr/catalog" style="color : #7844e8">
            수업 살펴보기
          </a>
        </p>
      </div>
      <div style="background-color: #f6f6fb">
        <h2>
          배움의 기쁨을 세상 모두에게.<br>
          많은 코둥이들이 구독하고 있어요!
        </h2>
        <img src="banner-students.png">
        <p style="background-color: #ffffff">
          iloveprincess 님<br>
          안녕하세요, 5년차 코둥이입니다! 제가 구독 중인 뉴스레터 중 가장 읽기 편하고 재밌어요.
          매주 금요일이 기다려지네요 :) 
        </p>
        <p style="background-color: #ffffff">
          코드냠냠 님<br>
          뉴스레터 정말 잘 보고 있습니다. 다양한 주제에 대한 소개 덕분에 기술 면접에서도 당황하지 않을 수 있었어요!
          항상 감사드립니다.
        </p>
        <p style="background-color: #ffffff">
          냐리 님<br>
          덕분에 프로그래밍 상식이 풍부해지는 느낌임. 깊이있는 내용을 알기 쉽게 소개해줘서 더 좋은듯.
          초보 코둥이들에게 추천해요.
        </p>
        <p>
          <a href="https://codeit.kr/reviews" style="color : #7844e8">
            후기 더 보기
          </a>
        </p>
      </div>
      <div style="background-color: #7844e8">
        <h2>
          코딩이 즐거워지는 뉴스레터,<br>
          Weekly Codeit
        </h2>
      </div>
      <div style="background-color: #5b2eb0">
        <p>
          Weekly Codeit
        </p>
        <p>
          Weekly Codeit 을 아직 구독하지 않으셨다면? 구독 신청 Subscribe<br>
          최신 뉴스레터들을 놓치지 않기 위해 weekly@codeit.kr을 메일 주소록에 추가해주세요
        </p>
        <p>
          (주)코드잇 | 서울 중구 청계천로 100 시그니쳐타워 동관 10층 | 수신 거부 Unsubscribe
        </p>
      </div>
      </body>
  </html>

    - 글꼴

      → 글꼴은 font-family라는 CSS 속성을 사용하여 변경할 수 있다.
        <body style="color: #737373; font-family: sans-serif;">
          <div style="background-color: #7542E0;">
            <h1 style="color: #ffffff;">Weekly <span>Codeit</span></h1>
            <p style="color: #ffffff;">금요일에 만나는 코딩 한 스푼</p>
          </div>
      → sans-serif는 serif가 없다는 뜻으로 즉, 뾰족한 부리가 없다는 뜻
        한글 글꼴 중에서는 대표적으로 고딕체나 돋움체가 있다.
      → serif는 대표적으로 명조나 궁서체가 있다.
      → 원하는 글꼴을 정하고 싶은 경우에는 원하는 글꼴을 적어주면 된다.
         font-family: Arial, Helvetica, sans-serif;
         여기서 Arial 글꼴이 없다면 Helvetica, 또 없다면 sans-serif를 적용하라는 뜻     

    - 구글 폰트

      → font-family라는 CSS 속성에서 글꼴을 여러 개 지정할 수 있다.
        그러나 상대방의 컴퓨터에 해당 글꼴이 없다면 원하는 글꼴을 보여줄 수 없다.
      → 글꼴 파일을 인터넷으로 직접 제공해주는 방식을 사용하면 상대방의 컴퓨터에 해당 글꼴이
        없더라도 내가 지정한 글꼴 파일을 보여줄 수 있다.
        이러한 방식을 [웹 폰트]라고 한다.
      → 사이트에 접속하면 글꼴을 자동으로 다운받아서 보여주는 방식

      → 100, 200, 300 등의 숫자는 글꼴의 굵기를 의미
      → 글꼴을 굵기 별로 상황에 맞춰 다르게 보여준다면 좀 더 섬세한 디자인을 보여줄 수 있다.

      → link 태그로 되어있는 코드를 복사해서 head 태그 안에 넣어주면 웹 폰트를 사용하여
        웹사이트 글꼴을 지정할 수 있다.
      → body 태그 안의 a 태그도 링크 태그이지만 a 태그는 페이지를 이동하는 경우에 사용
        link 태그는 head 태그 안에 작성하고 외부 데이터를 가져오는 태그로 사용

      → 코드를 보면 글꼴의 이름이 나와있고, font-family로 시작되는 코드가 있으므로 
        해당 코드를 css에 작성해준다.

    - 구독 페이지 : 글꼴 넣기

      → 구글 폰트를 사용하여 사이트 전체에 글꼴을 적용해보자.
      → body 태그 안에 poppins와 noto sans korean을 적용
        이 때, poppins를 우선적으로 사용하고 없는 글자는 noto sans korean을 사용

      적용할 글꼴

      - Poppins: https://fonts.google.com/specimen/Poppins
        Regular 400
        Semi-bold 600

      - Noto Sans KR: https://fonts.google.com/noto/specimen/Noto+Sans+KR
        Regular 400
        Bold 700

      <head>
        <title>Weekly Codeit</title>
        <meta charset="utf-8">
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&
        family=Poppins:wght@400;600&display=swap" rel="stylesheet">
      </head>

      → font-family라는 CSS 속성을 사용하면 글꼴을 적용할 수 있다.
      → Poppins라는 글꼴을 우선적으로 사용하고 해당 글꼴이 없는 경우 Noto sans KR을 사용하도록
        하려면 다음과 같은 코드를 작성한다.

        <body style="font-family: Poppins, 'Noto Sans KR', sans-serif">

    - 픽셀

      → CSS에서는 크기를 설정할 때 픽셀이라는 단위를 사용한다.
      → 위의 이미지에서 일부를 확대하니 작은 정사각형들로 이루어져 있는 것을 볼 수 있는데
        각 정사각형을 픽셀(Pixel)이라고 부른다.
      → pixel은 Picture Element의 약자로 그림의 기본 요소라는 뜻이다.
        작은 정사각형들은 화면에서 크기의 단위로 사용하는데
        코드에서 크기의 단위로 쓸 때에는 px라고 쓰고 픽셀이라고 읽는다.
      → 글자의 크기가 24px이라고 한다면 글자의 세로 크기가 24px이라는 뜻

    - 글자 크기와 굵기

      → 글자 크기는 font-size 속성을 사용하여 크기를 조절할 수 있다.
      → 글자의 굵기는 font-weight라는 속성을 사용하여 100, 200, 300 이런 식으로 두께를 조절

    - 구독 페이지 : 폰트 크기와 굵기

      → 작은 제목에 폰트 크기와 굵기를 설정해보자.
        아래 사용할 크기, 굵기 값과 예시 이미지를 참고해서 h2 태그와 span 태그에 CSS를 추가

        사용할 크기와 굵기

        - 코드잇이 엄선한
          크기 24px, 굵기 300
        - 프로그래밍 꿀팁
          크기 32px, 굵기 700
        - 배움의 기쁨을 세상 모두에게
          크기 24px, 굵기 300
        - 많은 코둥이들이 구독하고 있어요!
          크기 32px, 굵기 700

  <!DOCTYPE html>
  <html>
    <head>
      <title>Weekly Codeit 구독하기</title>
        <meta charset="utf-8">
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&family=Poppins:wght@400;600&display=swap" rel="stylesheet">
      </head>
      <body style="font-family: Poppins, 'Noto Sans KR', sans-serif">
      <div style="background-color: #703fda; color: #ffffff">
        <h1>Weekly Codeit</h1>
        <p>
          금요일에 만나는<br>
          코딩 한 스푼
        </p>
      </div>
      <div>
        <h2 style="font-size:24px; font-weight:300;">
          코드잇이 엄선한<br>
          <span style="font-size:32px; font-weight:700">프로그래밍 꿀팁</span>
        </h2>
        <img src="banner-programming.png">
        <p>
          컴퓨터 개론, 프로그래밍 기초, 업무 자동화 ...<br>
          인기 코드잇 강의를 뉴스레터로 만나보세요.
        </p>
        <p>
          유용한 팁과 개발 지식을 매주 금요일 여러분의 메일함으로 보내드려요.
        </p>
        <p>
          <a href="https://codeit.kr/catalog" style="color: #7844e8">
            수업 살펴보기
          </a>
        </p>
      </div>
      <div style="background-color: #f6f6fb">
        <h2 style="font-size:24px; font-weight:300;">
          배움의 기쁨을 세상 모두에게.<br>
          <spa  style="font-size:32px; font-weight:700;">많은 코둥이들이 구독하고 있어요!</span>
        </h2>
        <img src="banner-students.png">
        <p style="background-color: #ffffff">
          <span style="color: #b8b7ba">iloveprincess 님</span><br>
          안녕하세요, 5년차 코둥이입니다! 제가 구독 중인 뉴스레터 중 가장 읽기 편하고 재밌어요.
          매주 금요일이 기다려지네요 :) 
        </p>
        <p style="background-color: #ffffff">
          <span style="color: #b8b7ba">코드냠냠 님</span><br>
          뉴스레터 정말 잘 보고 있습니다. 다양한 주제에 대한 소개 덕분에 기술 면접에서도 당황하지 않을 수 있었어요!
          항상 감사드립니다.
        </p>
        <p style="background-color: #ffffff">
          <span style="color: #b8b7ba">냐리 님</span><br>
          덕분에 프로그래밍 상식이 풍부해지는 느낌임. 깊이있는 내용을 알기 쉽게 소개해줘서 더 좋은듯.
          초보 코둥이들에게 추천해요.
        </p>
        <p>
          <a href="https://codeit.kr/reviews" style="color: #7844e8">
            후기 더 보기
          </a>
        </p>
      </div>
      <div style="background-color: #7844e8; color: #ffffff">
        <h2>
          코딩이 즐거워지는 뉴스레터,<br>
          <span>Weekly Codeit</span>
        </h2>
      </div>
      <div style="background-color: #5b2eb0; color: #ffffff">
        <p>
          Weekly Codeit
        </p>
        <p>
          Weekly Codeit 을 아직 구독하지 않으셨다면? 구독 신청 Subscribe<br>
          최신 뉴스레터들을 놓치지 않기 위해 weekly@codeit.kr을 메일 주소록에 추가해주세요
        </p>
        <p>
          (주)코드잇 | 서울 중구 청계천로 100 시그니쳐타워 동관 10층 | 수신 거부 Unsubscribe
        </p>
      </div>
      </body>
  </html>

    - 글 정렬하기

      → 기본적으로 웹 페이지는 좌측 정렬이 되어 있는데 중앙정렬로 바꾸기 위해서는 
        text-align이라는 CSS 속성을 사용
      → 정렬에는 좌측 정렬, 우측 정렬, 가운데 정렬이 있으며, text-align : left, right, center
        이렇게 작성하여 정렬할 수 있다.

  <!DOCTYPE html>
  <html lang="ko">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
    <title>Weekly Codeit</title>
  </head>

  <body style="color: #737373; font-family: poppins, Noto Sans KR, sans-serif">
    <div style="background-color: #7542E0; text-align: center;">
      <h1 style="color: #ffffff; font-weight: 300;">Weekly <span style="font-weight: 700">Codeit</span></h1>
      <p style="color: #ffffff;">금요일에 만나는 코딩 한 스푼</p>
    </div>

    <div>
      <img src="thumbnail-unix.png" alt="">
      <h2 style="color: 2e2e2e; font-size:20px;">생산성을 높여줄 유닉스 커맨드 꿀팁</h2>
        <p>생각만하면 모든게 이루어진다! 꿈 같은 이야기죠? 하지만 유닉스 커맨드를 사용하면 더 이상 꿈이 아니랍니다. 마우스 대신에 유닉스 명령어들을 사용하면 복잡한 일도 한 번에 뚝딱하거든요.
          유닉스 커맨드를 사용할 때 알아두면 좋은, 작업 효율성을 UP! UP! 시켜주는 꿀팁 몇 가지를 준비해봤으니까, 한 번 살펴보세요!</p>
        <a href="https://blog.codeit.kr/post/6052b25f701df852a9157516">자세히 보기</a>
    </div>

    <div style="background-color: #fbfbff;">
      <img src="thumbnail-machine-learning.png" alt="">
      <h2 style="color: 2e2e2e; font-size:20px;">머신 러닝을 통한 추천 시스템 (내용 기반, 협업 필터링)</h2>
        <p>넷플릭스나 애플 뮤직은 어떻게 영화나 음악을 추천해주는 걸까요? 일단 추천 시스템이란 유저에게 유저가 좋아하거나 구매할 만한 상품을 추천해 주는 프로그램을 의미합니다.
          내가 평소에 쓰는 서비스들은 이미 추천 서비스를 사용하고 있을지도 모릅니다. (놀랍죠?) 유저 별로 아마존이나 쿠팡에서 물건들을, 넷플릭스에서 영화들을, 애플 뮤직에서 노래를 보여주는 것. 모두 추천 시스템을 사용해서 첫 화면에 보여주기 때문이죠.
        </p>
        <a href="https://blog.codeit.kr/post/6054359298b173400407da01">자세히 보기</a>
    </div>

    <div>
      <img src="thumbnail-emmet.png" alt="">
      <h2 style="color: 2e2e2e; font-size:20px;">Tips & Tricks: HTML 코드 편하게 입력하는 법</h2>
        <p>HTML 파일을 작성하려면 DOCTYPE, html, head, body ... 적어야 할 것이 참 많습니다. 이럴때 유용하게 쓸 수 있는 기능이 있는데요. VS Code에서는 !(느낌표)를 입력하고 Tab 키나 Enter 키를 누르면 HTML  코드를 한번에 입력할 수 있답니다!
          이건 Emmet 이라고 부르는 문법의 일부인데요. Emmet은 개미라는 뜻이랍니다. 개미는 자기 몸집의 50배나 넘는 물건을 옮길 수 있다는데요. 개미처럼 Emmet의 문법도 짧은 단어만 입력하면 긴 HTML 코드를 뚝딱 만들어 낼 수 있으니까, 한 번 살펴보시는 것도 좋을 거 같네요.
        </p>
    </div>

    <div style="background-color: #fbfbff; text-align: center;">
      <h2 style="color: 2e2e2e; font-size:20px;">코둥이 퀴즈</h2>
      <p style="background-color: #f6f1ff; color: #7844e8;">머신 러닝에서 유저에게 유저가 좋아하거나<br>구매할만할 상품을 추천해 주는 프로그램을<br>□□ □□□ (이)라고 부른다.
        빈 칸에 들어갈 다섯 글자를 답장으로 보내주세요.<br>선착순 200분께 코드잇 시그니쳐 굿즈를 보내드려요.</p>
    </div>

    <div style="background-color: #46415a; color: #ffffff; text-align: center;">
      <p>Weekly <span style="font-weight: 700;">Codeit</span></p>
      <p>(주)코드잇 | 서울 중구 청계천로 100 시그니쳐타워 동관 10층</p>
      <p>Weekly Codeit 을 아직 구독하지 않으셨다면? 구독 신청하기</p>
      <p>뉴스레터가 보이지 않는다면, weekly@codeit.kr을 메일 주소록에 추가해주세요.</p>
      <p>수신 거부 Unsubscribe</p>
    </div>
  </body>
  </html>

    - 구독 페이지 : 정렬

      → "배움의 기쁨을 세상 모두에게. / 많은 코둥이들이 구독하고 있어요!" 부분에 정렬을 추가
      → 전체를 감싸는 영역인  <div> 태그에는 중앙 정렬을 적용하고, 후기가 들어가 있는 <p> 태그들에는
        좌측 정렬을 적용

  <!DOCTYPE html>
  <html>
    <head>
      <title>Weekly Codeit 구독하기</title>
        <meta charset="utf-8">
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&family=Poppins:wght@400;600&display=swap" rel="stylesheet">
      </head>
      <body style="font-family: Poppins, 'Noto Sans KR', sans-serif">
      <div style="background-color: #703fda; color: #ffffff">
        <h1>Weekly Codeit</h1>
        <p>
          금요일에 만나는<br>
          코딩 한 스푼
        </p>
      </div>
      <div>
        <h2 style="font-size: 24px; font-weight: 300">
          코드잇이 엄선한<br>
          <span style="font-size: 32px; font-weight: 700">프로그래밍 꿀팁</span>
        </h2>
        <img src="banner-programming.png">
        <p>
          컴퓨터 개론, 프로그래밍 기초, 업무 자동화 ...<br>
          인기 코드잇 강의를 뉴스레터로 만나보세요.
        </p>
        <p>
          유용한 팁과 개발 지식을 매주 금요일 여러분의 메일함으로 보내드려요.
        </p>
        <p>
          <a href="https://codeit.kr/catalog" style="color: #7844e8">
            수업 살펴보기
          </a>
        </p>
      </div>
      <div style="background-color: #f6f6fb; text-align:center;">
        <h2 style="font-size: 24px; font-weight: 300">
          배움의 기쁨을 세상 모두에게.<br>
          <span style="font-size: 32px; font-weight: 700">
            많은 코둥이들이 구독하고 있어요!
          </span>
        </h2>
        <img src="banner-students.png">
        <p style="background-color: #ffffff; text-align:left;">
          <span style="color: #b8b7ba">iloveprincess 님</span><br>
          안녕하세요, 5년차 코둥이입니다! 제가 구독 중인 뉴스레터 중 가장 읽기 편하고 재밌어요.
          매주 금요일이 기다려지네요 :) 
        </p>
        <p style="background-color: #ffffff; text-align:left;">
          <span style="color: #b8b7ba">코드냠냠 님</span><br>
          뉴스레터 정말 잘 보고 있습니다. 다양한 주제에 대한 소개 덕분에 기술 면접에서도 당황하지 않을 수 있었어요!
          항상 감사드립니다.
        </p>
        <p style="background-color: #ffffff; text-align:left;">
          <span style="color: #b8b7ba">냐리 님</span><br>
          덕분에 프로그래밍 상식이 풍부해지는 느낌임. 깊이있는 내용을 알기 쉽게 소개해줘서 더 좋은듯.
          초보 코둥이들에게 추천해요.
        </p>
        <p>
          <a href="https://codeit.kr/reviews" style="color: #7844e8">
            후기 더 보기
          </a>
        </p>
      </div>
      <div style="background-color: #7844e8; color: #ffffff">
        <h2>
          코딩이 즐거워지는 뉴스레터,<br>
          Weekly Codeit
        </h2>
      </div>
      <div style="background-color: #5b2eb0; color: #ffffff">
        <p>
          Weekly Codeit
        </p>
        <p>
          Weekly Codeit 을 아직 구독하지 않으셨다면? 구독 신청 Subscribe<br>
          최신 뉴스레터들을 놓치지 않기 위해 weekly@codeit.kr을 메일 주소록에 추가해주세요
        </p>
        <p>
          (주)코드잇 | 서울 중구 청계천로 100 시그니쳐타워 동관 10층 | 수신 거부 Unsubscribe
        </p>
      </div>
      </body>
  </html>

    - 크기

      → 이미지의 너비와 높이를 지정하는 CSS는 너비는 width, 높이는 height라는 속성을 사용
      → px을 사용하면 크기가 정해진 값에 맞춰 고정되어서 웹 브라우저의 크기가 바뀔 때마다
        화면에 맞춰 변하지 못한다.
      → px 대신에 %를 사용하면 웹 브라우저 영역 안에서 퍼센트만큼 채워준다.
      → width를 100%로 정해주고, height 값을 지우면 width 값에 맞추어 height를 자동으로 지정
      → 배경색이 정해져 있는 div 태그에 너비를 지정하게 되면 배경색이 있는 범위가 줄어듬
        배경색은 그대로 두고, 안에 있는 content에만 너비를 적용하려면 div 태그를 추가

  <!DOCTYPE html>
  <html lang="ko">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
    <title>Weekly Codeit</title>
  </head>

  <body style="color: #737373; font-family: poppins, Noto Sans KR, sans-serif">
    <div style="background-color: #7542E0; text-align: center;">
      <h1 style="color: #ffffff; font-weight: 300;">Weekly <span style="font-weight: 700">Codeit</span></h1>
      <p style="color: #ffffff;">금요일에 만나는 코딩 한 스푼</p>
    </div>

    <div>
      <div style="width: 560px;">
        <img src="thumbnail-unix.png" alt="" style="width: 100%;">
        <h2 style="color: 2e2e2e; font-size:20px;">생산성을 높여줄 유닉스 커맨드 꿀팁</h2>
          <p>생각만하면 모든게 이루어진다! 꿈 같은 이야기죠? 하지만 유닉스 커맨드를 사용하면 더 이상 꿈이 아니랍니다. 마우스 대신에 유닉스 명령어들을 사용하면 복잡한 일도 한 번에 뚝딱하거든요.
            유닉스 커맨드를 사용할 때 알아두면 좋은, 작업 효율성을 UP! UP! 시켜주는 꿀팁 몇 가지를 준비해봤으니까, 한 번 살펴보세요!</p>
          <a href="https://blog.codeit.kr/post/6052b25f701df852a9157516">자세히 보기</a>  
      </div>
    </div>

    <div style="background-color: #fbfbff;">
      <div style="width: 560px;">
        <img src="thumbnail-machine-learning.png" alt="" style="width: 100%;">
        <h2 style="color: 2e2e2e; font-size:20px;">머신 러닝을 통한 추천 시스템 (내용 기반, 협업 필터링)</h2>
          <p>넷플릭스나 애플 뮤직은 어떻게 영화나 음악을 추천해주는 걸까요? 일단 추천 시스템이란 유저에게 유저가 좋아하거나 구매할 만한 상품을 추천해 주는 프로그램을 의미합니다.
            내가 평소에 쓰는 서비스들은 이미 추천 서비스를 사용하고 있을지도 모릅니다. (놀랍죠?) 유저 별로 아마존이나 쿠팡에서 물건들을, 넷플릭스에서 영화들을, 애플 뮤직에서 노래를 보여주는 것. 모두 추천 시스템을 사용해서 첫 화면에 보여주기 때문이죠.
          </p>
          <a href="https://blog.codeit.kr/post/6054359298b173400407da01">자세히 보기</a>  
      </div>
    </div>

    <div>
      <div style="width: 560px;">
        <img src="thumbnail-emmet.png" alt="" style="width: 100%;">
        <h2 style="color: 2e2e2e; font-size:20px;">Tips & Tricks: HTML 코드 편하게 입력하는 법</h2>
          <p>HTML 파일을 작성하려면 DOCTYPE, html, head, body ... 적어야 할 것이 참 많습니다. 이럴때 유용하게 쓸 수 있는 기능이 있는데요. VS Code에서는 !(느낌표)를 입력하고 Tab 키나 Enter 키를 누르면 HTML  코드를 한번에 입력할 수 있답니다!
            이건 Emmet 이라고 부르는 문법의 일부인데요. Emmet은 개미라는 뜻이랍니다. 개미는 자기 몸집의 50배나 넘는 물건을 옮길 수 있다는데요. 개미처럼 Emmet의 문법도 짧은 단어만 입력하면 긴 HTML 코드를 뚝딱 만들어 낼 수 있으니까, 한 번 살펴보시는 것도 좋을 거 같네요.
          </p>
      </div>
    </div>

    <div style="background-color: #fbfbff; text-align: center;">
      <div style="width: 560px;">
        <h2 style="color: 2e2e2e; font-size:20px;">코둥이 퀴즈</h2>
        <p style="background-color: #f6f1ff; color: #7844e8;">머신 러닝에서 유저에게 유저가 좋아하거나<br>구매할만할 상품을 추천해 주는 프로그램을<br>□□ □□□ (이)라고 부른다.
          빈 칸에 들어갈 다섯 글자를 답장으로 보내주세요.<br>선착순 200분께 코드잇 시그니쳐 굿즈를 보내드려요.</p>  
      </div>
    </div>

    <div style="background-color: #46415a; color: #ffffff; text-align: center;">
      <p>Weekly <span style="font-weight: 700;">Codeit</span></p>
      <p>(주)코드잇 | 서울 중구 청계천로 100 시그니쳐타워 동관 10층</p>
      <p>Weekly Codeit 을 아직 구독하지 않으셨다면? 구독 신청하기</p>
      <p>뉴스레터가 보이지 않는다면, weekly@codeit.kr을 메일 주소록에 추가해주세요.</p>
      <p>수신 거부 Unsubscribe</p>
    </div>
  </body>
  </html>

    - 여백

      → padding 이라는 CSS 속성을 사용하여 태그 안쪽에 여백을 줄 수 있다.
      → 태그의 바깥쪽에 여백을 주고 싶다면 margin이라는 속성을 사용하면 여백을 줄 수 있다.
      → margin의 특별한 기능은 바깥 여백 중에서 가로 여백을 자동으로 채울 수 있다.
        웹 브라우저의 크기가 커지면 오른쪽에 빈 공간이 생겨 아쉽다.
        margin: 0 auto; 라고 작성하면 세로는 0 가로는 자동으로 채우라는 의미

  <!DOCTYPE html>
  <html lang="ko">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
    <title>Weekly Codeit</title>
  </head>

  <body style="color: #737373; font-family: poppins, Noto Sans KR, sans-serif; margin: 0;">
    <div style="background-color: #7542E0; text-align: center; padding: 20px;">
      <h1 style="color: #ffffff; font-weight: 300;">Weekly <span style="font-weight: 700">Codeit</span></h1>
      <p style="color: #ffffff;">금요일에 만나는 코딩 한 스푼</p>
    </div>

    <div style="padding: 40px 20px;">
      <div style="width: 560px; margin: 0 auto;">
        <img src="thumbnail-unix.png" alt="" style="width: 100%;">
        <h2 style="color: 2e2e2e; font-size:20px;">생산성을 높여줄 유닉스 커맨드 꿀팁</h2>
          <p>생각만하면 모든게 이루어진다! 꿈 같은 이야기죠? 하지만 유닉스 커맨드를 사용하면 더 이상 꿈이 아니랍니다. 마우스 대신에 유닉스 명령어들을 사용하면 복잡한 일도 한 번에 뚝딱하거든요.
            유닉스 커맨드를 사용할 때 알아두면 좋은, 작업 효율성을 UP! UP! 시켜주는 꿀팁 몇 가지를 준비해봤으니까, 한 번 살펴보세요!</p>
          <a href="https://blog.codeit.kr/post/6052b25f701df852a9157516">자세히 보기</a>  
      </div>
    </div>

    <div style="background-color: #fbfbff; padding: 40px 20px;">
      <div style="width: 560px; margin: 0 auto;">
        <img src="thumbnail-machine-learning.png" alt="" style="width: 100%;">
        <h2 style="color: 2e2e2e; font-size:20px;">머신 러닝을 통한 추천 시스템 (내용 기반, 협업 필터링)</h2>
          <p>넷플릭스나 애플 뮤직은 어떻게 영화나 음악을 추천해주는 걸까요? 일단 추천 시스템이란 유저에게 유저가 좋아하거나 구매할 만한 상품을 추천해 주는 프로그램을 의미합니다.
            내가 평소에 쓰는 서비스들은 이미 추천 서비스를 사용하고 있을지도 모릅니다. (놀랍죠?) 유저 별로 아마존이나 쿠팡에서 물건들을, 넷플릭스에서 영화들을, 애플 뮤직에서 노래를 보여주는 것. 모두 추천 시스템을 사용해서 첫 화면에 보여주기 때문이죠.
          </p>
          <a href="https://blog.codeit.kr/post/6054359298b173400407da01">자세히 보기</a>  
      </div>
    </div>

    <div style="padding: 40px 20px;">
      <div style="width: 560px; margin: 0 auto;">
        <img src="thumbnail-emmet.png" alt="" style="width: 100%;">
        <h2 style="color: 2e2e2e; font-size:20px;">Tips & Tricks: HTML 코드 편하게 입력하는 법</h2>
          <p>HTML 파일을 작성하려면 DOCTYPE, html, head, body ... 적어야 할 것이 참 많습니다. 이럴때 유용하게 쓸 수 있는 기능이 있는데요. VS Code에서는 !(느낌표)를 입력하고 Tab 키나 Enter 키를 누르면 HTML  코드를 한번에 입력할 수 있답니다!
            이건 Emmet 이라고 부르는 문법의 일부인데요. Emmet은 개미라는 뜻이랍니다. 개미는 자기 몸집의 50배나 넘는 물건을 옮길 수 있다는데요. 개미처럼 Emmet의 문법도 짧은 단어만 입력하면 긴 HTML 코드를 뚝딱 만들어 낼 수 있으니까, 한 번 살펴보시는 것도 좋을 거 같네요.
          </p>
      </div>
    </div>

    <div style="background-color: #fbfbff; text-align: center; padding: 40px 20px;">
      <div style="width: 560px; margin: 0 auto;">
        <h2 style="color: 2e2e2e; font-size:20px;">코둥이 퀴즈</h2>
        <p style="background-color: #f6f1ff; color: #7844e8; padding: 16px; margin: 32px;">머신 러닝에서 유저에게 유저가 좋아하거나<br>구매할만할 상품을 추천해 주는 프로그램을<br>□□ □□□ (이)라고 부른다.</p>
        <p>빈 칸에 들어갈 다섯 글자를 답장으로 보내주세요.<br>선착순 200분께 코드잇 시그니쳐 굿즈를 보내드려요.</p>
      </div>
    </div>

    <div style="background-color: #46415a; color: #ffffff; text-align: center; padding: 40px 20px;">
      <p>Weekly <span style="font-weight: 700;">Codeit</span></p>
      <p>(주)코드잇 | 서울 중구 청계천로 100 시그니쳐타워 동관 10층</p>
      <p>Weekly Codeit 을 아직 구독하지 않으셨다면? 구독 신청하기</p>
      <p>뉴스레터가 보이지 않는다면, weekly@codeit.kr을 메일 주소록에 추가해주세요.</p>
      <p>수신 거부 Unsubscribe</p>
    </div>
  </body>
  </html>  

    - 구독 페이지 : 크기와 여백

      → "배움의 기쁨을 세상 모두에게. / 많은 코둥이들이 구독하고 있어요!" 부분에
         적용할 너비와 여백 값과 예시 이미지를 참고해서, "후기가 있는 <p> 태그"와 
         "너비를 넣을 <div> 태그"에 CSS 코드를 추가

          <div style="background-color: #f6f6fb">
            <div>
              <h2 style="font-size: 24px; font-weight: 300">
                배움의 기쁨을 세상 모두에게.<br>
                <span style="font-size: 32px; font-weight: 700">
                  많은 코둥이들이 구독하고 있어요!
                </span>
              </h2>

              ...

            </div>
          </div>


          적용할 크기와 여백

          - 후기가 있는 p 태그
            안쪽 여백: 24px
            바깥 여백: 세로 32px, 가로 0

          - 너비를 넣을 <div> 태그
            너비: 640px
            안쪽 여백: 세로 120px, 가로 30px
            바깥 여백: 세로 0, 가로 자동 (알아서 여백 만들어 주기)

  <!DOCTYPE html>
  <html>
    <head>
      <title>Weekly Codeit 구독하기</title>
        <meta charset="utf-8">
      <link rel="preconnect" href="https://fonts.googleapis.com">
      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
      <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&family=Poppins&display=swap" rel="stylesheet">
      </head>
      <body style="font-family: Poppins, 'Noto Sans Korean', sans-serif; text-align: center">
      <div style="background-color: #703fda; color: #ffffff">
        <h1>Weekly Codeit</h1>
        <p>
          금요일에 만나는<br>
          코딩 한 스푼
        </p>
      </div>
      <div>
        <h2 style="font-size: 24px; font-weight: 300">
          코드잇이 엄선한<br>
          <span style="font-size: 32px; font-weight: 700">프로그래밍 꿀팁</span>
        </h2>
        <img src="banner-programming.png">
        <p>
          컴퓨터 개론, 프로그래밍 기초, 업무 자동화 ...<br>
          인기 코드잇 강의를 뉴스레터로 만나보세요.
        </p>
        <p>
          유용한 팁과 개발 지식을 매주 금요일 여러분의 메일함으로 보내드려요.
        </p>
        <p>
          <a href="https://codeit.kr/catalog" style="color: #7844e8">
            수업 살펴보기
          </a>
        </p>
      </div>
      <div style="background-color: #f6f6fb">
        <div style="width: 640px; padding: 120px 30px; margin: 0 auto;">
          <h2 style="font-size: 24px; font-weight: 300">
            배움의 기쁨을 세상 모두에게.<br>
            <span style="font-size: 32px; font-weight: 700">
              많은 코둥이들이 구독하고 있어요!
            </span>
          </h2>
          <img src="banner-students.png">
          <p style="background-color: #ffffff; text-align: left; padding: 24px; margin: 32px 0;">
            <span style="color: #b8b7ba">iloveprincess 님</span><br>
            안녕하세요, 5년차 코둥이입니다! 제가 구독 중인 뉴스레터 중 가장 읽기 편하고 재밌어요.
            매주 금요일이 기다려지네요 :) 
          </p>
          <p style="background-color: #ffffff; text-align: left; padding: 24px; margin: 32px 0;">
            <span style="color: #b8b7ba">코드냠냠 님</span><br>
            뉴스레터 정말 잘 보고 있습니다. 다양한 주제에 대한 소개 덕분에 기술 면접에서도 당황하지 않을 수 있었어요!
            항상 감사드립니다.
          </p>
          <p style="background-color: #ffffff; text-align: left; padding: 24px; margin: 32px 0;">
            <span style="color: #b8b7ba">냐리 님</span><br>
            덕분에 프로그래밍 상식이 풍부해지는 느낌임. 깊이있는 내용을 알기 쉽게 소개해줘서 더 좋은듯.
            초보 코둥이들에게 추천해요.
          </p>
          <p>
            <a href="https://codeit.kr/community" style="color: #7844e8">
              후기 더 보기
            </a>
          </p>
        </div>
      </div>
      <div style="background-color: #7844e8; color: #ffffff">
        <h2>
          코딩이 즐거워지는 뉴스레터,<br>
          Weekly Codeit
        </h2>
      </div>
      <div style="background-color: #5b2eb0; color: #ffffff">
        <div style="text-align: left">
          <p>
            Weekly Codeit
          </p>
          <p>
            Weekly Codeit 을 아직 구독하지 않으셨다면? 구독 신청 Subscribe<br>
            최신 뉴스레터들을 놓치지 않기 위해 weekly@codeit.kr을 메일 주소록에 추가해주세요
          </p>
          <p>
            (주)코드잇 | 서울 중구 청계천로 100 시그니쳐타워 동관 10층 | 수신 거부 Unsubscribe
          </p>
        </div>
      </div>
      </body>
  </html> 

    - Codechella Music Festival

      → 코드잇 마케팅팀 박유림 씨는 2025년 3월 1일 갑작스러운 이메일을 하나 받았습니다.
      → 코드잇에서는 2025년 5월 헌대카드 울트라콘서트와 함께 Codechella Music Festival을
        개최하기로 했는데요.
      → 2개월밖에 남지 않은 시점에 미완성인 포스터 HTML 파일을 전달 받았습니다.
      → 파일을 열어보니 글꼴이랑 글꼴 크기 같은 건 적용되어 있는데요. 
        디자인 시안과 약간씩 다른 부분이 있네요.
      → 지금까지 배운 CSS 속성들을 활용해서 유림씨를 도와줍시다.
      → 아래의 디자인 시안, 수정할 페이지, 그리고 수정할 부분을 참고해서 CSS 코드를 추가해주세요!

    이번 실습은 여태까지 배운 CSS를 모두 활용하기 때문에 어떤 건 잘 기억나지 않을 수 있는데요, 
    자주 쓰다 보면 자연스럽게 외워질 테니까 너무 걱정하지 않아도 됩니다. 
    힌트를 활용하거나 앞에서 들었던 레슨을 다시 확인하면서 하나씩 적용해 보세요.

    수정할 부분

    - 배경색이 안 맞음
      <body> 태그에 배경색으로 #fcf1fe 넣기

    - 본문 <div> 영역(header.png 아랫부분)의 너비랑 바깥 여백이 안 맞음
      너비 560px
      세로 바깥 여백 24px
      가로 바깥 여백 자동(알아서 채워 넣기)

    - 두 번째 본문(Saturday May 17 ... 부분) 정렬이 안 맞음
      <div> 태그에 오른쪽 정렬 추가하기

    - “Returning to the Desert / Swedish House Mafia” 부분에 글자 크기, 굵기 안 맞음
      “Returning to the Desert” 크기 16px, 굵기 300
      “Swedish House Mafia” 크기 24px

    - 푸터(맨 아랫부분)에 글자색이 안 맞음
      <div> 태그에 글자색으로 #ffffff 넣기

  <!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8">
      <title>Codechella Festival</title>
      <link rel="preconnect" href="https://fonts.googleapis.com">
      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
      <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;700&display=swap" rel="stylesheet">
    </head>
    <body style="font-family: Poppins, sans-serif; font-size: 16px; font-weight: 700; margin: 0; background-color: #fcf1fe;">
      <div style="padding: 56px;">
        <div style="width: 640px; margin: 56px auto">
          <img src="header.png">
        </div>
      <div>
          <div style="width: 560px; margin: 24px auto">
            <h2 style="font-size: 20px; margin: 8px 0">FRIDAY MAY 16 & 23</h2>
            <p style="margin: 8px 0">
              <span style="font-size: 40px; margin: 8px 0">Harry Styles</span><br>
              <span>
                Lil Baby • Daniel Caesar • Phoebe • Bridgers • Big Sean • Grupo •
                Firme • Louis the Child • Baby Keem • Still Woozy. • King Gizzard •
                Snoh Aalegra • City Girls • Madeon • NIKI • Lane 8 • Pink Sweat$ •
                Omar Apollo • Black Coffee • IDLES • Peggy Gou • EPIK HIGH •
                the Marias • Carly Rae Jepsen • Spiritualized • Daphni • the Martinez Brothers •
                Bishop Briggs • MIKA • slowthai Cordae • BADBADNOTGOOD •
              </span>
              <span style="font-size: 12px">
                the Avalanches • Role Model • ARTBAT • Damian Lazarus • TOKiMONSTA •
                Princess Nokia • PUP • the Regrettes • Raveena • Purple Disco Machine •
                Arooj Aftab • Amyl and the Sniffers • Dom Dolla • Logic1000 • the Chats •
                the Hu • John Summit • Jean Dawson • Code Orange • Ela Minus • Jayda G •
                Lost Kings • Lawrence • GG Magree • Giselle Woo & the Night • Owls •
                SOHMI MEUTE • DJ Lord • Dear Humans
              </span>
            </p>
          </div>
          <div style="margin: 24px 0; text-align:right;">
            <h2 style="font-size: 20px; margin: 8px 0">SATURDAY MAY 17 & 24</h2>
            <p style="margin: 8px 0">
              <span style="font-size: 40px; margin: 8px 0">Billie Eilish</span><br>
              <span>
                Flume • Megan Thee Stallion • Disclosure • 21 Savage • Danny Elfman •
                Stromae Giveon • Anitta • BROCKHAMPTON • Rich Brian • girl in red •
                Wallows • Isaiah Rashad • Caribou • Cuco • Conan Gray •
              </span>
              <span style="font-size: 12px">
                Koffee • Tchami • Dixon Caroline Polachek • Turnstile • 100 gecs •
                Freddie Gibbs & Madlib Pabllo Vittar • Hot Chip • DJ Koze •
                Floating Points • Steve Lacy • Arlo Parks •
                Rina Sawayama • Japanese Breakfast • Masego • Chelsea Cutler •
                Nicki Nicole • Richie Hawtin • Beach Bunny • Amber Mark • Ed Maverick •
                Current Joys • black midi • Chris Liebing • Kyary Pamyu Pamyu • 
                Inner Wave • ANNA • Holly Humberstone • Niliifer Yanya • L'Imperatrice •
                Emo Nite • Alaina Castillo • Paco Osuna • Beach Goons • VINSSA • Mannequin
                Pussy • Sama' Abdulhadi • Whipped Cream • DJ Holographic • Yard
                Act • ayla Benitez • Miane
              </span>
            </p>
          </div>
          <div style="margin: 24px 0">
            <h2 style="font-size: 20px; margin: 8px 0">SUNDAY MAY 18</h2>
            <p style="margin: 8px 0">
              <span style="font-size: 40px; margin: 8px 0">Ye</span><br>
              <span>
                X24 • Doja Cat • Joji • Jamie XX • Run the Jewels • Karol G •
                Maggie Rogers • FAri Lennox • Banda MS • Fatboy Slim • Maneskin •
                J.I.D • SLANDER • Solomun • Jessie Reyez • Denzel Curry • FINNEAS •
                Vince Staples •
              </span>
              <span style="font-size: 12px">
                Dave • Fred again.. • Duck Sauce • Chicano Batman • Duke Dumont •
                Kim Petras • Orville Peck • Natanael Cano • beabadoobee • Belly •
                the Bleised Madonna + Honey Dijon • Alec Benjamin • Ali Gatie •
                Surf Curse • Griselda • Michael Bibi • Nathy Peluso • Maxo Kream •
                Bedouin • Emotional Oranges • Channel Tres • Yola • Hayden James •
                Molchat Doma • Crumb • Olivia O'Brien • Eyedress • Sampa the Great •
                Satori • Viagra Boys • Adam Port • Altin Gun • Skegss • Luttrell •
                Mariah the Scientist • AMEME • Carino • Cole Knight
              </span>
            </p>
          </div>
          <div style="text-align: center; margin: 24px 0">
            <h2 style="margin: 8px 0; font-size: 16px; font-weight: 300;">Returning to the Desert</h2>
            <p style="margin: 0; font-size: 24px;">Swedish House Mafia</p>
          </div>
        </div>
      </div>
      <img src="palm_tree_background.png" style="display: block; width: 100%">
      <div style="background-color: #272928; padding: 32px; color: #ffffff;">
        <div style="text-align: center; width: 560px; margin: 0 auto">
          <div style="margin: 24px 0">
            <h2 style="font-size: 16px; font-weight: 300; margin: 8px 0">Featuring</h2>
            <p style="font-size: 24px; margin: 8px 0">88rising's HEAD IN THE CLOUDS FOREVER</p>
          </div>
          <div style="margin: 24px 0;">
            <h2 style="font-size: 16px; font-weight: 300; margin: 0">Large-scale art installations by</h2>
            <p style="font-size: 14px; margin: 0">
              Architensions • Cristopher Cichocki • Kiki Van Eijk • Los Dos •
              Estudio Normal • Oana Stanescu • NEWSUBSTANCE • Do LaB • Robert Bose
            </p>
          </div>
        </div>
      </div>
    </body>
  </html>

    → 배경색이 안 맞음
       background-color라는 CSS 속성으로 적용
       <body> 태그의 style 속성에 background-color: #fcf1fe를 추가

       <body style="font-family: Poppins, sans-serif; font-size: 16px; font-weight: 700;
       margin: 0; background-color: #fcf1fe">
        ...
       </body>


    → 본문 영역 <div>의 너비랑 여백이 안 맞음
      header.png 이미지 아래에 있는 <div> 태그에 width: 560px; margin: 24px auto를 추가

      <body style="font-family: Poppins, sans-serif; font-size: 16px; font-weight: 700; margin: 0; background-color: #fcf1fe">
        <div style="padding: 56px">
          <div style="width: 640px; margin: 56px auto">
            <img src="header.png">
          </div>
          <div style="width: 560px; margin: 24px auto">
            ...
          </div>
      </body>


    → 두 번째 본문(Saturday May 17 ... 부분) 정렬이 안 맞음

       <div style="margin: 24px 0; text-align: right">
          <h2 style="font-size: 20px; margin: 8px 0">SATURDAY MAY 17 & 24</h2>
          <p style="margin: 8px 0">
            ...
          </p>
       </div>


    → “Returning to the Desert / Swedish House Mafia” 부분에 글자 크기, 굵기 안 맞음

      <div style="text-align: center; margin: 24px 0">
        <h2 style="margin: 8px 0; font-size: 16px; font-weight: 300">Returning to the Desert</h2>
        <p style="margin: 0; font-size: 24px">Swedish House Mafia</p>
      </div>


    → 푸터(맨 아랫부분)에 글자색이 안 맞음

       <div style="background-color: #272928; padding: 32px; color: #ffffff">
          <div style="text-align: center; width: 560px; margin: 0 auto">
            <div style="margin: 24px 0">
              <h2 style="font-size: 16px; font-weight: 300; margin: 8px 0">Featuring</h2>
              <p style="font-size: 24px; margin: 8px 0">88rising's HEAD IN THE CLOUDS FOREVER</p>
            </div>
            <div style="margin: 24px 0">
              <h2 style="font-size: 16px; font-weight: 300; margin: 0">Large-scale art installations by</h2>
              <p style="font-size: 14px; margin: 0">
                Architensions • Cristopher Cichocki • Kiki Van Eijk • Los Dos •
                Estudio Normal • Oana Stanescu • NEWSUBSTANCE • Do LaB • Robert Bose
              </p>
            </div>
          </div>
        </div>

    - CSS 문법 정리

      style 속성
      → 태그에 CSS를 적용하려면 style 속성을 사용

      <div style="...">
         ...
      </div>


      CSS 속성과 CSS 속성 값
      → CSS 코드를 추가할 때는 CSS 속성: CSS 속성값 형태로 적습니다.

      <div style="color: #272928">
         ...
      </div>


      여러 개의 CSS 속성 사용하기
      → 여러 개의 CSS 속성을 사용할 때는 세미콜론(;)으로 구분합니다.

      <div style="color: #272928; background-color: #eeeeee">
         ...
      </div>


      CSS 기본 단위

      (1) 색 이름
      → red, green, yellow처럼 색상을 이름으로 사용하는 방식
      → 다양한 색을 표현하는데 한계가 있기 때문에 거의 사용하지 않습니다.

      (2) 색상 코드
      → 색상을 HEX(16진수)로 표현한 값
      → 구글 검색에서 'Color Picker' 같은 걸 검색해서 색상 코드를 확인해 볼 수 있다.
      → 주로 이미지 편집 프로그램 같은 데서 디자인을 하면서 색상 코드를 정하게 됩니다.

      (3) 픽셀(px)
      → 화면에서 그려지는 가장 작은 정사각형


      CSS 속성

      (1) 배경색
      background-color: #272928

      (2) 글자색
      color: #ffffff

      (3) 글꼴
      → 글꼴 이름이 띄어쓰기가 있는 경우엔 따옴표로 감싸 줍니다.
      → sans-serif나 serif를 사용하면 산 세리프나 세리프 타입의 글꼴은 웹 브라우저가 알아서 적용
      font-family: Poppins, 'Noto Sans KR', sans-serif

      (4) 글자 크기
      font-size: 16px

      (5) 글자 굵기
      font-weight: 400

      (6) 너비
      width: 560px

      (7) 높이
      height: 380px

      (8) 안쪽 여백

          세로, 가로 10px 예시
          padding: 10px

          세로 10px, 가로 20px 예시
          padding: 10px 20px

      (9) 바깥 여백

          세로, 가로 10px 예시
          margin: 10px

          세로 10px, 가로 20px 예시
          margin: 10px 20px

          세로 10px, 가로 자동(알아서 채워 넣기) 예시
          margin: 10px auto

       ※ auto는 바깥 여백(margin)의 가로에서만 동작

- 웹 사이트는 어떻게 만드나요?

  → HTML(Hyper Text Markup Language)는 웹사이트에 들어갈 내용을 담당
  → CSS(Cascading Style Sheet)는 웹사이트의 스타일을 담당

- 나의 첫 웹사이트

    <!DOCTYPE html>
    → document type이 HTML 즉, HTML이라는 언어로 작성하겠다는 뜻

    <html lang="ko">
    → HTML 파일 전체를 감싸는 태그

    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>

    <body>
    </body>
    </html>

  → 꺾쇠로 단어를 감싼 것을 HTML에서는 태그라고 부른다.
  → 태그는 시작 태그와 종료 태그로 구성된다. 

- 1분 만에 웹사이트 런칭하기

  → 내가 만든 HTML 파일은 내 컴퓨터 안에서만 실행된다.
  → 다른 사람들이 나의 웹사이트를 보게 하려면 인터넷에 내가 만든 HTML 파일을 올려야 한다.

  (1) 구글에서 netlify라고 검색한다.
      netlify는 웹 서비스 배포를 도와주는 클라우드 서비스

  (2) 배포하기에서 배포를 하려는 파일을 선택하여 업로드한다.

  (3) 변경한 사이트의 이름에 맞춰 주소를 가지고 모바일에서도 접속해보고 pc에서도 접속해보자.

2. HTML 시작하기

- 사이트에 이름 붙이기

  → 탭의 이름이 127.0.0.1:5500/index.html인 이유는 사이트의 이름을 붙여주지 않아서 
    브라우저가 그냥 파일의 이름을 보여주는 것
  → 페이지의 이름은 title이라는 태그를 사용하여 사이트의 이름을 붙여줄 수 있다.

index. html

  <!DOCTYPE html>
  <html lang="ko">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Weekly Codeit</title>
  </head>
  <body>
    안녕 HTML
  </body>
  </html>

  → title태그는 페이지의 정보를 나타내는 head 태그 안에 있으므로 웹 사이트에서 보여지지 않는다.
  → HTML 파일에서는 화면에 나타나지 않아도 되는 페이지 정보를 담고 있는 head 태그와
    안녕 HTML 처럼 화면에 나타나야 하는 내용이 담긴 body태그로 나눠진다.
  → head 태그 안에 title 태그가 있는 것처럼 태그 안의 태그가 있는 것을 
    하위 태그, 자식 태그라고 부른다.
  → 코드 안에 들여쓰기 즉, Indentation이 되어 있는 이유는 코드를 읽기 좋게 하기 위함이며,
    동작에는 아무런 영향을 주지 않아 마음대로 넣을 수 있으나 시작 태그와 종료 태그의 들여쓰기를
    일치시키고, 하위 태그는 한 단계 더 들여쓰는 방식으로 작성한다.

- 구독 페이지 : 사이트 이름

  → 사이트의 이름을 "Weekly Codeit"로 변경
  → 페이지에 대한 정보랑 페이지 내용을 구분하기 위해서 <head> 태그랑 <body> 태그로 나눈다.

  <!DOCTYPE html>
  <html lang="ko">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Weekly Codeit</title>
  </head>
  <body>
    안녕 HTML
  </body>
  </html>

- 한글이 깨져요 !

→ 사파리 브라우저에서는 작성한 코드가 깨져서 나타난다. 
  브라우저마다 다르지만 글자가 깨져서 이상하게 보이거나 정상적으로 보이는 경우가 있다.
→ 글자가 깨지는 이뉴는 인코딩(Encoding)이 달라서 그런 것


인코딩(Encoding)이란 ?

→ 컴퓨터에서 문자를 저장할 때 숫자 형태로 저장하는데 어떤 숫자가 어떤 문자에 해당하는지 
  정해놓은 규칙을 인코딩이라고 한다.
→ 인코딩은 여러가지 종류가 있으므로 인코딩을 잘못 사용하면 엉뚱한 문자를 보여준다.
→ <meta charset="UTF-8"> UTF-8은 한글을 지원하는 대표적인 인코딩 방식으로 해당 코드를 작성하면
  브라우저 환경이 다르더라도 한글이 깨져서 나타나는 현상을 방지한다.

- 제목

  → 제목은 h1, h2, h3 ... 이런 식으로 태그를 사용하여 작성
  → title은 웹 사이트의 이름을 말하는 태그이고, h1, h2와 같은 제목 태그는 화면에 나타나는 내용을
    담은 태그

  <!DOCTYPE html>
  <html lang="ko">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Weekly Codeit</title>
  </head>
  <body>
    <h1>Weekly Codeit</h1>
    <h2>생산성을 높여줄 유닉스 커맨드 꿀팁</h2>
    <h2>머신 러닝을 통한 추천 시스템 (내용 기반, 협업 필터링)</h2>
    <h2>Tips & Tricks: HTML 코드 편하게 입력하는 법</h2>
    <h2>코둥이 퀴즈</h2>
  </body>
  </html>

- 구독 페이지 : 제목 넣기

  → 아래 예시 이미지를 참고해서 제목을 넣어주세요.

  <!DOCTYPE html>
  <html>
    <head>
      <title>Weekly Codeit 구독하기</title>
      <meta charset="utf-8">
    </head>
    <body>
      <h1>Weekly Codeit</h1>
      <h2>코드잇이 엄선한 프로그래밍 꿀팁</h2>
      <h2>배움의 기쁨을 세상 모두에게. 많은 코둥이들이 구독하고 있어요!</h2>
      <h2>코딩이 즐거워지는 뉴스레터, Weekly Codeit</h2>
    </body>
  </html>

  → 큰 제목은 h1 태그를 사용하여 작성하고, 작은 제목과 하위 제목은 h2, h3, h4...를 사용

- 본문 넣기

  → 본문을 넣을 때, 본문의 내용을 태그 없이 그냥 넣어버리면 줄 구분이 되지 않는다.
  → p(paragraph) 태그를 사용하여 본문을 넣어주면 읽기 쉽도록 단락이 나눠저 구분이 잘 된다.

- 구독 페이지 : 본문 넣기

  → 예시 이미지를 참고해서 구독 페이지에 들어갈 본문을 작성

  <!DOCTYPE html>
  <html>
    <head>
      <title>Weekly Codeit 구독하기</title>
      <meta charset="utf-8">
    </head>
    <body>
      <h1>Weekly Codeit</h1>
      <p>
        금요일에 만나는 코딩 한 스푼
      </p>
      <h2>
        코드잇이 엄선한 프로그래밍 꿀팁
      </h2>
      <p>
        컴퓨터 개론, 프로그래밍 기초, 업무 자동화 ... 인기 코드잇 강의를 뉴스레터로 만나보세요.
      </p>
      <p>
        유용한 팁과 개발 지식을 매주 금요일 여러분의 메일함으로 보내드려요.
      </p>
      <h2>
        배움의 기쁨을 세상 모두에게.
        많은 코둥이들이 구독하고 있어요!
      </h2>
      <p>
        iloveprincess 님 안녕하세요, 5년차 코둥이입니다! 제가 구독 중인 뉴스레터 중 가장 읽기 편하고 재밌어요. 매주 금요일이 기다려지네요 :)
      </p>
      <p>
        코드냠냠 님 뉴스레터 정말 잘 보고 있습니다. 다양한 주제에 대한 소개 덕분에 기술 면접에서도 당황하지 않을 수 있었어요! 항상 감사드립니다.
      </p>
      <p>
        냐리 님 덕분에 프로그래밍 상식이 풍부해지는 느낌임. 깊이있는 내용을 알기 쉽게 소개해줘서 더 좋은듯. 초보 코둥이들에게 추천해요.
      </p>
      <h2>
        코딩이 즐거워지는 뉴스레터,
        Weekly Codeit
      </h2>
      <p>
        Weekly Codeit
      </p>
      <p>
        Weekly Codeit 을 아직 구독하지 않으셨다면? 구독 신청 Subscribe 최신 뉴스레터들을 놓치지 않기 위해 weekly@codeit.kr을 메일 주소록에 추가해주세요
      </p>
      <p>
        (주)코드잇 | 서울 중구 청계천로 100 시그니쳐타워 동관 10층 | 수신 거부 Unsubscribe
      </p>
    </body>
  </html>

- 줄 바꿈

  → HTML에서는 기본적으로 줄바꿈이 있더라도 보여지지 않는다.
  → 창이 넓어지면 넓어진 만큼 글을 채워서 보여주고, 창이 좁아지면 글을 넘겨서 보여준다.
  → 원하는 부분에서 줄을 바꾸고 싶다면 br(break line) 태그를 사용한다.

    <h2>코둥이 퀴즈</h2>
      <p>머신 러닝에서 유저에게 유저가 좋아하거나<br>
      구매할만할 상품을 추천해 주는 프로그램을<br>
      □□ □□□ (이)라고 부른다.
      빈 칸에 들어갈 다섯 글자를 답장으로 보내주세요.<br>
      선착순 200분께 코드잇 시그니쳐 굿즈를 보내드려요.</p>

  → 이런 식으로 원하는 위치에서 줄이 잘 바뀌어 있는 것을 확인할 수 있다.

- 구독 페이지 : 제목에 줄바꿈 넣기

  → 예시 이미지를 참고해서 작은 제목들에 줄 바꿈을 넣어보자.

  <!DOCTYPE html>
  <html>
    <head>
      <title>Weekly Codeit 구독하기</title>
        <meta charset="utf-8">
      </head>
      <body>
        <h1>Weekly Codeit</h1>
      <p>
        금요일에 만나는
        코딩 한 스푼
      </p>
        <h2>
        코드잇이 엄선한<br>
        프로그래밍 꿀팁
      </h2>
      <p>
        컴퓨터 개론, 프로그래밍 기초, 업무 자동화 ...
        인기 코드잇 강의를 뉴스레터로 만나보세요.
      </p>
      <p>
        유용한 팁과 개발 지식을 매주 금요일 여러분의 메일함으로 보내드려요.
      </p>
        <h2>
        배움의 기쁨을 세상 모두에게. <br>
        많은 코둥이들이 구독하고 있어요!
      </h2>
      <p>
        iloveprincess 님
        안녕하세요, 5년차 코둥이입니다! 제가 구독 중인 뉴스레터 중 가장 읽기 편하고 재밌어요.
        매주 금요일이 기다려지네요 :) 
      </p>
      <p>
        코드냠냠 님
        뉴스레터 정말 잘 보고 있습니다. 다양한 주제에 대한 소개 덕분에 기술 면접에서도 당황하지 않을 수 있었어요!
        항상 감사드립니다.
      </p>
      <p>
        냐리 님
        덕분에 프로그래밍 상식이 풍부해지는 느낌임. 깊이있는 내용을 알기 쉽게 소개해줘서 더 좋은듯.
        초보 코둥이들에게 추천해요.
      </p>
      <h2>
        코딩이 즐거워지는 뉴스레터,<br>
        Weekly Codeit
      </h2>
      <p>
        Weekly Codeit
      </p>
      <p>
        Weekly Codeit 을 아직 구독하지 않으셨다면? 구독 신청 Subscribe<br>
        최신 뉴스레터들을 놓치지 않기 위해 weekly@codeit.kr을 메일 주소록에 추가해주세요
      </p>
      <p>
        (주)코드잇 | 서울 중구 청계천로 100 시그니쳐타워 동관 10층 | 수신 거부 Unsubscribe
      </p>
      </body>
  </html>

- 꺾쇠 기호 넣는 법

  → HTML 문법에서는 꺾쇠 기호(<, >)를 태그 작성 시 사용

  페이지 내용에서 꺾쇠를 표현하고 싶을 때에는 어떻게 해야 할까?

<p>
  HTML 파일을 작성하려면 DOCTYPE, <html>, <head>, <body> ... 적어야 할 것이 참
  많습니다. 이럴때 유용하게 쓸 수 있는 기능이 있는데요. VS Code에서는
  !(느낌표)를 입력하고 Tab 키나 Enter 키를 누르면 HTML 코드를 한번에
  입력할 수 있답니다!
</p>

  → 위의 코드를 작성 후 확인하면 이미지처럼 꺾쇠가 있는 단어가 사라진다.
    왜냐하면 웹 브라우저 입장에서는 꺾쇠가 있는 글자를 태그로 해석했기 때문이다.

  → 꺾쇠를 글자로 입력하고 싶을 때에는 
    <(앰퍼샌드 엘 티 세미콜론) >(앰퍼샌드 지 티 세미콜론)으로 입력해야 한다.

<p>
  HTML 파일을 작성하려면 DOCTYPE, &lt;html&gt;, &lt;head&gt;, &lt;body&gt; ...적어야 할 것이 참
  많습니다. 이럴때 유용하게 쓸 수 있는 기능이 있는데요. VS Code에서는
  !(느낌표)를 입력하고 Tab 키나 Enter 키를 누르면 HTML 코드를 한번에 입력할
  수 있답니다!
</p>

- 링크

  → 하이퍼링크라고도 하며, 클릭했을 때 다른 페이지로 넘어가는 것을 링크라고 부른다.
  → 링크는 <a> 태그를 사용하여 넣을 수 있다.
  → href라는 속성을 사용하여 클릭했을 때 어디로 넘어가는지 주소를 넣을 수 있다.
    이 때, href라는 것은 속성이고 = 이후의 따옴표 안의 주소는 속성값을 나타난다.
    또, href는 hypertext Reference의 약자로 하이퍼텍스트 참조라는 뜻

  <!DOCTYPE html>
  <html lang="ko">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Weekly Codeit</title>
  </head>
  <body>
    <h1>Weekly Codeit</h1>
      <h2>생산성을 높여줄 유닉스 커맨드 꿀팁</h2>
        <p>생각만하면 모든게 이루어진다! 꿈 같은 이야기죠? 하지만 유닉스 커맨드를 사용하면 더 이상 꿈이 아니랍니다. 마우스 대신에 유닉스 명령어들을 사용하면 복잡한 일도 한 번에 뚝딱하거든요.
          유닉스 커맨드를 사용할 때 알아두면 좋은, 작업 효율성을 UP! UP! 시켜주는 꿀팁 몇 가지를 준비해봤으니까, 한 번 살펴보세요!</p>
        <a href="https://blog.codeit.kr/post/6052b25f701df852a9157516">자세히 보기</a>

      <h2>머신 러닝을 통한 추천 시스템 (내용 기반, 협업 필터링)</h2>
        <p>넷플릭스나 애플 뮤직은 어떻게 영화나 음악을 추천해주는 걸까요? 일단 추천 시스템이란 유저에게 유저가 좋아하거나 구매할 만한 상품을 추천해 주는 프로그램을 의미합니다.
          내가 평소에 쓰는 서비스들은 이미 추천 서비스를 사용하고 있을지도 모릅니다. (놀랍죠?) 유저 별로 아마존이나 쿠팡에서 물건들을, 넷플릭스에서 영화들을, 애플 뮤직에서 노래를 보여주는 것. 모두 추천 시스템을 사용해서 첫 화면에 보여주기 때문이죠.
        </p>
        <a href="https://blog.codeit.kr/post/6054359298b173400407da01">자세히 보기</a>

      <h2>Tips & Tricks: HTML 코드 편하게 입력하는 법</h2>
        <p>HTML 파일을 작성하려면 DOCTYPE, html, head, body ... 적어야 할 것이 참 많습니다. 이럴때 유용하게 쓸 수 있는 기능이 있는데요. VS Code에서는 !(느낌표)를 입력하고 Tab 키나 Enter 키를 누르면 HTML  코드를 한번에 입력할 수 있답니다!
          이건 Emmet 이라고 부르는 문법의 일부인데요. Emmet은 개미라는 뜻이랍니다. 개미는 자기 몸집의 50배나 넘는 물건을 옮길 수 있다는데요. 개미처럼 Emmet의 문법도 짧은 단어만 입력하면 긴 HTML 코드를 뚝딱 만들어 낼 수 있으니까, 한 번 살펴보시는 것도 좋을 거 같네요.
        </p>

      <h2>코둥이 퀴즈</h2>
        <p>머신 러닝에서 유저에게 유저가 좋아하거나<br>구매할만할 상품을 추천해 주는 프로그램을<br>□□ □□□ (이)라고 부른다.
          빈 칸에 들어갈 다섯 글자를 답장으로 보내주세요.<br>선착순 200분께 코드잇 시그니쳐 굿즈를 보내드려요.</p>

          <p>Weekly Codeit</p>
          <p>(주)코드잇 | 서울 중구 청계천로 100 시그니쳐타워 동관 10층</p>
          <p>Weekly Codeit 을 아직 구독하지 않으셨다면? 구독 신청하기</p>
          <p>뉴스레터가 보이지 않는다면, weekly@codeit.kr을 메일 주소록에 추가해주세요.</p>
          <p>수신 거부 Unsubscribe</p>
  </body>
  </html>

- 구독 페이지 : 링크 추가하기

  → "수업 살펴보기"를 누르면 https://codeit.kr/catalog로 이동
  → "후기 더 보기"를 누르면  https://codeit.kr/reviews로 이동

  <!DOCTYPE html>
  <html>
    <head>
      <title>Weekly Codeit 구독하기</title>
        <meta charset="utf-8">
      </head>
      <body>
        <h1>Weekly Codeit</h1>
      <p>
        금요일에 만나는
        코딩 한 스푼
      </p>
        <h2>
        코드잇이 엄선한<br>
        프로그래밍 꿀팁
      </h2>
      <p>
        컴퓨터 개론, 프로그래밍 기초, 업무 자동화 ...
        인기 코드잇 강의를 뉴스레터로 만나보세요.
      </p>
      <p>
        유용한 팁과 개발 지식을 매주 금요일 여러분의 메일함으로 보내드려요.
      </p>
      <a href="https://codeit.kr/catalog">수업 살펴보기</a>
        <h2>
        배움의 기쁨을 세상 모두에게.<br>
        많은 코둥이들이 구독하고 있어요!
      </h2>
      <p>
        iloveprincess 님
        안녕하세요, 5년차 코둥이입니다! 제가 구독 중인 뉴스레터 중 가장 읽기 편하고 재밌어요.
        매주 금요일이 기다려지네요 :) 
      </p>
      <p>
        코드냠냠 님
        뉴스레터 정말 잘 보고 있습니다. 다양한 주제에 대한 소개 덕분에 기술 면접에서도 당황하지 않을 수 있었어요!
        항상 감사드립니다.
      </p>
      <p>
        냐리 님
        덕분에 프로그래밍 상식이 풍부해지는 느낌임. 깊이있는 내용을 알기 쉽게 소개해줘서 더 좋은듯.
        초보 코둥이들에게 추천해요.
      </p>
      <a href="https://codeit.kr/reviews">후기 더 보기</a>
      <h2>
        코딩이 즐거워지는 뉴스레터,<br>
        Weekly Codeit
      </h2>
      <p>
        Weekly Codeit
      </p>
      <p>
        Weekly Codeit 을 아직 구독하지 않으셨다면? 구독 신청 Subscribe<br>
        최신 뉴스레터들을 놓치지 않기 위해 weekly@codeit.kr을 메일 주소록에 추가해주세요
      </p>
      <p>
        (주)코드잇 | 서울 중구 청계천로 100 시그니쳐타워 동관 10층 | 수신 거부 Unsubscribe
      </p>
      </body>
  </html>

  → 링크를 추가할 때는 <a>태그를 사용한다.
  → a태그의 href라는 속성으로 이동할 주소를 지정할 수 있다.

- 이미지

  → img태그를 사용하여 페이지에 이미지를 넣을 수 있다.
    img는 image의 약자이며, src는 source의 줄임말로 출처를 나타낸다.
  → 앞에서 배운 내용과 같이 img 태그는 src라는 속성을 가지고 있으며, 속성에 사진의 주소를 넣으면
    사진의 주소는 속성 값에 해당한다.
  → img 태그는 안에 내용이 필요없기 때문에 시작태그 하나짜리로 쓸 수 있다.

  <!DOCTYPE html>
  <html lang="ko">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Weekly Codeit</title>
  </head>
  <body>
    <h1>Weekly Codeit</h1>
    <img src="https://commons.wikimedia.org/wiki/File:Kim_2011_World_Championship_FS.jpg" alt="">
      <h2>생산성을 높여줄 유닉스 커맨드 꿀팁</h2>
        <p>생각만하면 모든게 이루어진다! 꿈 같은 이야기죠? 하지만 유닉스 커맨드를 사용하면 더 이상 꿈이 아니랍니다. 마우스 대신에 유닉스 명령어들을 사용하면 복잡한 일도 한 번에 뚝딱하거든요.
          유닉스 커맨드를 사용할 때 알아두면 좋은, 작업 효율성을 UP! UP! 시켜주는 꿀팁 몇 가지를 준비해봤으니까, 한 번 살펴보세요!</p>
        <a href="https://blog.codeit.kr/post/6052b25f701df852a9157516">자세히 보기</a>

      <h2>머신 러닝을 통한 추천 시스템 (내용 기반, 협업 필터링)</h2>
        <p>넷플릭스나 애플 뮤직은 어떻게 영화나 음악을 추천해주는 걸까요? 일단 추천 시스템이란 유저에게 유저가 좋아하거나 구매할 만한 상품을 추천해 주는 프로그램을 의미합니다.
          내가 평소에 쓰는 서비스들은 이미 추천 서비스를 사용하고 있을지도 모릅니다. (놀랍죠?) 유저 별로 아마존이나 쿠팡에서 물건들을, 넷플릭스에서 영화들을, 애플 뮤직에서 노래를 보여주는 것. 모두 추천 시스템을 사용해서 첫 화면에 보여주기 때문이죠.
        </p>
        <a href="https://blog.codeit.kr/post/6054359298b173400407da01">자세히 보기</a>

      <h2>Tips & Tricks: HTML 코드 편하게 입력하는 법</h2>
        <p>HTML 파일을 작성하려면 DOCTYPE, html, head, body ... 적어야 할 것이 참 많습니다. 이럴때 유용하게 쓸 수 있는 기능이 있는데요. VS Code에서는 !(느낌표)를 입력하고 Tab 키나 Enter 키를 누르면 HTML  코드를 한번에 입력할 수 있답니다!
          이건 Emmet 이라고 부르는 문법의 일부인데요. Emmet은 개미라는 뜻이랍니다. 개미는 자기 몸집의 50배나 넘는 물건을 옮길 수 있다는데요. 개미처럼 Emmet의 문법도 짧은 단어만 입력하면 긴 HTML 코드를 뚝딱 만들어 낼 수 있으니까, 한 번 살펴보시는 것도 좋을 거 같네요.
        </p>

      <h2>코둥이 퀴즈</h2>
        <p>머신 러닝에서 유저에게 유저가 좋아하거나<br>구매할만할 상품을 추천해 주는 프로그램을<br>□□ □□□ (이)라고 부른다.
          빈 칸에 들어갈 다섯 글자를 답장으로 보내주세요.<br>선착순 200분께 코드잇 시그니쳐 굿즈를 보내드려요.</p>

          <p>Weekly Codeit</p>
          <p>(주)코드잇 | 서울 중구 청계천로 100 시그니쳐타워 동관 10층</p>
          <p>Weekly Codeit 을 아직 구독하지 않으셨다면? 구독 신청하기</p>
          <p>뉴스레터가 보이지 않는다면, weekly@codeit.kr을 메일 주소록에 추가해주세요.</p>
          <p>수신 거부 Unsubscribe</p>
  </body>
  </html>

김연아 이미지는 다음 라이선스를 따릅니다. David W. Carmichael, CC BY-SA 3.0 https://creativecommons.org/licenses/by-sa/3.0, via Wikimedia Commons

  <!DOCTYPE html>
  <html lang="ko">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Weekly Codeit</title>
  </head>
  <body>
    <h1>Weekly Codeit</h1>
    <img src="thumbnail-unix.png" alt="">
      <h2>생산성을 높여줄 유닉스 커맨드 꿀팁</h2>
        <p>생각만하면 모든게 이루어진다! 꿈 같은 이야기죠? 하지만 유닉스 커맨드를 사용하면 더 이상 꿈이 아니랍니다. 마우스 대신에 유닉스 명령어들을 사용하면 복잡한 일도 한 번에 뚝딱하거든요.
          유닉스 커맨드를 사용할 때 알아두면 좋은, 작업 효율성을 UP! UP! 시켜주는 꿀팁 몇 가지를 준비해봤으니까, 한 번 살펴보세요!</p>
        <a href="https://blog.codeit.kr/post/6052b25f701df852a9157516">자세히 보기</a>

    <img src="thumbnail-machine-learning.png" alt="">
      <h2>머신 러닝을 통한 추천 시스템 (내용 기반, 협업 필터링)</h2>
        <p>넷플릭스나 애플 뮤직은 어떻게 영화나 음악을 추천해주는 걸까요? 일단 추천 시스템이란 유저에게 유저가 좋아하거나 구매할 만한 상품을 추천해 주는 프로그램을 의미합니다.
          내가 평소에 쓰는 서비스들은 이미 추천 서비스를 사용하고 있을지도 모릅니다. (놀랍죠?) 유저 별로 아마존이나 쿠팡에서 물건들을, 넷플릭스에서 영화들을, 애플 뮤직에서 노래를 보여주는 것. 모두 추천 시스템을 사용해서 첫 화면에 보여주기 때문이죠.
        </p>
        <a href="https://blog.codeit.kr/post/6054359298b173400407da01">자세히 보기</a>

    <img src="thumbnail-emmet.png" alt="">
      <h2>Tips & Tricks: HTML 코드 편하게 입력하는 법</h2>
        <p>HTML 파일을 작성하려면 DOCTYPE, html, head, body ... 적어야 할 것이 참 많습니다. 이럴때 유용하게 쓸 수 있는 기능이 있는데요. VS Code에서는 !(느낌표)를 입력하고 Tab 키나 Enter 키를 누르면 HTML  코드를 한번에 입력할 수 있답니다!
          이건 Emmet 이라고 부르는 문법의 일부인데요. Emmet은 개미라는 뜻이랍니다. 개미는 자기 몸집의 50배나 넘는 물건을 옮길 수 있다는데요. 개미처럼 Emmet의 문법도 짧은 단어만 입력하면 긴 HTML 코드를 뚝딱 만들어 낼 수 있으니까, 한 번 살펴보시는 것도 좋을 거 같네요.
        </p>

      <h2>코둥이 퀴즈</h2>
        <p>머신 러닝에서 유저에게 유저가 좋아하거나<br>구매할만할 상품을 추천해 주는 프로그램을<br>□□ □□□ (이)라고 부른다.
          빈 칸에 들어갈 다섯 글자를 답장으로 보내주세요.<br>선착순 200분께 코드잇 시그니쳐 굿즈를 보내드려요.</p>

          <p>Weekly Codeit</p>
          <p>(주)코드잇 | 서울 중구 청계천로 100 시그니쳐타워 동관 10층</p>
          <p>Weekly Codeit 을 아직 구독하지 않으셨다면? 구독 신청하기</p>
          <p>뉴스레터가 보이지 않는다면, weekly@codeit.kr을 메일 주소록에 추가해주세요.</p>
          <p>수신 거부 Unsubscribe</p>
  </body>
  </html>

- 구독 페이지 : 이미지 넣기

  → "코드잇이 엄선한 / 프로그래밍 꿀팁" 제목 아래에는 banner-programming.png라는 이미지
  → "배움의 기쁨을 세상 모두에게. / 많은 코둥이들이 구독하고 있어요!" 제목 아래에는
    banner-students.png라는 이미지

  <!DOCTYPE html>
  <html>
    <head>
      <title>Weekly Codeit 구독하기</title>
        <meta charset="utf-8">
      </head>
      <body>
        <h1>Weekly Codeit</h1>
      <p>
        금요일에 만나는
        코딩 한 스푼
      </p>
        <h2>
        코드잇이 엄선한<br>
        프로그래밍 꿀팁
      </h2>
      <img src="banner-programming.png">
      <p>
        컴퓨터 개론, 프로그래밍 기초, 업무 자동화 ...
        인기 코드잇 강의를 뉴스레터로 만나보세요.
      </p>
      <p>
        유용한 팁과 개발 지식을 매주 금요일 여러분의 메일함으로 보내드려요.
      </p>
      <p>
        <a href="https://codeit.kr/catalog">
          수업 살펴보기
        </a>
      </p>
        <h2>
        배움의 기쁨을 세상 모두에게.<br>
        많은 코둥이들이 구독하고 있어요!
      </h2>
      <img src="banner-students.png">
      <p>
        iloveprincess 님
        안녕하세요, 5년차 코둥이입니다! 제가 구독 중인 뉴스레터 중 가장 읽기 편하고 재밌어요.
        매주 금요일이 기다려지네요 :) 
      </p>
      <p>
        코드냠냠 님
        뉴스레터 정말 잘 보고 있습니다. 다양한 주제에 대한 소개 덕분에 기술 면접에서도 당황하지 않을 수 있었어요!
        항상 감사드립니다.
      </p>
      <p>
        냐리 님
        덕분에 프로그래밍 상식이 풍부해지는 느낌임. 깊이있는 내용을 알기 쉽게 소개해줘서 더 좋은듯.
        초보 코둥이들에게 추천해요.
      </p>
      <p>
        <a href="https://codeit.kr/reviews">
          후기 더 보기
        </a>
      </p>
      <h2>
        코딩이 즐거워지는 뉴스레터,<br>
        Weekly Codeit
      </h2>
      <p>
        Weekly Codeit
      </p>
      <p>
        Weekly Codeit 을 아직 구독하지 않으셨다면? 구독 신청 Subscribe<br>
        최신 뉴스레터들을 놓치지 않기 위해 weekly@codeit.kr을 메일 주소록에 추가해주세요
      </p>
      <p>
        (주)코드잇 | 서울 중구 청계천로 100 시그니쳐타워 동관 10층 | 수신 거부 Unsubscribe
      </p>
      </body>
  </html>

  → 이미지는 <img>태그를 사용하여 넣을 수 있고, 시작 태그 하나만 쓰는 태그
  → src 속성으로 경로를 적으면 원하는 이미지를 넣을 수 있다.

- 위키 페이지 만들기

  아래의 순서대로 요소를 넣어 주세요.

  (1) <title> 태그에 인물 이름
  (2) <h1> 태그에서 한글 이름과 줄 바꿈을 하고 괄호로 감싼 영문 이름
  (3) <img> 태그에 인물 사진 (인터넷에 올라와 있는 이미지)
  (4) <p> 태그에 간단한 설명
  (5) 이 인물과 연관 있는 사이트로 링크 (<a> 태그) 한 개

The Royal Society, CC BY-SA 3.0 https://creativecommons.org/licenses/by-sa/3.0, via Wikimedia Commons

  <!DOCTYPE html>
  <html>
    <head>
      <title></title>
      <meta charset="utf-8">
      <title>Elon Musk</title>
    </head>
    <body>
      <h1>일론 머스크</h1>
      <h1>Elon Musk</h1>
      <img src="https://upload.wikimedia.org/wikipedia/commons/3/34/Elon_Musk_Royal_Society_%28crop2%29.jpg">
      <p>전기차 기업 <a href="https://www.tesla.com/ko_kr">Tesla</a>의 테크노킹. 민간 우주 기업 SpaceX, 인공지능 기업 OpenAI 등 다양한 분야에서 활약중인 기업인이다.</p>
    </body>
  </html>

- 영역 나누기

  → 페이지의 내용은 HTML로 작성하고, 스타일은 CSS로 만든다.
  → CSS를 적용할 때 각 태그에다가 적용할 수도 있고, 영역을 나눠놓고 영역에다가 적용할 수도 있다.
  → div 태그와 span 태그를 사용하면 영역을 나눌 수 있다. 
  → div 태그는 영역을 나누는 것 말고는 아무런 모양이나 의미가 없다.
    쉽게 생각해서 눈에 보이지 않는 박스라고 생각하면 된다.

  <!DOCTYPE html>
  <html lang="ko">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Weekly Codeit</title>
  </head>
  <body>
    <div>
      <h1>Weekly <span>Codeit</span></h1>
      <p>금요일에 만나는 코딩 한 스푼</p>
    </div>

    <div>
      <img src="thumbnail-unix.png" alt="">
      <h2>생산성을 높여줄 유닉스 커맨드 꿀팁</h2>
        <p>생각만하면 모든게 이루어진다! 꿈 같은 이야기죠? 하지만 유닉스 커맨드를 사용하면 더 이상 꿈이 아니랍니다. 마우스 대신에 유닉스 명령어들을 사용하면 복잡한 일도 한 번에 뚝딱하거든요.
          유닉스 커맨드를 사용할 때 알아두면 좋은, 작업 효율성을 UP! UP! 시켜주는 꿀팁 몇 가지를 준비해봤으니까, 한 번 살펴보세요!</p>
        <a href="https://blog.codeit.kr/post/6052b25f701df852a9157516">자세히 보기</a>
    </div>

    <div>
      <img src="thumbnail-machine-learning.png" alt="">
      <h2>머신 러닝을 통한 추천 시스템 (내용 기반, 협업 필터링)</h2>
        <p>넷플릭스나 애플 뮤직은 어떻게 영화나 음악을 추천해주는 걸까요? 일단 추천 시스템이란 유저에게 유저가 좋아하거나 구매할 만한 상품을 추천해 주는 프로그램을 의미합니다.
          내가 평소에 쓰는 서비스들은 이미 추천 서비스를 사용하고 있을지도 모릅니다. (놀랍죠?) 유저 별로 아마존이나 쿠팡에서 물건들을, 넷플릭스에서 영화들을, 애플 뮤직에서 노래를 보여주는 것. 모두 추천 시스템을 사용해서 첫 화면에 보여주기 때문이죠.
        </p>
        <a href="https://blog.codeit.kr/post/6054359298b173400407da01">자세히 보기</a>
    </div>

    <div>
      <img src="thumbnail-emmet.png" alt="">
      <h2>Tips & Tricks: HTML 코드 편하게 입력하는 법</h2>
        <p>HTML 파일을 작성하려면 DOCTYPE, html, head, body ... 적어야 할 것이 참 많습니다. 이럴때 유용하게 쓸 수 있는 기능이 있는데요. VS Code에서는 !(느낌표)를 입력하고 Tab 키나 Enter 키를 누르면 HTML  코드를 한번에 입력할 수 있답니다!
          이건 Emmet 이라고 부르는 문법의 일부인데요. Emmet은 개미라는 뜻이랍니다. 개미는 자기 몸집의 50배나 넘는 물건을 옮길 수 있다는데요. 개미처럼 Emmet의 문법도 짧은 단어만 입력하면 긴 HTML 코드를 뚝딱 만들어 낼 수 있으니까, 한 번 살펴보시는 것도 좋을 거 같네요.
        </p>
    </div>

    <div>
      <h2>코둥이 퀴즈</h2>
      <p>머신 러닝에서 유저에게 유저가 좋아하거나<br>구매할만할 상품을 추천해 주는 프로그램을<br>□□ □□□ (이)라고 부른다.
        빈 칸에 들어갈 다섯 글자를 답장으로 보내주세요.<br>선착순 200분께 코드잇 시그니쳐 굿즈를 보내드려요.</p>
    </div>

    <div>
      <p>Weekly Codeit</p>
      <p>(주)코드잇 | 서울 중구 청계천로 100 시그니쳐타워 동관 10층</p>
      <p>Weekly Codeit 을 아직 구독하지 않으셨다면? 구독 신청하기</p>
      <p>뉴스레터가 보이지 않는다면, weekly@codeit.kr을 메일 주소록에 추가해주세요.</p>
      <p>수신 거부 Unsubscribe</p>
    </div>
  </body>
  </html>

- HTML 문법 정리

  기본 문법

  (1) 태그 / Tag
      → HTML에서 태그는 꺾쇠(< 기호랑 > 기호)를 사용하는 문법
      → 태그는 시작 태그와 종료 태그로 내용을 감싸는데, <태그 이름>형태로 쓰고
        종료 태그는 </태그 이름> 형태로 쓴다.

    ex ) p 태그
         <p>
              단락은 이렇게 넣습니다.
         </p>

    ex ) img 태그
         <img src="https://example.com/my-image.png">

   ※ <img>태그를 슬래시와 함께 쓰는 경우, 줄바꿈<br>이나 이미지(img)처럼 안에 내용이 없는 
      태그는 시작 태그만 사용가능
   ※ 마지막에 슬래시(/) 기호를 넣어서 하나짜리 태그라는 걸 표시하는 것도 올바른 문법
      <img src="https://example.com/my-image.png" />


  (2) 속성
      → 시작 태그에 [ 속성 이름 = "속성 값" ] 형태로 사용하는 문법

    ex ) <a> 태그의 href 속성
         <a href="https://codeit.kr">코드잇</a>

    ex ) <img> 태그의 src 속성
         <img src="https://example.com/my-image.png">


  (3) HTML 파일의 기본 구조
      → 맨 윗줄에는 파일이 HTML 문법을 쓴다는 것을 알려주는 코드
         <!DOCTYPE html>
      → 여기서 DOCTYPE은 문서타입(Document Type)이라는 뜻
      → 아래로는 html태그로 감싼 다음에 head와 body 태그로 나눈다.
      → head태그 안에는 페이지에 대한 정보가 들어가고 body 태그 안에는 페이지 내용이 들어간다.

        <!DOCTYPE html>
        <html>
          <head>
          </head>

          <body>
          </body>
        </html>


  (4) 배운 태그 정리

        1. 사이트 이름
         → 웹 브라우저 탭이나 창에 보이는 제목을 정할 수 있다.
         → 페이지 내용이 아닌 페이지에 대한 정보이므로 head 태그 안에 구분하여 넣는다.

         <head>
            <title>윤동주 서시 - 한국 시 모음</title>
            ...
          </head>

      2. 인코딩 정하기
         → 한글을 지원하는 인코딩인 UTF-8을 사용하도록 정하는 코드
         → meta 태그를 사용하여 head 태그 안에 넣어준다.

         <head>
            <meta charset="utf-8">
            ...
         </head>

      3. 제목
         → 제목(Heading)은 제일 큰 것부터 작은 것까지 h1, h2, ..., h6태그를 사용
         → 사이트 이름에 쓰는 title 태그와 헷갈리지 않도록 주의

         <h1>서시</h1>
         <h2>시인 윤동주</h2>

      4. 단락
         → 단락(paragraph)는 p태그를 사용하여 감싼다
         → 코드에서 줄 바꿈은 화면에 나타나지 않고 붙어서 보인다.

         <p>
          죽는 날까지 하늘을 우러러
          한 점 부끄럼이 없기를,
          잎새에 이는 바람에도
          나는 괴로워했다.
          별을 노래하는 마음으로
          모든 죽어가는 것을 사랑해야지
          그리고 나한테 주어진 길을
          걸어가야겠다.
        </p>
        <p>
          오늘 밤에도 별이 바람에 스치운다.
        </p>

      5. 줄 바꿈
         → HTML은 기본적으로 문장들을 이어서 보여준다.
         → 줄 바꿈(Break Line)은 br이라는 태그를 사용
         → 이 때, 줄 바꿈 태그 안에는 내용이 없으므로 시작 태그 하나만 사용한다.

         <p>
          죽는 날까지 하늘을 우러러<br>
          한 점 부끄럼이 없기를,<br>
          잎새에 이는 바람에도<br>
          나는 괴로워했다.<br>
          별을 노래하는 마음으로<br>
          모든 죽어가는 것을 사랑해야지<br>
          그리고 나한테 주어진 길을<br>
          걸어가야겠다.
        </p>
        <p>
          오늘 밤에도 별이 바람에 스치운다.
        </p>

      6. 링크
         → 링크는 a태그를 사용
         → href 속성을 사용하여 이동할 주소나 경로를 적어준다.

         <a href="https://ko.wikipedia.org/wiki/%EC%84%9C%EC%8B%9C_(%EC%8B%9C)">
              위키 문서 보기
         </a>

      7. 이미지
         → 이미지는 img 태그를 사용한다.
         → src 속성으로 이미지 파일의 주소나 경로를 적어준다.

         ex 1. 인터넷에 올라와 있는 사진
         <img src="https://upload.wikimedia.org/wikipedia/commons/4/4f/Yun_Dong-ju.jpg">
         ※ 위에서 사용한 윤동주 이미지는 이미지는 Public domain 라이선스를 따릅니다.

         ex 2. 같은 폴더에 있는 yun-dong-ju.jpg 파일 사용
         <img src="yun-dong-ju.jpg">

         ex 3. images라는 폴더 안에 있는 yun-dong-ju.jpg 파일 사용
         <img src="images/yun-dong-ju.jpg">


      8. 영역 나누기
         → div 태그로 여러 태그를 감싸거나 span 태그로 텍스트의 일부만 감싼다.
         → 이렇게 영역을 나누는 이유는 나중에 CSS를 사용할 때 스타일을 적용하는 용도로 사용

            <div>
            <h1>서시</h1>
            <h2>시인 <span>윤동주</span></h2>
          </div>
          <div>
            <p>
              죽는 날까지 하늘을 우러러<br>
              한 점 부끄럼이 없기를,<br>
              잎새에 이는 바람에도<br>
              나는 괴로워했다.<br>
              별을 노래하는 마음으로<br>
              모든 죽어가는 것을 사랑해야지<br>
              그리고 나한테 주어진 길을<br>
              걸어가야겠다.
            </p>
            <p>
              오늘 밤에도 별이 바람에 스치운다.
            </p>
          </div>

- HTML 코드를 편하게 입력하는 법

  → VS Code를 열고 빈 HTML 문서에서 느낌표(!) 를 입력하면 아래처럼 자동 완성 창이 나타난다.

  → 이 상태에서 엔터 혹은 탭(Tab)키를 누르거나 마우스로 클릭하면 VS Code가 HTML 기본 코드를 완성

  ※ 인터넷 익스플로러에서 최신 표준 모드로 보여주는 코드
  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  ※ 모바일 기기에서 보여줄 비율을 조정하는 코드
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

index.html

  <!DOCTYPE html>

  <html lang="ko">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>responsive web</title>
  </head>

  <body>
    <h1>Hello World!</h1>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolores fugiat, 
    hic reprehenderit veritatis dolorem vero pariatur sunt minima eaque, aliquam 
    laudantium, illo enim. Repellendus fugiat consectetur sunt, ipsa error corrupti.</p>
  </body>
  </html>


style.css

  h1 {
    font-size: 24px;
  }

  p {
    font-size: 16px;
  }

  @media (min-width: 768px) {
    /* 브라우저의 가로 길이가 768px이상이 되면 아래의 css가 적용된다. */

    h1 {
      font-size: 36px;
    }

    p {
      font-size: 24px;
    }
  }

  @media (min-width: 992px) {
    /* 브라우저의 가로 길이가 992px이상이 되면 아래의 css가 적용된다. */

    h1 {
      font-size: 48px;
    }

    p {
      font-size: 32px;
    }
  }

2. 반응형 그리드

위와 같은 반응형 그리드를 만들어 보세요.

크게 세 가지로 나누어집니다.

- 왼쪽: 모바일 사이즈 (767px 이하)
- 가운데: 타블릿 사이즈 (768px 이상, 991px 이하)
- 오른쪽: 데스크탑 사이즈 (992px 이상)

index.html

  <!DOCTYPE html>

  <html lang="ko">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>responsive web</title>
  </head>

  <body>
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
    <div id="div4"></div>
    <div id="div5"></div>
    <div id="div6"></div>
  </body>
  </html>


style.css

  body {
    margin: 0;
  }

  #div1 {
    width: 100%;
    height: 60px;
    background-color: #ff0000;
  }

  #div2 {
    width: 100%;
    height: 350px;
    background-color: #ffa500;
  }

  #div3 {
    width: 100%;
    height: 320px;
    background-color: #ffff00;
  }

  #div4 {
    width: 100%;
    height: 385px;
    background-color: #008000;
  }

  #div5 {
    width: 100%;
    height: 200px;
    background-color: #0000ff;
  }

  #div6 {
    width: 100%;
    height: 200px;
    background-color: #4b0082;
  }

  /* Tablet */

  @media (min-width: 768px) {
    div {
      float: left;
    }

    #div2 {
      height: 562px;
    }

    #div3 {
      height: 282px;
    }

    #div4 {
      width: 50%;
      height: 360px;
    }

    #div5 {
      width: 50%;
      height: 180px;
    }

    #div6 {
      width: 50%;
      height: 180px;
    }
  }

  /* Desktop */

  @media (min-width: 992px) {
    #div2 {
      width: 50%;
      height: 700px;
    }

    #div3 {
      width: 50%;
      height: 350px;
    }

    #div4 {
      width: 25%;
      height: 350px;
    }

    #div5 {
      width: 25%;
      height: 175px;
    }

    #div6 {
      width: 25%;
      height: 175px;
    }
  }

3. 이노

- 옷걸이처럼 걸어 놓을 수 있는 블루투스 스피커 '이노'를 홍보하는 사이트를 만들어보려고 합니다. 
  위에 있는 도면을 따라 반응형 웹사이트를 만들어 주세요.

1. 그리드는 반응형 그리드 과제에서 만든 것을 그대로 사용하면 됩니다!(width, height 도 동일합니다)
2. 초록색 선은 padding, 빨간색 선은 margin, 파란색 선은 가운데 정렬(가로 혹은 세로)을 뜻합니다.
3. 모든 사진은 background-image를 통해 넣었습니다.
4. In'o 글자의 font-size는 20px 글자색은 white입니다.
5. In'o 글자가 속한 div 태그의 background-color 는 #353535입니다.

index.html

  <!DOCTYPE html>

  <html lang="ko">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/css/style.css">
    <title>IN'O</title>
  </head>

  <body>
    <div class="navbar col">
      <span class="logo">IN`O</span>
    </div>
    <div class="banner col"></div>
    <div class="info col">
      <div class="helper"></div><div class="warp">
        <div class="label">Portfolio</div>
        <h2>Make Hardware Soft</h2>
        <p>IN'O is a hanger-type bluetooth speaker that does not merely focus on its audio features. It naturally blends into your life through lean UX and minimal design.</p>
      </div>
    </div>
    <div class="img-div1 col"></div>
    <div class="img-div2 col">
      <div class="helper"></div><a href="#">VIEW MORE</a>
    </div>
    <div class="img-div3 col"></div>
  </body>
  </html>


style.css

  body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
  }

  .navbar {
    width: 100%;
    height: 60px;
    background-color: #353535;
    padding-left: 30px;
    padding-right: 30px;
    line-height: 60px;
  }

  .navbar .logo {
    font-size: 20px;
    color: white;
  }

  .banner {
    width: 100%;
    height: 350px;
    background-image: url(../img/banner_img.jpg);
    background-size: cover;
    background-position: center center;
  }

  .info {
    width: 100%;
    height: 320px;
    background-color: white;
  }

  .info .helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
  }

  .info .warp{
    display: inline-block;
    vertical-align: middle;
    padding-left: 30px;
    padding-right: 30px;
  }

  .info .label {
    font-size: 16px;
    color: #4a4a4a;
  }

  .info h2{
    font-size: 20px;
    color: #1b1b1b;
    margin-top: 10px;
    margin-bottom: 30px;
  }

  .info .helper {
    display: inline-block;
    height: 100%;
  }

  .info p{
    font-size: 16px;
    color: #7a7a7a;
    margin: 0;
  }

  .img-div1 {
    width: 100%;
    height: 385px;
    background-image: url(../img/img1.jpg);
    background-size: cover;
    background-position: center top;
  }

  .img-div2 {
    width: 100%;
    height: 200px;
    background-image: url(../img/img2.jpg);
    background-size: cover;
    background-position: center top;
    text-align: center;
  }

  .img-div2 .helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
  }

  .img-div2 a {
    color: white;
    font-weight: bold;
    border: 4px solid white;
    padding : 9px 40px;
    text-decoration: none;

  }

  .img-div3 {
    width: 100%;
    height: 200px;
    background-image: url(../img/img3.jpg);
    background-size: cover;
    background-position: center top;
  }

  /* Tablet */

  @media (min-width: 768px) {
    .col {
      float: left;
    }

    .banner {
      height: 562px;
    }

    .info {
      height: 282px;
    }

    .info .warp{
      padding-left: 65px;
      padding-right: 65px;
    }

    .img-div1 {
      width: 50%;
      height: 360px;
    }

    .img-div2 {
      width: 50%;
      height: 180px;
    }

    .img-div3 {
      width: 50%;
      height: 180px;
    }
  }

  /* Desktop */

  @media (min-width: 992px) {
    .banner {
      width: 50%;
      height: 700px;
    }

    .info {
      width: 50%;
      height: 350px;
    }

    .img-div1 {
      width: 25%;
      height: 350px;
    }

    .img-div2 {
      width: 25%;
      height: 175px;
    }

    .img-div3 {
      width: 25%;
      height: 175px;
    }
  }

Bootstrap

1. 새로운 기술을 배우는 법

2. 부트스트랩 소개
   → 트위터의 개발자가 오픈소스로 제공해주는 HTML, CSS, JS Framework
   → 2024년 11월 기준 강의와 달리 bootstrap버전 5.3.3

   → bootstrap을 시작하는 방법은 2가지가 있다.

   → Framework는 미리 제공되는 코드이므로, 
     bootstrap 사이트에서 docs메뉴 안의 components에서 필요한 부분을 찾아 적용하면 된다.

index.html

  <!DOCTYPE html>

  <html lang="ko">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

    <title>IN'O</title>
  </head>

  <body>
    <nav class="navbar navbar-expand-lg bg-body-tertiary">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="#">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                Dropdown
              </a>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">Action</a></li>
                <li><a class="dropdown-item" href="#">Another action</a></li>
                <li><hr class="dropdown-divider"></li>
                <li><a class="dropdown-item" href="#">Something else here</a></li>
              </ul>
            </li>
            <li class="nav-item">
              <a class="nav-link disabled" aria-disabled="true">Disabled</a>
            </li>
          </ul>
          <form class="d-flex" role="search">
            <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success" type="submit">Search</button>
          </form>
        </div>
      </div>
    </nav>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
  </body>
  </html>

   → 제공된 코드를 copy해서 적용해보면 다양한 class들이 있는데 cdn으로 연결한 css 파일 안에 
     제공된 코드를 스타일링 해주는 css 코드가 담겨 있다.
   → JS도 마찬가지로 다양한 태그들에 기능을 입혀주는 JS 코드가 연결한 cdn 파일 내부에 담겨 있다.

3. 부트스트랩 그리드

   → 부트스트랩의 그리드 시스템은 3가지로 구성된다.

      (1) 컨테이너 (container)
      (2) 행 (row)
      (3) 열 (column)


   → 부트스트랩 사이트에 자세히 설명되어 있으나 많은 사람들이 무시하는 몇 가지 규칙은 다음과 같다.
   → 아래의 규칙만 지켜도 예상치 못한 레이아웃이 나올 확률을 거의 없다.

      (1) 행(<div class="row">)은 꼭 컨테이너(<div class="container">) 안에 넣는다.
      (2) 열(<div class="col">)은 꼭 행(<div class="row">)안에 넣는다.
          오직 열만 행의 직속 자식이 될 수 있다.
      (3) 콘텐츠(우리가 그리드에 넣고 싶은 내용)는 꼭 열(<div class="col">)안에 넣는다.


   → 부트스트랩 그리드에는 한 줄에 기본적으로 12칸의 열(column)이 있다.
        ex) 한 줄을 정확히 3등분 하고 싶다면 4칸을 차지하는 열 3개를 쓰면 된다.
         4칸을 사용하는 열은 <div class="col-4">로 표현할 수 있다.

index.html

  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
  </head>

  <body>
    <div class="container">
      <div class="row">
        <!-- 정확히 3등분 -->
        <div class="col-4 first">first</div>
        <div class="col-4 second">second</div>
        <div class="col-4 third">third</div>
      </div>

      <div class="row">
        <!-- 정확히 2등분 -->
        <div class="col-6 first">first</div>
        <div class="col-6 second">second</div>
      </div>

      <div class="row">
        <!-- 1대 5 비율 -->
        <div class="col-2 first">first</div>
        <div class="col-10 second">second</div>
      </div>

      <div class="row">
        <!-- 1대 2대 1 비율 -->
        <div class="col-3 first">first</div>
        <div class="col-6 second">second</div>
        <div class="col-3 third">third</div>
      </div>
    </div>
  </body>


style.css

  .container {
    text-align: center;
  }

  .first {
    background-color: yellow;
  }

  .second {
    background-color: lime;
  }

  .third {
    background-color: orange;
  }

   → 만일 한 행에 12칸이 넘는 열이 들어가게 된다면 새로운 줄로 넘어간다.

index.html

  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
  </head>

  <body>
    <div class="container">
      <div class="row">
        <div class="col-3 first">first</div>
        <div class="col-6 second">second</div>
        <div class="col-4 third">third</div>
        <div class="col-7 fourth">fourth</div>
      </div>
    </div>
  </body>


style.css

  .container {
    text-align: center;
  }

  .first {
    background-color: yellow;
  }

  .second {
    background-color: lime;
  }

  .third {
    background-color: orange;
  }

  .fourth {
    background-color: blue;
  }

   → 왜 부트스트랩에서 한 줄을 12칸으로 나누었을까?

      ☞ 12는 상당히 많은 숫자들(1,2,3,4,6,12)로 나누어지므로 굉장히 유연한 숫자이다.

      ex) 8칸으로 나누고 싶더라도 12라는 숫자의 유연함 덕에 쉽게 나눌 수 있다.
          col-6를 두 개 쓰면 2등분이 가능하고, 그 안에서 또 col-3으로 4등분을 하면 8칸이 생긴다.

      ☞ 이런 식으로 열을 또 여러 열로 나누는 것을 중첩(nesting)이라고 부른다.
         중첩을 하기 위해서는 우선 열(<div class="col-6">)안에 새로운 행(<div class="row">)을 
         써야 한다.

index.html

  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
  </head>

  <body>
    <div class="container">
      <div class="row">
        <div class="col-6">
          <div class="row"> <!-- 중첩을 위한 새로운 행 -->
            <div class="col-3 first">1</div>
            <div class="col-3 second">2</div>
            <div class="col-3 third">3</div>
            <div class="col-3 fourth">4</div>
          </div>
        </div>

        <div class="col-6">
          <div class="row"> <!-- 중첩을 위한 새로운 행 -->
            <div class="col-3 first">5</div>
            <div class="col-3 second">6</div>
            <div class="col-3 third">7</div>
            <div class="col-3 fourth">8</div>
          </div>
        </div>
      </div>
    </div>
  </body>


style.css

  .container {
    text-align: center;
  }

  .first {
    background-color: yellow;
  }

  .second {
    background-color: lime;
  }

  .third {
    background-color: orange;
  }

  .fourth {
    background-color: blue;
  }

4. 부트스트랩 반응형 그리드

   → 다음은 부트스트랩에서 정해둔 반응형 구간이다.

     모바일 Extra Small         : (<576px)
     모바일 Small               : (≥576px)
     태블릿 Medium              : (≥768px)
     데스크탑 Large             : (≥992px)
     와이드 데스크탑 Extra Large : (≥1200px)


   → 컨테이너(Container)

      ☞ 컨테이너는 기본적으로 가운데 정렬이 되어 있고, 그리드의 행들을 감싸주는 역할
         (행들은 열들을 감싸주고 있다.)
      ☞ 컨테이너의 종류는 2가지이다.

      (1) <div class="container">: 구간별로 그리드에 고정된 width를 설정해줍니다.
      (2) <div class="container-fluid">: 그리드는 항상 width: 100%;입니다.


   → <div class="container">
      ☞ 구간별로 그리드에 고정된 가로값을 설정해주고 싶다면 container 클래스를 사용
      ☞ 구간별로 그리드가 고정되어 있으면 레이아웃을 예상하기가 더 쉽다.
      ☞ container 클래스를 사용하면 아래의 css 코드가 적용된다.

style.css

  .container {
    width: 100%; /* extra small */
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
  }

  /* small */
  @media (min-width: 576px) {
    .container {
      max-width: 540px;
    }
  }

  /* medium */
  @media (min-width: 768px) {
    .container {
      max-width: 720px;
    }
  }

  /* large */
  @media (min-width: 992px) {
    .container {
      max-width: 960px;
    }
  }

  /* extra large */
  @media (min-width: 1200px) {
    .container {
      max-width: 1140px;
    }
  }

   → <div class="container-fluid">

      ☞ 상황에 따라 그리드가 항상 100%의 가로 길이를 갖는 것이 좋을 때에는
         container-fluid 클래스를 사용한다.

style.css

  .container-fluid {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
  }

   → 열 (column)
      ☞ 반응형 구간별로 (총 12칸 중) 열이 차지하는 칸의 갯수도 다르게 설정할 수 있다.

   ex 1.  구간 별로 모두 설정되어 있는 경우

          <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">

          Extra Small (< 576px): 12칸을 모두 차지
          Small (≥ 576px): 6칸 차지
          Medium (≥ 768px): 4칸 차지
          Large (≥ 992px): 3칸 차지
          Extra Large (≥ 1200px): 2칸 차지


   ex 2.  특정 구간만 설정되어 있는 경우
          ☞ 특정 구간에만 열 수가 설정되어 있는 경우도 있다.
          ☞ 그 구간부터 새로운 설정이 있는 상위 구간까지는 같은 칸 수를 차지

          <div class="col-12 col-lg-3">

          Extra Small (< 576px): 12칸을 모두 차지
            Small (≥ 576px): 12칸을 모두 차지
          Medium (≥ 768px): 12칸을 모두 차지
          Large (≥ 992px): 3칸 차지
          Extra Large (≥ 1200px): 3칸 차지

          <div class="col-6">

          Extra Small (< 576px): 6칸 차지
          Small (≥ 576px): 6칸 차지
          Medium (≥ 768px): 6칸 차지
          Large (≥ 992px): 6칸 차지
          Extra Large (≥ 1200px): 6칸 차지

5. 재능 공유 사이트 

  → 재능 공유 사이트 'ShareSkill'을 제작하려고 한다.

  Hero Header
  → 네비게이션 바 밑에 있는 캐러셀의 높이는 400px
     각 슬라이드의 배경 이미지는 다르고, background-position도 각각 다르다.
        1. 음악 이미지는 왼쪽 가운데
       2. 메이크업 이미지는 가운데 위
        3. 요리 이미지는 가운데 가운데

  → 사용해야 하는 부트스트랩 컴포넌트는 다음과 같다.

1. 네비게이션 바
2. 캐러셀
3. 경고
4. 그리드

index.html

  <!DOCTYPE html>

  <html>
  <head>
    <title>ShareSkill</title>
    <meta charset="utf-8">

      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <link rel="stylesheet" href="css/styles.css">
  </head>

  <body>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">SHARESKILL</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item">
          <a class="nav-link" href="#">튜터 신청</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">수업 목록</a>
        </li>
      </ul>

      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="#">회원가입</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">로그인</a>
        </li>
      </ul>
    </div>
  </nav>
  <!--캐러셸-->
  <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
    </ol>
    <!--케러셀이미지-->
    <div class="carousel-inner">
      <div class="carousel-item item1 active">
        <div class="helper"></div><div class="intro">
          <h2>음악 배워보세요</h2>
          <h3>멋진 뮤지션들이 주변에 있습니다.</h3>
          <a href="#">수업 찾기</a>
        </div>
      </div>
      <div class="carousel-item item2">
      <div class="helper"></div><div class="intro">
          <h2>메이크업 배워보세요</h2>
          <h3>멋진 메이크업 아티스트들이 주변에 있습니다.</h3>
          <a href="#">수업 찾기</a>
        </div>
      </div>
      <div class="carousel-item item3">
        <div class="helper"></div><div class="intro">
          <h2>요리 배워보세요</h2>
          <h3>멋진 요리사들이 주변에 있습니다.</h3>
          <a href="#">수업 찾기</a>
        </div>
      </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
    </a>
  </div>

  <div class="container">
    <div class="row">
      <div class="col-12">
        <div class="alert alert-warning alert-dismissible fade show" role="alert">
          <strong>튜터 모집!</strong> 재능을나누어봐요.
          <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-12 col-md-6 col-lg-4 col-xl-3">
        <a href="#" class="course">
          <img src="images/course1.jpg" width="100%" class="course-img">

          <div class="info">
            <h4>개성있는 일러스트 작품 만들기</h4>
            <div class="lecture">
              <img src="images/user.png" width="20" height="20"><span class="name">문종모</span>
            </div>
          </div>
        </a>
      </div>
          <div class="col-12 col-md-6 col-lg-4 col-xl-3">
        <a href="#" class="course">
          <img src="images/course2.jpg" width="100%" class="course-img">

          <div class="info">
            <h4>내가 만드는 나만의 악세서리</h4>
            <div class="lecture">
              <img src="images/user.png" width="20" height="20"><span class="name">문종모</span>
            </div>
          </div>
        </a>
      </div>
          <div class="col-12 col-md-6 col-lg-4 col-xl-3">
        <a href="#" class="course">
          <img src="images/course3.jpg" width="100%" class="course-img">

          <div class="info">
            <h4>내 이야기를 노래로!</h4>
            <div class="lecture">
              <img src="images/user.png" width="20" height="20"><span class="name">문종모</span>
            </div>
          </div>
        </a>
      </div>
          <div class="col-12 col-md-6 col-lg-4 col-xl-3">
        <a href="#" class="course">
          <img src="images/course4.jpg" width="100%" class="course-img">

          <div class="info">
            <h4>비전공자를 위한 웹 프로그래밍</h4>
            <div class="lecture">
              <img src="images/user.png" width="20" height="20"><span class="name">문종모</span>
            </div>
          </div>
        </a>
      </div>
          <div class="col-12 col-md-6 col-lg-4 col-xl-3">
        <a href="#" class="course">
          <img src="images/course5.jpg" width="100%" class="course-img">

          <div class="info">
            <h4>자신감 업! 메이크업 클래스</h4>
            <div class="lecture">
              <img src="images/user.png" width="20" height="20"><span class="name">문종모</span>
            </div>
          </div>
        </a>
      </div>
          <div class="col-12 col-md-6 col-lg-4 col-xl-3">
        <a href="#" class="course">
          <img src="images/course6.jpg" width="100%" class="course-img">

          <div class="info">
            <h4>아이돌 댄스 정복하기</h4>
            <div class="lecture">
              <img src="images/user.png" width="20" height="20"><span class="name">문종모</span>
            </div>
          </div>
        </a>
      </div>
          <div class="col-12 col-md-6 col-lg-4 col-xl-3">
        <a href="#" class="course">
          <img src="images/course7.jpg" width="100%" class="course-img">

          <div class="info">
            <h4>사진 작가에게 배우는 야외 사진</h4>
            <div class="lecture">
              <img src="images/user.png" width="20" height="20"><span class="name">문종모</span>
            </div>
          </div>
        </a>
      </div>
          <div class="col-12 col-md-6 col-lg-4 col-xl-3">
        <a href="#" class="course">
          <img src="images/course8.jpg" width="100%" class="course-img">

          <div class="info">
            <h4>기본부터 익히는 플라워 클래스</h4>
            <div class="lecture">
              <img src="images/user.png" width="20" height="20"><span class="name">문종모</span>
            </div>
          </div>
        </a>
      </div>
    </div>
  </div>

  </body>
  </html>


style.css

  body {
    font-family: 'Noto Sans KR', sans-serif;
  }

  .carousel-item {
    height: 400px;
    background-size: cover;
    text-align: center;
  }

  .carousel-item.item1 {
    background-image: url("../images/guitar.jpg");
    background-position: left center;
  }

  .carousel-item.item2 {
    background-image: url("../images/makeup.jpg");
    background-position: center top;
  }

  .carousel-item.item3 {
    background-image: url("../images/cooking.jpg");
    background-position: center center;
  }

  .helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
  }

  .intro {
    display: inline-block;
    vertical-align: middle;
  }

  .intro h2 {
    font-size: 32px;
    color: white;
    font-weight:300;
    margin-top: 0;
    margin-bottom: 18px;
  }

  .intro h3 {
    font-size: 22px;
    color: white;
    font-weight: 300;
    margin-top: 0;
    margin-bottom: 48px;
  }

  .intro a {
    background-color: #5900e7;
    border-radius: 2px;
    padding: 10px 30px;
    color: white;
    font-weight: 300;
  }

  .container {
    margin-top: 50px;
    margin-bottom: 50px;
  }

  .course {
    display: block;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15);
    margin-bottom: 20px;
  }

  .course:hover {
    text-decoration: none;
  }

  .course .course-img {
    display: block;
  }

  .course .info {
    padding: 10px;
  }

  .course .info h4 {
    font-size: 18px;
    color: #4a4a4a;
    margin-top: 0;
    margin-bottom: 10px;
  }

  .course .info .lecturer {
    font-size: 13px;
    color: #4a4a4a;
  }

  .course .info .lecture img,
  .course .info .lecture .name {
    vertical-align: middle;
  }