애니빌드.LAB
매뉴얼
디자인팜 1.0 [고급사용자용] 맞춤형 컨텐츠 및 레이아웃을 만들때 CSS 소스 처리 방법
- Anybuild
- 2015-04-13 11:08:00
- hit4936
- http://lab.anybuild.co.kr/bbs/faq/4323
디자인팜에서 제공되는 모든 컨텐츠는 html 및 CSS 를 수정 할 수 있도록 개발 되어 있습니다.
본 강좌는 html 및 css를 전문적으로 다룰줄아는 웹퍼블려서를 위한 강좌 이므로, html 및 CSS에 대한 전문지식이 없는상태에서 소스 수정하게 되면 페이지 전체가 다 깨지거나 복구가 안될수 있습니다.
디자인팜에서 html 소스 수정 방법
이해를 돕기 위해 http://wdev.anybuild.com/bbs/faq/4325 에서 생성한 "회사소개" 페이지를 불러 옵니다.
)
가운데 이미지를 선택 후 우측 옵션 박스에서 [소스수정] 버튼을 클릭 합니다.
)
소스를 보시면 아시겠지만 일반 html 로 구성 되어 있는것을 알수 있습니다. 여기서 원하는데로 수정 할수 있습니다.
만약 소스 수정하기 불편하다면 하단에 "FTP파일경로"가 있으므로 EditPlus 와 같은 편집 프로그램을 통해 소스 수정 하면 됩니다.
모든 컨텐츠 및 레이아웃 위와 같은 방식으로 소스 수정 할 수 있습니다.
디자인팜에서 CSS 소스 추가 방법.
html 소스 수정은 직관적으로 매우 간단하다는것을 알수 있습니다.
하지만 CSS는 조금 주의 해야 할부분이 있습니다.
보통 일반 html파일에서 CSS소스를 추가 할때 보통 <load>태그를 활용해서 아래와 같이 <head>~</head>사이에 아래와 같이 소스를 추가 합니다.
<load> 매뉴얼 : http://manual.anybuild.co.kr/page/basic1_02
<head>
<link rel="stylesheet" type="text/css" href="/img_up/shop_pds/wdev/src_css/layout.css" />
</head>
<body>
<load target="/img_up/shop_pds/wdev/src_css/layout.css" />
안녕하세요~
</body>
하지만 디자인팜에서는 아래와 같이 html 위쪽에 <in-style>방식으로 추가해줘야 합니다.
<style>
.myfont{color:red}
</style>
<span class='myfont'>안녕하세요~</span>
왜 이렇게 코딩 하는지? 또 웹표준에 어긋나는건 아닌지? 자세하게 설명드리도록 하겠습니다.
디자인팜은 초보자에게는 단순하고 간편성을 지향하고, 고급사용자에게는 다양성과 생산성을 동시에 추구하고 있습니다.
예를들어 <load>방식으로 통해 <head>에 css 파일을 불러오도록 만들었다면, 해당 컨텐츠는 작동하는데 전혀 문제가 없습니다.
하지만 해당 컨텐츠를 Ctrl+C (복사)해서 같은페이지에 Ctrl+V(붙여넣기) 하게 되면, 컨텐츠마다 독립성이 있어야 하기때문에 CSS파일을 다른이름으로 복사하게 됩니다.
즉, 복사한 파일은 자동으로 [디자인관리 > 고급 디자인 관리 > CSS 파일관리 ]에 쌓이게 되는거죠.
그렇다면 모든 컨텐츠가 <load>방식으로 통해 <head>에 css 파일을 불러온다면 어떻게 될까요?
아래와 같이 CSS파일이 수백개될수도 있습니다.
)
사실 이런 상황까지 오개 되면 CSS 유지보수는 불가능하다고 봐야 할것 입니다.
이런 확장성 및 생산성을 보안하기위해 <in-style>방식으로 코딩하게 된다면 CSS 파일이 하나도 생기지 않으며, 해당 html 소스에서 CSS 소스도 같이 수정 할수 있기때문에 매우 직관적입니다.
하지만 <in-style> 방식은 페이지 레이아웃을 결정하는 소스는 <head>~</head>안에 들어가야지만 정상적으로 구동 되기 때문에 페이지가 깨져보일수도 있다라는점 입니다.
디자인팜에서 이런 문제점을 개선하고자 <in-style> 방식으로 추가된 CSS를 하나의 CSS파일을 자동 생성해서 <head>~</head>안에 추가 하도록 되어 있으므로 염려하지 않으셔도 됩니다.
예를 들어 아래와 같이 소스를 수정하였다면,
<style>
.myfont{color:red}
</style>
<span class='myfont'>안녕하세요~</span>
자동으로 12347845864221.css 임시 파일이 생성되면서 아래와 같이 <head>~</head>안에 CSS파일이 선언됩니다.
<head>
<link rel="stylesheet" type="text/css" href="/img_up/shop_pds/tmp/src_css_farm/12347845864221.css" />
</head>
<body>
<span class='myfont'>안녕하세요~</span>
</body>
즉 디자인팜에서는 <in-style> 방식으로 코딩하더라도 자동으로 웹표준에 맞춰서 <head>~</head>안에 CSS파일이 선언되므로 꼭 <in-style> 방식으로 코딩하세요 ^^
디자인팜에서 CSS 소스 추가시 주의 사항!
위에서 생성한 html 소스는 단순하게 "안녕하세요"라는 빨간색 글자를 출력하는 소스 입니다.
매우 중요한 부분이라 아래와 같이 직접 테스트 해보시기 바랍니다.
1. 디자인 팜에서 빈페이지를 만들어주세요.
)
2. 왼쪽 컨템츠 박스에서 "맞춤형 컨텐츠"를 추가해주세요.
)
3. 추가된 "맞춤형 컨텐츠"를 선택 하고 우측 상단 [소스수정]을 클릭하고 아래 소스를 붙여 넣어주세요.
)
)
4. 새로 고침 하면 정상적으로 컨텐츠가 출력 됩니다.
)
5. "안녕하세요~"를 선택하고 Ctrl+C (복사), 바로 Ctrl+V(붙여넣기) 를 합니다.
그럼 아래와 같이 컨텐츠가 복사 되었습니다.
)
6. 다시 첫번째 "안녕하세요~" 컨텐츠를 선택하고 아래와 같이 폰트색상을 blue로 수정 합니다.
)
이렇게 수정하고 새로 고침하면 글자가 파란색으로 바뀌지 않고 빨간색으로 출력되는 버그를 볼수 있습니다.
7. 이번에는 두번째 "안녕하세요~"를 선택하고 글자색을 green으로 변경합니다.
)
이번에는 엉뚱하게도 첫번째 "안녕하세요~"까지 색상이 바뀌어 버렸습니다.
문제는 CSS 오버라이딩 때문입니다.
디자인팜에서는 <in-style>방식으로 CSS 추가하더라도 별도 파일로 따로 저장되는 이때 가장 마지막에 추가한 CSS가 우선이 되기 때문입니다.
이런 문제를 해결하려면 모든 클래스명뒤쪽에 __RAND__ 붙이면 간단하게 해결 됩니다.
8. 첫번째 "안녕하세요~" 컨텐츠 소스를 아래와 같이 수정해주세요.
<style>
__RAND__'>안녕하세요~</span>
.myfont__RAND__ {color:red}
</style>
<span class='myfont
그리고 두번째 "안녕하세요~"는 삭제 합니다.
9. 소스 수정된 컨텐츠를 선택하고 Ctrl+C (복사), 바로 Ctrl+V(붙여넣기) 를 합니다.
그리고 복사된 컨텐츠를 선택하고 소스를 보면 아래와 같이 __RAND__가 임의의 숫자로 변경된것을 알수 있습니다.
)
생성된 두번째 컨텐츠를 다시 Ctrl+C (복사), 바로 Ctrl+V(붙여넣기) 를 해서 세번째 컨텐츠를 만듭니다.
)
즉, __RAND__ 사용시 자동으로 _000000_ 와 같이 변경되고 다시 복사하더라도 _00001_ 와 같이 중복되지 않는 고유의 숫자로 변경됩니다.
이렇게 __RAND__ 사용해서 코딩하게 되면 CSS 충돌을 피할수 있게 되고, 각 컨텐츠마다 독립적인 형태로 소스를 관리 할수 있게 됩니다.
위와 같이 3개의 컨텐츠를 만들고 글자색상을 빨강, 파랑, 녹색으로 변경해보았습니다.
)
예상 했던데로 문제 없이 정상적으로 색상이 변경 되었네요 ^^
간단한 문제를 너무 길게 설명하지 않았나 싶네요.
워낙 중요한 부분이라 나름 신경써서 설명 드렸습니다. ^^
이쯤 설명드리고 나면, 몇몇 퍼블리셔님들께서 "에잇~ 귀찮게 왜 이렇게 만들어? 기존 하던데로 하지~" 라고 생각하실수 있습니다.
필자는 이해를 돕기위해 "안녕하세요~"라고 초간단 html 을 예제로 보여드렸습니다.
만약 http://urfjob01.anybuild.co.kr/main 에서 출력되는 모든 컨텐츠를 필자가 제시한 방법대로 만들게 되면 아래와 같은 효과를 가질수 있습니다.
위에서 원본 사이트에서 원하는 컨테츠(메인출력게시글, 메인이미지 슬라이드, 각종 배너, 각종 컨텐츠 출력 프로그램등)를 선택 후 Ctrl+C(복사) 합니다.
A 홍보형 사이트에서 원하는 위치에 Ctrl+V(붙여넣기)
B 쇼핑몰에서 원하는 위치에 Ctrl+V(붙여넣기)
C 병원 구인구직 사이트에서 원하는 위치에 Ctrl+V(붙여넣기)
D 아르바이트 구인구직 사이트에서 원하는 위치에 Ctrl+V(붙여넣기)
이렇게 순식간에 많은 부분들이 해결되기 때문입니다.
시중에 나와있는 수많은 빌더들은 마치 독립형계정처럼 구동 되기 때문에, 다른계정에 있는 소스를 가져와 붙이려면 수작업으로 일일 붙여야 하는데 이때 페이지당 최소 30분이상 소요 됩니다. 그리고 다시 고객 요구 사항에 맞게 다시 커스터마이징을 해야하기 때문에 많은 시간을 소요 할수 밖에 없는 구조 입니다.
하지만 디자인팜은 복사, 붙여넣기는 한순간에 처리되고 커스터마이징은 해당 컨텐츠마다 옵션 설정이 가능하기때문에, 고객이 직접 수정할 수 도 있고, 아니면 html 을 전혀 모르는 담당자가 쉽게 수정 할 수 있습니다.
이럿듯 디자인팜은 재작업을 줄이고, 제작속도는 빠르게 하고, 고객이 쉽게 수정 할 수 있도록 하려면, 최초 컨텐츠를 제작할때 신경써서 제작하는것이 좋습니다.
수고하셨습니다.
열기 닫기