섹션 아이디 활용하기
식스샵 프로의 각 섹션은 섹션별 고윳값을 갖습니다. 섹션의 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의 중복을 피하기 위한 난수가 포함되어 있습니다.
에디터에서 속성을 설정하면 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 섹션 안내서로 돌아가기
식스샵 프로 가이드로 돌아가기