![order 속성](http://i1.daumcdn.net/thumb/C120x120/?fname=https://blog.kakaocdn.net/dn/bHVR3y/btsddT24I90/pQY6cClz8cszHbLJ3qRbn1/img.png)
order 속성
● order 속성 - display: flex 일 때, 출력 순서를 변경하기 위해 사용
- Front-End Study/CSS 사전
- · 2023. 5. 1.
타이머 함수 1. 타이머 함수 - 특정 시간에 코드를 실행하거나 일정한 간격으로 코드를 반복 실행하는 기능 제공함 2. setTimeout 함수 - 일정 시간 경과 후, 특정 코드 블록 or 함수를 실행하는 기능 제공함 setTimeout(callback, delay); - callback : 지정된 시간이 경과 후, 실행할 콜백 함수 - delay : 콜백 함수를 실행하기까지의 지연 시간을 밀리초(Millisecondes) 단위로 나타냄 (지연 시간 후, 콜백 함수 실행) - clearTimeout(id) 함수를 사용하여 실행되고 있는 timeout을 중지 - 예시 - setTimeout 함수로 인하여 그 뒤의 console.log가 먼저 실행한 후, 지연시간 4초 뒤에 Callback함수에 있는 a ..
● counter-reset 속성 - 카운터를 초기화하기 위한 속성 - counter-reset : [카운터명] [정수] ● counter-increment 속성 - 카운터를 증가시키기 위한 속성 - counter-increment : [카운터명] [정수] - 정수값은 카운터의 증가 배율임 ● counter( ) 속성 - 카운터를 사용하기 위한 속성 - 함숫값에는 카운터명, 카운터 스타일, 문자열이 들어올 수 있으며 쉼표로 구분
● order 속성 - display: flex 일 때, 출력 순서를 변경하기 위해 사용
플렉서블 박스 (Flexible Box) 1. 플렉서블 박스 - 박스 요소들을 다양하고 자유롭게 조작 및 배치할 수 있는 기술 - 다른 속성들과 달리 박스의 배치 순서를 변경하거나 자유롭게 바꾸는 것이 가능 ※ 부모 박스를 플렉서블 박스, 그의 자식 박스를 플렉스 아이템이라고 함 ※ 자세한 내용은 Front-End Study/HTML+CSS에서 flex 관련 속성 정리 참조
뷰포트 (Viewport) 1. 뷰포트 - 화면에서 실제 내용이 표시되는 영역 - 뷰포트는 메타 태그를 이용해 화면의 크기 or 비율을 조절 2. 뷰포트 속성 속성명 속성값 속성 설명 width device-width, 양수 뷰포트의 너비를 지정 height device-height, 양수 뷰포트의 높이를 지정 initial-scale 양수 뷰포트의 초기 배율 지정 (기본값 1) (축소 < 1 < 확대) user-scalable yes, no 뷰포트의 확대/축소 여부 지정 minimum-scale 양수 뷰포트의 최소 축소 비율 지정 (기본값 0.25) maximum-scale 양수 뷰포트의 최대 확대 비율 지정 (기본값 5.0)
미디어 쿼리 1. 미디어 쿼리 - 화면의 크기나 환경에 따라 웹사이트를 변경하는 기술 2. 기본 문법 - 미디어 쿼리를 작성할 때는 기본적인 순서와 규칙을 따라야 함 → @media [only 또는 not] [미디어 유형] [and 또는 , 콤마] (조건문) {실행문} - @media : 미디어 쿼리 문법의 시작을 알리는 부분 - [only 또는 not] - only 키워드 : 미디어 쿼리를 지원하는 브라우저에서만 미디어 쿼리를 해석하게 해주는 키워드 - not 키워드 : not 다음에 오는 조건을 부정하는 키워드 - 미디어 유형 : 미디어별로 적용할 CSS를 따로 작성함. 미디어 유형은 다음과 같음 기기명 설명 all 모든 장치 print 인쇄 장치 screen 컴퓨터 화면 장치 or 스마트 기기 화면..