이 시리즈는 필자가 웹프로그래밍을 겪으면서 생각처럼 잘안되고 짜증나는 css를 효율적이게 쓰기위해서 만든 시리즈이다.
여기에 들어온 여러분들도 이 쓰레기 같은 css의 고통을 같이 덜수 있기를 바란다.
참고:
css지옥에서 탈출하자(1) - 인라인 요소(inline element)와 블록 요소(block element)는 다르다.
css지옥에서 탈출하자(2) - display와 인라인(inline), 블록(block) 그리고 div를 display를 이용해서 옆으로 나열
css지옥에서 탈출하자(3) - display와 flex, 세로로 뭔가 배치하고 싶다면 flexbox를 쓰자, (추가로 div를 flex로 나열, 비율에 맞게 div 세로로 배치)
css지옥에서 탈출하자(5) - 엘리먼트를 드래그 앤 드랍(drag and drop)으로 자유롭게 옮긴다고?
css지옥에서 탈출하자(6) - css로 삼각형을 그려보자
css지옥에서 탈출하자(7) - display inline-block 나열시 공백 제거하기
css지옥에서 탈출하자(8) - div에 transition을 줘서 부드럽게 애니메이션 효과로 움직이기
css지옥에서 탈출하자(9) - 스크롤바가 없는 스크롤을 만든다?
css지옥에서 탈출하자(10) - 현재 내가 얼마나 스크롤(scroll)했는지 부여주고 싶을 때, 진행도(progressed) 표시
반응형을 사용하기 위해서는 미디어 쿼리를 사용해야한다.
미디어 쿼리라는 것은 이름만 거창하지 그냥 반응형이라고 생각하면된다.
사용하는 양식은 아래와 같다.
@media
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="my-div"></div>
<style>
#my-div {
width: 50px;
height: 50px;
background-color: red;
}
@media(min-width:768px) {
#my-div {
width: 100px;
height: 100px;
background-color: red;
}
}
@media(min-width:1024px){
#my-div {
width: 200px;
height: 200px;
background-color: red;
}
}
@media(min-width:1280px){
#my-div {
width: 300px;
height: 300px;
background-color: red;
}
}
</style>
</body>
</html>
반응형으로 사용하는 미디어 쿼리는 간단하게 min-width와 max-width로 나뉜다.
min-width의 의미는 "이것보다 크면 이 형식을 사용한다" 이다.
그럼 반대로 max-width의 의미는 "이것보다 작으면 이 형식을 사용한다"이다.
가령 위의 예제에서 min-width:768px이라는 의미는
최소 크기가 768px이므로 768보다 큰 경우에는 해당 미디어 쿼리가 사용되게 된다.
위의 예제에서는 미디어 쿼리가 4개가 사용되는데 이 순서는 "유의미"하다.
이는 css가 순서대로 적용되는 점을 생각하면 당연하다고 할 수 있다.
가령
@media(min-width:768px) {
#my-div {
width: 100px;
height: 100px;
background-color: red;
}
}
@media(min-width:1024px){
#my-div {
width: 200px;
height: 200px;
background-color: red;
}
}이러한 예제와
@media(min-width:1024px){
#my-div {
width: 200px;
height: 200px;
background-color: red;
}
}
@media(min-width:768px) {
#my-div {
width: 100px;
height: 100px;
background-color: red;
}
}이러한 예제는 다른 결과가 나온다.
그 이유는 아까도 말했지만 css는 순서가 중요하기 때문이다.
무슨 말인지 모르겠다면 한번 해보면된다.
'Usage > WEB-HTML-CSS' 카테고리의 다른 글
| css지옥에서 탈출하자(14) - 특정 element를 우클릭했을시 새탭과 새창 고르는 창(context menu)뜨게하기 (0) | 2019.05.28 |
|---|---|
| css지옥에서 탈출하자(13) - table에서 문자열 조정하기(word-break , word-wrap, white-space) (0) | 2019.05.08 |
| css지옥에서 탈출하자(11) - css로 원을 그려보자. 원속의 원 만들기(과녁처럼) (0) | 2019.02.27 |
| css지옥에서 탈출하자(10) - 현재 내가 얼마나 스크롤(scroll)했는지 부여주고 싶을 때, 진행도(progressed) 표시 (1) | 2019.02.19 |
| css지옥에서 탈출하자(9) - 스크롤바가 없는 스크롤을 만든다? (0) | 2019.02.17 |