Korean
English
English 
Korean 
Nevertheless, due to the nature of the product, there is a high risk of damage during delivery. Broken chocolate is not eligible for refunds, exchanges or returns, so please make a careful purchase decision.
*Chocolate may melt due to the high temperatures in Korea during the summer. Melted chocolate is not subject to refunds or exchanges, so please purchase carefully.
The product you receive may differ from the design in the photo.
Save on shipping costs by combining shipping with various products.
**설명:**
* **전체 구조:** `div` 컨테이너로 감싸고 `text-align: center`를 적용하여 모든 내용을 가운데 정렬합니다.
* **영역 분리:** 각 내용별로 `div`로 감싸 `margin-bottom`을 설정하여 간격을 줍니다.
* **텍스트 스타일:**
* `.text-ko`: 한글 텍스트에 적용되는 클래스입니다.
* `.text-en`: 영어 텍스트에 적용되는 클래스이며, 초기 상태에서 `display: none;`으로 숨겨져 있습니다.
* **이미지:** `img` 태그를 사용하여 이미지를 삽입하고, `display: block; margin: 20px auto;`를 적용하여 가운데 정렬하고 위아래 여백을 줍니다. `max-width: 80%;` 를 추가하여 이미지 크기가 너무 커지지 않도록 조절했습니다.
* **목록 스타일:** 공지사항 부분은 `text-align: left; margin-left: auto; margin-right: auto; width: 80%;` 적용하여 왼쪽 정렬 후 가운데로 모이도록 했습니다.
* **이미지 중복 방지:** 이미지 URL을 확인하여 중복된 이미지가 표시되지 않도록 했습니다. (코드에서는 첫 번째 이미지만 사용)
**사용 방법:**
위 HTML 코드를 워드프레스 에디터 (텍스트 모드) 에 붙여넣으면 됩니다. jQuery를 사용하여 언어 전환 기능을 구현하면 `.text-en` 클래스를 가진 요소를 보여주고 숨길 수 있습니다.
**jQuery 예제:**
javascript
jQuery(document).ready(function($) {
// 한국어 버튼 클릭 시
$(‘#korean-button’).click(function() {
$(‘.text-en’).hide();
$(‘.text-ko’).show();
});
// 영어 버튼 클릭 시
$(‘#english-button’).click(function() {
$(‘.text-ko’).hide();
$(‘.text-en’).show();
});
});
이 jQuery 코드를 워드프레스 테마의 `footer.php` 파일이나 별도의 JavaScript 파일에 추가하고, HTML 코드에 다음과 같은 언어 전환 버튼을 추가합니다.
**주의사항:**
* 실제 워드프레스 환경에서는 테마 CSS와 충돌이 발생할 수 있으므로, 필요에 따라 스타일을 조정해야 합니다.
* 이미지 경로는 실제 이미지 URL로 변경해야 합니다.
* 워드프레스에서 jQuery를 사용하려면 `wp_enqueue_script()` 함수를 사용하여 jQuery를 로드해야 합니다.
이 답변이 도움이 되었기를 바랍니다.
