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

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

· 11년 전 · 1391 · 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년 전
멋집니다~

게시글 목록

번호 제목
27925
27922
6972
19602
19601
19599
6961
30941
19597
19596
19595
19594
30939
19593
6959
6957
6953
27920
19592
19591
19590
6949
6947
20826
20823
19589
27913
27912
19588
20822
19587
19586
27887
20819
27883
19585
19584
19583
19582
19581
19580
6945
24622
19578
6938
6935
27880
20818
19575
20815
20812
20809
6932
6931
6929
19571
19570
20802
27877
20797
6923
20795
6918
6914
20789
6899
27860
6898
27856
6895
6891
6890
6881
6874
27852
6860
6857
19569
19565
19564
27844
19563
24617
19554
6854
19553
19531
6850
6848
27842
6846
6842
6839
6834
6829
6824
6820
27839
6818
19529