반응형으로 사이트 제작할 때 궁금증 채택완료
fear
8년 전
조회 5,058
안녕하세요. 홈페이지를 반응형으로 만들려고 하는데요.
반응형 CSS 작성하는 데 있어 궁금한 게 있어서 질문드려요.
예를 들자면 아래와 같은 코드가 있을 때. 어떻게 반응형 CSS를 적용하세요?
</div><div><div>@media screen and (min-width:480px) { </div><div>모니터 해상도 가로 넓이가 최소 480px 이상이면 이 괄호 안에 있는 CSS를 적용한다.</div><div>}</div></div><div>1. 하나의 해상도 미디어 쿼리 안에 적용 될 각종 css를 다 넣는다. ㅡ> 헤더, 바디, 풋, 기타 등등
설명) min-width:480px 안에 적용될 css 아이디, 클래스 다 넣는다.
2. 해당 css 아래나 근처에 미디어 쿼리를 따로 넣는다.
설명) min-width:480px 일 때 적용할 미디어 쿼리를 적용할 아이디, 클래스 마다 추가로 적는다.
</div><div><div style="font-size: 14.6667px;">@media screen and (min-width:480px) { </div><div style="font-size: 14.6667px;">header {width:100%}</div><div style="font-size: 14.6667px;">}</div></div><div style="font-size: 14.6667px;"><div style="font-size: 14.6667px;">@media screen and (min-width:480px) { </div><div style="font-size: 14.6667px;">body {width:100%}</div><div style="font-size: 14.6667px;">}</div><div style="font-size: 14.6667px;"><div style="font-size: 14.6667px;">@media screen and (min-width:480px) { </div><div style="font-size: 14.6667px;">tail {width:100%}</div><div style="font-size: 14.6667px;">}</div></div></div><div>어떤 걸 선호하시나요? 그냥 궁금해서 그렇습니다.
댓글을 작성하려면 로그인이 필요합니다.
답변 5개
채택된 답변
+20 포인트
답변에 대한 댓글 2개
f
fear
8년 전
그러니까 @media screen and (min-width:480px) 안에 header, body, tail 등등 한번에 적는다는 말씀인거죠?
�
사이트메이크
8년 전
네
댓글을 작성하려면 로그인이 필요합니다.
답변에 대한 댓글 1개
f
fear
8년 전
이미 채택된 질문이지만 답변 감사드립니다!
댓글을 작성하려면 로그인이 필요합니다.
8년 전
저도 두번째 방식으로 합니다.
브레이크 포인트마다 따로 작성하면 매번 찾아가서 수정하는게 귀찮아지더라고요.
하나 수정하고 바로 밑에 딸려오는 반응형 수정하고 하는게 한눈에 스타일링 파악도 쉽더라고요.
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
f
fear
8년 전
이미 채택된 질문이지만 답변 감사드립니다!
댓글을 작성하려면 로그인이 필요합니다.
답변에 대한 댓글 1개
f
fear
8년 전
답변 감사드려요. 마음은 다 채택 드리고 싶은데 처음 댓글 달아주신 분께 드리겠습니다.ㅠㅠ
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인