728x90 반응형 스타일14 [CSS] 플렉스 박스 레이아웃 Flexbox (플렉스 박스) - 웹 페이지의 레이아웃을 조정/배치하는 데 사용되는 CSS 속성 - 요소를 수평/수직으로 정렬하고 공간을 분배함 # 자식 요소의 배치/정렬은 항상 부모 요소를 기준으로 생각해야 함 구성요소 1) 플렉스 컨테이너 (Flex container) - Flexbox를 사용하여 요소를 배치하는 부모 요소 - height를 지정해주지 않으면, 컨테이너 내 자식 요소의 높이만큼으로 자동 지정됨 - 플렉스 컨테이너는 바로 아래 자식 요소까지만 영향을 미침 2) 플렉스 아이템 (Flex items) - 플렉스 컨테이너 내에서 배치되는 자식 요소 3) 주축 (Main axis) & 교차축 (Cross axis) - 플렉스 컨테이너 내에서 요소가 배치되는 축 플렉스 항목 배치 부모요소 { d.. 2023. 2. 12. [CSS] 미디어 쿼리 미디어 쿼리 (Media Query) - 웹 페이지를 출력하는 디바이스의 종류/크기에 따라 CSS 스타일을 변경할 수 있는 기능 - 디바이스의 특성에 맞게 화면을 보여주기 위해 사용함 - 브라우저 크기에 맞게 자동으로 스타일을 조정함 → 사용자 경험 개선에 큰 도움 @media [only | not] 미디어유형 [and 조건1] [and 조건2] ... { 스타일속성 : 속성값 ; } - and : 조건을 계속 추가할 수 있음 - 콤마(,) : 동일한 스타일을 사용할 미디어 유형/조건이 있다면 콤마로 추가할 수 있음 - only : 미디어 쿼리를 지원하는 웹 브라우저에서만 조건을 인식하게 함 - not 미디어 유형 : 해당 미디어를 제외하고 적용함 ex) @media screen and (min-widt.. 2023. 2. 12. [CSS] 가변 그리드 레이아웃 가변 그리드 레이아웃 - 화면 크기에 따라 요소의 크기가 자동으로 변하도록 함 · 전체를 감싸는 요소의 너비를 %로 변환 · 전체를 감싸는 요소의 너비를 기준으로 각 요소의 너비 계산 → width : ( 요소의 너비 / 전체 요소 너비 ) * 100 가변 이미지 # 부모 요소만큼만 크기가 변하도록 하기 선택자 { max-width : 100% } # 너비에 따라 다른 이미지 출력하기 - 최소 너비 미만이 되면 다른 이미지로 전환됨 ... 가변 비디오 /* 최대 너비는 원본과 같게, 브라우저 창을 작게 하면 고정 비율로 줄어듦 */ 비디오선택자 { max-width : 100% ; } /* 너비를 화면에 꽉 차게 */ 비디오선택자 { min-width : 100% ; } /* 높이를 화면에 꽉 차게 */.. 2023. 2. 12. [CSS] 애니메이션 스타일 (animation) 애니메이션 정의 (시작과 끝 상태 설정) @keyframe 애니메이션이름 { /* 시작 선택자 (0%) */ from { 스타일속성 : 속성값 ; } /* 끝 선택자 (100%) */ to { 스타일속성 : 속성값 ; } } - 0~100% 내의 %를 선택자로 하여 중간 상태 설정 가능 요소에 애니메이션 부여 /* @keyframe에서 정의한 이름과 동일하게 입력 */ 선택자 { animation-name : 애니메이션이름 ; } 애니메이션 실행 시간 지정 선택자 { animation-duration : 실행시간(단위 s) ; } 애니메이션 종료 후 원위치 방법 지정 선택자 { animation-direction : normal | alternate ; } - normal (기본값) : 애니메이션을 끝까.. 2023. 2. 12. [CSS] 트랜지션 스타일 (transition) 트랜지션 - 웹 요소의 스타일 속성이 조금씩 자연스럽게 바뀌는 것 트랜지션을 적용할 속성 선택 선택자 { transition-property : all | none | 속성명 ; } - all (기본값) : 요소의 모든 속성이 트랜지션 대상이 됨 - none : 아무 속성도 바뀌지 않음 - 속성명을 콤마로 연결하여 여러 속성에 적용 가능 트랜지션 진행 시간 지정 선택자 { transition-duration : 시간(단위 s) ; } - 트랜지션이 여러 개라면 쉼표로 구분해서 지정 ex) { transition-property : width, height ; transition-duration : 2s, 3s ; } → 2초 동안 너비 변화, 1초 동안 높이 변화 트랜지션 진행 속도 지정 선택자 { tr.. 2023. 2. 12. 이전 1 2 3 다음 728x90 반응형
