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