๐ŸŽž Movie Select(1. HTML, CSS)

์ž๋ชฝยท2021๋…„ 5์›” 14์ผ
1

Toy-Project

๋ชฉ๋ก ๋ณด๊ธฐ
4/13

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ๋ฌธ๋ฒ•์„ ๋ชจ๋‘ ๊ณต๋ถ€ํ•œ ์ดํ›„, ์–ด๋–ป๊ฒŒ ํ•˜๋ฉด ์ด๊ฒƒ๋“ค์„ ํ™œ์šฉํ•ด ์‹ค์ „ํ•ด์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์„๊นŒ ๊ณ ๋ฏผํ•˜๋‹ค ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ํ™œ์šฉํ•˜๊ธฐ ์ข‹์€ ์‚ฌ์ดํŠธ๋ฅผ ๋ฐœ๊ฒฌํ•˜์˜€๋‹ค.
https://github.com/bradtraversy/vanillawebprojects

์ด ์‚ฌ์ดํŠธ์—๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ํ™œ์šฉํ•œ ์—ฌ๋Ÿฌ ํ”„๋กœ์ ํŠธ๊ฐ€ ์กด์žฌํ•˜์˜€๋Š”๋ฐ ์•ž์œผ๋กœ ์ด๋ฅผ ์ˆ˜ํ–‰ํ•ด ๋‚˜๊ฐ€๋ฉด์„œ velog๋ฅผ ์ž‘์„ฑํ•ด๋ณผ ์ƒ๊ฐ์ด๋‹ค.

์ด๋ฒˆ ๋ฒจ๋กœ๊ทธ๋Š” HTML, CSS๋ฅผ ๊ตฌ์„ฑํ•˜๊ณ  ๋‹ค์Œ ํฌ์ŠคํŠธ์—์„œ JavaScript๋ฅผ ๊ตฌ์„ฑํ•  ์˜ˆ์ •์ด๋‹ค.

โœˆ ์‹œ์ž‘

์šฐ์„  ๋งŒ๋“ค์–ด๋ณด๊ธฐ ์ „์— ์™„์„ฑ๋œ ๊ฒฐ๊ณผ๋ฌผ์€ ์ด๋ ‡๊ฒŒ ์ƒ๊ฒผ๋‹ค.

์ฃผ์š” ๊ธฐ๋Šฅ

  • ์˜ํ™” ์„ ํƒ ์ด๋ฒคํŠธ: ์„ ํƒํ•œ ์˜ํ™”์˜ ์ •๋ณด์— ๋งž์ถฐ ์„ธํŒ…ํ•˜๊ธฐ
  • ์ขŒ์„ ํด๋ฆญ ์ด๋ฒคํŠธ: ์ขŒ์„์„ ํด๋ฆญํ•˜๋ฉด ํด๋ž˜์Šค์˜ ์ƒํƒœ๋ฅผ ๋ณ€ํ™”์‹œ์ผœ ํšจ๊ณผ๋ฅผ ์คŒ, ์ขŒ์„ ์ˆ˜ ์—…๋ฐ์ดํŠธ
  • ์˜ํ™”์˜ index์™€ ๊ฐ€๊ฒฉ ์„ค์ •
  • total๊ณผ count ์—…๋ฐ์ดํŠธ
  • localstorage์—์„œ ๋ฐ์ดํ„ฐ ๊ฐ€์ ธ์˜ค๊ธฐ, UI ์ฑ„์šฐ๊ธฐ

๐Ÿ“• HTML part

html์€ ํฌ๊ฒŒ 4๊ฐ€์ง€๋กœ ๋‚˜๋ˆŒ ์ˆ˜ ์žˆ๋‹ค.

  • movie-container

    selecte๋ฅผ ํ†ตํ•ด ์˜ํ™”๋ฅผ ์„ ํƒํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋งŒ๋“ค์—ˆ๋‹ค.
<div class="movie-container">
  <label>Pick a movie:</label>
  <select id="movie">
    <option value="10">Avengers: Endgame ($10)</option>
    <option value="12">Joker ($12)</option>
    <option value="8">Toy Story 4 ($8)</option>
    <option value="9">The Lion King ($9)</option>
  </select>
</div>
  • showcase

    showcase ๋‚ด๋ถ€์—๋Š” 3 ์ข…๋ฅ˜์˜ seat ํด๋ž˜์Šค๊ฐ€ ์žˆ๋‹ค.
    -> seat, seat selected, seat occupied
<ul class="showcase">
  <li>
    <div class="seat"></div>
    <small>N/A</small>
  </li>
  <li>
    <div class="seat selected"></div>
    <small>Selected</small>
  </li>
  <li>
    <div class="seat occupied"></div>
    <small>Occupied</small>
  </li>
</ul>
  • container

    container ํƒœํฌ๋Š” ๋„ˆ๋ฌด ๊ธธ๊ธฐ์— emmet๋กœ ๊ฐ„๋‹จํ•˜๊ฒŒ ๋‚˜ํƒ€๋‚ด์—ˆ๋‹ค.
    row=8, colum=6. ์ฆ‰ 48์ขŒ์„์„ ๊ฐ€์ง€๊ณ  ์žˆ๋Š” ๊ทน์žฅ์„ ๋งŒ๋“ค์–ด์ค€๋‹ค.
<div class="container">
  <div class="screen"></div>
  .row*6>.seat*8
</div>

๐Ÿ“— CSS part

css๋Š” ๊ฐ„๋‹จํ•˜๊ฒŒ ์ค‘์š”ํ•œ ๊ฒƒ๋งŒ ์งš๊ณ  ๋„˜์–ด๊ฐ€๊ณ ์ž ํ•œ๋‹ค.

  1. ์šฐ์„  body์— flex๋ฅผ ์ ์šฉํ•˜์—ฌ ๋‚ด๋ถ€ ์š”์†Œ๋ฅผ ๊ฐ€์šด๋ฐ๋กœ ์ •๋ ฌํ•˜์˜€๋‹ค.

  2. container ์—๋Š” perspective๋ฅผ ์ ์šฉํ•˜์—ฌ ์Šคํฌ๋ฆฐ์— rotate๋ฅผ ์ ์šฉํ•˜์˜€์„ ๋•Œ, ์›๊ทผ๊ฐ์ด ์ƒ์„ฑ๋˜๋„๋ก ๋งŒ๋“ค์—ˆ๋‹ค.

  3. seat์—์„œ ์™ผ์ชฝ 2๋ฒˆ์งธ ์—ด๊นŒ์ง€๋Š” ์ขŒ์ธก์œผ๋กœ ์ข€ ๋” ์ด๋™ํ•ด์ฃผ๊ณ , ์˜ค๋ฅธ์ชฝ์—์„œ๋ถ€ํ„ฐ 2๋ฒˆ์งธ ์—ด๊นŒ์ง€๋Š” ์šฐ์ธก์œผ๋กœ ์ข€ ๋” ์ด๋™ํ•ด์ค€๋‹ค.

  4. occupied๋œ ์ขŒ์„์€ ํด๋ฆญ์ด ๋ถˆ๊ฐ€๋Šฅํ•˜์—ฌ ์ƒ‰์€ ํšŒ์ƒ‰์œผ๋กœ ์ง€์ •ํ•œ๋‹ค.

  5. not(occuped)์ธ ์ขŒ์„์€ cursor: pointer๋ฅผ ์ง€์ •ํ•ด์ฃผ๊ณ , ๋งˆ์šฐ์Šค๋ฅผ ์˜ฌ๋ ธ์„ ๋•Œ, scale๋ฅผ ํ‚ค์–ด์ค€๋‹ค.

  6. screen์—๋Š” roateX๋ฅผ ์ ์šฉ์‹œ์ผœ์ค€๋‹ค.

profile
๊พธ์ค€ํ•˜๊ฒŒ ๊ณต๋ถ€ํ•˜๊ธฐ

0๊ฐœ์˜ ๋Œ“๊ธ€