# 2. [모바일] 메인 대배너

## 🔵 파일명 : mainSwiper.html

# 👉🏻 코드

```
<div class="item" _onclick_="window.open('#none','_self')" style="background:url('/web/2024_main/mo.jpg') 100% 100% no-repeat; background-size:cover; cursor:pointer;">
    <div class="item-text1">월<br><br>백</div><br>
    <div class="item-text2">月<br>白</div>
    <div class="item-text3">
        <a href="https://m.ekwangjuyo.com/product/list_thumb.html?cate_no=1119" class="rounded-button">더 알아보기</a>
    </div>
</div>
<div class="item" _onclick_="window.open('#none','_self')" style="background:url('/web/2024_main/mo.jpg') 100% 100% no-repeat; background-size:cover; cursor:pointer;">
    <div class="item-text1">월백</div><br>
    <div class="item-text2">月白</div>
    <div class="item-text3">
        <a href="https://m.ekwangjuyo.com/product/list_thumb.html?cate_no=1119" class="rounded-button">더 알아보기</a>
    </div>
</div> 
 
```

> **HTML 설명**
> - line 1~7 ) 첫번째 슬라이드 태그
> - line 8~14 ) 두번째째 슬라이드 태그
> - line 1, 8) OnClick 이벤트 **클릭시 링크로 사이트 연결, 이미지 삽입 코드  **
> - line 2, 9) 첫번째 대배너 **메인 텍스트 ****<br>을 추가하면 세로정렬, <br>을 빼면 가로정렬**
> - line 3, 10) 두번째 대배너 **서브 텍스트 ****<br>을 추가하면 세로정렬, <br>을 빼면 가로정렬**
> - line 5, 12) **더 알아보기 버튼의 **링크 설정
> 

# 👉🏻 이미지 수정

> 📌 FTP로 이미지 업로드를 하신후 **이미지링크**을 복사 하신후** line 1**번 코드수정
> 📌 `style="background:url('/web/2024_main/pc.jpg')`
> 📌 이부분에 url 뒷부분을 **이미지링크로 수정**

# 👉🏻 텍스트 수정

> 📌 메인 텍스트 ** line 2,9**번 서브 텍스트 **line 3, 10**번 코드수정
> 📌 `<div class="item-text1">광주요가 제안하는 한국의 멋</div><br>`
> 📌 이부분에 원하는 텍스트로 변경
> 

# 👉🏻 링크 수정

> 📌 이미지 전체 부분 링크 수정 **line 1,8 번**에 **Onclick 뒤에 작은따옴표** 안에 링크 수정
> `OnClick="location.href='``[https://www.ekwangjuyo.com/article/%ED~~%98/13/23798/](https://www.ekwangjuyo.com/article/%25ED%2594%2584%25EB%25A1%259C%25EB%25AA%25A8%25EC%2585%2598/13/23798/)``'"`
>  **📌 더 알아보기 링크 수정 ****line 5, 12번**에 **href 뒤에 큰따옴표** 안에 링크 수정
> `<a href="``[https://www.ekwangjuyo.com/article/%ED~~~%85%98/13/23798/](https://www.ekwangjuyo.com/article/%25ED%2594%2584%25EB%25A1%259C%25EB%25AA%25A8%25EC%2585%2598/13/23798/)``"`
> 

# 👉🏻 글자색 변경

> 📌 line 2,3,4) 아래 코드처럼 div class 부분을 1,2,3 (white)→ 4,5,6 (gray) 으로 변경해주시면 됩니다
> 📌 line 5) 버튼도 class 부분을 "rounded-button" (white) → "rounded-button2" (gray)로 변경해주시면 됩니다
> 

```
<div class="item" _onclick_="window.open('#none','_self')" style="background:url('/web/2024_main/mo.jpg') 100% 100% no-repeat; background-size:cover; cursor:pointer;">
    <div class="item-text4">월<br><br>백</div><br>
    <div class="item-text5">月<br>白</div>
    <div class="item-text6">
        <a href="https://m.ekwangjuyo.com/product/list_thumb.html?cate_no=1119" class="rounded-button2">더 알아보기</a>
    </div>
</div>

```

For the site tree, see the [root Markdown](https://slashpage.com/ekwangjuyo.md).
