Project
-
[Spring] Spring 프로젝트에서 css 적용이 안될 때Project/3. 예약: 메인페이지 - BE 2020. 3. 17. 15:23
문제 상황 아래의 프로젝트 폴더구조와 jsp 코드에서 프로젝트를 실행했을 때 올바른 경로를 설정했음에도 css가 입혀지지 않는 문제가 생겼다. 프로젝트 폴더 구조 src - main - java ㅣ - webapp - WEB-INF - views - mainpage.jsp ㅣ - css - style.css mainpage.jsp 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 네이버 예약 Colored by Color Scripter cs 문제 해결 1. /src/main/java/webapp 폴더에 resouces라는 폴더를 새로 만들어 css와 font 폴더를 옮겨준다. 2. ${pageContext.request.contextPath}를 알아와 link를 잡을 수 있도록 한다..
-
[Spring] Maven project application.properties 설정Project/3. 예약: 메인페이지 - BE 2020. 3. 16. 16:10
properties ? db 계정이나 Password와 같이 따로 관리하고 싶은 값들은 properties 파일을 통해 설정하고 그 값들을 가져와 사용할 수 있습니다. properties 파일 생성 & 정의 1. properties 파일 생성 Spring framework에서 Maven project로 시작할 때는 기본적으로 application.properties 파일이 존재하지 않는 경우가 있습니다. 그래서 먼저 다음 경로에 application.properties 파일을 만들어줍니다. root - src - main - java - resourses - application.properties - webapp 2. properties 정의 /src/main/resourses/application.p..
-
#3.6 Publishing on Github PagesProject/kakao-clone-v2 2019. 11. 20. 17:30
Goals 내 Github 저장소에 있는 웹 사이트를 Github Pages에 배포하기 1. Branch 만들기 gh-pages 라는 새로운 브랜치를 만들고 gh-pages를 publish branch 한다. github 저장소로 이동하면 project repository에 새로운 gh-pages 브랜치가 생성되었다. 2. 배포된 사이트 확인하기 그 다음, 웹브라우져 상에서 다음 주소로 이동하면 웹 사이트가 정상적으로 배포된 것을 확인할 수 있다. [user-name.github.io/project-name] 주의할점 프로젝트에 수정된 사항이 있을 때는 *꼭* master 브랜치로 변경한 뒤 commit 해야한다 !! master에서 업데이트 된 내용은 다시 gh-pages 브랜치에서 update한 뒤 ..
-
[CSS]반응형 웹을 위한 Media QueryProject/kakao-clone-v2 2019. 11. 20. 16:42
Media Query 미디어 쿼리는 장치에 따라 다른 레이아웃을 작성하거나, 다른 미디어 종류에 따라 다른 css 코드를 작성하는 등 반응형 웹페이지를 작성할 때 유용한 구문이다. Media type all : 기본값, 모든 미디어 장치에 사용됨 print : 프린터에 사용 screen : 컴퓨터 스크린, 태블릿, mobile 등 speech : 페이지를 읽어주는 화면 낭독기 Media Query 문법 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 /* for css */ .bigScreen { background-color = yellow; ... } @media midea-type and (midea-feature){ css-code } @media screen and (..
-
[CSS] Animation, @keyframesProject/kakao-clone-v2 2019. 11. 20. 15:04
Animation CSS3에서는 animation 속성을 사용하여 요소의 현재 스타일을 다른 스타일로 천천히 변화시킬 수 있습니다. Animation 속성 animation : 모든 animation 속성을 이용한 스타일을 한 줄에 설정할 수 있음 animation-name : 애니메이션 효과의 이름 설정 animation-duration : 애니메이션 효과를 재생할 시간 설정 animation-delay : 애니메이션 효과가 나타나기까지의 지연시간 설정 animation-iteration-count : 애니메이션 효과가 몇 번 반복될지를 설정 animation-direction : 애니메이션의 진행 방향을 설정 animation-timing-function : 애니메이션 효과의 속도 곡선을 설정 ani..
-
[CSS] Transition, TransformProject/kakao-clone-v2 2019. 11. 19. 17:55
Transition 속성값의 변화 중간과정을 CSS가 만들어 부드러운 움직임을 나타내는 기능(IE 10+)으로 속성값이 변화하는 경우에만 동작한다. function css 속성명 : 모든속성인 경우 all, width, left, opacity, .. 변화시간 : transition이 지속되는 시간 변화타입 : transition의 속도 곡선 지정. ease, ease-out, ease-in-out, linear, ease-in.. 딜레이 시간 : transition을 시작하기 전에 기다려야 하는 시간 transform 속성은 transform 하나로 모두 반영 Transform CSS Transform 은 부모 element의 영향을 받지 않고, 독자적으로 element 의 위치 및 확대/축소 회전이 ..