내가 썼던 글이 다 날라가서 다시 썼어 ;ㅅ; 소스에서 ]는 >로 바꿔줘!
〈head] 와 〈/head] 사이에 〈meta name="viewport" content="width=device-width, initial-scale=1"] 를 넣어줘!
이게 없으면 아무리 열심히 만들어도 적용이 안 돼 ㅠㅅㅠ
그리고 스타일시트(〈style]~〈/style]) 에 아래를 추가해주고 id 나 class 스타일을 적용해주면 돼
@media (max-width: 500px) {
}
-----------
이해를 돕기 위해 예시를 들게
일단 이게 반응형이 맞나 확인하기 위해 div를 짤 거야!
그냥 div만 짜면 아무 것도 안 보이겠지? 〈style]~〈/style] 사이에 div 스타일을 추가할게
#one {width:100px; height:100px; background-color:red; display:block;}
#two {width:100px; height:100px; background-color:blue; display:block;}
지금 'one' div 속성은 가로 100px 세로 100px 배경색 빨강에 화면에 보이는 상태야!
'two' 속성 역시 가로 100px 세로 100px 배경색 파랑에 화면에 보이는 상태
| 참고로 이미지로 보면 이럼 |
html 소스
div |
그럼 이걸 반응형을 이용해서 바꾸어볼게
아까 위에 적었던 아래 소스를 들고 와볼게 이 소스 안에 500px 이하일 때 적용 될 스타일을 넣는 거야
@media (max-width: 500px) {
}
= 화면의 크기가 500px 이하일 때 바뀌는 것
(+화면의 크기가 500 이상일 때는 괄호 안에 min-width:500px 으로 바꾸면 돼)
예를 들어 아래처럼
@media (max-width: 500px) {
#one {width:100px; height:100px; background-color:yellow; display:block;}
#two {width:100px; height:100px; display:none;}
}
'one' div 의 속성은 가로 세로 100px에 배경색 노랑 화면에 보임 (배경색이 빨강에서 노랑으로 바뀜)
'two' div 의 속성은 가로 세로 100px에 화면에 보이지 않음!
| 소스 이미지 |
|
이게 끝이야 그럼 정말 화면 크기가 500px 이하일 때 변할까 볼게
500px 초과
500px 이하
이해가 가니...? 계속 하다보면 정말 쉬워 혹시 질문 있으면 아는 선에서 대답해줄게!