1. [PC] 메인 대배너

🔵 파일명 : mainSwiper.html

👉🏻 코드

<div class="item" OnClick="location.href ='https://www.ekwangjuyo.com/article/%ED%94%84%EB%A1%9C%EB%AA%A8%EC%85%98/13/23798/'" style="background:url('/web/2024_main/pc.jpg') 50% 50% 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://www.ekwangjuyo.com/article/%ED%94%84%EB%A1%9C%EB%AA%A8%EC%85%98/13/23798/" class="rounded-button">더 알아보기</a>
    </div>
</div>

HTML 설명
- line 1) OnClick 이벤트 클릭시 링크로 사이트 연결, 이미지 삽입 코드
- line 2) 첫번째 대배너 메인 텍스트
- line 3) 두번째 대배너 서브 텍스트
- line 4) 세번째 더보기 레이아웃
- line 5) 더 알아보기 버튼의 링크 설정
- line 6) 레이아웃 닫기
- line 7) 레이아웃 닫기

👉🏻 이미지 수정

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

👉🏻 텍스트 수정

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

👉🏻 링크 수정

📌 이미지 전체 부분 링크 수정 line 1번에 Onclick 뒤에 작은따옴표 안에 링크 수정
OnClick="location.href='https://www.ekwangjuyo.com/article/%ED~~%98/13/23798/'"
📌 더 알아보기 링크 수정 line 5번에 href 뒤에 큰따옴표 안에 링크 수정
<a href="https://www.ekwangjuyo.com/article/%ED~~~%85%98/13/23798/"

👉🏻 글자색 변경

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

<div class="item" OnClick="location.href ='https://www.ekwangjuyo.com/article/%ED%94%84%EB%A1%9C%EB%AA%A8%EC%85%98/13/23798/'" style="background:url('/web/2024_main/pc.jpg') 50% 50% no-repeat; background-size:cover; cursor:pointer;">
    <div class="item-text4">광주요가 제안하는 한국의 멋</div><br>
    <div class="item-text5">신혼부부를 위한 필수 그릇</div>
    <div class="item-text6">
        <a href="https://www.ekwangjuyo.com/article/%ED%94%84%EB%A1%9C%EB%AA%A8%EC%85%98/13/23798/" class="rounded-button">더 알아보기</a>
    </div>
</div>

Made with SlashPage