템플릿에서 제공하는 CSS는 어떤 역할을 하는가?
템플릿에서 사용된 CSS는 엘리멘터 위젯에서 제공하는 ‘기본값’을 오버라이딩합니다. 위젯의 기본 스타일은 실제 서비스에 사용하기에 좋은 수준이 아니므로 이용자들은 필연적으로 스타일을 변경하게 됩니다. 템플릿에서 제공하는 HTML Widget에는 이러한 기본값을 실제 서비스에 사용해도 좋을 만큼 재정의 한 스타일이 포함되어 있습니다.
템플릿에서 제공하는 CSS 코드를 확인하는 방법
CSS가 포함된 HTML Widget은 키보드의 Control + i / Command + i 키를 통해 열리는 레이어 패널에서 🚀 Settings-코드네임 형식으로 제공됩니다.
엘리멘터 프로 버전이 필요한 템플릿은 보통 HTML Widget의 Advanced 탭 하단에 위치한 Custom CSS 필드에 명시되어 있습니다(반드시 그렇지는 않습니다).
엘리멘터 기본 버전에서도 사용 가능한 템플릿은 Custom CSS 필드를 사용할 수 없으므로 HTML Widget의 Content 탭에 <style> 태그에 명시되어 있습니다.
* 기본적으로 <style> 태그에 명시된 CSS는 페이지 내부에 Inline 형식으로 삽입됩니다. 엘리멘터 프로 사용자는 Content 탭의 <style> 태그에 명시된 부분을 잘라내어 HTML Widget의 Custom CSS 필드로 옮기면 외부 리소스로 작동시킬 수 있습니다.
템플릿에서 제공하는 CSS 코드를 수정해야 하는 경우
일반적으로는 원하는 페이지에 위젯과 함께 복사만 해두고 더이상 신경쓰지 않아도 좋습니다. 실제 스타일 수정은 해당 위젯의 컨트롤 패널의 필드 값을 조정하면 됩니다. 사용자가 템플릿에서 제공하는 HTML Widget을 수정해야 할 때는 오직 다음과 같은 경우입니다.
- 위젯의 컨트롤 패널에는 없는 유니크한 DOM 요소(템플릿에서 별도로 추가한 기능 따위)를 수정해야 할 때.
- 동일한 위젯을 여러 페이지에 걸쳐 자주 사용하는 경우, 스타일을 공유하여 장기적이고 체계적인 관리를 원할 때. 이 경우는 엘리멘터 위젯과 템플릿을 효과적으로 관리하는 법에서 자세히 다루었습니다.
템플릿에서 제공하는 CSS를 직접 수정시 주의할 점
템플릿에서 HTML Widget을 통해 제공하는 스타일을 직접 수정하면 안좋은 가장 큰 이유는 명시도입니다. 템플릿에서 재정의 한 CSS는 각 위젯의 최초 기본값과 컨트롤 패널을 수정해서 발생하는 스타일의 중간에 위치하는 명시도를 가지기 위해 매우 정밀하게 명시하고 있습니다. 따라서 제공된 CSS 코드를 그대로 수정하는 것은 컨트롤 패널의 값을 덮어씌워 사용성을 떨어뜨릴 수 있으니 주의해야 합니다.
템플릿의 CSS를 수정하는 가장 좋은 방법
아래 영상은 Jetcraft의 템플릿에서 제공하는 CSS를 가장 효과적으로 관리하는 방법을 보여줍니다. 절차가 다소 복잡해 보일 수 있으니 엘리멘터 사용 경험이 많지 않다면 템플릿에서 제공하는 코드 자체를 수정하고, 나중에 천천히 체계적으로 변화시키는 것도 좋습니다.
1. 템플릿을 원하는 페이지로 복사
다운로드 받은 템플릿에서 핵심 레이어를 원하는 페이지로 복사합니다. 핵심 레이어에 관한 자세한 설명은 템플릿 기본 사용안내를 참고하세요.
2. 위젯의 설정 레이어를 전역 위젯으로 등록
만일 엘리멘터 프로 버전을 사용중이라면 CSS 코드가 포함된 HTML Widget을 마우스 우클릭 후 Save as global을 통해 전역 위젯으로 등록합니다. 프로 버전 사용자가 아니라면 전역 위젯을 만들 수 없으므로 이 단계를 건너 뜁니다.
3. 템플릿의 지역변수 복사
Jetcraft에서 제공하는 CSS는 보통 최상단에 수정이 잦은 항목에 대한 지역 변수를 설정해 둡니다. 해당 지역 변수를 복사해 실제 작동하는 위젯의 Custom CSS 필드에 붙여 넣습니다. 이 부분이 잘 이해가 가지 않는다면 동영상을 참고하세요.
4. 위젯 클래스 이름을 ‘selector’로 변경
Custom CSS로 옮긴 코드의 위젯 클래스 이름을 selector로 변경하면 에디터와 라이브 서비스 사이에서 발생하는 여러 명시도 문제를 해결 할 수 있습니다. Selector 접두사에 관한 더 자세한 내용은 엘리멘터 위젯과 템플릿을 효과적으로 관리하는 법에서 자세히 다루고 있습니다.
지역 변수 이외의 다른 코드 부분을 복사해서 마찬가지로 클래스 이름을 selector로 변경하고 수정해도 문제 없습니다.