쇼핑몰만들기08 - 모바일버전 로고교체

쇼핑몰만들기08 - 모바일버전 로고교체

쇼핑몰만들기 8번째시간 모바일버전 로고교체에 대해서 말씀드리겠습니다

모바일용 자연햇살 로고를 넣은 겁니다. 

Pc용 로고의 경우는 사이즈를 크게 변경해서 넣으면 큰 사이즈로 적용이 되는데 모바일용 로고는 크게 넣어도 작은 사이즈로 나타납니다. 

 

그래서 모바일용 로고의 경우 css를 통해서 사이즈를 변경해 주도록 하겠습니다

도구 더보기에서 개발자 도구로 들어가면 관련된 css가 나옵니다

상단에 html과 하단에 css가 나오는데 요부분이 어느부분에 해당하는지 클릭하면 볼 수 있습니다. 왼쪽 상단로고를 클릭하시면 오른쪽 창에 경로를 확인하실 수 있습니다

아래쪽에 css가 나오는데 max16px 이라고 보이는데요 이걸 30px로 변경을 해보겠습니다 30px로 변경을 하니 로고가 커진 모습을 보실 수 있습니다. 그러면 css로 변경을 해야된다는 얘기입니다

왼쪽으로 사이즈를 줄여서 모바일에서처럼 로고의 사이즈를 확인하시면서 로고의 좌우 위치나 높이 등을 확인하시면서 원하시는 사이즈와 높이등을 변경하실 수 있습니다

저희 쇼핑몰에서 보여지는 로고가 왼쪽으로 더 옮겨졌으면 하는데 그부분은 포토샵을 통해서 조정을 할 거구요 저는 높이 부분을 수정하길 원해서 수정해보겠습니다 이런 부분을 수정하기 위해서는 css에 대해서 약간은 아셔야 하는데 만약에 -15px로 조절을 한다고 하면

Css에 대해서 모든 부분을 아실 필요는 없습니다. 그렇지만 필요한 부분에 대해서 검색을 해보면

이런것들이 나옵니다. 이러한 내용들을 참고하셔서 위치 조절방법을 알아보실 수 있습니다

이 로고부분과 관련된 html과 css가 어디에 있는지 확인하셔야 하기때문에 미리 확인을 하시면서 감으로 찾아가셔야 합니다. 여기서는 어떻게 보여질지를 참고만 하실 수 있습니다. 

 

로고 위치 변경을 원하실경우에는 카페24 디자인센터로 들어가셔서 조정하실 수 있습니다

모바일 쇼핑몰에서 디자인 수정하기

쇼핑몰에서 좌측상단 로고에 관한 부분이고요 전체화면보기에서 레이아웃에 관한 부분입니다. 

 

저의 경우에는 많이 해봐서 들어가는 경로는 아는데 여러분들께서는 이 화면을 참고하셔서 들어가시면 쉽게 찾아들어가실 수 있을겁니다

아까 쇼핑몰 사이트에서 봤을때 레이아웃이 나오고 내용들을 읽어보시면” header”가 나오는걸로 유추해서 ‘아! 레이아웃과 헤더와 관련된 어떤것이겠구나’ 라고 유추를 해보실 수 있습니다. 

그래서 그 경로를 따라서 해당 위치를 찾아오실 수 있습니다

46번에 원래 16px을 30px로 바꾼 후 저장을 하면 로고가 커진 걸 보실 수 있습니다. 그럼 여기에서 로고의 크기를 조절할 수 있구나라는걸 아시게 되는 겁니다

이번에는 로고를 약간 위로 올려보려고 합니다. 46번에서 마진값을 0에서 -5px로 조정을 한 후 저장을 하니 로고가 위로 조정된 걸 확인하실 수 있습니다. 이런식으로 이미지를 자신이 원하는 위치나 크기로 조정을 하실 수 있습니다. 그런데 이러한 작업들이 어렵다고 생각하셔서 처음에 쇼핑몰을 만들때 힘들어 하십니다. 

 

너무 생소한 언어들이고 스킨을 만드는 곳마다 규칙이 다를 수 있어서 이러한 것들을 유추해서 찾아가세요 라고 얘기를 하는데 이러한 과정들은 쇼핑몰을 만드는데 있어서 어쩔 수 없이 필요한 과정이라고 생각합니다

수정전의 내용은 꼭 메모장에 기록해 두시기 바랍니다

쇼핑몰을 구매한 사이트에서 제공한 매뉴얼 경로를 메모장에 미리 적어놓으시는게 나중에 찾아들어가시기에 좋습니다

파일질라를 이용해서 이미지를 업로드하겠습니다. 메모장에 적어둔 경로를 따라서 들어가 주세요

포토샵으로 작업해 놓으신 파일을 업로드 해주세요

업로드하시면 덮어쓰기 팝업창이 뜨면 확인을 해주시면 됩니다

모바일에서 로고가 커진 모습을 확인하실 수 있습니다

 

쇼핑몰만들기08 - 모바일버전 로고교체 유튜브 보러가기