itjustbong

안녕하세요, 정현님.
removeEventListener를 사용하기 위해서 addEventListener 를 통해 연결된 리스너 함수를 전달해주면 됩니다.
&nbsp;
예를 들어서 하기 코드와 같이 활용하시면 도움이 될 것 같습니다.
<pre class="language-javascript"><code>function helloGoogle(e){
 alert('안녕하세요! 구글입니다.');
}

logo.addEventListener('click',helloGoogle);

logo.removeEventListener('click', helloGoogle);</code></pre>
&nbsp;
감사합니다.

removeEventListener

헉 정준영님,&nbsp;
빠른 답변을 드리지 못해 죄송합니다.
&nbsp;
해당 내용을 확인해본 결과,&nbsp; <span style="color: #ffffff; font-family: 'Noto Sans KR', -apple-system, 'system-ui', 'system-ui', 'Apple SD Gothic Neo', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', Helvetica; font-size: 16px; white-space: nowrap; background-color: #171717;">인스타그램 포스팅 카드 만들기 - UI (4-1)&nbsp; 55분 40초 <span style="color: #000000; font-family: 'Noto Sans KR', -apple-system, 'system-ui', 'system-ui', 'Apple SD Gothic Neo', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', Helvetica; font-size: 16px; white-space: nowrap;">에 서 확인이 가능하십니다.
&nbsp;
<span style="color: #000000; font-family: 'Noto Sans KR', -apple-system, 'system-ui', 'system-ui', 'Apple SD Gothic Neo', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', Helvetica; font-size: 16px; white-space: nowrap;">해결책은 기존의
<pre class="language-html"><code> <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></code></pre>
에서
&nbsp;
<pre class="language-html"><code> <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></code></pre>
&nbsp;
와 같이 수정을 진행 해주셔야 합니다.
&nbsp;
li태그 사이에 스페이스바로 인식되는 부분이 있어서 해당 오류가 발생했던 것으로 보입니다!
&nbsp;
감사합니다.

이미지가 안가려지는 에러

안녕하세요,
&nbsp;
해당 문제는 17,18번 줄의&nbsp;
<pre class="language-html"><code><div class="circle-image"></div>

<img src="images/profile.png />

</code></pre>
때문으로 보입니다.
CSS파일에서는 circle-image의 자식 선택자로 img를 선택하여 CSS 스타일 속성을 넣어주셨는데,
정상적으로 작동하기 위해서는&nbsp;&nbsp;
<pre class="language-html"><code><div class="circle-image">
 <img src="images/profile.png />
</div>



</code></pre>
&nbsp;위와 같이 작성이 되어야 정상적으로 CSS가 작동할 수 있습니다.
&nbsp;
감사합니다.

html 파일 올립니다!

안녕하세요,
정준영님.
&nbsp;
우선 1번에 대한 오류는&nbsp;
제가 가지고 있는 기존 파일에 적용해보았을때, 어떤 에러인지 파악하지 못했습니다.
참고로 정상 작동하는 css 파일을 첨부해드리겠습니다.
<pre class="language-css"><code>* {
 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;
}
</code></pre>
&nbsp;
2번에 대한 오류는 오타 때문입니다.
updateSlideButtonvisible(carouselElemm, currentIndex, liCount);
이 부분의 carouselElemm을 carouselElem로 고쳐주시면 됩니다.
&nbsp;
&nbsp;
&nbsp;

안녕하세요,
정준영님.
&nbsp;
제가 기존에 가지고 있던 html파일과 css파일을 그래도 활용하면서, 올려주신 코드만 넣어서 테스트를 해보았는데, 캐로셀이 오른쪽으로 이동하며 잘 작동합니다.
html 파일을 추가로 확인을 해야 어디서 발생했는지 오류를 정확히 확인할 수 있을 것 같습니다.
감사합니다.

버튼 자바스크립트 오류

<span style="color: #495057; font-family: 'Noto Sans KR', -apple-system, 'system-ui', 'system-ui', 'Apple SD Gothic Neo', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', Helvetica; font-size: 14px; background-color: #ffffff;">안녕하세요, <span style="color: #495057; font-family: 'Noto Sans KR', -apple-system, 'system-ui', 'system-ui', 'Apple SD Gothic Neo', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', Helvetica; font-size: 14px; background-color: #ffffff;">dklzc 님.<span style="color: #495057; font-family: 'Noto Sans KR', -apple-system, 'system-ui', 'system-ui', 'Apple SD Gothic Neo', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', Helvetica; font-size: 14px; background-color: #ffffff;"> 
&nbsp;
<span style="color: #495057; font-family: 'Noto Sans KR', -apple-system, 'system-ui', 'system-ui', 'Apple SD Gothic Neo', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', Helvetica; font-size: 14px; background-color: #ffffff;">해당 css 파일 외에 html 파일도 함께 올려주시면 문제를 파악하는데 도움이 될 것 같습니다.
<span style="color: #495057; font-family: 'Noto Sans KR', -apple-system, 'system-ui', 'system-ui', 'Apple SD Gothic Neo', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', Helvetica; font-size: 14px; background-color: #ffffff;">현재 올려주신 css 파일만 보면 circle-image 클래스안의 img 태그에 border-radius 가 적용되어 있는데, 어디서 문제가 발생했는지 정확히 알 수 있을 것 같습니다.
&nbsp;
<span style="color: #495057; font-family: 'Noto Sans KR', -apple-system, 'system-ui', 'system-ui', 'Apple SD Gothic Neo', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', Helvetica; font-size: 14px; background-color: #ffffff;">감사합니다.

circle -image 적용이 되지 않습니다.

안녕하세요,
박준호님.
&nbsp;
구글 HTML이 변경된 것 같다고 문의 주신 내용에 대해 확인해봤는데, 크게 달라진 부분을 확인할 수 없었습니다.
&nbsp;
혹시 전에도 비슷한 질문을 해주신 분이 있었는데,
크롬 창의 첫 페이지와 구글 페이지를 혼동하셨었습니다.
&nbsp;
박주호님께서도 관련 부분 체크 부탁드립니다.
&nbsp;
감사합니다.

구글 사이트 요소 변경

안녕하세요,
yujh0208님.
&nbsp;
405에러의 경우 보통 "클라이언트가 요청한 서비스 요청방식을 웹서버가 지원하지 않아서 발생하는 오류"입니다.
&nbsp;
강의 내용에 따라서 수강 중이시라면, 라이브서버를 활용하여 HTML 파일을 여는 것이 아닌, 폴더에서 직접 크롬이나 기타 브라우져로 열어서 확인하시면 정상 작동 할 것 같습니다.
&nbsp;
감사합니다.
&nbsp;

HTTP ERROR 405라는 오류가 뜹니다

안녕하세요,
holnet님.
&nbsp;
사진상에 나온 것만 보고 정확한 파악은 어렵지만,
추측상 인기뉴스가 a태그로 감싸져 있는 것이 아닐까하는 생각입니다.
&nbsp;
같은 형태의 "관련뉴스"는 따로 a태그 처럼 보이지 않기에,
"인기뉴스"가 어떤 태그에 감싸져 있는지 확인해주시면 좋겠습니다.
&nbsp;
혹여 해결책을 찾지 못하셨다면, 코드와 함께 다시 질문을 남겨주시면 좋겠습니다!
&nbsp;
감사합니다.

#을 하지 않은 부분(링크를 하지 않은 부분도)링크처럼 표시됩니다.

안녕하세요, 이근표님!
올려주신 코드를 테스트 해본 결과 다음과 같은 결과가 나옵니다.
<img style="display: block; margin-left: auto; margin-right: auto;" src="https://cdn.inflearn.com/public/comments/81087bf4-64ad-4511-ab59-1975c247ec41/스크린샷 2021-10-30 오후 3.08.45.png" width="400" />
이근표님께서 올려주신 화면과는 달리 정상적으로 화면이 출력되는 것으로 보입니다. 아마도 브라우져의 기본 스타일 셋의 차이가 아닐까 조심스레 추측해봅니다.
이와 같은 설명이 잘 된 블로그 링크를 소개해드리겠습니다😄 <a href="https://blog.tommyzip.co.kr/code/css-initialization-guide/">블로그 링크</a>
또한 링크를 참조하시어 문제를 해결하셔도 되며,
<pre class="brush: xml; auto-links: false; title: ; quick-code: false; notranslate" style="box-sizing: border-box; margin-top: 20px; margin-bottom: 20px; padding: 20px; border: 0px; font-variant-numeric: inherit; font-variant-east-asian: inherit; font-stretch: inherit; font-size: 16px; line-height: 1.6; font-family: inherit; vertical-align: baseline; background: #151516; color: #ffffff; max-width: 100%; overflow: auto;" title=""><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
</pre>
위 코드를 head 부분에 작성해주셔도 됩니다.
&nbsp;
문제에대한 해결이 되었으면 좋겠습니다.
감사합니다.

itjustbong

Posts