실전퍼블리싱 with jQuery(어코디언 콘텐츠 슬라이드)

어코디언 콘텐츠 슬라이드

---

주요 CSS 속성: flex, position, flost, :hover, :after, content:url(), transform: rotate()
주요 jQuery 속성: addClass, removeClass, stop, data-image, slideUp, slideDoen

예제보기

HTML

  <section>
    <article>
      <div class="heading">
        <span>하드코딩(Hard Coding) 실력이 진짜 퍼블리싱 실력입니다.</span>
        <h1><em>카톡</em> 간편 회원가입, <b>코딩웍스</b>의 진짜 퍼블리싱 강의를 만나세요.</h1>
      </div>
      <div class="content">
        <div class="accordion">
          <div class="title active" data-img="./images/app-capture-01.png">
            하드코딩(Hard Coding) 실력이 진짜 퍼블리싱 실력
          </div>
          <div class="desc active">
            제이쿼리 플러그인 사용해서 역동적이고 화려하게 꾸미는 
            퍼블리싱은 진짜 퍼블리싱이 아닙니다.
            <br><br>
            진짜 퍼블리싱 실력은 HTML로 레이아웃 설계를 꼼꼼히 잘하고, 
            CSS로 배치와 상세 디자인하고, 직접 작성한 제이쿼리(JQUERY)로 
            상호작용까지 만들 수 있는 것이 진짜 퍼블리싱 실력입니다.
          </div>
          <div class="title" data-img="./images/app-capture-02.png">
            당장의 화려함 보다 탄탄한 이론이 필수
          </div>
          <div class="desc">
            당장의 화려함에 제이쿼리 플러그인 사용에 의존하고 기본기 학습을 충실히 하지 
            않으면 웹 퍼블리셔로 취업하기 쉽지 않습니다. 설령 취업해서 실무에서 일하게 
            되더라도 퍼블리셔로서 어려운 하루 하루가 될 가능성이 높습니다.
            <br><br>
            코드 한줄 한줄 직접 코딩하는 곧, 하드 코딩할 수 있는게 
            진짜 실력이고 진짜 퍼블리싱 실력입니다.
          </div>
          <div class="title" data-img="./images/app-capture-03.png">
            코딩웍스의 강의의 코딩은 꼼꼼하고 정확합니다.
          </div>
          <div class="desc">
            수강생을 이해시킬 수 없는 코드는 사용하지 않습니다. 
            수강생에게 원리를 이해시킬 수 있는 강의가 좋은 강의라 생각하고, 
            코딩웍스 강의는 그렇게 제작되었습니다.
            <br><br>
            코딩을 처음 시작하는 분들을 위해 쉽고 친절하게 강의 된 
            핵심이론을 통해서 퍼블리싱의 자신감을 가지시기 바랍니다.
          </div>
          <div class="title" data-img="./images/app-capture-04.png">
            퍼블리싱 학습방법 이렇게 하세요.
          </div>
          <div class="desc">
            제가 생각하는 '퍼블리싱 실력 키우기' 방법은...
            <br><br>
            실전 퍼블리싱 제작할 때 처음에 잘 따라오셔서 만드셨으면 
            두번째는 보면서 따라하면서 만드시고 세번째는 안보고 스스로 
            하시다가 정말 생각 안날 때 영상 참고하셔서 제작하세요. 
            그래야만 진짜 자신의 실력으로 남습니다.
          </div>
        </div>
        <div class="image">
          <img src="./images/app-capture-01.png">
        </div>
      </div>
    </article>
  </section>

CSS

/* Google Web Fonts CDN */
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:300,400,500,700,900&display=swap');

/* Fontawesome 4.7 */
@import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');

body {
  font-family: 'Noto Sans KR', sans-serif;
  margin: 0;
  color: #222;
  font-weight: 300;
}
a {
  text-decoration: none;
  color: #222;
}
h1,h2,h3,h4,h5,h6 {
  font-weight: normal;
}

section {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
article {
  width: 980px;
  height: 500px;
}
.heading {
  text-align: center;
}
.heading span {
  color: crimson;
  font-size: 24px;
}
.heading h1 {
  font-size: 36px;
  margin-top: 10px;
}
.heading h1 em {
  font-style: normal;
  position: relative;
}
.heading h1 em::after {
  position: absolute;
  content: url('../images/logo-kakao.png');
  right: -30px;
  top: -25px;
}
.content > div {
  width: 50%;
  float: left;
  height: 400px;
  box-sizing: border-box;
}
.accordion .title {
  border: 1px solid #ddd;
  padding: 5px;
  border-radius: 3px;
  cursor: pointer;
  position: relative;
  padding-left: 15px;
  transition: 0.3s;
  margin-bottom: 10px;
  font-size: 19px;
}
.accordion .title::after {
  content: '\f105';
  font-family: Fontawesome;
  float: right;
  margin-right: 5px;
  margin-top: 3px;
  transition: 0.3s;
}
.accordion .title.active::after {
  transform: rotate(90deg);
  color: yellow;
}
.accordion .title:hover,
.accordion .title.active {
  background-color: #203049;
  color: #fff;
}
.accordion .desc{
  padding: 15px;
  display: none;
  font-size: 18px;
}
.accordion .desc.active{
  display: block;
}

JS

$('.title').click(function () {
  $(this).addClass('active')
  $(this).siblings('.title').removeClass('active')
  $(this).siblings('.desc').stop().slideUp()
  $(this).next().stop().slideDown()

  let dataImage = $(this).attr('data-img')
  $('.image img').attr('src', dataImage)
})