웹개발 종합반 1주차 (1-16) : 숙제- 원 페이지 쇼핑몰 만들기

과제는 homework 폴더 안에서 진행.

 

homework 폴더 열기

그 안에 index.html 파일 만들어서

시작 템플릿 붙여 넣고 시작.

 

*과제 내용

▼부트스트랩 홈페이지▼ 참고해서

예시 이미지처럼 레이아웃 만들고

주문하기 버튼 누르면 '주문이 완료되었습니다.' alert 하기.

https://getbootstrap.com/docs/4.0/components/alerts/

---

 

< hint >

*이미지 : div로 영역 만들고

               background에 이미지 씌워도 되고,

               img 태그만 사용해도 됨. <img src ="">

*주문하기 버튼처럼

  text 속성을 가진 컴포넌트 가운데 정렬:

       가로 길이 설정 , margin: auto; 해서

       안되면 display : block ;으로 설정할 것.

---

<!-- 처음 과제 했을 때, 내 블로그에 업로드했던 이미지

주소를 복사해서 써봤는데 안 되길래

네이버 검색 > 이미지 주소 복사했더니 해결되었다. -->

<!-- 내가 로그인 한 상태로 연 포스팅의 링크라 그런 걸까..?

다른 사람이 접근할 수 없으니까.

그래서 누구나 접근 가능한 검색으로 나온 페이지면 가능하지 않을까

하며 해결했던 건데 아직도 정확한 이유는 잘 모르겠다. -->

img 태그로 한 것과  /  div 태그로 한 것.

/* img가 더 짧고 단순해 보이긴 하는데..

어차피 class 걸어야 하는 건 똑같으니 body 코드를 짧게 두고

css에서 한 번에 관리하는 게 나을 것 같아서 div로 진행.

body에서 전체를 묶는 것도 div 니까 이미지도 div로 통일하기로. */

 

구글링 해보니

background-image에는 여러 사진을 레이어로

겹칠 수 있는 기능도 있다.

https://developer.mozilla.org/en-US/docs/Web/CSS/background-image

 

예시 사진이랑 똑같이 만드는 건 이미 해봤기도 하고

커미션 페이지랑 안 맞는 기능이라서

연습할 겸 아예 다르게 디자인해봤다. 

 

배운 거 써먹고 싶은 욕심에.. 이것저것 기능 추가하려다

시간 모자랄 것 같아 일단 여기까지만.