본문 바로가기

CSS32

미디어 쿼리(media query) css 사용법 - 반응형웹 제작의 필수 요소 최근 홈페이지 및 웹사이트의 제작 트렌드 중 하나가 반응형으로 제작하는 것인 거는 다들 잘 아시죠~. 그래서 오늘은 이런 반응형 웹을 만들기 위해서 필수 요소라고도 할 수 있는 css의 미디어 쿼리에 대해서 알아볼까 합니다. 저도 거의 모든 클라이언트에게 이 미디어 쿼리를 사용해서 반응형 사이트를 제작해 드리고 있습니다. 어떻게 보면 이제는 트렌드가 아니라 기본 장착 옵션 같은 의미가 되어버린거 같기도 합니다만. 그럼, 이제부터 차근히 알아보도록 하시죠~. Media Query의 지정방법 미디어 쿼리를 사용해서 css에 적용하는 방법은 아래와 같이 3가지가 있습니다. 1. HTML의 HEAD의 link태그의 media속성에 지정하기 2. css파일내에서 @media 지정하기 3. css파일내에서 impo.. 2019. 10. 8.
CSS 트랜지션(transition) 효과 사용 방법과 속성 - 이글 하나면 끝! 스카이웹 블로그에 오신걸 환영합니다! Welcome to my blog! 티스토리 블로그 기능이 익숙하지 않은 상태에서 글을 올리는 거라서 이것 저것 아직 부족한게 많은 거 같습니다. 빠른 시간안에 빨리 익숙해 져야 겠네요. 오늘은 css의 transition에 대해서 알아보도록 하겠습니다. CSS3 트랜지션에 대해서 간단히 말하자면 요소에 마우스를 올렸을 경우, 색 혹은 크기이 변화하는 시간을 지정해 줄 때 흔히 사용을 하곤합니다. 그리고 이렇게 스타일에 변화를 줄때 이 시간을 지정해 줌으로써 좀더 부드럽게 스타일 전환이 이루지게 되는 특징을 가지고 있습니다. 그래서 다음과 같은 값을 지정해 줄 필요가 있습니다. 효과를 적용시킬 속성과 함께 시작시의 값과 완료시의 값 변화하는 데 걸리는 시간 그리고, .. 2019. 9. 23.