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