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/'"
📌 더 알아보기 링크 수정 line 5, 12번에 href 뒤에 큰따옴표 안에 링크 수정
<a href="https://www.ekwangjuyo.com/article/%ED~~~%85%98/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>

Made with SlashPage