묻고 답해요

COPY --from=builder /usr/src.\/app/build 문 not found 에러 발생

미해결

따라하며 배우는 도커와 CI환경 [2023.11 업데이트]

안녕하세요 수업내용 중 운영환경 도케 이미지를 위한 Dockerfile 작성하기 에서 *********************************************** FROM node:alpine as builder WORKDIR /usr/src/app COPY package.json ./ RUN npm install COPY ./ ./ CMD ["npm", "run", "build"] FROM nginx COPY --from=builder /usr/src/app/build /usr/share/nginx/html *********************************************** 위 와 같이 작성하였더니 아래 이미지와 같은 에러가 확인되었습니다. > [stage-1 2/2] COPY --from=builder /usr/src/app/build /usr/share/nginx/html: ------ Dockerfile:9 -------------------- 8 | FROM nginx 9 | >>> COPY --from=builder /usr/src/app/build /usr/share/nginx/html -------------------- ERROR: failed to solve: failed to compute cache key: failed to calculate checksum of ref 800cbe25-2c37-4cd8-a955-7b83c9ca7ed6::qsbcjgd4h6b5x2kfg8hzb8sb0: "/usr/src/app/build": not found *********************************************** >>> 경로를 생성하지 못하여 발생하는 것처럼 느껴져 RUN make -p 명령어를 사용하여 not found 되고 있다는 경로를 직접 생성해주고 나니 정상 build 되기는 하였습니다만. 이렇게 하면 혹시 덮어쓰기 되지 않을까해서 문의를 별도로 넣습니다. FROM node:alpine as builder WORKDIR /usr/src/app RUN mkdir -p /usr/src/app/build COPY package.json ./ RUN npm install COPY ./ ./ CMD ["npm", "run", "build"] FROM nginx COPY --from=builder /usr/src/app/build /usr/share/nginx/html

• aws
• docker
• github
• ci/cd
• travis-ci
• 데이터-엔지니어링

tdd에 대한 질문 있습니다

미해결

안녕하세요. tdd에 대해 배운지 얼마 안된 학생입니다. 실패하는 코드를 짠다 -> 돌아가는 코드를 만든다 -> 리펙터링을 한다 까지는 이해가 되고 이렇게 코드를 작성함으로써 프로그램이 더 견고해지는 느낌은 마음에 듭니다. 하지만 나중에 요구사항이 바뀔 시 테스트코드도 싹 다 엎어버려야하는 것 아닌가요? 꼼꼼하게 테스트 코드를 작성했는데 요구사항이 바뀌면 수정하는데 시간이 두 배 더 드는게 아닐까 싶어서요. 메서드 명이나 필드명을 바꾸고 싶을 땐 테스트코드에 있는것들도 다 바꿔야 하는거잖아요. 이런건 어쩔 수 없는 부분인가요? 소위 말하는 테스트 코드가 "깨진다"에 대한 노하우가 있는지 궁금합니다.

children 오류??

미해결

Next + React Query로 SNS 서비스 만들기

(afterLogin)의 layout.tsx에서 35번째 주석부분 children이요 여기 children에 각 폴더 page.tsx, layout.tsx이 들어가는건가요?? 여기 35번 줄 children 주석풀고 실행해보면 이런 오류 뜨는데 왜 이런지 알 수 있을까요??

• react
• next.js
• react-query
• next-auth
• msw

자동 구성 정보 클래스를 작성한다면

해결됨

토비의 스프링 부트 - 이해와 원리

@Configuration(proxyBeanMethods = false) static class MyConfig { private final Common common; public MyConfig(Common common) { this.common = common; } @Bean public Bean1 bean1() { System.out.println("bean1 생성자"); return new Bean1(common); } @Bean public Bean2 bean2() { System.out.println("bean2 생성자"); return new Bean2(common); } } @Configuration(proxyBeanMethods = false) static class MyCommonConfig { @Bean public Common common() { return new Common(); } } 과 @Configuration(proxyBeanMethods = false) static class MyConfig { @Autowired private Common common; public MyConfig() { } @Bean public Bean1 bean1() { System.out.println("bean1 생성자"); return new Bean1(common); } @Bean public Bean2 bean2() { System.out.println("bean2 생성자"); return new Bean2(common); } @Bean public Common common() { return new Common(); } } 빈 구성 정보를 프록시 객체로 생성하지 않는다는 대안을 코드로 작성해보면 별도의 구성 정보를 사용하는 방식과 내부에서 필드 주입으로 초기화 하는 방식이 생각났습니다. 별도의 구성정보를 사용하면 어떤 클래스를 의존하는지 생성자를 보고 확인할 수 있다는 장점과 테스트 코드를 작성할때 더 편할거라 생각이 들고, 밑에 방식은 Common이라는 클래스가 MyConfig 에서만 사용된다면 관리하기도 편할거라 생각이 들었습니다. 그리고 설정 정보 클래스니까 굳이 생성자로 초기화를 하지 않아도 되지 않을까 라는 생각도 들었습니다. 강사님께서 Config 클래스도 테스트를 해봐야한다고 말씀해주셨는데 이런 경우라면 상황에 따라 선택해야하는 부분인가요 ? 아니면 설정 정보도 환경에 따라 다를 경우가 있느니까 별도로 분리하는게 나을까요?

• spring
• spring-boot
• spring-jdbc

postmapping 에서의 모델바인딩 객체

미해결

스프링 MVC 2편 - 백엔드 웹 개발 활용 기술

폼에서 작성한 데이터들이 @PostMapping("/add)로 넘어가서 @ModelAttribute 를 통해 item 객체에 요청 파라미터를 프로퍼티 접근법으로 값을 세팅하고 모델에 item 객체를 item 의 이름으로 바인딩 되는것이 맞죠? 맞다면, @ModelAttribute 를 통해 바인딩 되는 객체는 addForm 메소드에서 만들어주어서 타임리프에 활용가능하게 넘겨주었던 그 item 객체인가요?(같은 객체를 재사용하는건지) , 아니면 새로운 객체를 또 만들어서 새로운객체에 값을 세팅해주고 모델에 바인딩을 해주는것인지 궁금합니다 수정폼에서 Item item = itemRepository.findById(itemId); 에서 찾는 item (entity?) 도 addForm 에서 새로 생성했던던 그 객체인것이죠?

• spring
• mvc

*str 의 값

미해결

홍정모의 따라하며 배우는 C언어

안녕하세요 교수님께서 10분 30초 쯤에 작성하시던 코드에서 while (*str) 이라고 작성하신 부분이 있는데요, 이 부분은 *str 이 0이 아니면 while문을 진행시킵니다. 또한 강의 중 while (*str) 와 while (*str != '\0') 는 같은 역할은 한다고 말씀하신 바가 있습니다. str 주소를 하나씩 옮겨가면서 읽을 값은 차례대로 1, 2, 3, 4, 5, \0 인데 \0과 0은 다릅니다. 근데 어떻게 *str != 0 로 처리돼서 while문이 진행된건지 궁금합니다.

• c

H2 설정삭제시초기화 방법

해결됨

삭제해서 재설치해도똑같아요 복귀하는방법좀알려주세요 ㅠㅠ 윈도우기준

@ResponseBody 어노테이션을 쓰는 메소드와 안 쓰는 메소드 차이가 궁금합니다.

해결됨

스프링 MVC 1편 - 백엔드 웹 개발 핵심 기술

학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예) [질문 내용] 안녕하세요 강의를 듣다가 헷갈리는 부분이 있어서 질문 드립니다. @ResponseBody를 메소드에 붙이고 안 붙히는 기준이 궁금합니다. 일단 제가 이해한 @ResponseBody는 뷰를 따로 사용하지 않고 HTTP 응답 본문에 메소드가 리턴한 정보(원시 데이터 또는 객체=json)를 입력해서 응답하는 것으로 이해했습니다. 근데 아래 사진의 빨간 밑줄 친 메서드들을 보면 뷰의 논리적 이름이 아닌 ResponseEntity 객체를 리턴하는 것으로 보여지고 객체를 리턴하면 HTTP 응답 본문에 입력하려면 @ResponseBody 어노테이션이 필요한 것이 아닌가 궁금합니다. 그런데 ResponseEntity의 코드를 보니까 HttpEntity를 상속 받던데 ResponseEntity가 HTTP 응답 그 자체라서 @ResponseBody를 사용하지 않는 것인가요? 답변 주시면 정말 감사하겠습니다.

• spring
• mvc
• ResponseBody
• http응답

rotate, skewX, translate 값 찾기 질문드립니다..

미해결

HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)

.app-ui { /* border: 1px solid red; */ width: 340px; height: 640px; transform: rotate(-30deg) skewX(20deg); /* transform: skewX(); */ position: relative; } .app-ui:hover img:nth-child(1){ transform: translate(40px, -40px); } .app-ui 요소를 rotate (-30deg) skewX(20deg) 해서 .app-ui:hover 밑에 이미지를 translate(40px, -40px) 한 것 같은데 이 때 숫자는 어떻게 40이라는 값이 나온걸까요? 수직으로 올리는 값을 어떻게 정하는 걸까요? 10 20 30 40 다 넣어보면서 찾는건가요..? ㅠㅠ

• HTML/CSS
• jquery

URL 매핑 관련해서 질문드립니다.

미해결

장고 설계철학으로 시작하는 파이썬 장고 입문

안녕하세요 선생님. 수업 잘듣고 있습니다. "장고앱 폴더만 다른 프로젝트로 복사하면 복잡한 설정없이 사용할 수 있다."라는 것에 대해 질문이 있는데요. 폴더를 복사해서 사용하게 되면 복사가된 폴더와 복사를 한 폴더의 models 파일이 같은 테이블을 바라보게 되는데 한 폴더에서 models의 내용을 수정해 table내용을 변경하게 된다면 나머지 다른 폴더도 변경해줘야 하지 않을까요? 그렇게 된다면 models라는 폴더는 공용으로 쓰는게 맞지 않나 생각합니다. 또 다른 질문이 있습니다. FastAPI를 사용했다는 가정하에 Layer가 잘 나눠져 있다는 가정하에 UrL이 매핑되어 있어도 Controller 함수만 하나더 추가하면 더 유연한 구조가 될거 같은데요. 선생님 생각은 어떤지 궁금합니다. 느슨한 결합 부분에서 복붙을해서 프로젝트를 확장하는 것이 확장성이 있는 장점인지 잘 모르곘습니다. 수업 잘듣고 있습니다. 감사합니다!

• python
• django

코드 질문드립니다.

해결됨

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

import "./App.css"; import { BrowserRouter, Route, Routes } from "react-router-dom"; import Board from "./common/Board"; import Login from "./component/Login"; import { useEffect } from "react"; function App() { useEffect(() => console.log("app is loading"), []); return ( <BrowserRouter> <Routes> <Route path="/login" element={<Login />}></Route> <Route path="/board/:boardId/page/:page" element={<Board />}></Route> <Route path="/board/:boardId/new" element={<Board />}></Route> <Route path="/board/:boardId/post/:postId" element={<Board />}></Route> <Route path="/board/:boardId/post/:postId/edit" element={<Board />} ></Route> </Routes> </BrowserRouter> ); } export default App; import React, { useEffect, useState, useContext } from "react"; import { useNavigate, useParams } from "react-router-dom"; // useParams를 import import BoardList from "../component/BoardList"; import BoardEdit from "../component/BoardEdit"; import BoardView from "../component/BoardView"; import Layout from "../layout/Layout"; import axios from "axios"; import { TokenProcess } from "../common/TokenProcess"; export const BbsSettingContext = React.createContext(); const Board = () => { const { boardId, postId, page } = useParams(); // const [currentUrl, setCurrentUrl] = useState(null); const [boardSettData, setBoardSettData] = useState(null); const navigate = useNavigate(); useEffect(() => { console.log("board:::::::::::::::::"); const fetchData = async () => { const access_token = localStorage.getItem("Authorization"); try { const response = await axios.get( `http://localhost:8080/api/board/${boardId}`, { headers: { Authorization: `Bearer ${access_token}`, }, } ); setBoardSettData(response.data.returnData.board); let mode = ""; if ( window.location.pathname.split("/")[3] == "page" && window.location.pathname.split("/")[5] == null ) { mode = "page"; } else if ( window.location.pathname.split("/")[3] == "post" && window.location.pathname.split("/")[5] == null ) { mode = "view"; } else if (window.location.pathname.split("/")[5] == "new") { mode = "new"; } else if (window.location.pathname.split("/")[5] == "edit") { mode = "edit"; } else { mode = ""; } setCurrentUrl(mode); console.log("모드" + mode); } catch (error) { console.log(error); if ( error.response.status == 401 && error.response.data.data == "EXPIRE_TOKEN" ) { (await TokenProcess()) ? fetchData() : navigate("/login"); } else { console.log(error); return false; } } }; fetchData(); }, [window.location.pathname]); return ( <BbsSettingContext.Provider value={boardSettData}> {currentUrl == "page" ? ( <Layout> <BoardList boardId={boardId} page={page} /> </Layout> ) : currentUrl == "new" ? ( <Layout> <BoardEdit /> </Layout> ) : currentUrl == "edit" ? ( <Layout> <BoardEdit boardId={boardId} postId={postId} /> </Layout> ) : currentUrl == "view" ? ( <Layout> <BoardView boardId={boardId} postId={postId} /> </Layout> ) : null} </BbsSettingContext.Provider> ); }; export default Board; 아래는 상세 보기입니다. import React, { useState, useEffect, useContext, useRef } from "react"; import { useNavigate } from "react-router-dom"; import axios from "axios"; import { BbsSettingContext } from "../common/Board"; import ToastEditor from "../component/ToastEditor"; import MyButton from "../common/ComButton"; import { TokenProcess } from "../common/TokenProcess"; const BoardView = ({ postId }) => { const titleInputRef = useRef(); const contentsAreaRef = useRef(); const toastEditorRef = useRef(); // ToastEditor의 ref const navigate = useNavigate(); const [post, setPost] = useState({ postId: "", postTitle: "", postContent: "", regDate: "", }); const [boardSetting, setBoardSetting] = useState(null); const boardSetData = useContext(BbsSettingContext); const Navigate = useNavigate(); const formatDate = (timestamp) => { const date = new Date(timestamp); const options = { year: "numeric", month: "long", day: "numeric" }; return date.toLocaleDateString("ko-KR", options); }; useEffect(() => { console.log("view>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>"); if (boardSetData) { setBoardSetting(boardSetData); const access_token = localStorage.getItem("Authorization"); const fetchData = async () => { try { const response = await axios.get( `http://localhost:8080/api/board/${boardSetData.boardId}/post/${postId}`, { headers: { Authorization: `Bearer ${access_token}`, }, } ); console.log(response.data.returnData); setPost({ postId: response.data.returnData.postId, postTitle: response.data.returnData.postTitle, postContent: response.data.returnData.postContent, regDate: response.data.returnData.regDate, }); } catch (error) { console.log(error); if ( error.response.status == 401 && error.response.data.data == "EXPIRE_TOKEN" ) { (await TokenProcess()) ? fetchData() : navigate("/login"); } else { console.log(error); return false; } } }; fetchData(); } }, [boardSetData, postId]); const editBoard = async () => { navigate(`/board/${boardSetting.boardId}/post/${postId}/edit`); }; return ( <div className="BoardView"> <div className="upInfoArea"> <div type="text" name="boardTitle" className="titleDiv"> {post.postTitle} </div> <div type="text" name="regId" className="regIdDIv"> {formatDate(post.regDate)} </div> </div> <div className="contentArea"> <div className="contentsText">{post.postContent}</div> </div> <section> <div className="btnArea"> <MyButton text={"리스트이동"} onClick={() => Navigate(-1)} /> <MyButton text={"수정하기"} type="positive" onClick={editBoard} /> </div> </section> </div> ); }; export default BoardView; 리스트이동이라는 버튼을 누르면 바로 이동을 하는데 브라우저에서 <- 뒤로가기 버튼을 누르면 갑자기 BoardView의 useEffect를 타는데 이유를 모르겠습니다 .어떻게 해야될까요. ..

• javascript
• react
• node.js

당연하겠지만.. 윈도우 사용하면 맥은 모두 패스 해도 되지요?

해결됨

모두의 깃 & 깃허브

혼자 공부하는 컴퓨터구조 + 운영체제, 모두의 깃 & 깃 허브 책 구입해놓고 영상이 좋아서 영상만 보고 있네요.

• git
• github

dvw를 사용하는 경우와 vw를 사용하는 경우의 차이

미해결

Next + React Query로 SNS 서비스 만들기

안녕하세요 제로초님! 강의 즐겁게 듣고 있습니다. 깃허브의 코드를 보면 main.module.css 에서 container를 잡을 때 width와 heigth로 dvw, dvh단위를 사용하시고 다른 부분( login.module.css 와 signup.module.css )에서는 vw를 사용하시고 있어서요. dvw를 사용하시는 경우와 vw를 사용하시는 경우의 차이가 궁금합니다.

• react
• next.js
• react-query
• next-auth
• msw

[리덕스 미들웨어]강의 중에 createStore에서 막혔습니다.

미해결

따라하며 배우는 리액트, 파이어베이스 - 채팅 어플리케이션 만들기[2023.12 리뉴얼]

강사님과 같이 했는데 저는 이렇게 빨간 줄이 뜨면서 리액트앱을 실행시키면 이러한 오류가 뜹니다.ㅠㅠ 왜이런걸까요..? 어떻게 해결해야 할까요?

• react
• 웹앱
• firebase

주피터 노트북 설치오류

미해결

공공데이터로 파이썬 데이터 분석 시작하기

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. Traceback (most recent call last): File "C:\Users\lyl89\anaconda3\Lib\site-packages\notebook \traittypes.p y", line 235, in _resolve_classes klass = self._resolve_string(klass) ^^^^^^^^^^^^^^^^^^^^^^^^^^^ File "C:\Users\lyl89\AppData\Roaming\Python\Python311\site-packages\traitl ets\traitlet s.py", line 2018, in _resolve_string return import_item(string) ^^^^^^^^^^^^^^^^^^^ File "C:\Users\lyl89\AppData\Roaming\Python\Python311\site-packages\traitlets \utils\importst ring.py", line 31, in import_item module = __import__(package, fromlist=[obj]) ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ModuleNotFoundError: No module named 'jupyter_server.contents' During handling of the above exception, another exception occurred: Traceback (most recent call last): File "C:\Users\lyl89\ana conda3\Scripts\jupyter-not ebook-script.py", line 10, in sys.exit(main()) ^^^^^^ File "C:\Users\lyl89\AppData\Roaming\Python\Python311\site-pack ages\jupyter_c ore\application.py", line 280, in launch_instance super().launch_instance(argv=argv, **kwargs) File "C:\Users\lyl89\AppData\Roaming\Python\Python311\site-packag es\traitlets\c onfig\application.py", line 1051, in launch_instance app = cls.instance(**kwargs) ^^^^^^^^^^^^^^^^^^^^^^ File "C:\Users\lyl89\AppData\Roaming\Python\Python311\site-pac kages\traitlets \config\configurable.py", line 583, in instance inst = cls(*args, **kwargs) ^^^^^^^^^^^^^^^^^^^^ File "C:\Users\lyl89\AppData\Roaming\Python\Python31 1\site-packa ges\traitlets\traitlets.py", line 1294, in __new__ inst.setup_instance(*args, **kwargs) File "C:\Users\lyl89\AppData\Roaming\Python\Python 311\site-pac kages\traitlets\traitlets.py", line 1337, in setup_instance super(HasTraits, self).setup_instance(*args, **kwargs) File "C:\Users\lyl89\AppData\Roaming\Python\Pyth on311\site-p ackages\traitlets\traitlets.py", line 1313, in setup_instance init(self) File "C:\Users\lyl89\anaco nda3\Lib\site -packages\notebook\traittypes.py", line 226, in instance_init self._resolve_classes() File "C:\Users\lyl89\ana conda3\Lib\si te-packages\notebook\traittypes.py", line 238, in _resolve_classes warn(f"{klass} is not importable. Is it installed?", ImportWarning) TypeError: warn() missing 1 required keyword-only argument: 'stacklevel' 이런 오류가 떠요ㅠㅠ 어떻게 해결할 수 있을까요?

• python
• pandas
• numpy

base.html 추가link

미해결

스프링 MVC 2편 - 백엔드 웹 개발 활용 기술

base.html 파일에서 <!--추가--> 부분에서 알려주셨던 내장 태그 <th:block> 태그 대신 일반태그 link 태그를 넣어도 정상작동하는것을 확인했습니다. 둘중 아무거나 사용해도 무방한가요?

• spring
• mvc

setTimeout 함수 관련해 질문이 있습니다.

미해결

[리뉴얼] 코딩자율학습 제로초의 자바스크립트 입문

const showBall = (number, $target) => { const $ball = document.createElement('div'); $ball.className = 'ball'; $ball.textContent = number; $target.appendChild($ball); }; for (let i = 0; i < 6; i++) { setTimeout(() => { showBall(winBalls[i], $result); }, 1000 * (i + 1)); } setTimeout(() => { showBall(bonus, $bonus); }, 7000);

• javascript

로우폴리 헬리콥터3 Rear 프로펠러 대칭 만들기

미해결

블렌더 처음 시작부터 로우폴리 3D 애니메이션 까지

강의에서 6분57초 부근에서 프로펠러의 양쪽 회전축을 Extrude 해주는 과정에서 양쪽을 각각 수동으로 작업을 해주었는데요. 저는 만들고 나니까 너무 짝짝이라서 이부분을 미러기능을 사용하여 양쪽 대칭으로 만드려면 어떻게 해야할까요?

• blender

용어, HTTP 관련 질문

해결됨

그림으로 쉽게 배우는 네트워크

안녕하세요. 감자선생님! 용어 및 HTTP 관련 질문있습니다. [강의: DHCP - 0:22] Q1. 게이트웨이라는 용어가 보여 조사해보니, WAN으로 데이터를 나가게해주는 라우터라고 이해했습니다. 범용적인 의미 - 서로 다른 통신환경에서의 인터페이스 인프라적인 의미 - 라우터 라고 정리했는데 맞을지 궁금합니다. [강의: HTTP - 2:03] Q2. HTTP(version 1.1) 소켓 연결 후 [더 이상 통신이 필요없다면] 커넥션을 끊음에서 더이상 통신이 필요없는걸 어떻게 판단하는지 궁금해서 조사해보니 특정시간 동안 요청이 또 왔는지?(HTTP 헤더/Keep-Alive 옵션)로 체크하여 연결 유지하는것으로 확인했습니다. 혹시 강의에서 [통신이 더 필요없다면]이 keep-Alive 말씀하시는게 맞을지 궁금합니다.

• 네트워크

화면 폭이 좁아졌을 때 질문입니다..

미해결

HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)

분리 되면 밑에 있는 요소에 가려서 글이 안보이는데 밑에 있는 요소 밑으로 밀 수 있는 방법이 있을까요? <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="css/02.hover-separate(04).css"> </head> <body> <div class="items"> <div class="item"> <div class="front"> <img src="images/space-01.png" alt=""> <h2>Mars</h2> </div> <div class="back"> <p>화성은 태양계의 네 번째 행성이다. 4개의 지구형 행성 중 하나다. 동양권에서는 불을 뜻하는 화(火)를 써서 화성이라 부르고 로마 신화의 전쟁의 신 마르스의 이름을 따 Mars라 부른다.</p> <a href="#none">Read More</a> </div> </div> <div class="item"> <div class="front"> <img src="images/space-02.png" alt=""> <h2>Jupiter</h2> </div> <div class="back"> <p>목성은 태양계의 다섯번째 행성이자 가장 큰 행성이다. 태양의 질량의 천분의 일배에 달하는 거대행성으로, 태양계에 있는 다른 모든 행성들을 합한 질량의 약 2.5배에 이른다.</p> <a href="#none">Read More</a> </div> </div> <div class="item"> <div class="front"> <img src="images/space-03.png" alt=""> <h2>Saturnus</h2> </div> <div class="back"> <p>토성은 태양으로부터 여섯 번째에 있는 태양계의 행성으로, 진성(鎭星)으로도 불렀다. 토성은 태양계 내의 행성 중 목성에 이어 두 번째로 크며, 지름은 약 12만 킬로미터이다.</p> <a href="#none">Read More</a> </div> </div> </div> </body> </html> @media (max-width:768px){ .item{ display: block; } } @import url('https://fonts.googleapis.com/css?family=Raleway&display=swap'); body{ font-family: 'Raleway', sans-serif; color: #222; line-height: 1.5em; font-weight: 300; margin: 0; background-color: #222; color: #fff; font-size: 15px; } a{ color: #fff; text-decoration: none; } .items{ text-align: center; width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } .item{ /* border: 1px solid #fff; */ width: 300px; height: 220px; display: inline-block; position: relative; margin: 10px; } .front, .back{ position: absolute; width: 100%; transition: 0.5s; } .front{ /* position: absolute; */ background-color: #333; text-align: center; height: inherit; z-index: 1; /* width: 100%; */ top: 0; } .front img{ margin-top: 8px; /* animation: ani 1s linear infinite; */ } .item:hover .front img{ animation: ani 1s linear infinite; } .front h2{ margin-top: 0; } .back { /* position: absolute; */ background-color: #fff; color: #000; height: inherit; text-align: center; padding: 20px; box-sizing: border-box; /* width: 100%; */ top: 0; opacity: 0; } .item:hover .back{ opacity: 1; } .back p{} .back a{ color: #fff; background-color: yellowgreen; padding: 5px 10px; border-radius: 20px; /* box-shadow: #222222c1 0.7px 0.7px 0.7px;/ */ margin-top: 2px; display: inline-block; } .back a:hover{ background-color: #000; } .item:hover .front{ top: -50%; } .item:hover .back{ top: 50%; } @keyframes ani{ 0% {transform: scale(1);} 50% {transform: scale(1.1);} 100% {transform: scale(1);} }

• HTML/CSS
• jquery