본문 바로가기

CSS13

Flex Box Flex Box : Flex Box는 효율적을 HTML 요소를 배치, 정렬, 분산할 수 있는 방법을 제공하는 CSS3의 새로운 레이아웃 방식이다. 복잡한 계산없이 요소의 크기와 순서를 유연하게 배치할 수 있다. 별도의 분기 처리를 줄일 수 있으며 CSS만으로 다양한 레이아웃을 구현할 수 있다. Flex 구성 : flexbox는 우리가 배치하고 싶은 HTML 요소인 flex item과 이것을 감싸는 flex container로 구성된다. flex container : flex item을 감싸는 요소 flex item : flex conainer의 자식 요소 flex box 만들기 .flex-container { display: flex; } 부모요소가 inline인 경우 inline-flex를 지정한다. .. 2024. 1. 25.
Responsive Web 반응형 웹 | Viewport | 미디어 쿼리 반응형 웹사이트 : 웹사이트는 PC 화면 뿐만 아니라 모바일, 태블릿, 노트북 등 여러가지 디바이스의 해상도에 반응하여 최적의 화면을 보여준다. 뷰포트(viewport) : 웹 브라우저에서 실제 내용이 표시되는 영역. 반응형 웹에서는 각 디바이스의 viewport에 맞는 화면을 보여줘야 한다. 이때 사용하는 메타 태그가 "뷰포트 메타 태그" 이다. 메타 뷰포트 태그 메타 뷰포트 태그 속성 width height user-scalable : 사용자 확대/축소 가능 여부 initial-scale : 초기 화면 비율 maximum-scale : 최대 화면 비율 minimum-scale : 최소 화면 비율 일반적인 사용법 : 뷰포트의 너비를 디바이스 화면 너비에 맞추고 초기화면 배율을 1로 지정한다. 뷰포트 단.. 2024. 1. 25.
Animation Animation : 요소에 적용되는 CSS 스타일 다른 CSS 스타일로 부드럽게 전환시켜주는 것을 말한다. 이때 CSS 스타일 이 변화되는 중간 지점을 Keyframe이라고 말하며, @keyframes은 애니메이션의 중간 상태라고 할 수 있다. 애니메이션은 트랜지션보다 훨씬 더 규모가 크고 복잡하며, 다양한 능력을 가지고 있기 때문에 좀 더 정밀한 효과를 구현할 수 있다. 참고 사이트 : CoolCSSAnimation Keyframes 정의하기 @keyframes으로 애니메이션을 정의할 수 있다. 📌 from (시작) ~to (끝) 를 잉용한 애니메이션 shape 생성 : @keyframes shape { from{ border: 1px solid transparent; } to { border: 1p.. 2024. 1. 25.
Transform, Transition Transform : Transform 속성은 HTML 요소의 회전, 크기 조절, 기울이기, 이동 효과를 나타낼 때, 사용한다. : Transform 속성을 사용하기 위해서는 display 속성이 block 혹은 inline-block 이어야 한다. ex) transform: translateX(20px); Transform 함수 translate(x, y) : 지정한 값 만큼 x축, y축으로 이동한다. scale(x, y) : 지정한 값 만큼 x축, y축으로 확대 및 축소 한다. rotate( 30deg ) : 지정한 각도만큼 회전한다. (+ 시계방향, - 반시계방향) skew(x, y) : 지정한 각도만큼 x축과 y축을 왜곡한다. Transition : 속성값이 변할 때 더 부드럽게 전환되도록 도와준.. 2024. 1. 25.

티스토리툴바