테스트 사이트 - 개발 중인 베타 버전입니다

영카트5 + 부트스트랩3 시간좀 걸릴듯 합니다.

· 11년 전 · 1395 · 6

안녕하세요. 플록입니다.

대략 5~6년만에 글을 쓰는것 같습니다.


이번에 영카트5에 부트스트랩3을 적용해보는 작업을 하고있습니다.  

 

"제 능력으로  결혼? 까지는 안되고 동거수준 까지는 해보려고 시작한게 한달정도 되었습니다.

본업이 아니기 때문에 틈틈이 하다보니 한달 이라는 것도 별 의미는 없긴 합니다."


시간 되시면 보시고 조언 부탁 드립니다. (조언 주실때 사용자 환경도 같이 부탁 드립니다.) 


jquery 1.11.1+bootstrap 3.0.1 로 올려서 진행하고 있습니다.

이것 때문에 일부이긴 하지만 영카트 기존파일을 수정해야 하는 부분도 있더군요.

 

작업 내용을 대강 설명 드리면..

-레이아웃은 공개 템플릿을 기반으로 필요한 최소한의 부분만 부트스트랩 압축CSS 파일에서 직접수정하고 추가로 필요한 부분은 별도 CSS에서 처리하게 하였습니다. 차차  LESS로 패턴을 잡아가는 수준이 되길 바래봅니다.

-스킨은 반응형을 목표로 상품문의, 상품후기, 메인메뉴, 1:1문의등 최신글과 슬라이드, 서브메뉴 몇 개 그리고 상품문의,후기 리스트도 수정했군요. 

-인덱스 상품 목록은 ajax로 타입별로 가져오게 해서 초기 로딩 시간을 단축,  ​localStorage로 최종선택했던 탭을 기억하도록 하였습니다.

-제품정보 페이지에서 상단 제품정보 부분은 반응형으로 약간만 수정하였고 하단 상품정보 및 사용후기등 부분은 탭으로만 바꿨습니다. 이부분도 자료가 늘어나 부담이 된다면 ajax처리해주면 될것 같습니다.

-상품스킨은 편리님의 ajax스킨을 바탕으로 코어버전에 따른 부분만 일부 수정해서 돌아가는 정도입니다.

-구매관련 부분은 아직 손대지 못한 상태 입니다.

 

시작 할 때 부터 define('G5_USE_MOBILE', false);를 목표로 하고 있기 때문에 모바일쪽은 아예 손대지 않았으므로 모바일에서 보실때에도 http://jemg.co.kr/?device=pc 로 부탁 드립니다.  

 

읽어주셔서 감사합니다.  

 

 

 

 

.   

 

 

 

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 6개

11년 전
디자인이 갈끔하고 좋네요. 기대됩니다.
감사합니다.
디자인 이랄게 없습니다. 로고 붙이것 이외에 ..
상품목록, 상품설명 이미지 업로드 할 때 자동으로 워터마크 생성하는걸 해보는데 이미지 퀄리티가 너무 떨어져 걱정입니다.
11년 전
엇 ㅎ 저도 그누보드4 부트스트랩 접고 그누5로 하려던 참인데 ㅎ

부트스트랩은 define('G5_USE_MOBILE', false); 이걸로 가야 묘미죠 ㅎ 스킨을 2번 만들필요가 없지요 ㅎㅎ

이미지가 화면 줄였을때 반응하지 않네요 ㅎ

view.skin.php 파일에 내용표시 부분 부트스트랩 이미지 반응형으로 클래스를 주세요 ㅎㅎ~

<img src="경로" class="img-responsive" /> 이렇게 클래스를 주시면 됩니다.

그러면 브라우저 크기에 따라 에디터로 올린 이미지라도 리사이즈가 아닌 반응형 이미지로 ㅎㅎ

또는 <img src="경로"style="display: block;max-width: 100%; height: auto;" /> 이렇게 직접 주셔도 됩니다.
감사합니다.
불당님과 돼지코구뇽님 께서 그누4에 작업하신것 알고있습니다.
제경우 5버전의 기본 코드도 익힐겸해서 날코딩을 해보는 겁니다.
상품쪽 썸네일 워터마크까지 했는데 이미지 퀄리티가 떨어지고 색상이 가라않는 현상이 있네요.
퀄리티를 100으로 올리거나 언샾 마스크를 빼도 마찬가지고 썸네일 생성 함수를 유창화님 평션으로 교체해도 같은 현상입니다.
그리고 알려주신 부분은 참조해서 수정 하도록 하겠습니다.
img-responsive,.thumbnail>img,.thumbnail a>img,.carousel-inner>.item>img,.carousel-inner>.item>a>img{display:block;width:100% \9;max-width:100%;height:auto}
- 찾아보니 관련 코드는 위와 같고 코드가운데 \9 는 ie hack 이더군요.
11년 전
네 ie 브라우저 -bug , hack 스크립트와 html5 등등 호환스크립트 모두 들어가야 될듯합니다 ㅎ
11년 전
멋집니다~

게시글 목록

번호 제목
8050
8048
19969
19968
19967
19966
19965
19964
19963
19962
19961
28345
31017
19960
19959
19958
19957
8039
8035
8029
28344
28339
8019
28338
8017
8010
8007
8004
8003
28332
28322
7999
28317
20956
7992
20945
28314
20936
20931
7986
20925
7982
7979
7978
7975
28307
7973
7966
28305
7963
28300
7961
28297
28295
7959
19948
19947
28292
31016
19946
19945
28286
7958
7956
7952
7946
28285
28283
19943
7944
7936
7931
28279
24666
24663
7928
7923
19941
28274
28257
28249
28248
7914
7912
7911
20912
7908
31755
28233
28232
28228
7903
28217
20900
24662
20891
20882
19936
20853
31011