🦁_21.11.02 TIL

BoriΒ·2021λ…„ 11μ›” 3일
1

λ©‹μŸμ΄μ‚¬μžμ²˜λŸΌ_ν”„λ‘ νŠΈμ—”λ“œ 슀쿨 1κΈ°

λͺ©λ‘ 보기
3/60
post-thumbnail

21λ…„ 11μ›” 02일

πŸ“ ν”„λ‘ νŠΈμ—”λ“œ 개발자둜 μ„±μž₯ν•˜κΈ° μ›Œν¬μƒ΅ with μž„λ™μ€€λ‹˜

πŸ“Ž Working Backwards?

  • 기쑴의 μΌν•˜λŠ” 방식을 거꾸둜 뒀집어 μˆ˜ν–‰ν•˜λŠ” 것
  • κΈ°μ‘΄ 방식: μ œν’ˆ/μ„œλΉ„μŠ€ 개발 ν”„λ‘œμ„ΈμŠ€κ°€ μ•„μ΄λ””μ–΄λ‘œλΆ€ν„° μ‹œμž‘ν•΄ κ°œλ°œμ„ μ™„λ£Œν•œ ν›„ κ³ κ°μ—κ²Œ 제곡
  • μ›Œν‚Ή λ°±μ›Œμ¦ˆ: '고객 κ²½ν—˜'을 λ¨Όμ € μ •μ˜ν•œ ν›„, 이λ₯Ό μ‹œμž‘μœΌλ‘œ 거꾸둜 λ˜μ§šμ–΄κ°€λ©° 반볡적으둜 μΌν•˜λŠ” 것을 의미
    Amazon's Leadership Principles

πŸ“Ž μ›Œν‚Ήλ°±μ›Œμ¦ˆλ‘œ 포트폴리였 λ§Œλ“€κΈ° with μŠ€ν”„λ¦°νŠΈ νŒ€

  • ν¬νŠΈν΄λ¦¬μ˜€μ—μ„œ 보여쀄 '잘'ν•˜λŠ”/'잘'ν•˜κ³  싢은 μ—­λŸ‰ 3가지
  • 쀑간 회고: μ—­λŸ‰μ„ μ •λ¦¬ν•˜λ©΄μ„œ μ–΄λ €μ› λ˜ λΆ€λΆ„, λ‹€λ₯Έ μ‚¬λžŒλ“€μ΄ μž‘μ„±ν•œ λ‚΄μš©μ„ λ³΄λ©΄μ„œ 배운 점, λ‚΄κ°€ μž‘μ„±ν•œ μ—­λŸ‰μ„ κ°–μ·„λ‹€λ©΄ λ‚˜λŠ” μ–΄λ–€ λͺ¨μŠ΅μΌκΉŒ?(ꡬ체적으둜)
  • μž‘μ„±ν•œ μ—­λŸ‰μ— λŒ€ν•œ ν”Όλ“œλ°±μ„ μœ„ν•œ 체크리슀트 μž‘μ„±: μ–΄λ–»κ²Œ μ²΄ν¬ν•˜κ³  ν”Όλ“œλ°±μ„ 받을 수 μžˆμ„κΉŒ?
  • 체크리슀트λ₯Ό 잘 μ§„ν–‰ν•˜κΈ° μœ„ν•œ μ•‘μ…˜ ν”Œλžœ μž‘μ„±: 각 μ—­λŸ‰μ— λŒ€ν•΄ μ‹€μ œλ‘œ μ‹€μ²œ κ°€λŠ₯ν•œ λ‚΄μš© μž‘μ„±
    마무리 회고: μ›Œν¬μƒ΅μ„ 톡해 배운 λ‚΄μš©, μ›Œν¬μƒ΅μ„ ν•˜λ©΄μ„œ 달라진 점

πŸ“ HTML

  • λ―Έλ””μ–΄ νƒœκ·Έ 마무리, 폼 νƒœκ·Έ

πŸ“Ž μ›ΉνŽ˜μ΄μ§€ λ§ˆν¬μ—… μž‘μ„±

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>STARTUP TEMPLATE</title>
    <style>
      .logo img {
        width: 80px;
      }
    </style>
  </head>
  <body>
    <nav>
      <a href="#" class="logo">
        <img
          src="https://cdn.pixabay.com/photo/2016/08/25/07/30/red-1618916_960_720.png"
          alt="logo"
        />
      </a>

      <ul>
        <li>
          <a href="#">Menu1</a>
          <ul>
            <li><a href="#">Submenu1</a></li>
            <li><a href="#">Submenu2</a></li>
            <li><a href="#">Submenu3</a></li>
            <li><a href="#">Submenu4</a></li>
          </ul>
        </li>
        <li>
          <a href="#">Menu2</a>
          <ul>
            <li><a href="#">Submenu1</a></li>
            <li><a href="#">Submenu2</a></li>
            <li><a href="#">Submenu3</a></li>
            <li><a href="#">Submenu4</a></li>
          </ul>
        </li>
        <li>
          <a href="#">Menu3</a>
          <ul>
            <li><a href="#">Submenu1</a></li>
            <li><a href="#">Submenu2</a></li>
            <li><a href="#">Submenu3</a></li>
            <li><a href="#">Submenu4</a></li>
          </ul>
        </li>
        <li>
          <a href="#">Menu4</a>
          <ul>
            <li><a href="#">Submenu1</a></li>
            <li><a href="#">Submenu2</a></li>
            <li><a href="#">Submenu3</a></li>
            <li><a href="#">Submenu4</a></li>
          </ul>
        </li>
        <li>
          <a href="#">Menu5</a>
          <ul>
            <li><a href="#">Submenu1</a></li>
            <li><a href="#">Submenu2</a></li>
            <li><a href="#">Submenu3</a></li>
            <li><a href="#">Submenu4</a></li>
          </ul>
        </li>
      </ul>

      <ul>
        <li><a href="#">Login</a></li>
        <li><a href="#">Sign up</a></li>
      </ul>
    </nav>

    <header>
      <ul>
        <!-- slide 1 -->
        <li>
          <p>Slide Title</p>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui
            suscipit quisquam cumque eius et cum!
          </p>
          <a href="#">More</a>
        </li>
        <!-- slide 1 -->
        <li>
          <p>Slide Title</p>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui
            suscipit quisquam cumque eius et cum!
          </p>
          <a href="#">More</a>
        </li>
        <!-- slide 1 -->
        <li>
          <p>Slide Title</p>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui
            suscipit quisquam cumque eius et cum!
          </p>
          <a href="#">More</a>
        </li>
      </ul>
    </header>

    <main>
      <section>
        <h2>Section title</h2>
        <p>
          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nostrum aut
          fugit nam praesentium libero ex quae molestiae laboriosam quo numquam?
        </p>
        <p>
          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugit, est.
        </p>
      </section>

      <section>
        <section>
          <h2>Section title</h2>
          <p>
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nostrum
            aut fugit nam praesentium libero ex quae molestiae laboriosam quo
            numquam?
          </p>
          <p>
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugit,
            est.
          </p>
        </section>
      </section>

      <section>
        <section>
          <h2>Section title</h2>
          <p>
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nostrum
            aut fugit nam praesentium libero ex quae molestiae laboriosam quo
            numquam?
          </p>
          <p>
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugit,
            est.
          </p>
        </section>
      </section>

      <section>
        <section>
          <h2>Section title</h2>
          <p>
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nostrum
            aut fugit nam praesentium libero ex quae molestiae laboriosam quo
            numquam?
          </p>
          <p>
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugit,
            est.
          </p>
        </section>
      </section>

      <section>
        <h2>About Company</h2>
        <article>
          <h3>Activity</h3>
          <ul>
            <li>
              <a href="#">
                <figure>
                  <img
                    src="https://cdn.pixabay.com/photo/2015/01/09/11/08/startup-594090__340.jpg"
                    alt="Activity"
                  />
                  <figcaption>Image title</figcaption>
                </figure>
                <h4>Title</h4>
                <p>
                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit,
                  hic!
                </p>
              </a>
            </li>
            <li>
              <a href="#">
                <figure>
                  <img
                    src="https://cdn.pixabay.com/photo/2015/01/09/11/08/startup-594090__340.jpg"
                    alt="Activity"
                  />
                  <figcaption>Image title</figcaption>
                </figure>
                <h4>Title</h4>
                <p>
                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit,
                  hic!
                </p>
              </a>
            </li>
            <li>
              <a href="#">
                <figure>
                  <img
                    src="https://cdn.pixabay.com/photo/2015/01/09/11/08/startup-594090__340.jpg"
                    alt="Activity"
                  />
                  <figcaption>Image title</figcaption>
                </figure>
                <h4>Title</h4>
                <p>
                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit,
                  hic!
                </p>
              </a>
            </li>
          </ul>
        </article>
        <article>
          <h3>Media</h3>
          <ul>
            <li>
              <a href="#">
                <figure>
                  <img
                    src="https://cdn.pixabay.com/photo/2015/01/09/11/08/startup-594090__340.jpg"
                    alt="Media"
                  />
                  <figcaption>Image title</figcaption>
                </figure>
                <h4>Title</h4>
                <p>
                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit,
                  hic!
                </p>
              </a>
            </li>
            <li>
              <a href="#">
                <figure>
                  <img
                    src="https://cdn.pixabay.com/photo/2015/01/09/11/08/startup-594090__340.jpg"
                    alt="Media"
                  />
                  <figcaption>Image title</figcaption>
                </figure>
                <h4>Title</h4>
                <p>
                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit,
                  hic!
                </p>
              </a>
            </li>
            <li>
              <a href="#">
                <figure>
                  <img
                    src="https://cdn.pixabay.com/photo/2015/01/09/11/08/startup-594090__340.jpg"
                    alt="Media"
                  />
                  <figcaption>Image title</figcaption>
                </figure>
                <h4>Title</h4>
                <p>
                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit,
                  hic!
                </p>
              </a>
            </li>
          </ul>
        </article>
        <article>
          <h3>News</h3>
          <ul>
            <li>
              <a href="#">
                <figure>
                  <img
                    src="https://cdn.pixabay.com/photo/2015/01/09/11/08/startup-594090__340.jpg"
                    alt="News"
                  />
                  <figcaption>Image title</figcaption>
                </figure>
                <h4>Title</h4>
                <p>
                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit,
                  hic!
                </p>
              </a>
            </li>
            <li>
              <a href="#">
                <figure>
                  <img
                    src="https://cdn.pixabay.com/photo/2015/01/09/11/08/startup-594090__340.jpg"
                    alt="News"
                  />
                  <figcaption>Image title</figcaption>
                </figure>
                <h4>Title</h4>
                <p>
                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit,
                  hic!
                </p>
              </a>
            </li>
            <li>
              <a href="#">
                <figure>
                  <img
                    src="https://cdn.pixabay.com/photo/2015/01/09/11/08/startup-594090__340.jpg"
                    alt="News"
                  />
                  <figcaption>Image title</figcaption>
                </figure>
                <h4>Title</h4>
                <p>
                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit,
                  hic!
                </p>
              </a>
            </li>
          </ul>
        </article>
      </section>
    </main>

    <footer>
      <h2>Contact</h2>
      <a href="#" class="logo">
        <img
          src="https://cdn.pixabay.com/photo/2016/08/25/07/30/red-1618916_960_720.png"
          alt="logo"
        />
      </a>
      <address>
        <p>[Post code] address</p>
        <a href="mailto:test@test.org ">test@test.org </a>
        <a href="tel:000-0000-0000">000-0000-0000</a>
      </address>
      <nav>
        <ul>
          <li><a href="#">f_menu1</a></li>
          <li><a href="#">f_menu2</a></li>
          <li><a href="#">f_menu3</a></li>
          <li><a href="#">f_menu4</a></li>
          <li><a href="#">f_menu5</a></li>
          <li><a href="#">f_menu6</a></li>
        </ul>
      </nav>

      <ul class="sns">
        <li><a href="#">f</a></li>
        <li><a href="#">t</a></li>
        <li><a href="#">i</a></li>
      </ul>

      <small>Copyright 2021. company name. all rights reserved.</small>
    </footer>
  </body>
</html>

마무리

  • μŠ€ν”„λ¦°νŠΈ νŒ€μ΄ 생겼닀! νŒ€ λ³„λ‘œ μ„œλ‘œ λŒ€ν™”ν•˜λ©° μ›Œν¬μƒ΅μ΄ μ§„ν–‰λ˜μ—ˆλ‹€. 그런데 λ‹€λ₯Έ 집 μΈν…Œλ¦¬μ–΄ 곡사λ₯Ό 곁듀인...
  • ꡬ체적인 κ³„νš μž‘μ„±μ„ λͺ»ν•΄μ„œ μ•ˆν•˜λŠ”κ±΄μ§€ μ•ˆν•΄μ„œ λͺ»ν•˜λŠ”건지 λͺ¨λ₯΄κ² μ§€λ§Œ λ‚˜λŠ” μ–΄λ €μš΄λ° 잘 μž‘μ„±ν•˜λŠ” λ‹€λ₯Έ 뢄듀을 λ³΄λ‹ˆ μ–΄λ¨Έλ‚˜ κ°μ‚¬νžˆ μ°Έκ³ ν•˜κ² μŠ΅λ‹ˆλ‹€. (ꡬ글 μŠ€ν”„λ ˆλ“œ μ‹œνŠΈ λ§Œμ„Έ!?)
  • 저녁먹고 λ°”λ‘œ μž‘μ„±ν•˜λ €κ³  ν–ˆλŠ”λ° μ™œ 이뢈 μ•ˆμ—μ„œ λˆˆμ„ 떴지?
profile
Bori
이전 포슀트

🦁_21.11.01 TIL

λ‹€μŒ 포슀트

🦁_21.11.03 TIL

0개의 λŒ“κΈ€