자판기 만들기 (vending machine project): 마크업 작업(html)

자판기 만들기 (vending machine project): 마크업 작업(html)_1

IT 공부/프로젝트(project, 부트캠프 및 협업)

by 듀_77 2021. 11. 22. 07:17

멋쟁이사자처럼 FE과정에서

html과 css로 '자판기 만들기' 클론코딩을 했다.

JS까지 했을 경우,

★★★☆☆

별 3개 난이도의 2박 3일짜리 프로젝트라고 한다.

아직 바닐라코딩을 원활하게 하지는 못해서,

수업시간에 배운 내용을 바탕으로

필사하는 식으로 복습을 해보려 한다.

(강사님의 코드 복습!!)

PC버전에, 미디어쿼리를 적용해서

Mobile 버전까지 구현(=복습)할 예정이다.

작업순서

1. HTML 마크업하기

2. css 클래스 순서대로 작업 (배치+스타일링)

(필요에 따라 markup에 class 추가)

3. 반응형 ( 미디어쿼리 ) 작업

4. javascript 로직 작업

마크업 (HTML)

PC 버전의 UI는 위와 같다.

피그마 작업링크를 주셨기 때문에,

padding, margin 같은 사이즈는

전부다 공개된 상태이다.

전체구조는 대략 다음과 같다.

1. <section> id= "wrap"

2. section id ="자판기 부분(=vending-machine)"

3. section id = "잔액 부분 (=my-info)"

로고를 포함해서 전체를 감싸고,

두 섹터 구역으로 나눠서 구현되는 구조다.

semantic markup

**header, footer로 끝나는 게 아니라,

각각의 영역이 명확한 기능을 하고 있으므로

section으로만 구분하도록 한다.

Figma

Created with Figma

www.figma.com

*Figma 저작권은 제주코딩베이스캠프에게 있습니다.

<!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>vending_machine</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@500;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="resource/style/reset(연습).css">
    <link rel="stylesheet" href="resource/style/style(연습).css">
<style>

</style>
</head>
<body>
    <setion id="wrap">

        <h1 class="ir">ColaCola</h1>

        <section class="vending-machine">
            <h2 class="ir">자판기 화면</h2>
        </section>

        <section class="my-info">
            <h2 class="ir">나의 정보 화면</h2>
        </section>
    </setion>
</body>
</html>

작업순서

1. 구글폰트/ reset.css/ style.css 를

head부분에 모두 적용해주었다.

2. 영역 구분 (전체 section,

vending-machine section, my-info section)

** ir은 image_replace의 줄임말이다.

작업의 용이성을 위해 써놓은 문구라

css로 숨김처리를 해줄 예정이다.

** 자판기 화면 섹터에는 css로

클릭했을 때 border 생기는 효과/ 품절/ 아무것도 없는 상태

구현예정!

4. 음료 부분 구현 <ul class="list-item">

-콜라 캔 하나의 영역을, button처리

-javascript 데이터를 받을 수 있도록 처리

<body>
    <setion id="wrap">

        <h1 class="ir">ColaCola</h1>

        <section class="vending-machine">
            <h2 class="ir">자판기 화면</h2>

             <!-- 콜라 6개 있는 영역 -->
            <ul class="list-item">
                <li>
                    <button 
                        class="btn-item"
                        data-item="Original Cola"
                        data-count=""
                        data-price=""
                        data-image=""
                    >
                        <img src="resource/img/Orange_Cola.png" alt="">
                        <strong>Original_Cola</strong>
                        <span>1000원</span>
                    </button>
                </li>
            </ul>

            <!-- 잔액~획득 영역 -->
            <!-- javascript로 반환할 정보들의 'contents' -->
            
        </section>

        <section class="my-info">
            <h2 class="ir">나의 정보 화면</h2>
        </section>
    </setion>
</body>

콜라 6개 있는 영역은,

button 구획 내에서

img/ strong/ span으로 간단하게 처리했다.

<li>영역을 복붙해서, 6개 만들어주고

밑에 이미지랑 글씨만 바꿔주면 완성!!

[button에 data값 적어주는 이유]

js로 버튼에 대한 데이터를 여기서 뽑을 수 있다.

button에서 돈을 빼오고, 반환하고, 잔액 남기는

로직을 넣을 예정!!

object에 data가 있어야만 계산이 가능하다.

(마크업에도 적어두면,

마크업에 해당하는 데이터값을 loading할 수 있다.) _ js 최적화

**

img 태그에서, class는 항상 맨 끝에 적어주기!

5. 콜라 6개 영역 밑에

잔액~ 획득 영역이다.

section이라는 영역 내에서,

위 콜라 6개 영역 + 잔액~획득 영역이 나뉘기 때문에

이 구간 안에 있는

태그들은 div 처리해주었다.

수평정렬해줘야 하니까,

빨간박스/ 주황박스/ 블루박스 구간으로 두개씩 묶는다.

            <!-- 잔액~획득 영역 -->
            <!-- javascript로 반환할 정보들의 'contents' -->

            <!-- 1,2 -->
            <div class="cont-return">
                
                <!-- 1 -->
                <div class="info-balance">
                잔액 :
                <span class="txt-balance">
                    1,000원
                </span>
                </div>

                <!-- 2 -->
                <button type="button" class="btn-return">거스름돈 반환</button>

            </div>

한 줄씩 구현하기로 한다.

5-1. 잔액, 거스름돈 반환 (1,2)

클래스명 contents-return으로

전체 2영역을 묶는다.

** 클래스명

잔액: info-balance/txt-balance

거스름돈 반환: btn-return

-balance가 영어로 '잔액'이라는 뜻이니까

위와 같은 클래스명을 지었다.

-'거스름돈 반환'은 클릭되는 부분이니까,

button태그로 구현해준다.

<!-- 반환할 정보들의 contents -->
            <!-- 1, 2 -->
            <div class="cont-return">
                <!-- 1 -->
                <div class="info-balance">
                    잔액 : 
                    <span class="txt-balance">
                        1,000원
                    </span>
                </div>
                <!-- 2 -->
                <button type="button" class="btn-return">거스름돈 반환</button>
            </div>
            <!-- 3, 4 -->
            <div class="cont-put">
                <!-- 3 -->
                <input type="number" class="inp-put" placeholder="입금액 입력">
                <!-- 4 -->
                <button class="btn-put">입금</button>
            </div>

5-2. 입금액 입력, 입금 (3,4)

**클래스명

cont-put

콘텐츠 put부분으로 묶는다.

입금액 입력: inp-put

입금: btn-put

-입력해야되는 칸이 있으므로, input 태그로 구현

-입금 버튼은 button 태그로 구현

-input type은 입금액 입력이므로,

숫자값이 들어가야하니 number로 적어준다.

-scroll 바는 css로 구현 예정 (디자인 변경도 가능)

[class 명이 중복되는 이유]

형제 선택자 써서, 구체적으로 어느 위치인지

표기할 거라 상관없다.

 <!-- 반환할 정보들의 contents -->
            <!-- 1, 2 -->
            <div class="cont-return">
                <!-- 1 -->
                <div class="info-balance">
                    잔액 : 
                    <span class="txt-balance">
                        1,000원
                    </span>
                </div>
                <!-- 2 -->
                <button type="button" class="btn-return">거스름돈 반환</button>
            </div>
            <!-- 3, 4 -->
            <div class="cont-put">
                <!-- 3 -->
                <input type="number" class="inp-put" placeholder="입금액 입력">
                <!-- 4 -->
                <button class="btn-put">입금</button>
            </div>
            <!-- 5, 6 -->
            <div class="cont-get">
                <!-- 5 -->
                <strong class="ir">선택한 음료</strong>
                <ul class="list-item-staged">
                 <!-- 스타일 같은 게 있어서 재활용 가능! -->
                    <li class="item-staged">
                        <img src="./resource/img/Original_Cola.png" alt="" class="img-item">
                        <strong class="txt-item">Original_Cola</strong>
                        <span class="num-counter">1</span>
                    </li>
                </ul>
                <!-- 6 -->
                <button type="button" class="btn-get">획득</button>
            </div>

5-3. 선택한 음료, 획득 버튼 (5,6)

**클래스명

cont-get

콘텐츠 get 부분으로 묶는다.

음료 리스트: list-item-staged

획득: btn-get

-리스트 형태로, 음료 칸이 있으므로,

<li> 태그로 묶고,

각각 img와 문구로 구현

(스크롤과 <li> 추가로 더 적기)

-획득 버튼은 button으로 구현한다.

  <h1 class="ir">나의 정보 화면</h1>
            <!-- 2-1 -->
            <div class="cont-mymoney">
                <div class="info-mymoney">
                    소지금 :
                    <span class="txt-mymoney">
                        25,000원
                    </span>
                </div>
            </div>

6. 소지금 / 25,000원

**클래스명
cont-mymoney

소지금: info-mymoney
25,000원 : txt-mymoney

 <!-- 2-2 -->
            <div class="cont-myitems">
                <strong>획득한 음료</strong>
                <ul class="list-item-staged">
                    <li class="item-staged">
                        <img src="" alt="" class="img-item">
                        <strong class="txt-item">Original_Cola</strong>
                        <span class="num-counter">1</span>
                    </li>
                </ul>
                <strong class="txt-total">총금액 :
                    <span class="txt-total-money">                        
                        0원
                    </span>
                </strong>
            </div>

7. 획득한 음료 / 음료 리스트 / 총금액 : 0원

**클래스명
cont-myitems

-음료 리스트: list-item-staged

음료 리스트는 ul/li 로 구현,
콘텐츠는 img/ strong /span 으로
사진과 텍스트 적어주기!

<!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>ColaCola</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@500;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="resource/style/reset.css">
    <link rel="stylesheet" href="resource/style/style.css">
</head>
<body>
    <section id="app">
        <h1 class="tit-app ir">cola cola</h1>
        <section class="vending-machine">
            <h2 class="ir">자판기 화면</h2>
            <ul class="list-item">
                <li>
                    <button 
                        class="btn-item"
                        data-item="Original Cola"
                        data-count=""
                        data-price=""
                        data-image=""
                    >
                        <img src="resource/img/Original_Cola.png" alt="" class="img-item">
                        <strong class="tit-item">Original_Cola</strong>
                        <span class="txt-item">1000원</span>
                    </button>
                </li>
                <li>
                    <button 
                        class="btn-item"
                        data-item="Original Cola"
                        data-count=""
                        data-price=""
                        data-image=""
                    >
                        <img src="resource/img/Original_Cola.png" alt="" class="img-item">
                        <strong class="tit-item">Original_Cola</strong>
                        <span class="txt-item">1000원</span>
                    </button>
                </li>
                <li>
                    <button 
                        class="btn-item"
                        data-item="Original Cola"
                        data-count=""
                        data-price=""
                        data-image=""
                    >
                        <img src="resource/img/Original_Cola.png" alt="" class="img-item">
                        <strong class="tit-item">Original_Cola</strong>
                        <span class="txt-item">1000원</span>
                    </button>
                </li>
                <li>
                    <button 
                        class="btn-item"
                        data-item="Original Cola"
                        data-count=""
                        data-price=""
                        data-image=""
                    >
                        <img src="resource/img/Original_Cola.png" alt="" class="img-item">
                        <strong class="tit-item">Original_Cola</strong>
                        <span class="txt-item">1000원</span>
                    </button>
                </li>
                <li>
                    <button 
                        class="btn-item"
                        data-item="Original Cola"
                        data-count=""
                        data-price=""
                        data-image=""
                    >
                        <img src="resource/img/Original_Cola.png" alt="" class="img-item">
                        <strong class="tit-item">Original_Cola</strong>
                        <span class="txt-item">1000원</span>
                    </button>
                </li>
                <li>
                    <button 
                        class="btn-item"
                        data-item="Original Cola"
                        data-count=""
                        data-price=""
                        data-image=""
                    >
                        <img src="resource/img/Original_Cola.png" alt="" class="img-item">
                        <strong class="tit-item">Original_Cola</strong>
                        <span class="txt-item">1000원</span>
                    </button>
                </li>
            </ul>
            <!-- 반환할 정보들의 contents -->
            <!-- 1, 2 -->
            <div class="cont-return">
                <!-- 1 -->
                <div class="info-balance">
                    잔액 : 
                    <span class="txt-balance">
                        1,000원
                    </span>
                </div>
                <!-- 2 -->
                <button type="button" class="btn-return">거스름돈 반환</button>
            </div>
            <!-- 3, 4 -->
            <div class="cont-put">
                <!-- 3 -->
                <input type="number" class="inp-put" placeholder="입금액 입력">
                <!-- 4 -->
                <button class="btn-put">입금</button>
            </div>
            <!-- 5, 6 -->
            <div class="cont-get">
                <!-- 5 -->
                <strong class="ir">선택한 음료</strong>
                <ul class="list-item-staged">
                    <li class="item-staged">
                        <img src="./resource/img/Original_Cola.png" alt="" class="img-item">
                        <strong class="txt-item">Original_Cola</strong>
                        <span class="num-counter">1</span>
                    </li>
                </ul>
                <!-- 6 -->
                <button type="button" class="btn-get">획득</button>
            </div>
        </section>
        <section class="my-info">
            <h2 class="ir">나의 정보 화면</h2>
            <!-- 2-1 -->
            <div class="cont-mymoney">
                <div class="info-mymoney">
                    소지금 :
                    <span class="txt-mymoney">
                        25,000원
                    </span>
                </div>
            </div>
            <!-- 2-2 -->
            <div class="cont-myitems">
                <strong class="tit-myitem">획득한 음료</strong>
                <ul class="list-item-staged">
                    <li class="item-staged">
                        <img src="./resource/img/Original_Cola.png" alt="" class="img-item">
                        <strong class="txt-item">Original_Cola</strong>
                        <span class="num-counter">1</span>
                    </li>
                </ul>
                <strong class="txt-total">
                    총금액 :
                    <span class="txt-total-money">
                        0원
                    </span> 
                </strong>
            </div>
        </section>
    </section>
</body>
</html>

빈 공간의 클래스는 css 작업하면서 채워준다.
컨트롤해야할 것들이 많기 때문에,
웬만하면 class명은 요소마다 다 지어주고 시작하는 게 좋다.

[div, span 태그 쓰는 이유]

div를 section으로 교체 가능 하지만,

section 들어갈 자리가 아니어서 섹션 넣는 것보다

그냥 div를 쓰는 게 낫다.

**list 자리는 div대신 ul로 처리가 가능하다.

→ 여기서 span 태그 안 쓰기가 어렵다.

사용할 태그가 없을 때 최후의 수단으로

div, span은 써도 된다.

[strong 태그 쓰는 이유]

p대신 strong 쓰는 이유는,

문장보다 한 단어에 가깝기 때문에

strong을 써준다.

(p태그도 사용 가능)

저작자표시 비영리 변경금지

'IT 공부 > 프로젝트(project, 부트캠프 및 협업)' 카테고리의 다른 글

로또 번호 생성 알고리즘 javascript로 작성하기 (0)	2022.01.24
[Node.js] 블로그 웹사이트 만들기-1 (기본세팅,router,요구사항 명세서 get까지) (0)	2022.01.07
셀렉트박스 커스텀(select box custom) ul, li로 만들기 (0)	2021.11.30
1-2. 홈페이지 제작: css 입히기 (값 초기화, css.reset) (0)	2021.10.05
1-1. 홈페이지 만들기: html로 구조짜기 (header 부분) (0)	2021.08.26

듀의 자료저장소

고정 헤더 영역

메뉴 레이어

메뉴 리스트

검색 레이어

검색 영역

상세 컨텐츠

본문 제목

본문

작업순서

마크업 (HTML)

[class 명이 중복되는 이유]

[div, span 태그 쓰는 이유]

[strong 태그 쓰는 이유]

'IT 공부 > 프로젝트(project, 부트캠프 및 협업)' 카테고리의 다른 글

관련글 더보기

댓글 영역

추가 정보

인기글

최신글

티스토리툴바