#TIL (May 9th, 스물네번째 이야기)

junghyunhao·2020년 5월 9일
0

css3 Animation 미디어쿼리, 레이아웃,css 메뉴 만들기 에 대해 알아보자

1. transform 속성

  • 확대,축소,회전 위치 변경 등 다양하게 가능함
  • 브라우저 별로 업데이트 되지 않는 부분까지 적용하게 하려면 아래와 같이 적용 해 주어야 함
    -webkit- (크롬,사파리)
    -moz- (파이어 폭스)
    -ms- (익스플로러)

1.1 transform rotate

  • 선택된 오브젝트 회전 (평면적으로)
  • -degree(마이너스각도)로도 회전가능함 (그럼 반대로 출력 됨)
  • 내가 사용하는 브라우저의 하위버전까지 고려한다면 앞에 prefix 있어야함
    -ms- 이렇게 필요한 브라우저에 맞춰서 prefix를 적어주어야함
<div class="transform"></div>
.transform { //이렇게 표현하면 10도 각도로 transform 회전한 형태 보임
    width: 100px;
    height: 100px;
    background-color: red;
    -webkit-transform: rotate(10deg);
    transform: rotate(10deg);}

1.2 transform scale

  • 선택된 오브젝트를 확대/축소 가능
  • scale(x,y)x(세로만큼), y(가로만큼)
    • 몇 배로 키우겠다(2,4) width 2배, height 4배
.transform{  
	width: 100px;  
    height: 100px;  
    background-color: red;  
    transform: scale(2, 3); }

1.3 transform skew

-3D로 X축/Y축을 회전함, 평면적으로 회전하는 rotate이랑 다른 개념

  • transform: skew(10deg, 30deg); 3d로 x축,y축으로 틀게 만듬
.transform {  
	width: 100px;  
    height: 100px;  
    background-color: red;  
    transform: skew(10deg, 30deg);
}

1.4 transform translate

  • 좌표 이동시키는 속성값 , 자기자신을 기준으로 100px,200px x축 y축 이동한 것
    애니메이션 작업은 transform 작업하는게 좋음! transform은 GPU를 사용해서 그나마 로딩속도가 낮아짐! 엔진을 분리해서 속도가 빨라지는 효과 가있음
    .transform {  
    width: 100px;  
    height: 100px;  
    background-color: red;  
    transform: translate(100px,200px);4
    }

2. transition

  • 애니메이션이 특정 조건에 의해 변화되는 것을 보여줌
  • transition 아래의 순서대로 기입 필요, 그 후에 적용될 transition기입해줌
  • 이건 작성하다 느낀건데.. 세미콜론과 콜론(,;)사이에 공백이 있을 때 코드가 제대로 작용이 되지 않기도 한다.. 항상 공백을 없애서 기록해야 겠다
	    - transition-property:width; 
    	- transition-duration: 2s;
    	- transition-timing-function: linear; 일정한 속도를 유지해
    	- transition-delay:1s; hover를 1초 뒤에 적용
아래와 같은 코드가 적용 가능하다! 즉. 아래 hover 했을때, 2초동안 
.transition {
    width: 100px;
    height: 100px;
    background-color: red;
    transition-property: width;
    transition-duration: 2s;
    transition-timing-function: ease-out;
    transition-delay:1s;
 
}
.transition: hover {
    width: 300px;
    height:300px;
    background-color:blue;
}

이렇게 한줄로도 정리 가능하다 순서는 (prop-duration-functiond-delay)

.transition {
    width:100px;
    height:100px;
    background-color:red;
    transition:all 2s ease .1s;
 
}

.transition:hover {
    width:300px;
    height:300px;
    background-color:blue;
}

transition : all 2s ease-out 1s

이렇게하면 아래 hover에 있는 모든 효과를 다 한번에 적용해라는것
즉 all 은 transition before를 모두 select해서 뒤의 trnasition을 효과를 줘라 라는것


3. animation

  • 에니메이션 효과 또한 시간 진행에 따른 애니메이션을 표현할때 사용 함
  • animation-name:changeWidth; 을통해 해당 animation에 이름을 주고 @keyframes 영역을 통해 어떻게 애니메이션 적용할건지 알려줘야함
  • transition 처럼 무엇을 해야 적용하는게 아닌 웹페이지를 열때 바로 재생이 가능한것이 특징 transition 속성값과 겹치는게 많음
    animation-name:changeWidth;
    animation-duration: 2000ms; 초단위는 1s 로 하고 더 잘게는 1000단위로 나뉨 
    animation-timing-function: linear;
    animation-delay: 1s;
    animation-iteration-count: 4;//에니메이션이 동작하는 횟수
    animation-direction: normal; //정방향은 normal 값을 안넣어도 정방향으로 감 반대로 가고싶을땐 reverse사용 가능 
    
    animation 또한 한줄로 정리 가능 
    
    animation: changeWidth 2s linear 1s 4 normal;
    
normal이아니면 alternate값을 주면 총 2회 반복효과를 하게 됨 (8번)
    

이렇게 코드를 작성하고 나면 @keyframes 영역을 통해 어떻게 애니메이션 적용할건지 알려줘야함

@keyframes changeWidth {
    from {
        width:300px;
        height:300px;
        background-color: yellow;
    }

    to {
        width: 600px;
        height:600px;
        background-color:blue;
    }
}

에니메이션에 prefix를 넣으려면 (keyframes에도 다 적용을 시켜 줘야함)

@-webkit-keyframes spinLion {

    from{ -webkit-transform: rotate(-10deg);

    }
    to { -webkit-transform: rotate(10deg);

    }
} 안에 명시 해줘야함 

key frame은꼭 before and after 가 아닌

@keyframes spinLion {

    0%{ transform: rotate(-10deg);

    }
    50%{ }
    85%{ }
    100% { transform: rotate(10deg);

    } 도 가능하다 
} 

참조 url (http://jeremyckahn.github.io/stylie/) 여기서 원하는 애니메이션을 기입해서 붙여넣기 가능함

* 코드에  html제거 하고 붙여넣기 하면 됨!*

animation-timing-function 종류

  • ease : 시작과 종료를 부드럽게
  • inear : 모든 애니메이션이 일정한 간격 또는 속도로 작동
  • ease-in : 서서히 시작
  • ease-out : 서서히 종료
  • ease-in-out : 서서히 시작하여 서서히 종료


animation-direction 종류

  • normal : 정방향으로 진행
  • reverse : to에서 시작하여 from으로 끝남
  • alternate : 처음은 정방형으로 진행하고 그 다음은 역방향으로 진행
  • alternate-reverse : 처음은 역방향으로 진행하고 그 다음은 정방향으로 진행


4. media query

  • 웹형/모바일형에 따라 반응형,적응형 웹사이트를 만들기 위해 필요한 것이 미디어쿼리

  • ~사이즈의 화면에서는~ 이렇게적용해라 라는 원리

  • 미디어 쿼리와 받드시 같이 입력해야하는 html 코드가 있음. 그건바로 뷰포트

    모바일의 경우 웹페이지를 모바일 스크린에 맞춰 자동으로 스케일링이 되는데, 이를 금지하기 위해 initial-scale=1.0으로 설정
 —> 타이틀 위에 아래와 같이 기입함

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
.pc {
    color: red;
    font-size: 50px;
    background-color: pink;
}

@media(min-width: 767px) {
    .pc {
        background-color: yellow;
    }

}

@media(min-width: 1000px) {
    .pc {
        background-color: blue;
    }

}

@media ( min-width:100px) and (max-width:600px) {
    .pc {
        color: blue;
        font-size: 30px;
        background-color: yellow;
    }
}
  • max-width값을 적용하지 않아도 이후에 min값을 또 적용 해놓으면 그 사이 값으로 자동적으로 max 값이 적용되는 원리이니 그렇게도 활용 가능 함

5. css로 메뉴 만들기 (nav)

먼저 아래와 같은 메뉴구성의 틀을 html로 만들어 준다

    <nav class="menu1">
       <ul>
           <li><a href="#">메뉴1</a></li>
           <li><a href="#">메뉴2</a></li>
           <li><a href="#">메뉴3</a></li>
       </ul>
   </nav>
.menu1 ul {
list-style: none; 
}
/*먼저 menu 리스트를 없애준뒤/* 

a {
text-decoration: none;/* text-deco를 없애주면 underline이 없어진다/*
} 

그렇게 하고 css 코드를 적용시켜 준다.

.menu1 li {
   display: inline-block; 
   /*li element의 기본은 block이라 inlineblock으로 변경해준다
   그냥inline으로 적용 안하는 이유는 아래에 나옴 */
   width: 100px;
   height: 50px;
   background-color: yellow;
   border: solid 10px red;
   text-align: center;
   line-height: 50px;/*이렇게 표현시 메뉴 버튼안에 글자를 중앙정렬 가능*/
} 

혹은 높이를적용하지않고 padding값을 줌으로서도 중앙정렬이 가능함 
	padding-top: 10px;	
	padding-bottom: 10px; 
   /*패딩값을 적용하게 하려면, block요소로는 힘들기 때문에 inline-block요소를 적용하는 것임/*
  • a tag 전체 적용으로 버튼 효과 주기

.menu1 a {
    display: block;
    width:100px;
    height: 50px;
    text-decoration: none;
     text-align: center;
    line-height: 50px; */ height를 높이와 똑같이 줌 


}

아니면 li 태그의 부모사이즈 기준으로 적용하기 위해 (부모 크기안에서 full-size 적용)

.menu1 a {
    display: block; /*position absolute를 적용하면 width/height 적용가능 함/*
    width:100%;
    height: 100%;
    text-decoration: none;
     text-align: center;
}
    
    .menu1 ul {
    list-style: none;
    overflow: hidden;

}

overflow: hidden을 적용해서 float 시킨부분을 적용시키지 않다고 설정해놓을 수 있음!

  • 메뉴 값으로 이동하는 효과 주기
<li><a href="#id값">메뉴1</a></li>

id 값을 주면 웹사이트 내의 그 위치로 이동하게 된다.

profile
코린이 아니, 코생아의 도전기

0개의 댓글