웹사이트 리뉴얼 이야기 - 5. 오시는길 페이지

본 이야기는 지인의 기업용 홈페이지의 리뉴얼을 의뢰받아서 진행하는 과정을 적은 내용이며, 가비아 크리에이터링크 서비스를 이용해서 제작하였습니다. 

 

지인 회사 웹사이트 리뉴얼 이야기는 계속 이어집니다. 

 

 

 

 

전하는 말

 

인사말 페이지 제작 후 다듬는 과정에서 메뉴 시스템을 하위(서브) 메뉴 방식으로 변경하였습니다. 

 

 

---

 

오시는 길 페이지 제작

위치정보를 알려주는 블럭은 '컨택트' 라는 것을 이용하면 됩니다만 구글맵이 연동됩니다. 네이버맵이나 다음 카카오맵을 연동하는 방법에 대해서는 알아보아야 되겠습니다. 

 

 

1. 상단 타이틀 블럭 추가

 

   1.1 오시는 길 페이지 들어가기

         - 사이트메뉴 중 '오시는길' 메뉴 선택하여 해당 페이지 열기

 

   1.2 상단 타이틀 구성

          - 이 페이지도 인사말과 같이 심플하게 구성하려고 하였으나 구글맵 표현되는 부분이 너무 단순하고 색상이 옅어서 조금 무게감을 더하기 위해 이미지를 타이틀 배경으로 넣고자 합니다. 

          - 블럭 중 '타이틀'을 활용하겠습니다.

 

 

추가한 타이틀블럭 설정창을 열어보면 '배경' 부분에 이미지를 넣을 수 있는 기능을 활용하겠습니다. 

 

지도나 길과 관련된 이미지를 찾아야겠죠? 

pixabay에서 적당한 이미지를 하나 다운로드합니다. 이미지 위에 흰색 글자가 올라가야 되니 좀 어두운 배경이 적당할 듯합니다. 

 

다운로드한 이미지 파일을 타이틀 배경 이미지로 등록한 후 이미지가 보이는 영역을 더 넓게 하기 위해 상하 여백을 60으로 늘려 주었습니다. 

가운데 큰 글자도 잘 보입니다.

 

 

   1.3 타이틀 아래 구분선 추가 

 

 

 

2. 위치정보 넣기

   

   2.1 컨텍트 블럭 선택

 

   2.2 지도정보 수정

         - 왼쪽 텍스트 부분 내용 채워 넣기

- 왼쪽 텍스트 부분 내용 채워 넣기  - 구글맵에서 위치 검색 후 위치정보 입력 (구글맵에서 위치검색 후 주소창 클릭해서 주소창 내용 그대로 복사해서 입력하면 됩니다. )

 

   2.3 하단 구분선 넣기

 

 

---

간단하게 위치정보를 입력해 보았습니다. 

 

네이버맵이나 다음카카오 맵과의 연동 가능성도 찾아보아야 되겠지만 이 업체는 해외 거래처도 있으므로 구글맵이 적당할 듯합니다. 

 

 

 

다음 이야기는 제품소개 페이지입니다. 

 

 

 

제일종합식품 소개

 

 

 

---