섹션/블록 구분자 클래스 활용하기
모든 섹션과 블록의 최상위 HTML 태그에는 해당 섹션/블록을 구별할 수 있도록 구분자 클래스가 적용되어 있습니다.
자동으로 추가되는 구분자 클래스를 활용하면, 웹사이트 내의 특정 유형의 모든 섹션이나 블록에 일괄적으로 CSS와 자바스크립트를 적용할 수 있습니다.
•
섹션 구분자 클래스: section-type-섹션이름
◦
Essential 테마의 섹션은 section-type-섹션이름-T01 형태의 클래스가 적용되어있습니다.
•
블록 구분자 클래스: block-type-블록이름
예를 들어, 내 웹사이트에 있는 모든 이미지 블록에 특정 색상 테두리를 적용하려면, 다음과 같이 설정하면 됩니다.
<style>
.block-type-image {
border: 10px solid #E0EEFF;
}
</style>
HTML
복사
섹션 아이디 활용하기
식스샵 프로의 각 섹션은 섹션별 고윳값을 갖습니다. 섹션의 id(data-section-id)는 브라우저의 개발자 도구에서 확인할 수 있으며, 이를 활용하여 특정 섹션만을 타깃 하는 코드를 작성하실 수 있습니다.
<section data-section-id="66c6e95eae9a76a12acf8a3e">
<!-- 섹션 내용 -->
</section>
<script>
const section = document.querySelector('[data-section-id="66c6e95eae9a76a12acf8a3e"]');
if (section) {
section.style.backgroundColor = "lightblue";
}
</script>
HTML
복사
<style>
[data-section-id="66c6e95eae9a76a12acf8a3e"] {
background-color: pink;
padding: 300px;
border: 2px solid black;
animation: rotate 5s linear infinite;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
CSS
복사
기본 선택자 활용하기
섹션의 아이디를 확인했다면, 섹션 내 특정 요소를 선택하기 위해 다양한 선택자를 활용할 수 있습니다.
수정을 원하는 요소는 개발자 도구를 활용하여 찾을 수 있습니다.
식스샵 프로에서는 테마마다 섹션 구조가 다르니, 사용하고자 하는 테마에서 요소를 확인해 주세요.
예를 들어, 섹션 내 이미지의 형태를 수정하고자 하는 경우 아래와 같이 여러 선택자들을 자유롭게 사용할 수 있습니다.
img 태그로 접근하기img 태그에 스타일을 적용할 수 있습니다.
<style>
[data-section-id="6673b252cc0de5d87e3fbdcf"] img {
border-radius: 0;
}
</style>
HTML
복사
class로 접근하기개발자 도구에서 확인해 보면, img 태그가 가진 class를 확인할 수 있습니다. (Image_image__EHXfC Image_cover__0ScWD ) class에 스타일을 적용하는 예시입니다.
<style>
[data-section-id="6673b252cc0de5d87e3fbdcf"] .Image_image__EHXfC {
border-radius: 0;
}
</style>
HTML
복사
class 안에는 class의 중복을 피하기 위한 난수가 포함되어 있습니다.
식스샵 프로의 테마 관련 코드가 업데이트되면, 클래스 이름에 포함된 난수 부분이 변경될 수 있습니다.
따라서, 아래 예시와 같이 난수 부분을 제외하고 찾는 방법을 활용하시면 더 좋습니다.
<style>
[class^="Image_image"] {
border-radius: 0;
}
</style>
<style>
[data-section-id="6673b252cc0de5d87e3fbdcf"] [class^="Image_image"] {
border-radius: 0;
}
</style>
HTML
복사
class^= 는 ‘~으로 시작하는’것을 선택하는 문법으로써, 특정 클래스의 이름으로 시작하는 요소를 탐색할 때 사용합니다. 여기에서는 Image_image로 시작하는 모든 요소를 선택하기 위해 사용되었습니다.
HTML 섹션 안내서로 돌아가기
식스샵 프로 가이드로 돌아가기