미디어 쿼리 media query
미디어 쿼리(media query)는 미디어 타입을 인식하고, 콘텐츠를 읽어들이는 기기나 브라우저의 물리적 속성을 감지할 수 있는 유용한 장치(기능)입니다. 모든 미디어 쿼리는 다음 두 가지 구성 요소를 지니고 있습니다.
- 미디어 타입 (어떤 타입인가, 음성 출력인가? 영상 출력인가? 미디어가 프린터기기 화면인지 음성기기인지, 어떤 미디어에서 노출이 되고 있는 것인지 등 )
- 조건에 대한 물음(미디어 특성) (=쿼리. 미디어의 크기 등)
@medoa 미디어 타입 and 미디어 특성{
/* 해당 기기에서 사용할 CSS 코드
미디어 타입과 조건을 모두 만족할 때 덮어씌울 스타일 선언문 */
}
예를 들어 스크린 (pc와 모바일을 통틀어서 말하는 것) 인데,
기기 너비가 375px일 때 이 스타일을 쓰겠다는 식으로 선언하는 것입니다.
미디어 타입
미디어의 타입은 웹개발에 있어서 대부분 screen 혹은 all을 사용합니다.
미디어 특성
미디어의 타입과 쿼리의 종류는 무척 다양합니다.
다음은 쿼리의 종류 입니다.
| 속성명 | 정의 | 속성명 | 정의 |
| min-width | 디스플레이 영역의 최소 너비 |
orientation | portrait 또는 landscape 감지 portrait는 세로가 더 긴상태. landscape 는 가로가 더 긴 상태입니다. (가로모드 등 ) |
| max-width | 디스플레이 영역의 최대 너비 |
color | 기기의 색상당 비트 수 |
| min-height | 디스플레이 영역의 최소 높이 |
color-index | 출력 기기의 색상 테이블 수 |
| max-height | 디스플레이 영역의 최대 높이 |
aspect-ratio |
디스플레이 영역의 너비와 높이의 비율 |
이에 대한 예제 중 가로의 값에 대한 스타일의 적용 예제는 다음과 같습니다.
max-width : xx px 는 xx값보다 작아질 때 해당 스타일이 적용되는 것이며
min-width : xx px는 xx값보다 커질 때 해당 스타일이 적용 됩니다.
<style>
.box{
width: 200px; height: 200px;
background-color: red;
}
/*미디어 쿼리 (주문) 추가 */
@media screen and (max-width: 800px) { /*최대 800까지. 800보다 작으면 초록색이 된다.*/
.box{
width: 200px; height: 200[x];
background-color: blue;
}
@media screen and (max-width: 600px) { /*최대 600까지. 600보다 작으면 파란색이 된다.*/
.box{
width: 200px; height: 200[x];
background-color: green;
}
}
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
실행 화면은 다음과 같습니다.
가로의 픽셀에 따라 색이 변합니다.
미디어 쿼리 조건을 여러개 삽입하여 스타일을 설정할 때에는 범위를 좁혀가면서 써야 합니다.
적용범위를 고려하여 제공해야 합니다.
만약 600 px이 위에 있고 800px 이 아래에 있으면 800픽셀보다 작은 것은 600픽셀 또한 포함되어 있으므로
저 수식에서는 600픽셀 아래에서 초록색의 색만 표현되게 됩니다.
미디어 쿼리를 추가할 때에는 link 태그에 미디어 쿼리를 추가하거나 import 구문을 이용해서 추가할 수 있습니다.
변형trandform 속성
변형trandform 속성은 요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여할 수 있습니다.
이는 모두 좌표 공간(너비와 높이, x축과 y축의 좌표값)에서의 값을 변경함으로써 이루어집니다.
| 함수 | 의미 |
| translate() | 위치 이동시키기 |
| scale() | 확대 및 축소하기 |
| rotate() | 요소 회전시키기 |
| skew() | 비틀어서 왜곡시키기 |
기본 틀을 만들어 놓고 순서대로 확인해볼게요.
<style>
div{ /*원을 만들기 위함*/
width: 100px;
height: 100px;
border: 5px solid black;
border-radius: 50%; /*자기가 속한 영역의 %로 계산함. div가 부모.*/
transform: ;
}
</style>
</head>
<body>
<div></div>
</body>
문서의 자연스러운 흐름에서는 왼쪽의 상단이 첫 시작점입니다.
transform 에 수치를 주면 시작점을 기준으로 이동을 합니다.
transform: translate(100px, 200px);
스케일의 원래 기준은 scale (1, 1) 입니다. x축 1배, y축 1배의 상태입니다.
여기에서 값을 넣어주면 scale (0.5, 2) 일때 x축은 0.5 배로 줄어들고 y축은 2배로 늘어납니다.
rotate는 회전을 시켜줍니다.
transform: rotate(115deg)
전환 transition
transition 속성은 속성값에 변화가 나타날 때 변하기 전과 변한 후 상태 사이에 동적인 변화를 추가할 수 있습니다.
전환은 단축속성이며, 하위속성은 다음과 같습니다.
| 하위속성 | 의미 |
| transition-property | 크기를 바꿀 것인지, 속도를 바꿀 것인지 등의 효과를 줄 속성을 정합니다. |
| transition-duration | 효과가 지속될 시간을 지정합니다. |
| transition-timing-function | 진행하는 동안 속도가 어떻게 변할지를 지정합니다. 가속도를 지정합니다. |
| transition-delay | 효과 시작 전 대기 시간을 지정합니다. |
속도 그래프에 대한 예시는 하단의 페이지에서 직접 입력하여 사용해볼 수 있습니다.
Graph of transition timing functions (dbaron.org)
Graph of transition timing functions
dbaron.org
상기의 속성들에 대해서는 이후 예제를 작성할 때 하나씩 확인해볼게요.
애니메이션
animation은 다수의 스타일을 전환하는 애니메이션 관련 하위 속성들에 대한 단축 속성입니다.
여러 개의 프레임이 연결되는 듯한 동작을 구현할 수 있습니다.
애니메이션 동작의 여러 프레임을 정의하기 위해서는 CSS의 keyframes 모듈을 사용해야 합니다.
애니메이션은 다음과 같이 사용합니다.
@keyframes 애니메이션_이름{
form{ width: 100px;}
to{width:200px;}
}
animation은 다수의 스타일을 전환하는 애니메이션 관련 하위 속성들에 대한 단축 속성입니다.
여러 개의 프레임이 연결되는 듯한 동작을 구현할 수 있습니다.
| 하위 속성 | 의미 | 하위 속성 | 의미 |
| animation-name | 적용할 키프레임 이름 | animation-direction | 동작 진행 방향 |
| animation-duration | 애니메이션 지속 시간 | animation-iterationcount | 반복 횟수 |
| animation-delay | 애니메이션 시작 전 시간 | animation-fill-mode | 전후 상태 설정 |
| animation-timing-function | 시간 그래프 | animation-play-state | 애니메이션 적용 여부 |
위 애니메이션에 대한 태그를 예제를 통해서 실제로 써볼게요.
애니메이션으로 움직이는 공 만들기!
<style>
.circle{
width: 100px; height: 100px;
background-color: pink;
border-radius: 50%;
position: relative;
top:0; left:0;
animation-name: moving;
animation-duration: 3s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction:normal;
animation-play-state: running;
animation: ;
}
@keyframes moving{
0%{ top:0; left:0;}
33%{left :800px;}
66%{top:700px;}
100%{left:0;}
}
</style>
</head>
<body>
<div class="circle">
</div>
</body>
'HTML · CSS > HTML · CSS 입문 공부일지' 카테고리의 다른 글
| 웹 CSS 입문 공부 18. 상속, 공용키워드, z-index (0) | 2022.11.14 |
|---|---|
| 웹 CSS 입문 공부 17. 선택자(2) (0) | 2022.11.14 |
| 웹 CSS 입문 공부 16. flexbox 각 속성들 (예제 작성중) (0) | 2022.11.14 |
| 웹 CSS 입문 공부 15. float, position 포지션, 레이아웃 flexbox (0) | 2022.11.14 |
| 웹 CSS 입문 공부 14. 요소 유형 display & borde, 박스 모델 Box-Model (0) | 2022.11.11 |