'홈페이지 로고' 태그의 글 목록

홈페이지 로고

posted by wp 2015. 10. 26. 14:25

2015. 10. 26. 14:25

나만의 사이트를 구축할 때 만들고 보고 싶은 것이 바로 나만의 사이트 로고입니다.

홈페이지에 사이트 로고를 넣기 위해서는 먼저 사이트 이미지를 포토샵등 이미지 툴을 통해서 제작해야합니다. 여기에서는 로고 이미지는 만들어졌다는 가정 하에 진행하도록 하겠습니다.

기본적으로 이미지 로고를 만들기 위해서는 포토샵이나 포토스케이프등 이미지 도구를 사용할줄 알아야합니다. 여기에서는 따로 포토샵에 대한 설명을 하지는 않습니다.

그렇지만, 아직 포토샵을 다루지 못하는 분들은 워드프레스를 공부하면서 틈틈히 짬을 내어서 포토샵을 공부하시기 바랍니다. 아무래도 디자인이 훌륭하지 못한 사이트는 방문자의 재방문율을 낮출 가능성이 많기 때문입니다.

현재 블로그의 사용자화면은 다음과 같이 구성되어 있습니다.

실습용으로 제작한 이미지 로고는 왼쪽 상단에 화살표가 표시된 부분에 배치하도록 하겠습니다.

로고 이미지를 웹사이트에 배치하기 위해서는 위젯기능을 사용해야 합니다. 워드프레스 관리자 화면에서 왼쪽 메뉴에서 위젯을 클릭합니다.

위젯 관리 화면에 들어습니다. 이미지 로고는 텍스트 위젯을 활용해서 보여줄 수 있습니다. 원래 텍스트 위젯은 텍스트나 글을 보여주는 위젯이지만 HTML 기능을 지원하기 때문에 텍스트 위젯에 HTML 소스를 입력해서 이미지를 보여줄 수 있는 것입니다.

텍스트 위젯을 마우스로 누른 상태에서 주 사이드바 영역의 맨 위부분으로 드래그합니다.

주 사이드바 영역에 텍스트 위젯이 이동되면서 위젯이 이름과 본문을 입력하는 창이 뜹니다. 본문 입력 영역에 로고이미지의 HTML 소스를 입력하면 됩니다. 일단 왼쪽 하단에 닫기 링크를 클릭합니다.

텍스트 위젯이 상단에 배치된 것을 확인할 수 있습니다.

로고이미지로 사용될 HTML 소스를 만들겠습니다. HTML은 웹표준에서는 반드시 알아야하는 필수 항목입니다. 워드프레스를 공부하기로 마음먹었다면 HTML 역시 틈틈히 공부하는 것이 좋습니다.

임시 글을 하나만들어서 이미지에 대한 HTML 소스를 가져오겠습니다. 왼쪽 메뉴에서 글 > 새 글 쓰기를 클릭합니다. HTML 이미지 소스만 필요하고 삭제할 글이기 때문에 제목은 별도로 입력하지 않아도 됩니다.

아래 미디어 추가를 클릭해서 로고로 사용할 이미지를 업로드 합니다. 미디어 추가 버튼을 클릭합니다.

이미지 화일을 업로드 할 수 있는 화면이 나옵니다.

왼쪽 파일 업로드 탭을 클릭하여 로고 이미지 화일을 업로드 합니다.

사이트 로고로 사용할 이미지가 업로드 되었습니다. 화면 하단에 글에 삽입하기 버튼을 클릭합니다.

본문 입력 HTML 편집기에 이미지 화일이 로딩되었습니다.

이미지를 마우스로 클릭합니다. 마우스로 클릭하면 이미지가 선택되고 옵션이 뜹니다. 연필 모양의 편집 아이콘을 클릭합니다.

이미지 상세화면이 나타납니다. 표시 설정의 연결 부분에 URL이 보입니다. 이 부분은 이미지를 클릭했을 때 화면이 이동하는 URL 경로입니다.

연결의 옵션부분을 미디어 파일에서 사용자 정의 URL로 변경합니다.

아래 URL 부분은 아직 연결할 페이지가 없으므로 삭제합니다.

고급 옵션 부분에서 새 창/탭 링크 열기 부분에 체크를 한 뒤에 업데이트 버튼을 클릭합니다.

다시 편집기 화면이 나타납니다. 편집기 오른쪽 상단에 텍스트 탭 부분을 클릭합니다.

이미지에 대한 HTML 소스가 나타납니다.

텍스트를 선택해서 복사합니다.

이제 다시 외모 > 위젯 화면으로 이동하여 주 사이드바에 텍스트 위젯을 클릭해서 펼칩니다.

조금전에 복사한 이미지 URL을 텍스트 위젯의 본문 항목에 붙여넣고 저장하기 버튼을 클릭한 뒤에 닫기 버튼을 클릭합니다.

로고 이미지 적용을 확인하기 위해서 화면 왼쪽 상단에 사이트명을 Ctrl 을 누른 상태에서 클릭합니다.

사이트에 왼쪽 상단에 사이트 로고가 정상적으로 생성된 것을 확인 할 수 있습니다.