홈페이지 만들기

개요

안녕하세요.
이번 강좌는 홈페이지 제작 이후 자주 변경되는 이미지와 CSS 색상코드를 변수화 하는 방법에 대해서 알아보도록 하겠습니다.

CSS 활용

[디자인관리 > 고급 디자인 관리 > CSS 파일관리]으로 이동 후 "기본 css 파일"에서 [수정]버튼을 클릭 합니다.
보통 CSS 파일은 단순 파일형태로 존재 하지만 애니빌드 솔루션에서는 CSS 편집이 용이하도록 SCSS 문법을 제공 하고 있기 때문에 아래와 같이 2단으로 나누어져 있습니다.

좌측에 있는 편집창은 SCSS 또는 CSS 소스를 입력하는곳이구요,
우측에 있는 편집창은 수정이 불가능하며, 좌측 편집창에서 입력한 소스를 디코딩 후의 결과물만 볼 수 있도록 되어 있습니다.
SCSS 에 대한 사용법은 본 강좌에서 설명하는것보다 매뉴얼을 참고하시는게 좋을 것 같네요 (http://manual.anybuild.co.kr/add/basic1_04)

[주의사항] 좌측에 있는 편집창에서 문법에 어긋나는 소스 입력시 error 발생되므로 주의하셔야 합니다.
예를 들어 .table {border: 1px solid;border: 1px solid} 이런식으로 같은 속성이 2번 들어 간다던지 오타가 있는경우, 문법상 오류가 있는경우 모두 error 처리 됩니다.

SCSS 사용법은 천천히 익혀보는걸로 하구요. 이번 시간에는 CSS 변수에 대해서 사용법을 설명 드리고자 합니다.
간혹 이런 경우가 있습니다.
홈페이지가 거의 90% 이상 완료된 상태에서 고객이 홈페이지의 전반적인 색상을 변경요청하는 경우가 있습니다.
사실 이정도 수정건이면, 전면 대공사라고 봐야 합니다.
이런 대공사를 예방하기 위해서는 CSS변수 활용을 권해 드리고 있습니다.


현재 "기본 css 파일" 수정 화면 하단에 [변환코드등록]이라는 버튼이 있습니다. 클릭해주세요.

아래와 같이 설정 후 저장해주세요.

CSS변환코드를 등록 했다면 아래와 같이 CSS 소스를 수정해주세요.
[수정 전]

.table_dot {border:1px dashed #666666;}

[수정 후]

.table_dot {border:1px dashed {$css_var[line_color]};}


홈페이지 접속해서 확인해보시면 모든 점선이 파란색으로 변경 되었을 겁니다.

만약 고객이 이 색상을 변경 하려고 한다면 아래와 같이 수정 가능 합니다. [디자인관리 > 간편디자인관리 > CSS 간편 수정]으로 가시면 아래와 같이 변경 가능 합니다.

[스마트 디자인 모드] 에서도 쉽게 수정 할수 있습니다.
필자는 아주 간단하게 색상 하나만 CSS변수로 설정 했지만 여러분은 폰트 사이트 크기, 이미지 선택, 클래스명 변경 등 다양한 용도로 활용해 보시기 바랍니다.
CSS변수만 잘 설정해놓으시면 하나의 홈페이지가 다양한 템플릿효과를 낼수 있기 때문에 활용가치가 높다고 판단 됩니다.

SNS 연결

SNS 연결은 크게 2가지 방식이 있습니다.

  1. 단순 링크 주소 스크랩 방식
    이 방식은 현재 보고 있는 페이지를 자신의 SNS에 포스트 할 수 있는 기능 이며, 사용 방법이 아주 간단합니다.
    예를 들어 게시글 상세보기 화면에서 페이스북 스크랩 버튼 클릭시 자신의 페이지 북으로 이동 되며, 글작성 기본 내용에 해당 페이지 정보가 입력되어 있습니다. 여기서 사용자가 "글쓰기"버튼을 클릭해야지만 정상적으로 등록됩니다.
    조금 수동방식이죠. ^^
  2. API 연동 방식
    이 방식은 해당 SNS의 개발자 센타에서 API key를 가져와서 자동으로 작성되게 하는 기능이며, 사용방법은 전자보다 아주 편리하지만 설정방법은 아무래도 복잡합니다.
    예를들어 현재 보고 있는 게시글에서 댓글을 작성시 페이스북 또는 트위터에 자동로그인 동시에 자신의 SNS에 게시글이 등록 됩니다.
    또한 페이지북의 "좋아요"가 연동 되므로 페이지의 활용 가치를 높일수 있습니다.


본 강좌에서는 첫번째 방식으로 연동 해보도록 하겠습니다. (두번째 방식은 조금 복잡하지만 매뉴얼 보시면서 직접 해보시기 바랍니다. ^^)>
우선 매뉴얼 확인해보시기 바랍니다. (http://manual.anybuild.co.kr/add/basic1_05)


매뉴얼 보시면 딱히 추가로 설명 할 필요가 없어보이네요.
필요한 소스만 긁어서 [디자인관리 > 고급 디자인 관리 > 스킨 관리]에서 "메인스킨", "서브스킨" 모두 붙여 넣어 보시기 바랍니다.


완성화면 : http://uany06.anybuild.co.kr


이렇게 해서 홈페이지 제작에 주로 많이 사용되는 기능을 위주로 홍보형 홈페이지를 만들어 봤습니다.
사실 추가 적으로 퀵메뉴, 팝업창, 각종, 연혁 프로그램, 방명록, 출석체크등 세부적인 기능이 아주 많지만 사실 사용방법은 다 동일 하기 때문에 추가적인 설명은 생략하구요, 필요하면 운영지원센타를 통해 지원받으시는게 좋을것 같습니다.
또한 쇼핑몰 솔루션, 동영상 강좌 솔루션, 구인구직 솔루션은 모두 제품 홍보 솔루션과 동일하기 때문에 제작하시는데 문제 없으리라 판단됩니다. ^^

여기까지 정말 수고 많으셨습니다. ^^

top