미디어쿼리 레이아웃 질문 드립니다.
본문
<section id="섹션">
<div class="콘테이너">
<div class="로우" >
<div class="칼럼">
<div class="버튼">
<a class="버튼 슬라이드" href="#scroller" data-slide="prev">전
<a class="버튼 슬라이드" href="#scroller" data-slide="next">후
</div>
</div>
<div class="칼럼2">
<div id="scroller" class="슬라이드">
<div class="내용물">
<div class="활성화">
<div class="로우">
<div class="칼럼">
<div class="사진">
<div class="사진 내용물">
내용물 블라블라..
(닫는 태그는 생략합니다..)
버튼을 누르면 움직이는 슬라이드를,
위의 중간 코드를 3번 반복해서,
1,2,3 영역을 위처럼 만들었는데요,
400px 이하 에서는 레이아웃을 바꾸고 싶거든요.
1,2,3 이렇게 가로가 아니라,
1
2
3
이렇게 100% 로 말이죠..
근데 미디어 쿼리를 뭐라고 작성해야하는지 잘 감이 안옵니다.
단순히 영역 크기만 바꿔봤거든요.
배치는 어떻게 바꿀 수 있나요?
답변 3
@media screen and (max-width:400px){
.칼럼 {width:100%;}
}
이렇게 한번해보세요~
완벽하게 해결했습니다. screen and 가 붙으면 정확히 어떤 의미가 되는건가요? 스크린과 함께라고 어림짐작만 되서, 정확히 알고 싶습니다.
PC영역에서의 레이아웃 CSS는 어떻게 작성하셨는지요?
봐야 말씀드릴 수 있을 것 같네요~
위의 글로 해결하였습니다. 신경 써주셔서 감사드립니다
미디어 타입이 screen 이라는건데 and 가 붙으면 가로안에 쿼리가 이어진다는 뜻입니다.
screen 타입인지 보고 최대 사이즈가 400인지 확인합니다. 즉 400 이하일경우 가로 안에 css가 보이게 됩니다.
정확하게 알려주셔서 감사합니다. 좋은 하루 되세요!
