전체 글 (60) 썸네일형 리스트형 사탕 박물관 프로젝트 CANDY HOME ABOUT TICKETS MUSEUM/OF/CANDY MUSEUM/OF/CANDY MUSEUM/OF/CANDY MUSEUM/OF/CANDY MUSEUM/OF/CANDY MUSEUM/OF/CANDY MUSEUM/OF/CANDY MUSEUM OF CANDY Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque, iste molestiae beatae, maiores deserunt in voluptatibus aspernatur architecto excepturi delectus soluta? Ipsa, deleniti dolorem hic consequatur repellat eveniet quidem voluptate nec.. 가격표 만들기 프로젝트 HTML 코드 더보기 Personal Custom domains Sleeps after 30 mins of inactivity Free Sign up Small team Never sleeps Multiple workers for more powerful apps $150 Free trial Enterprise Dedicated Simple horizontal scalability $400 Free trial HTML 삽입 미리보기할 수 없는 소스 반응형 CSS 및 Flexbox Flexbox를 다루려면 주축과 교차축을 이해 해야한다. 주축은 flex-direction에 의해 정의되고 4개의 값을 가질 수 있다. row 혹은 row-reverse를 선택하면 주축은 인라인 방향으로 행을 따른다. row로 설정한다면 주축은 왼쪽에서 오른쪽 방향이고, row-reverse는 반대이다. column 혹은 column-reverse 을 선택하면 주축은 페이지 상단에서 하단으로 블록 방향을 따른다. column으로 설정한다면 주축은 위에서 아래 방향이고, column-reverse는 반대이다. 교차축은 간단하다. 위에서 말한 주축과 수직되는 방향이다. 주축이 row면 교차축은 column, 주축이 column이면 교차축은 row다. flex-direction이 row일 때 HTML 삽입 미.. 유용한 CSS 속성들 불투명도와 알파 채널 rgba 요소의 배경 투명도만 조절해서 그 요소 안에 있는 컨텐츠는 그대로 보이게 할 수 있음. ex) background-color: rgba(255,255,255,0.7); opacity 요소 전체 투명도를 조절함. ex) opacity: 0.3; 위치 속성 Static 지금까지 다뤘던 모든 요소의 기본 위치 특성. Relative 해당 요소는 문서의 일반적인 흐름에 따라 위치가 지정되며, 그 후에는 top, right, bottom 및 left의 값에 따라 자체적으로 오프셋이 적용된다. 이 오프셋은 다른 요소들의 위치에 영향을 주지 않으므로, 위치가 정적(static)인 경우와 동일하게 페이지 레이아웃에서 요소에 할당된 공간은 변하지 않는다. Absolute 해당 요소는 일반적.. CSS 박스 모델 테두리와 모깎기 box-sizing: border-box; 좌우의 테두리를 기준으로 요소의 크기가 결정됨. 이 특성이 없으면 콘텐츠를 크기 기준으로 삼아서 테두리 두께만큼 늘어나서 크기가 커짐 속기법 테두리의 두께와 색상 그리고 스타일을 설정할 때 width style color ex) border: medium dashed green; ex) border: 4px solid white; 모깎기 모서리의 곡률을 조정하는 특성 ex) border-radius: 10px; ex) border-radius: 50%; --> 정원형을 만드는 방법 상단 왼쪽을 깎는 등 개별 위치에서 모깎기도 가능하다. 패딩 콘텐츠 박스와 요소를 둘러싼 테두리 사이에 남은 공간 어떤 물건이 있으면 그걸 담을 박스가 필요하다. 박스.. 선택자의 세계 전체 요소 선택자 * { color: black; } 요소 선택자 ex) img { width: 100px; } 선택자 목록 h1, h2 { color: magenta; } ID 선택자 #id { background-color: green; } 하나의 id는 페이지 내에 한 번만 나와야한다. id 선택자 사용은 최소화하자. 클래스 선택자 .class { color: green; } 자손 선택자 li a { color: teal; } li 태그는 선택되지않고, li태그 안에있는 a태그만 선택된다. .post a { post라는 클래스에 속한 a태그만 선택된다. } 인접 선택자 h1 + p { color: red; } h1 태그 다음으로 오면서 같은 단계인 p 태그가 선택된다. 직계 자손 선택자 div > .. 결제 내역 페이지 만들기 client/src/components/views/HistoryPage/HistoryPage.js 폴더와 파일을 만든다. import React from 'react' function HistoryPage(props) { return ( History Payment Id Price Quantity Date of Purchase {props.user.userData && props.user.userData.history && props.user.userData.history.map(item => ( {item.id} {item.price} {item.quantity} {item.dateOfPurchase} ))} ) } export default HistoryPage 리덕스에 이미 history 배열이 존.. Paypal로 결제 성공 후 할 일들 카트를 비우기 결제 정보 저장하기 Payment Collection (Detailed) User Collection (Simple) 더보기 import React, {useEffect, useState} from 'react' import {useDispatch} from 'react-redux'; import {getCartItems, removeCartItem, onSuccessBuy} from '../../../_actions/user_actions'; import UserCardBlock from './Sections/UserCardBlock'; import {Empty, Result} from 'antd' import Paypal from '../../utils/Paypal'; function .. 이전 1 2 3 4 5 ··· 8 다음