1) transform: 속성
transform: scale(1.5);
- 모습을 변화시킬 수 있는 속성이다. 크기를 1.5배 크게한다.
- transform: 속성에는 크기이외에도 바꿀 수 있는 것들이 많다.
2) animation: 속성
- animation 만들기
@keyframes ani-motion { 0% { transform: scale(1); } 50% { transform: scale(1.2) rotateY(45deg); } 100% { transform: scale(1); } }
- animation이 2단계일경우, 0%와 100%이다.
- animation이 4단계일경우, 0%, 30% 60% 100%이다.
- 결론 0~100%를 단계별로 쪼개면 된다.
- animation 적용하기
.coffee-img { animation: ani-motion 1.2s ease infinite; animation-delay: 1s; will-change: transform; }
- animation: animation이름 변화시간 변화방식 추가설정;
- 추가 설정에는
infinite와forwards가 있다.
infinite란? animation효과를 계속 반복시킨다. 없애면 1번만 재생하고, 끝난다.forwards란? 효과는 원래 animation이 멈추면 처음 모습으로 되돌아가는데forwards이걸쓰면 마지막 모습으로 머무르게 된다animation-delay: 1s;란? 1초 있다가 animatioin이 발생한다.
- animation 적용하는 것보다 아래에 있어야한다.
will-change: transform;란? 브라우저에게 transform이 미리 변하는 것을 알림으로써 고퀄리티가 된다.
- 사라지는 animation 만들기
.big-div { animation: hidden 1s ease forwards; } @keyframes hidden { 0% { } 100% { opacity: 0; visibility: hidden; } }
3) media query 반응형 웹페이지 만들기
@media screen and (min-width: 800px) and (max-width: 1000px) { img { opacity: 0.5; /*css속성부여한다.*/ } }
- 윈도우 창의 폭이 800px~1000px이 되면, 이미지가 반투명해진다.
- (괄호)안에 넣을수 있는 조건들
- 세로모드 orientation: portrait
- 가로모드 orientation: landscape
- 세로모드가 되면, 이미지의 배경색이 바뀌거나 하는 식으로 css조정가능
4) icon 넣는 방법
<body></body>의 맨 밑에 👇 복붙한다. 주의사항, 👇 밑에 html작성하지마라
<script src="https://kit.fontawesome.com/f0be26917b.js" crossorigin="anonymous"></script>- fontawsome 에 들어가서 원하는 아이콘을 복사해서 원하는 html에 붙여넣기해라
- icon 색 바꾸는 방법
- css이용
color: toamto;
- css이용
- icon 크기 바꾸는 방법
- css이용
font-size: 20px; - tag의 attribute 수정 class="fa-xs"(class이용)(xs대신에 sm,lg,2x,3x,5x....여러가지있음)
- css이용
5) 글꼴 바꾸기
-
google font검색한다.
-
원하는 스타일을 찾고 select this 버튼을 누른다
-
main css파일을 만들고, 맨위에 @import~ 를 복붙한다
-
<link />를 이용해서 main css파일과 html을 연결한다. -
body{ }안에font-family:~복붙한다.
6) z-index를 이용하여 맨 윗층으로 옮기기
- 의미 : 맨 아랫층에 있어서 가려져 있던 img를 맨 위로 이동시켜서 보이게 만들기
- 가려져 있던, 이미지에
position: relative;를 설정한다. z-index: 1;,기본값은 0이다.
- 가려져 있던, 이미지에
7) navgation-bar 만들기
8) div들의 순서 바꾸기
flex-direction:이용하는 방식order:이용하는 방식- 👊✌️🖐
- 맨 왼쪽위치는 order: 0;이다. 오른쪽으로 갈수록 숫자를 추가하면 된다.
- 🖐을 가운데로 옮기고 싶으면 order: 1;을 설정하면 된다.
9) 화면을 전부 가리는 div만들기
- 화면전체를 가리는 div만들기
-
div를 크게 만든다.
width: 100vw;height: 100vh; -
다른 div들을 가려야하므로
position: absolute;top: 0;bottom: 0;을 설정한다. -
뒤에 가려져있던 것이 클릭되게 하고싶다.
visibility: hidden;
10) 부모div에 마우스를 올렸는데, 자식 링크가 사라지게 만들기
.green:hover a { opacity: 0; }<div class="green"> <a href="https://nomadcoders.co/" target="_blank" class="nomad-link" nomad coder</a> </div>
- green div에 마우스를 올리면 green div안의 a의 모습이 사라진다.
11) 화면 밖에 있다가 나타나는 icon만들기
.icon { transform: translateY(-70px); animation: show 1s ease forwards; } @keyframes show { 0% { } 100% { transform: none; } }
- 초기 위치를
transform:을 이용하여 화면 밖으로 벗어나게 하기- animation 만들 때, 맨 나중모습에
transform: none;을 이용해서 초기에 화면 밖으로 벗어나게 만든 설정을 없애서, 나타날 수 있음
12) css & css 연결
- main css 파일 만들기
- main css 맨 위에
@import "파일명/폴더명.css";입력
- 자주 등장하는 css은 components 폴더 만들고, 그 안에 따로 폴더 만들어서 넣기
dev