코드스테이츠 엔트리 코스 4일차/5일차

 

 

 

<4일차>

---

 

(참고)

 

 

이번 목표는 지금까지 배운 내용들을 활용하여 키오스크 만들기.

 

[실습1] 레이아웃 만들기

메뉴 선택이 안되는 걸 나중에 알았는데, menu 스펠링이 틀려있었다. 항상 조심하기!  

 

 

 

 

 

다음으로 옵션을 추가하기 위해  input 태그를 사용하게 되는데, input 태그란 웹페이지 상에 어떤 값을 입력하고 싶을 때 사용하는 태그이다. 

 

 

+ 더 다양한 input tag 타입 ↓↓↓

 

https://www.w3schools.com/tags/tag_input.asp

HTML input tag

 

 

 

[실습2] 적절한 태그 속성 적용하기

사이트에서 제공한 답을 보니 number 타입의 input 태그를  <input type="number" min=1 max=3/> 와 같이 사용할 수도 있는 것 같았다. 문제에 3잔 이하만 주문할 수 있다는 말은 없었던 것 같지만.

 

 

 

[실습3] 주문 내역 전송하기

여기까지 하면 귀여운 고양이가 키오스크에 입력한 대로 주문서를 받아 간다. 

 

근데 왜 내 키오스크만 칙칙한 색이지..?

보너스 실습을 통해 내 마음대로 키오스크 꾸미기를 진행해 보기로 했다.

 

▶ 텍스트 꾸미기

<br> : 줄 바꿈

color : 글자 색 정하기

font-size : 글자 크기 조절하기

font-weight : 글자 굵기 조절하기

text-shadow : 글자에 그림자 효과 주기

 

▶ 태그 꾸미기

background-color : 배경색 지정하기

background-image : 배경 이미지 지정하기

box-shadow : 그림자 효과 주기

border-radius : 사각형을 부드럽게 만들기

opacity : 투명도 조절하기

 

+ 더 다양한 HTML 태그, CSS 속성은 구글 등에 검색해 보기. 검색 능력은 개발자의 필수 능력!

 

 

 

[보너스 실습] 내 마음대로 키오스크 꾸미기

 

 

 

 

 

 

<5일차>

---

 

실습(1)

→ 문자열 표시 잊지 말기.

 

 

 

실습(2)

 

 

 

 

실습(3)

 

음 이건 한참을 고민하다 checkRecipe.js에서 힌트를 얻어 코드를 작성했다.

다른 음료들도 각각 알맞게 수정해서 붙여 넣어 확인해 봤고, 스무디류의 레시피에 실수로 "우유" 대신 "물"을 넣은 것을 발견했다. 거기까지 고치고 실행하자 드디어 어떤 주문이든 만들 수 있는 코드가 완성되었다.

 

 

 

마지막으로 프론트엔드, 백엔드의 역할에 대해 간단히 소개한 글과 수강생 프로젝트를 볼 수 있는 화면이 나오며 엔트리 코스가 종료되었다. 아무래도 나는 프로트엔드 쪽에 더 관심이 가는 것 같다.

 

실습을 하면서 어려운 부분도 물론 있었지만, 문제를 해결해나가며 재미와 뿌듯함을 느꼈다. 그리고 사용되는 언어와 툴을 자유자재로 다루기 위해 많은 연습이 필요하겠다는 생각이 들었다. 

이틀간 이 엔트리 코스를 진행하면서 갖고 있던 막연함이 그래도 조금은 사라진 것 같다.