본문 바로가기

Frontend145

CSS의 반응형 웹을 위한 미디어쿼리(Media Query) 사용법 미디어쿼리는 디바이스의 특정 조건에 따라 CSS스타일을 다르게 지정하는 방법이다. 스타일을 지정하는 방식은 처음에 웹브라우저를 위한 디자인을 만들고 이후에 디자인의 배치를 변경하는 방식인 top-down 방식과, 처음에 작은 디바이스를 위한 디자인을 만들고 이후에 웹브라우저를 위해 디자인의 배치를 변경하는 방식인 bottom-up방식이 있다.@media 미디어유형 and (조건) { CSS스타일 블록 }미디어유형미디어유형의 경우 all, screen, print 이 있으나 생략해서 사용할 수 있다. 생략하게 되는 경우 기본값 all이 적용된다. 미디어쿼리 조건자주 사용되는 조건들이다.조건설명orientation뷰포트의 세로 혹은 가로 방향max-height | min-height | height뷰포트의 .. 2024. 7. 10.
CSS : 반응형 웹 디자인을 위한 상대 단위 크기를 지정하는 방법에는 여러가지가 있다. 절대단위으로 지정하는 경우에는 크기가 계속 동일하기 때문에 반응형 웹에 대응하기가 어렵다. 이런 경우 사용되는 상대단위에 대해 적어보고자 한다. 절대단위cmmmpx상대단위em 폰트크기를 위한 상대적 값으로 부모요소의 폰트크기를 기준으로 설정한다. 예로 2em은 부모요소의 폰트크기의 2배라는 뜻이다.rem 폰트크기를 위한 상대적 값으로 을 기준으로 폰트크기를 설정한다.vw 브라우저 화면 너비를 기준으로 width를 지정한다. 1vw은 뷰포트 너비의 100분의 1을 의미한다. 최종 크기는 100vw이다. vh 브라우저 화면 높이를 기준으로 height를 지정한다. 1vh는 뷰포트 높이의 100분의 1을 의미한다. 최종 크기는 100vH이다. vmin 브라우저 너비와.. 2024. 7. 10.
CSS: backface-visibility에 대해 알아보자 동적 변화를 통해 요소를 회전시켰을 때 요소의 앞면이 뒤쪽에서 보이는 모습을 볼 수 있다. 이렇듯 뒷면에서 앞면이 보이는 것을 backface-visibility를 통해 숨길 수 있다.backface-visibility: visible | hidden; backface-visibility의 기본값은 visible로 보이는 상태이고,  hidden으로 변경하게 되면 요소의 앞면이 뒤에서 더이상 보이지 않게 된다. 앞면 앞면 2024. 7. 10.
CSS3로 동적 변화를 만들어보자 - 3. Animation CSS3로 만들어 낼 수 있는 동적 변화는 transform(변환), transition(전환) 그리고 animation(애니메이션)이다.AnimationHTML 태그의 모양 변화를 transition과는 다르게 시간 단위를 설정하여 쉽게 애니메이션 효과를 만들 수 있다. 시간비율은 %나 from, to로 표현한다. from은 시작 부분을 의미하고 to는 마지막 지점을 의미한다. %로 표현할 경우 0%가 시작부분, 100%가 마지막 부분을 뜻한다. animation의 경우에는 애니메이션의 유지관리가 쉬워지고 유동적이게 된다는 장점이 있지만, animation으로 표현가능한 부분이 많아지면서 css의 코드 관리가 힘들어진다는 단점이 있다.@keyframes 이름 {시간비율{스타일}시간비율{스타일}}애니메이.. 2024. 7. 8.
CSS3로 동적 변화를 만들어보자 - 2. Transition CSS3로 만들어 낼 수 있는 동적 변화는 transform(변환), transition(전환) 그리고 animation(애니메이션)이다. TransitionHTML태그에 적용된 CSS 프로퍼티 값이 변할 때, 변화를 서서히 진행하여 애니메이션 효과를 발생시킨다. 복잡하지 않은 단순한 애니메이션에서 사용된다. transition: 전환프로퍼티 전환시간 timing-function값 지연시간;transition에 전환프로퍼티(전환할 항목)과 전환시간을 한번에 적을 수도 있고 따로 적을 수도 있다. 만약 전부 다 속성으로 지정하고 싶을 경우에는 all을 사용할 수 있지만, 세세한 duration 조정이 불가능하다. transition-property: 전환할 프로퍼티;transition-duration: 애.. 2024. 7. 8.
CSS3로 동적 변화를 만들어보자 - 1. Transform CSS3로 만들어 낼 수 있는 동적 변화는 transform(변환), transition(전환) 그리고 animation(애니메이션)이다.  Transform : 2차원 변환Translate  Translate는 요소의 위치를 이동시킬 수 있는 변환함수이다. translateX는 태그를 x축으로 n만큼 이동시키고, translateY는 태그를 y축으로 그리고 translate는 태그를 x, y축으로 x, y만큼 이동시킨다. transform: translateX(n) | translateY(n) | translate(x, y);ScaleScale은 요소를 설정한 배수만큼 크기를 조절하는 변환함수이다. scaleX는 x축으로(폭을) n배만큼 조절하고, scaleY는 y축으로(높이를) n배만큼 조절하고, s.. 2024. 7. 8.

티스토리툴바