인프런 커뮤니티 질문&답변

감사합니다!! 그럼 혹시 버튼을 눌렀을때 카드가 두장이 넘어간다면 자바스크립트쪽에서 에러가  있는거죠?

헉 정준영님, 

빠른 답변을 드리지 못해 죄송합니다.

해당 내용을 확인해본 결과, 
인스타그램 포스팅 카드 만들기 - UI (4-1)  55분 40초 에 서 확인이 가능하십니다.

해결책은 기존의

                        <ul>
                            <li> <img src="images/mountain1.jpg"/> </li>
                            <li> <img src="images/mountain2.jpg"/> </li>
                            <li> <img src="images/mountain3.jpg"/> </li>
                            <li> <img src="images/mountain4.jpg"/> </li>
                        </ul>

에서

                        <ul>
                            <li> <img src="images/mountain1.jpg"></li><li>
                                <img src="images/mountain2.jpg"></li><li>
                                <img src="images/mountain3.jpg"></li><li>
                                <img src="images/mountain4.jpg"></li>
                        </ul>

와 같이 수정을 진행 해주셔야 합니다.

li태그 사이에 스페이스바로 인식되는 부분이 있어서 해당 오류가 발생했던 것으로 보입니다!

감사합니다.

어디가 문제일까요 ㅜㅜ

2번오류 Elem으로 바꿨는데도 정상적으로 작동되지 않네요 ㅜㅜ 

<첫 화면에 보여지는 사진>

<아래 사진은 오른쪽으로 넘겼을때의 화면입니다>

안녕하세요,

정준영님.

우선 1번에 대한 오류는 

제가 가지고 있는 기존 파일에 적용해보았을때, 어떤 에러인지 파악하지 못했습니다.

참고로 정상 작동하는 css 파일을 첨부해드리겠습니다.

* {
  padding: 0;
  margin: 0;
}

ul,
li {
  list-style: none;
}

.container {
  width: 100%;
  background-color: #ebebeb;
  padding: 40px;
}

article.card {
  width: 600px;
  background-color: #ffffff;
  margin: 20px auto;
  border: #c0c0c0 1px solid;
  border-radius: 3px;
  margin-bottom: 60px;
}

.transparent-button {
  background-color: transparent;
  border: 0px;
  cursor: pointer;
  outline: 0;
}

/* header 시작 */

article.card header {
  height: 40px;
  padding: 10px;
}

article.card header > div {
  display: inline-block;
  vertical-align: middle;
}

.profile {
  height: 100%;
  padding: 5px;
  box-sizing: border-box;
}

.profile > img {
  height: 100%;
  border-radius: 50px;
}

.username {
  font-size: 14px;
  font-weight: 900;
  margin-left: 5px;
}

.more {
  float: right;
  padding: 7px;
}

/* contents 시작 */

.card-buttons {
  padding: 0 15px;
  margin-top: 10px;
}

.card-buttons > div {
  display: inline-block;
  margin-right: 10px;
}

.card-buttons > div.bookmark {
  float: right;
}

/* 본문 */

.card-likes {
  font-weight: 900;
  padding: 5px 15px;
  font-size: 13px;
}

.card-content {
  padding: 5px 15px;
  font-size: 13px;
}

.card-content li > div > span {
  font-weight: 900;
}

.card-content li > div {
  padding: 2px;
}

.card-content li > div button {
  float: right;
}

.card-content li > div button > img {
  width: 12px;
  margin-right: 5px;
}

.card-time {
  font-size: 11px;
  padding: 0 15px;
  color: #999999;
  margin-bottom: 10px;
}

/* 캐러셀 */

.carousel {
  width: 100%;
  position: relative;
}

.carousel > div {
  overflow: hidden;
}

.carousel ul > li {
  display: inline-block;
}

.carousel ul {
  width: 100000px;
}

.carousel ul > li > img {
  width: 600px;
}

.slide {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 10px;
}

.slide.slide-right {
  right: 0;
}

.slide > button {
  opacity: 0.75;
}

.carousel footer {
  position: absolute;
  height: 20px;
  text-align: center;
  width: 100%;
  bottom: -30px;
}

.carousel footer div {
  width: 6px;
  height: 6px;
  background-color: #999999;
  display: inline-block;
  border-radius: 50%;
}

.carousel footer div.active {
  background-color: #0095f6;
}

/* footer */

footer.comment {
  height: 50px;
  position: relative;
  border-top: solid 1px #e6e6e6;
}

.comment input {
  width: 100%;
  height: 100%;
  border: 0;
  outline: 0;
  padding: 0 15px;
}

.comment > div {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
}

.comment > div button {
  color: #0095f6;
  opacity: 0.5;
  padding: 10px 5px;
}

2번에 대한 오류는 오타 때문입니다.

updateSlideButtonvisible(carouselElemm, currentIndex, liCount);

이 부분의 carouselElemm을 carouselElem로 고쳐주시면 됩니다.