웹22 6. 부트스트랩을 이용해서 상품페이지 틀 만들어보기 귀여운 곰 인형을 팝니다. 가격:1,0000원/개 미니소에서 팔고 있는 귀여운 곰 인형이에요. 카카오톡 선물하기에도 이렇게 생긴 곰인형이 많더라구요. 제 애착인형이에요. 주문자 이름 옵션 --옵션을 선택하세요-- 브라운 베어 허니 베어 블랙 베어 수량 --수량을 선택하세요-- 1개 2개 3개 전화번호 주문하기 결과 1. 부트스트랩 템플릿 적용 2. 이미지 주소를 넣어주고 margin과 width를 조절함 3. 상품명을 적어주고, 옆에 가격을 적어주는데 가격은 글자 크기를 줄여야 하므로 을 이용한다. 4. 부트스트랩에서 적절한 코드를 찾아와 복붙해준다. 5. 자바스크립트를 이용해서 주문하기 버튼을 누르면 주문이 완료되었다는 알림창이 나타나게 한다. -> 자바스크립트 함수를 만들어서 버튼 클래스 앞에 onc.. 2021. 8. 22. 5. 부트스트랩 이용해서 포스팅박스 추가하기 https://getbootstrap.com/docs/4.0/components/forms/ Forms Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms. getbootstrap.com 위의 페이지에 들어가서 forms 코드를 copy 으로 묶여있는 곳에 붙여넣어 주고, 을 로 바꾼다. 그러면 아래와 같이 나오게 되는데, 이메일 박스처럼 보이는 부분을 이제 포스팅 박스 형태로 바꿔주면 된다. https://developer.mozilla.org/ko/docs/Web/CSS/border border - CSS: Cascadin.. 2021. 8. 21. 4. 부트스트랩이용해서 메모(카드) 페이지 만들기 https://getbootstrap.com/docs/4.0/components/jumbotron/ Jumbotron Lightweight, flexible component for showcasing hero unit style content. getbootstrap.com 해당 페이지에 접속 후, copy 클릭 밑에 붙여넣어 준다. 위와 같이 나오게 된다. 그리고 왼쪽 메뉴에 cards로 들어가서 위 그림에 해당하는 코드를 copy해서 jombotron 밑에 붙여넣기 해준다. 결과 이미지가 안 뜨는 이유: 코드를 자세히 보면 카드 이미지 소스가 ...으로 되어 있기 때문이다. 이제 이미지를 넣어보자. 위와 같이 card 하나만 남겨두고 다 삭제 시켜준 뒤에, 마음에 드는 사진 하나를 골라 '이미지 주.. 2021. 8. 20. 3. 부트스트랩 그렇다고 한다. * 부트 스트랩 시작 템플릿: 부트 스트랩을 사용하기 위한 준비를 하는 것 index.html 파일을 새로 생성한 후, 아래의 코드들을 작성해준다. #mood 위의 코드를 작성하면, 웹 페이지만 #mood 글씨만 나올뿐, 아무것도 나오지 않는다는 것을 확인할 수 있다. 무언가를 적용하기 위해서는 컴포넌트를 적용해야 한다. 부트스트랩을 적용하기 위해서는 항상 위의 코드와 같은 시작 템플릿을 적용하고 시작해야 한다. https://getbootstrap.com/docs/4.0/components/alerts/ Alerts Provide contextual feedback messages for typical user actions with the handful of available and .. 2021. 8. 19. 이전 1 2 3 4 5 6 다음
