본문 바로가기

쉬운홈페이지만들기

(27)
기본폰트 설정 및 변경 기본 폰트 정의 홈페이지에서 사용될 기본 폰트를 정의합니다. 한번에 전체적인 폰트의 종류 및 사이즈를 쉽게 변경할 수 있습니다. 또한 개별적으로도 변경이 가능합니다. ■ 수정 파일 위치 > www > bizdemoXXXXXX > img > _css > nStyle_user.css ■ 수정 파일 nStyle_user.css /***************************************************************** 전체폰트크기조절 : 14px 기본크기 *****************************************************************/ .ft_reset { font-weight: 400;/* 300, 400 ... */ font-size: 13p..
페이지타이틀 변경하기 타이틀(title) 이란? 웹 페이지의 제목을 정의하며, 또한 웹브라우저 탭에 표시됩니다. 구글이나 다음, 네이버 등의 검색엔진 웹브라우저에서 검색을 할 때, 검색어와 일치하는 키워드를 가진 웹페이지를 노출시킨다. ■ 수정 위치 > 디자인관리 > 템플릿 디자인 수정 > 모듈 > *공통사용전체모듈 > *공통상단 레이아웃 모든 페이지 공통으로 사용되므로, 한 번만 수정해 주시면 모든 페이지에 공통으로 적용됩니다.
파비콘 변경하기 파비콘(favicon)이란? 파비콘이란 웹사이트 또는 웹페이지를 대표하기 위해 웹브라우저에서 사용되는 16 x 17 픽셀의 작은 이미지입니다. 즐겨찾기 아이콘(favorite icon)의 줄임말로 주로 웹브라우저 상다네 있는 탭에 표시됩니다. 그 외에도 브라우저의 북마크바, 방문 기록, 검색 결과에서 페이지 url과 함께 표시됩니다. 파비콘을 만들면 웹사이트의 아이콘으로 여겨지거나 사용자들이 웹상에서 내 웹사이트임을 아아볼 수 있는 시각적인 식별자가 됩니다. 크롬, 웨일, 엣지 등의 브라우저 상단탭에서 노출되는 아이콘 이미지 입니다. ico 확장자이며, 이미지 파일로 변경하여 사용 가능 합니다. - 소스 코드 위치 > 디자인관리 > 템플릿 디자인 수정 > 모듈 > *공통사용전체모듈 > *공통상단 레이아웃..
로고 변경하기 로고 이미지 알아보기 홈페이지에서 사용되는 로고 파일은 총 3개의 로고 이미지 파일이 있습니다. 각각의 적요 위치와 용도가 다르므로, 3개의 로고 이미지를 수정할 수 있습니다. logo.png 상단에 적용되어 노출되는 대표 로고 이미지 logo_bottom.png 하단에 적용되어 노출되는 로고 이미지 logo_sns.png 카카오톡, 페이스북 등 sns에 노출되는 로고 이미지 - 이미지 사이즈 가로 : 320px, 세로 : 80px - 이미지 사이즈 가로 : 320px, 세로 : 80px - 이미지 사이즈 가로 : 320px, 세로 : 320px 로고 파일 원본 위치 알아보기 FTP 접속 후 "_images" 폴더로 이동(클릭) 하시면 로고 이미지 3개를 확인할 수 있습니다. > www > bizdemo..
중요) 기본 명칭 및 사용법 알아 보기 이전 단계 설명에서는 메인 및 서브페이지에서 구성된 각각의 모듈 위치에 대해서 알아 보았습니다. 이번에는 모듈 적용을 위한 html 적용 방법에 대해서 알아 보도록 하겠습니다. 기본적인 html 작성 방법 홈페이지 수정은 일반적으로 html 을 이용하여 수정을 하게 됩니다. 간단한 사용방법을 익히셔야 홈페이지를 내 마음대로 수정할 수 있습니다. html 수정에 있어서, 다양한 솔루션 별로 약간씩 차이가 있지만, 근본적인 수정 방법은 동일합니다. 각각의 html 페이지를 수정하기 위한 화면이며, 3개의 분할 화면으로 구성되어 있습니다. 페이지 (디렉토리) html 소스 (에디터) 모듈정보 (모듈) - 페이지 (디렉토리) : 내컴퓨터의 탐색기(C드라이브) 구조와 비슷하다고 생각하시면 됩니다. - html 소..
중요) 디자인 화면구성 및 각각의 사용 블록 모듈 수정 위치 메인페이지 총 3개의 블록으로 구성 되어 있으며, 각각의 블록안에 작은블록 여러개의 조합으로 구성 되어 있습니다. "상단공통"과 "하단공통" 블록은 서브페이지에서도 공통으로 사용되는 디자인 영역입니다. - 접속위치 > 디자인관리 > 템플릿 디자인 수정 > 페이지 > 메인페이지 서브페이지 총 5개의 블록으로 구성 되어 있으며, 각각의 블록안에 작은블록 여러개의 조합으로 구성 되어 있습니다. "상단공통"과 "하단공통" 블록은 메인페이지에서도 공통으로 사용되는 디자인 영역입니다. - 접속위치 > 디자인관리 > 템플릿 디자인 수정 > 페이지 > 각각의 서브페이지 폴더 > 각각의 서브페이지 ※ 참고내용 서브페이지 수정 위치 이미지에서 보시면... "현재위치" 에 영역에 해당하는 블록에는 설명이 안보입니다. 이유는..
중요) 화면 구성 요소 살펴보기, html, css, js, 이미지원본 위치 홈페이지를 구성하는 각각의 페이지에 대해 알아 보겠습니다. - 메인페이지 : 1개 - 서브페이지 : 디자인페이지, 게시판등 100여개 - 기타페이지 : 회원관련, 기본정보 페이지 등... 화면 위치는 아래 그림을 참고 하시면 됩니다. - 접속위치 > 디자인관리 > 템플릿 디자인 수정 > 페이지 html 수정을 위한 화면 위치 입니다. 디자인 수정에 필요한 화면 위치이므로 눈에 익혀 두시면 편리합니다. 각 페이지의 화면 구성 레이아웃 입니다. ● 공통사용전체모듈(상단) : 로고, 상단메뉴, 회원가입, SNS아이콘, 국가언어변경 등 ● 공통사용전체모듈(하단) : 하단로고, 회사정보 등 ● 디자인원본모듈 : de01, de02...~ de30 등... 수십여개 이상의 디자인 모듈 (메인페이지, 서브페이지에서 ..
관리자페이지 접속하기 아래 링크주소를 통하여 관리자 페이지를 접속할 수 있습니다. 즐겨찾기를 해두시고 사용하시면 편리합니다. https://builder.cafe24.com/admin/ 로그인 페이지 builder.cafe24.com 구매하신 템플릿 디자인은 위 "로그인 페이지" 접속 하셔서 디자인을 적용 하시면 됩니다.