Project/kakao-clone-v2
-
#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 의 위치 및 확대/축소 회전이 ..
-
[CSS] CombinatorsProject/kakao-clone-v2 2019. 11. 19. 16:16
Descendant Selector decendant selector는 명시된 element의 모든 *후손* element를 선택한다. 예시 Child Selector child selector는 명시된 element의 모든 *자식* element를 선택한다. // 1 level 아래 예시 Adjacent Sibling Selector adjacent sibling selector는 명시된 element의 인접한 element를 선택한다. 예시 General Sibling Selector generak sibling selector는 명시된 element의 형제인 모든 element를 선택한다. 예시
-
pinterest, dribbbleProject/kakao-clone-v2 2019. 10. 31. 18:55
https://www.pinterest.co.kr/ Pinterest - 핀터레스트 계정을 만들거나 Pinterest에 로그인하세요. 레시피, 집 꾸미기 아이디어, 스타일 관련 아이디어 등 시도해 볼 만한 다른 아이디어를 찾아보세요. www.pinterest.co.kr https://dribbble.com/ Dribbble - Discover the World’s Top Designers & Creative Professionals Discover the world’s top designers & creatives Dribbble is the leading destination to find & showcase creative work and home to the world's best design pr..