본문 바로가기
반응형

CSS3

[CSS] 트랜지션과 반응형 웹 디자인 이해하기 웹 사이트를 사용자 친화적이고 세련되게 만들기 위해 꼭 알아야 할 CSS 속성 중 하나는 트랜지션입니다. 또한 다양한 기기에서도 잘 보이도록 제작하는 반응형 웹 역시 현대 웹 디자인의 필수 요소입니다. 이번 글에서는 트랜지션 속성과 반응형 웹 제작의 핵심 개념인 미디어 쿼리에 대해 정리하였습니다. 1. 트랜지션 속성요소의 스타일 변화에 부드러운 애니메이션 효과를 적용할 때 사용하는 속성입니다. CSS의 transition 속성을 사용하면, 배경색, 크기, 위치 등 스타일이 변경될 때 즉각 바뀌는 것이 아니라 서서히 변화하게 만들 수 있습니다. 1) 기본 문법transition: 속성 지속시간 지연시간 타이밍함수; 예시:.box { transition: all 0.3s ease-in-out;}all : .. 2024. 7. 11.
[HTML/CSS] 선택자, 꼬리말 & 트랜지션 효과까지 한눈에 정리 CSS를 활용하여 웹 요소에 정교하게 스타일을 적용하기 위해서는 선택자와 트랜스폼(transform), 트랜지션(transition) 등의 속성을 잘 이해하는 것이 중요합니다. 이번 포스팅에서는 선택자와 꼬리말(::before, ::after), 그리고 요소의 변화 효과에 대한 예제를 함께 정리하였습니다. 1. CSS의 선택자 요소CSS 선택자는 HTML 문서에서 특정 요소를 선택하고, 그 요소에 스타일을 적용할 때 사용합니다. 2. 자식 요소 선택자자식 선택자는 특정 요소의 직계 자식 요소에만 스타일을 적용할 수 있게 해줍니다.ul > li { color: blue;}> 기호는 부모 > 자식 관계만을 대상으로 하며, 손자 요소는 해당되지 않습니다. 3.기타 요소 선택자CSS에서는 다양한 선택자를 통해.. 2024. 7. 10.
[HTML/CSS] 그라데이션부터 가상 클래스까지 – 스타일링 기초 총정리 웹 페이지를 더 풍부하고 유연하게 꾸미기 위한 CSS 속성 중에서 그라데이션 효과, 선택자 응용, 그리고 가상 클래스에 대해 정리하였습니다. 실습 예제와 함께 개념을 익히면 HTML/CSS의 스타일링에 한층 더 익숙해질 수 있습니다. 1. 그라데이션 효과 주기1) 그라데이션(Gradient)그라데이션은 두 가지 이상의 색상을 부드럽게 연결하여 배경에 색상 변화를 주는 시각 효과입니다..grad3 { background: linear-gradient(to left top, rgb(247, 0, 255), rgb(26, 171, 255));}.grad4 { background: linear-gradient(38deg, rgb(47, 68, 255), rgb(0, 255, 115));}to left top.. 2024. 7. 9.
반응형

티스토리툴바