반응형을 만드는 방법 ?
여자
■ 발생 문제에 대한 자세한 기술: 반응형을 만들어보고 싶어서 미디어 쿼리에 대해 찾아보고 있습니다.
보니까 만들어진 레이아웃에서 조건 분기된 css가 적용되는 방식이더라구요
width가 auto나 100%로 된다던가.. float를 none으로 한다던가 이런식으로
다른 방법도 있나 싶어서요 기존 레이아웃의 스타일을 먹이는거 말구
div id=GNB--PC!-- PC화면에서 GNB --/divdiv id=GNB--MOBILE!-- 모바일에서 GNB --/div
이런식으로 마크업을 작성하고 쿼리 분기해서 #GNB--PC나 #GNB--MOBILE의 display를 토글해줘도 될까요?
가능하다면 웹표준에 걸리나요? 궁금궁금합니다
-
하나 2023-11-23
가능하죠. 스크립트로 플랫폼 사이즈를 구해서 body 태그에 특정 클래스가 붙게 한뒤, css 에서 그 특정클래스의 자손선택자로 css 를 제어하게만 해줘도 될것같구요. 멀티클래스같은 속성을 쓰셔도 되구요.
-
다은 2023-11-23
??
-
장미 2023-11-23
현대 pr검색해 보세요. 스크립트로 해상도 구해서 처리한건데 저렇게 마크업을 분기로 처리한건 아님
분석한지 오래되서 기억이 가물가물하네요
주소가 pr.hyundai.com이였나 -
4차원 2023-11-23
혹시 아시는 사이트들 중에 이렇게 마크업을 짠 반응형 사이트 아시면 남겨주시면 감사하겠습니다들
-
로지 2023-11-23
소스가 길어지는거만 빼면 큰 지장은 없는거죠 ?? 흠..
-
Sonya 2023-11-23
가능하고 문제없습니다.
-
눈내리던날 2023-11-23
아 그렇네요 .. 감사합니다
-
엄빠몬 2023-11-23
가능은 하죠.. 어떻게 보면 간단하죠.. 하지만 소스가 너무 길어지죠....
번호 | 제 목 | 글쓴이 | 날짜 |
---|---|---|---|
2655352 | 동영상 플래이어 (2) | 머슴밥 | 2024-05-19 |
2655320 | GList를 사용하는데 에러가 발생합니다. 도와주세요~~ | 찬늘봄 | 2024-05-18 |
2655291 | 자바 초보입문했는데요~~ | 이퓨리한나 | 2024-05-18 |
2655235 | xml연동 갤러리 생성관련 질문입니다. (2) | 난새 | 2024-05-18 |
2655205 | C++ 포인터 if | WatchOut | 2024-05-17 |
2655150 | 모바일 웹 환경을 구축을 할때의 콘텐츠 이미지 사이즈 (2) | 레오 | 2024-05-17 |
2655122 | 엥;; getMonth() 왜이렇게 나타나죠? (6) | 초코맛캔디 | 2024-05-17 |
2655095 | 구구단 질문이요 (3) | 하예진 | 2024-05-16 |
2655064 | RSA.js 파일 구할 수 있을가요.. 있으신분 첨부좀 해주세요.. | 얀 | 2024-05-16 |
2655009 | 유료테마 사려고 하는데 데모파일이 없다면 | 에드가 | 2024-05-16 |
2654980 | cximage를 통해 jpg파일을 받아와 윈도우에 뿌리는 프로그램을 만드는중인데 꼬였습니다. (4) | 하린 | 2024-05-15 |
2654922 | 고도몰 3차 4차 이상 카테고리 표출되게.. (7) | 유메 | 2024-05-15 |
2654874 | 제이쿼리랑 자바스크립트 학원 추천좀부탁드릴게요 (7) | 향율 | 2024-05-14 |
2654843 | 탭버튼 코딩시 마우스오버가 접근성에 왜 어긋나는지 궁금합니다... (1) | 걸때 | 2024-05-14 |
2654814 | 중국어 인코딩 관련해서 질문요,,, (5) | 화이트캣 | 2024-05-14 |
2654783 | 이 알고리즘 한줄한줄 해석좀 부탁드립니다. (1) | 요루 | 2024-05-14 |
2654764 | t 탭 질문이여. (3) | 눈 | 2024-05-13 |
2654737 | 크롬 인쇄하기 오류 (멈춤현상) | 아라 | 2024-05-13 |
2654708 | ie6에서 margin 문제 (5) | 너만 | 2024-05-13 |
2654681 | 아까 올렸던 질문의 액션코딩 (3) | 큰꽃들 | 2024-05-13 |