#10.그누보드 로고 어떻게 변경하는 거지?! / 크롬 개발자도구

안녕하세요! 반발자 안다형입니다!

오늘은 많은 분들이 어려워하시는 그누보드 로고 변경하는 법을 알려드릴게요!~

저는 크롬을 이용하는데 여러분 각자 사용하시는 브라우저에서도 지원하는 기능일 거예요.. 아마..?!

개발자도구 기능을 이용하여 손쉽게 사이트 내 여러가지 정보를 확인하고 경로를 알아내보도록 하겠습니다~!

 

---

 

여러분 사이트에 들어가셔서 그 화면에서 F12 버튼을 눌러보세요!

그러면 개발자도구가 우측에 뜨면서 각종 알 수 없는 코드들이 보이게 될 거예요.

 

개발자도구 맨 왼쪽 상단에 네모위에 화살표 모양이 있는 아이콘이 있어요.

그 버튼을 누르면 엘리먼트 선택이 활성화 되면서 마우스를 가져다 대는 부분이 파랗게 변하여 그 엘리먼트를 자동 선택할 수 있게 됩니다.

먼저 한번 웹사이트 로고를 선택해보겠습니다!

 

가장 먼저 눈에 들어오는 부분은, 선택한 엘리먼트가 해당된 코드가 딱! 파란색 줄로 선택하여 보여줍니다.

만약 이 로고의 경로를 알고싶다면, 엘리먼트 선택 도구로 선택하여 확인할 수 있겠죠?!

 

꿀팁! <img> 태그는 이미지 관련 태그입니다.

img 태그 속성 중에 가장 많이 사용하게 되는 필수 속성은 src인데요, src는 source의 줄임말로, 이미지의 경로를 지정해줍니다. 그래서 우리는 이미지를 삽입할 때, <img src="이미지경로"> 와 같이 사용하게 되는 것이지요.

 

이제 로고 이미지의 경로를 알았으니 FTP프로그램을 통해서 접속해볼까요?

 

개발자도구를 통해 찾아낸 경로를 그대로 접속하면, 똑같은 이름의 파일을 찾을 수 있을 거예요!

이제 그 파일을 내가 원하는 파일로 변경해주면 되는데요, 꿀팁을 드리자면..!

 

이미 사이트에 올라가 있는 파일을 다른걸로 대체 할 때에는 해당 이미지와 같은 사이즈로 작업하는 게 좋습니다.

사이즈를 모르고 작업할 시에는 사이트에서 처리하는 방식에 따라서 이미지 사이즈가 너무 크거나 너무 작게 보일 수 있으니 그대로 다운로드 받아서 그 사이즈 그대로 작업하는 걸 추천드려요!👍

 

이 로고는 160*39의 사이즈이니 이 사이즈대로 작업하면 좋겠죠?!

포토샵으로 로고 작업하신다면, 해상도는 72dpi로 해주세요!~

 



 로고 디자인 해서 하고 싶었는데 너무 덥기도 덥고 지쳐서 기냥 손에 잡히는 대로 막 했어요.ㅋㅋㅋㅋ 이렇게 로고 만들어서 원래 있던 파일을 지우고 업로드 해주면 끝! 만약 로고를 넣었는데 반영이 안된다면 컨트롤 + 시프트 + R을 눌러서 새로고침을 해주세요. 그러면 원래 불러왔던 이미지가 아닌 새로운 이미지로 새로 불러오게 됩니다.

 

그렇게 했는데도 반영이 안된다면? 관리자도구에서 본 소스의 파일명과, 실제 업로드된 경로가 동일한지, 파일명이 동일한지 체크해주세요!

 

---

이렇게 관리자도구를 이용하여 엘리먼트 코드를 확인하는 법을 알게 되었구요, 로고의 경로를 찾아 원하는 로고로 바꾸는 것까지 알아보았습니다! 코딩을 공부하게 되신다면, 엘리먼트 선택 도구로 CSS 속성, 스타일 속성도 알 수 있게 되니깐요 이를 참고하면 더욱 유용하게 사용하실 수 있게 됩니다!🙆‍♂️

 

오늘의 포스팅 끝! 안녕~👋