Taeho

안녕하세요. 락곤님문의하신 내용 확인해본 결과 validation.js 파일에서 오타가 있는것으로 확인됩니다.<pre><code>function showM(inputElement, message){
 var messageEle = inputElement.parentNode.querySelector('span');
 messageEle.style.display ='lnline';
 messageEle.innerText =message;

 inputElement.focus();
}</code></pre>showM이라는 함수의 3번째줄 <code> messageEle.style.display ='lnline'; </code>부분에서 <code>lnline</code>이 아니라 <code>inline</code>으로 변경해보시면 되실겁니다!(<code>l -> i</code>)변경해도 안된다면 다시 문의주시면 감사하겠습니다. 오늘도 즐거운 공부시간 되시길 바라겠습니다. :)

회원가입폼 검증 -2 에서 문제가생겼습니다

안녕하세요. 9279482님 답변이 너무 늦어진 점 죄송의 말씀 드리고 시작하도록 하겠습니다.
1번과 2번의 경우 전부 absolute가 문제라고 말씀해주셨는데 아주 날카로운 지적이셨습니다.
페이지의 css를 확인해보면 상위 div인 carousel에 absolute로 slide와 footer가 들어가 있는것을 확인하실 수 있습니다.
<img src="https://cdn.inflearn.com/public/comments/f8ab7e47-b7f4-4a84-aebf-856f5c4cb9f5/html.png" />
이 때 slide와 footer를 포함하고 있는 carousel을 흔히 Parent Element(부모 요소)라고 하고 안에 표함된 slide와 footer를 Child Element(자식 요소)이라고 합니다.&nbsp;
부모요소 안에서 자식 요소의 위치를 고정하고 싶은 경우 일반적으로 부모 요소의 position을 relative로 설정하고 자식 요소의 position을 absolute로 설정해줍니다.
9279482님의 코드를 확인해본 결과 부모 요소인 carousel의 position 속성이 들어가 있지 않았습니다.
<img src="https://cdn.inflearn.com/public/comments/479498d7-ac1c-4a7a-bde9-2d83a2886bef/원인1.png" />
함께 첨부하신 CSS파일을 확인해보니 carousel의 css를 지정해주실 때 width: 100% 뒤에 ';'(세미콜론)이 빠진 것을 확인했습니다.
<img src="https://cdn.inflearn.com/public/comments/961c09e9-8d14-4b03-a027-32d670b01111/원인.png" />
이 부분을 다음과 같이 변경하시면 원하시는대로 동작할 겁니다.
<pre class="language-html"><code>width: 100%;
position: relative;</code></pre>
확인해보시고 안되면 다시 글 남겨주시면 감사하겠습니다.
다시 한 번 너무 늦게 답변 달아드려 죄송의 말씀드립니다.
즐거운 공부 되시기 바랍니다 :)

card.html 버튼 위치

안녕하세요.
게시해주신 코드내용을 기반으로 확인해보니 addEventTocarousel 함수의 //slid button event의 반복문(for문)안에서 오타를 확인했습니다.
<pre class="language-html"><code>function addEventTocarousel(carouselElement){
	var ulElem = carouselElement.querySelector('ul');
	var liElems = ulElem.querySelectorAll('li');

	//width 조절
	var liwidth = liElems[0].clientWidth;
	var adjustedwidth = liElems.length * liwidth;

	ulElem.style.width = adjustedwidth + 'px';

	//slide button event
	var slideButtons = carouselElement.querySelectorAll('.slide');
	for(var i=0; i<slideButtons.length;i++){
		slideButtons[i].addEventListener('click',createListenerslide(carouselElement){

		})
	}

}</code></pre>
아래와 같이 slid button event 로직의 for문 안에 있는 부분을 수정해주시면 될 것 같습니다.
<pre class="language-html"><code>function addEventTocarousel(carouselElement){
	var ulElem = carouselElement.querySelector('ul');
	var liElems = ulElem.querySelectorAll('li');

	//width 조절
	var liwidth = liElems[0].clientWidth;
	var adjustedwidth = liElems.length * liwidth;

	ulElem.style.width = adjustedwidth + 'px';

	//slide button event
	var slideButtons = carouselElement.querySelectorAll('.slide');
	for(var i=0; i<slideButtons.length; i++){
		slideButtons[i].addEventListener('click',createListenerslide(carouselElement));
	}

}</code></pre>
&nbsp;
위와 같이 수정해보시고 안되시면 다시 글 올려주시면 감사하겠습니다 :)
오늘도 즐거운 하루 되시길 바랍니다 .

인스타그램  코드 작성 후 동작을 해보았는데 버튼을 눌러도 넘어가질않네요

안녕하세요.&nbsp;
footer부분에 특별한 내용이 없는데 화면에 점이 나오는 이유는 CSS 속성을 부여했기 때문입니다.&nbsp;
[실습으로 검증하기] 인스타그램 포스팅 카드 만들기 - UI(4-1) 강의의 57분 50초를 확인해보시면 footer에 CSS작업을 해주는 부분이 나옵니다.
div 태그안에 아무런 내용 없이 화면에 가로 100px, 세로 100px인 갈색 정사각형을 출력해보겠습니다.
[html 파일]
<img src="https://cdn.inflearn.com/public/comments/712ced7f-0402-4c25-8996-28fcf8ef7995/answer1.png" />
<pre class="language-html"><code><!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="UTF-8" />
 <title>Document</title>
 <link rel="stylesheet" type="text/css" href="styles/test.css" />
 </head>
 <body>
 <div class="hello">
 <div></div>
 <div></div>
 <div></div>
 </div>
 </body>
</html>
</code></pre>
[css 파일]
<img src="https://cdn.inflearn.com/public/comments/fe47febf-05c3-4b3d-865c-3aaa2ba8f578/answer1_css.png" />
<pre class="language-html"><code>.hello {
 display: flex;
 justify-content: center;
}

.hello div {
 width: 100px;
 height: 100px;
 background-color: brown;
 border: 1px solid brown;
 margin: 10%;
}</code></pre>
위의 예제에서는 실습과 같이 hello클래스라는 div태그를 선언해주고 그 밑에 아무것도 선언하지 않은 div 태그를 3개 선언하였습니다. 이렇게 해주면 다음과 같이 화면이 출력되게 됩니다.
<img src="https://cdn.inflearn.com/public/comments/41844366-eff1-4764-84cf-04290c676705/answer1.png" />
예제에서 알 수 있듯이&nbsp;div태그 안에 아무런 내용이 없는데도 화면에 footer가 표시되는 이유는 CSS 때문이라고 생각하시면 될것 같습니다.
답변에 도움이 되셨길 바랍니다 :)
오늘도 즐거운 하루 되세요!

carousel의 footer부분에

안녕하세요. qwop_01님 답변이 늦어서 죄송의 말씀드리고 시작하도록 하겠습니다.
&nbsp;
말씀해주셨던 margin은 cell element에 적용되지만 그 크기를 제한하는 것은 부모 요소 이번 예제에서는 row에 의해 적용되기때문입니다.
아래 사진과 같이 row에 마진을 적용해보도록 하겠습니다.
<img src="https://cdn.inflearn.com/public/comments/bf89e330-9b14-4e88-9759-9d0ddf4767ea/answer1_css.png" alt="" width="253" height="364" />
row의 너비(width)값을 600으로 제한하고 cell element의 margin값을 확인하게 되면 600의 1%인 6이 적용된것을 확인할 수 있습니다.
<img src="https://cdn.inflearn.com/public/comments/9fe463f9-6139-4834-8a24-7121b5b7adec/answer1.png" alt="" width="1903" height="545" />
그렇다면 row의 너비값을 700으로 제한하게 되면 어떻게 될까요?
<img src="https://cdn.inflearn.com/public/comments/7eaddb5b-2f37-4821-bf61-588033cb5d88/answer2_css.png" />
아래와 같이 cell element의 margin값이 7로 변경된것을 확인할 수 있습니다.
<img src="https://cdn.inflearn.com/public/comments/6f01fcc5-1c0a-453b-b01e-ca4b3365c8bf/answer2.png" />
즉, margin이 적용되는 것은 cell element이지만 그 크기를 제한하는 것은 부모 요소라는 것을 확인할 수 있습니다.
대부분의 css 요소들은 margin과 같이 부모의 요소에 의해 제한되어집니다.&nbsp;
예를 들어 width의 경우 부모 요소에서 크기를 300으로 제한했는데 자식 요소의 크기가 1000라면 원하는 대로 화면에 출력될까요..?
<img src="https://cdn.inflearn.com/public/comments/0858ece8-7418-4c8e-a499-069025d5d961/example1_css.png" />
다음과 같이 부모 요소를 뚫고 화면에 출력되게 됩니다.
<img src="https://cdn.inflearn.com/public/comments/94b7d4fb-edb9-4d57-aee7-745dafa329c6/example1.png" />
이게 정상적이라고 생각하실 수도 있지만 이렇게 되면 부모 요소를 선언하는 이유가 없게 되겠죠.
질문해주셨던 내용에 답변이 되길 바라겠습니다. :)
오늘도 좋은하루 되세요!

Taeho

Bài viết