이런 사이트는 어떻게 만드는건가요? 정보
이런 사이트는 어떻게 만드는건가요?
본문
https://www.biteme.co.kr/shop/main
위 사이트처럼 PC에서 들어가도 웹화면으로 보여지게 하는 사이트가 많이 보이던데
보면 똑같은 템플릿이더라구요
저런식의 사이트는 커스텀으로 만든사이트인가요?
추천
1
1
베스트댓글
그냥 CSS입니다...그누보드로도 만들수 잇습니다.
.scroll{ height: 600px; overflow-y: scroll; }
.body_div {width:100%; float:left;}
.con_div {width:100%; max-width:620px; box-shadow:10px 10px 20px rgba(0,0,0,.1); position:absolute; top:0; left:50%;}
.pc_div {position:fixed; width:50%; height:100%; left:0; top:50%; transform:translateY(-50%); text-align:right;}
.pc_div img { width:90%; max-width:525px; position:absolute; right:0; top:50%; transform:translateY(-50%);}
@media (max-width: 1060px) {
.con_div {position:relative; margin:auto; left:auto; max-width:100%; }
.pc_div { display:none;}
}
이쯤이었나;;
.scroll{ height: 600px; overflow-y: scroll; }
.body_div {width:100%; float:left;}
.con_div {width:100%; max-width:620px; box-shadow:10px 10px 20px rgba(0,0,0,.1); position:absolute; top:0; left:50%;}
.pc_div {position:fixed; width:50%; height:100%; left:0; top:50%; transform:translateY(-50%); text-align:right;}
.pc_div img { width:90%; max-width:525px; position:absolute; right:0; top:50%; transform:translateY(-50%);}
@media (max-width: 1060px) {
.con_div {position:relative; margin:auto; left:auto; max-width:100%; }
.pc_div { display:none;}
}
이쯤이었나;;
댓글 9개
그냥 CSS입니다...그누보드로도 만들수 잇습니다.
.scroll{ height: 600px; overflow-y: scroll; }
.body_div {width:100%; float:left;}
.con_div {width:100%; max-width:620px; box-shadow:10px 10px 20px rgba(0,0,0,.1); position:absolute; top:0; left:50%;}
.pc_div {position:fixed; width:50%; height:100%; left:0; top:50%; transform:translateY(-50%); text-align:right;}
.pc_div img { width:90%; max-width:525px; position:absolute; right:0; top:50%; transform:translateY(-50%);}
@media (max-width: 1060px) {
.con_div {position:relative; margin:auto; left:auto; max-width:100%; }
.pc_div { display:none;}
}
이쯤이었나;;
.scroll{ height: 600px; overflow-y: scroll; }
.body_div {width:100%; float:left;}
.con_div {width:100%; max-width:620px; box-shadow:10px 10px 20px rgba(0,0,0,.1); position:absolute; top:0; left:50%;}
.pc_div {position:fixed; width:50%; height:100%; left:0; top:50%; transform:translateY(-50%); text-align:right;}
.pc_div img { width:90%; max-width:525px; position:absolute; right:0; top:50%; transform:translateY(-50%);}
@media (max-width: 1060px) {
.con_div {position:relative; margin:auto; left:auto; max-width:100%; }
.pc_div { display:none;}
}
이쯤이었나;;
@알림톡 쇼핑몰로 대부분 되어있는데 카페24나 고도몰이 아니던데 저건 다 커스텀으로 만든건가요?
@토악 //
https://theme.sir.kr/youngcart55/demo/market?theme=market&device=mobile
<--요런 https://sir.kr/yc5_theme/1986 스킨을 가져다가...
pc버전일땐 CSS mobile 버전으로 나오게 해주고 미디어쿼리로
1280이상일때 (pc버전일때) 모바일버전 크기만크만 나오게 해주면 됩니다.
껍대기만 크기조절해줘면 됨
ex) https://kpopcon.net <--위에 스킨 가져다가 디자인만 약간 변경한거
https://theme.sir.kr/youngcart55/demo/market?theme=market&device=mobile
<--요런 https://sir.kr/yc5_theme/1986 스킨을 가져다가...
pc버전일땐 CSS mobile 버전으로 나오게 해주고 미디어쿼리로
1280이상일때 (pc버전일때) 모바일버전 크기만크만 나오게 해주면 됩니다.
껍대기만 크기조절해줘면 됨
ex) https://kpopcon.net <--위에 스킨 가져다가 디자인만 약간 변경한거
예시로 남겨주신 URL 참 잘만들었네요... 의뢰해서 저렇게 만드려면 비용도 만만치 않을것 같아요.
애초에 모바일 사이트로만 제작한 것과 마찬가지에요. 근데, 이것도 아이디어가 좋네요.
이런사이트 많이 보이던데요
https://direct.kt.com/directMain.do
https://direct.kt.com/directMain.do
와 이렇게도 만들 수 있군요, 앞으로 공부할게 많네요!
크 멋집니다.
다 같은 솔루션인가요? ㅋ 개인적으론 pc에서 모바일 레이아웃을 굳이 보이게하는건 불편해 보입니다.
