33,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결프로그래밍 시작하기 : 웹 입문 (Inflearn Original)
구글 사이트 요소 변경
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 아마도 구글 사이트 html이 바뀐 것 같습니다.
- 미해결프로그래밍 시작하기 : 웹 입문 (Inflearn Original)
HTTP ERROR 405라는 오류가 뜹니다
강의와 똑같이 실습했는데, 마지막에 form태그의 method 속성을 post로 바꾸니, 크롬에서 오류가 뜹니다.. 해결할 수 있는 방법이 있나요?
- 미해결프로그래밍 시작하기 : 웹 입문 (Inflearn Original)
#을 하지 않은 부분(링크를 하지 않은 부분도)링크처럼 표시됩니다.
마지막 관련뉴스와 인기뉴스 예시에서 #을 하지 않은 부분(링크를 하지 않은 부분도)링크 요소처럼 표시됩니다. 수정할 수 있는 방법이 있을까요?
- 미해결프로그래밍 시작하기 : 웹 입문 (Inflearn Original)
selet에서는 required가 안되는데 어떻게 하면되나요?
select에서는 required가 안되는데 어떻게 하면 되나요? input에는 required가 되서 submit이 안되는데 select로 만든 "월" 만 정보 입력을 안해도 submit이 됩니다.
- 미해결프로그래밍 시작하기 : 웹 입문 (Inflearn Original)
질문 있습니다
overflow: hidden이 적용 안되는 현상과 footer가 영역 바깥으로 나가는 현상이 생겨 질문드립니다. 똑같이 한 것 같은데 어디서 잘못 된 것인가요? <html> <head> <meta charset="utf-8"> <title>인스타그램</title> <link rel="stylesheet" href="styles/card.css"> </head> <body> <section class="container"> <article class="card"> <header> <div class="circle-image"> <img src="images/profile.png"> </div> <div class="card-username"> <span>inflearn</span> </div> <div class="option-more"> <button class = "transparent-button"><img src="images/icons/mark.png"></button> </div> </header> <main> <div class="carousel" data="0"> <!-- 캐러셀 들어갈 영역 --> <div> <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> <div class="slide slide-left"> <button type="button" class="transparent-button" name="button"> <img src="images/icons/arrow-left.png"> </button> </div> <div class="slide slide-right"> <button type="button" class="transparent-button" name="button"> <img src="images/icons/arrow-right.png"> </button> </div> </div> <footer> <div class="active"> </div> <div> </div> <div> </div> <div> </div> </footer> </div> <div class="card-container"> <div class="card-buttons"> <div> <button class="transparent-button"><img src="images/icons/heart.png"></button> </div> <div> <button class="transparent-button"><img src="images/icons/chat.png"></button> </div> <div> <button class="transparent-button"><img src="images/icons/paper-plane.png"></button> </div> <div class="last-card-button"> <button class="transparent-button"><img src="images/icons/bookmark.png"></button> </div> </div> <div class="card-likes"> 좋아요 99개 </div> <div class="card-content"> <ul> <li> <div> <span>inflearn.user</span> 본문내용 </div> </li> <li class="comment"> <div> <span>inflearn.user</span> 댓글 1 <button class="transparent-button"><img src="images/icons/heart.png"></button> </div> </li> <li class="comment"> <div> <span>inflearn.user</span> 댓글 2 <button class="transparent-button"><img src="images/icons/heart.png"></button> </div> </li> </ul> </div> <div class="card-time"> 7일전 </div> </div> </main> <footer class="card-comment"> <input type="text" placeholder="댓글 달기..." name="comment"> <div> <button class="transparent-button">게시</button> </div> </footer> </article> </section> </body> </html> *{ padding: 0; margin: 0; } ul, li{ list-style: none; } button.transparent-button{ background-color: transparent; border:0; outline:0; cursor: pointer; } .container { width: 100%; background-color: #f0f0f0; padding: 20px 0; } article.card{ width: 600px; margin: 20px auto; margin-bottom: 60px; background: #fff; border: 1px solid #c0c0c0; border-radius: 3px; } /*** HEADER 시작 ***/ article.card header{ height: 40px; padding: 10px; } article.card header > div { display: inline-block; vertical-align: middle; } .circle-image{ height: 100%; padding: 5px; box-sizing: border-box; } .circle-image > img { height: 100%; border-radius: 50%; } .card-username { padding: 10px 0; font-weight: 900; line-height: 20px; margin-left: 5px; font-size: 13px; } .option-more { float: right; padding: 7px; } /*** HEADER 종료***/ /*** CONTENT 시작 ***/ /*버튼*/ .card-container { padding: 5px 10px; } .card-buttons { padding: 0 5px; margin-top: 5px; } .card-buttons>div{ display: inline-block; margin-right: 10px; } .card-buttons > div.last-card-button{ float: right; margin-right: 0; } /*좋아요*/ .card-likes{ padding: 5px; font-size:13px; font-weight: 900; } /*본문*/ .card-content { padding: 2px 5px; font-size: 13px; } .card-content li > div{ padding: 1px 0; } .card-content li > div > span { font-weight: 900; } .card-content li.comment > div > button{ float: right; } .card-content li.comment > div > button> img{ width: 12px; margin-right: 5px; } /*시간*/ .card-time{ padding: 3px; font-size: 11px; color: #a0a0a0; } /*FOOTER*/ footer.card-comment { position: relative; height:55px; border-top: 1px solid #e0e0e0; } footer.card-comment input{ width: 100%; height: 100%; border: 0; outline: 0; color: #606060; padding: 0 15px; } footer.card-comment > div{ position: absolute; right: 10px; top: 50%; transform: translateY(-50%); } footer.card-comment > div > button { color: #0095f6; opacity: 0.5; padding:10px 5px; } /*캐러셀*/ article.card main.carousel { width: 100%; position: relative; } article.card main.carousel > div { overflow: hidden; } article.card main .carousel ul{ width: 10000px; } article.card main .carousel ul>li{ display: inline-block; } article.card main .carousel ul>li img{ width: 600px; }
- 미해결프로그래밍 시작하기 : 웹 입문 (Inflearn Original)
질문이요!
footer.card-comment input { width: 100%; height: 100%; border: 0; outline: 0; padding: 0 15px; color: #606060; } css코드인데요 똑같이 했는데요 댓글달기부분에 패딩값을 설정하면 오른쪽이 자꾸 밖으로 나가요ㅜㅜ 그리고 캐러셀 부분해서 히든을 해도 사진의 오른쪽이 가려지지도 않습니다,,,ㅠㅠ 왜그런 걸까요..?
- 미해결프로그래밍 시작하기 : 웹 입문 (Inflearn Original)
개발자 도구에 계속 이것만 뜨는데 어디에서 틀렸는지 모르겠습니다 ㅠㅠ
이게 맞는지 모르겠습니다... 다른 답변들 보면서 파일을 계속 고쳤는데 제자리걸음인 것 같아서 질문 올립니다...
- 미해결프로그래밍 시작하기 : 웹 입문 (Inflearn Original)
logo.EventListener('click ... 이 작동되지 않습니다
안녕하세요. mac 으로 강의 들으면서 작성해보고 있는 수강자인데요. 이전까지는 괜찮았는데 DOM 강의 들어서면서부터 몇몇 부분이 잘 작동이 안되더라고요... 이전 질문 찾아보면서 해보려고 노력했는데, 구글 로고 삭제나 색 변경 같은 부분은 자꾸 에러가 납니다... 어떻게 해야할지 잘 모르겠어요 ㅠㅜ
- 미해결프로그래밍 시작하기 : 웹 입문 (Inflearn Original)
10번이상 강의 보고 따라했는데 안되서 올려요
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>회원가입</title> <meta name="keyword" content="회원가입,html"> </head> <style> .alert-message{ margin:0 10px; color:#f09090; font-size:14px; font-weight:900; } </style> <body> <h1>회원가입</h1> <hr/> <!--action 비워두면 자기자신한테던진다.--> <form action="validation.html"methed="POST"> <fieldset> <legend>계정정보</legend> <div> <label for="id-account">아이디</label> <input type="text" name="account" id="id-account" required="required"> <span class="alert-message" id="id-account-alert">test</span> </div> <div> <label for="id-password">비밀번호</label> <input type="password" name="password" id="id-password" required="required"> <span class="alert-message">test</span> </div> <div> <label for="id-password2">비밀번호 확인</label> <input type="password" name="password2" id="id-password2"required="required"> <span class="alert-message">test</span> </div> </fieldset> <fieldset> <legend>프로필</legend> <div> <label for="id-name">이름</label> <input type="text"name="name"id="id-name"required="required"> <span class="alert-message">test</span> </div> <div> <label>생년월일</label><!--required submit에 가입하기 중단시키는 역할--> <input type="number" name="birth-year" placeholder="년" min="1900" max="2222"required="required"> <select name="birth-month" id=""required="required"> <option value="">월</option> <option value="1">1월</option> <option value="2">2월</option> <option value="3">3월</option> <option value="4">4월</option> <option value="5">5월</option> <option value="6">6월</option> <option value="7">7월</option> <option value="8">8월</option> <option value="9">9월</option> <option value="10">10월</option> <option value="11">11월</option> <option value="12">12월</option> </select> <input type="number" name="birth-day" placeholder="일" min="1" max="31"required="required"> <span class="alert-message">test</span> </div> <div> <label>성별</label> <input type="radio" name="gender"id="id-gender-male"required="required" value="male"> <label for="id-gender-male">남자</label> <input type="radio" name="gender" id="id-gender-female"required="required" value="female"> <label for="id-gender-female">여자</label> <input type="radio" name="gender" id="id-unknown"required="required" value="unknown"> <label for="id-unknown">기타</label> <span class="alert-message">test</span> </div> </fieldset> <div> <input type="checkbox" name="agree" id="id-agree"required="required"> <label for="id-agree">사이트 이용약관과 개인정보 수집 방침에 동의합니다.</label> </div> <!--<input type="submit" value="가입하기">--> <button type="submit">가입하기</button> </form> <script type="text/javascript" src="scripts/validation.js"></script> </body> </html> window.addEventListener('load',function(){ clearMessages(); var formElem=document.querySelector('form'); formElem.onsubmit=submitForm; }); function clearMessages(){ var messages=document.getElementsByClassName('alert-message'); for (var i=0; i<messages.length;i++){ messages[i].style.display='none'; } } function submitForm(){ var accountInput=document.querySelector('input[name="account"]'); var passwordInput=document.querySelector('input[name="password"]'); var passwordConfirmInput=document.querySelector('input[name="password2"]'); var selectInput=document.querySelector('select[name="birth-month"]'); var radioInput=document.querySelector('input[name="gender"]:checked'); var checkInput=document.querySelector('input[name="agree"]'); console.log(accountInput.value); console.log(passowrdInput.value); console.log(passwordConfirmInput.value); console.log(selectInput.value); console.log(radioInput.value); console.log(checkInput.value); return false; }; 콘솔로그 창이 안나와여 제대로 작동이 된건지 아닌지 확인을 못하고있어요 이거 안되서 이 강의에 10시간 이상 계속 반복하면서 타이핑 하고 있습니다. 진도를 못나가고있어요 에러인지, 제가 잘못 타이핑 한건지 일목요연한 답변 부탁합니다.
- 미해결프로그래밍 시작하기 : 웹 입문 (Inflearn Original)
DOM 구글 로고 선택 class네임 선택..질문있습니다.
dd 클레스 네임이 "lnXdpd" 인데 InXdpd의 i 를 대문자 소문자, L인가 싶어서 써봤는데도 에러가 떠요..왜이러는건가요...? 제가 잘못한건가요...
- 미해결프로그래밍 시작하기 : 웹 입문 (Inflearn Original)
addEventLIstener 오류
addEventListener 입력시 계속해서 아래 오류가 반복되고있습니다.
- 미해결프로그래밍 시작하기 : 웹 입문 (Inflearn Original)
한글이 깨집니다
안녕하세요 웹에서 한글이 깨지는 문제가 발생합니다. 현재 우분투에서 개발을 진행하고 있고 vscode를 사용하고 있습니다.
- 해결됨프로그래밍 시작하기 : 웹 입문 (Inflearn Original)
console.log가 뜨지 않습니다.
TEST 글자를 숨기는 것까지는 되는데, 마지막 콘솔에 선택한 값들이 띄워지지 않습니다. 어디서 실수한 건가요? HTML <html> <head> <meta charset="utf-8" /> <title>회원가입</title> <meta name="keyword" content="회원가입,html" /> <style> #account-alert { color: coral; margin: 0 10px; font-size: 13px; font-weight: 900; } </style> </head> <body> <h1>회원가입</h1> <hr /> <form action="signup.html" method="POST"> <fieldset> <legend>계정 정보</legend> <div> <label for="id-acount">아이디</label> <input type="text" name="acount" id="id-acount" required="required" /> <span class="alert-message" id="account-alert">TEST</span> </div> <div> <label for="id-password">비밀번호</label> <input type="password" name="password" id="id-password" required="required" /> <span class="alert-message" id="account-alert">TEST</span> </div> <div> <label for="id-password2">비밀번호 확인</label> <input type="password" name="password2" id="id-password2" required="required" /> <span class="alert-message" id="account-alert">TEST</span> </div> </fieldset> <fieldset> <legend>프로필</legend> <div> <label for="id-name">이름</label> <input type="test" name="name" id="id-name" required="required" /> <span class="alert-message" id="account-alert">TEST</span> </div> <div> <label>생년월일</label> <input type="number" name="birth-year" placeholder="년" min="1900" max="2021" required="required" /> <select name="birth-month" required="required"> <option>월</option> <option value="1">1월</option> <option value="2">2월</option> <option value="3">3월</option> <option value="4">4월</option> <option value="5">5월</option> <option value="6">6월</option> <option value="7">7월</option> <option value="8">8월</option> <option value="9">9월</option> <option value="10">10월</option> <option value="11">11월</option> <option value="12">12월</option> </select> <input type="number" name="birth-day" placeholder="일" min="1" max="31" required="required" /> <span class="alert-message" id="account-alert">TEST</span> </div> <div> <label>성별</label> <input type="radio" name="gender" id="id-gender-male" required="required" value="male" /> <label for="id-gender-male">남</label> <input type="radio" name="gender" id="id-gender-female" required="required" value="female" /> <label for="id-gender-female">여</label> <input type="radio" name="gender" id="id-gender-unknown" required="required" value="unknown" /> <label for="id-gender-unknown">기타</label> <span class="alert-message" id="account-alert">TEST</span> </div> </fieldset> <div> <input type="checkbox" name="agree" id="id-agree" required="required" /> <label for="id-agree" >사이트 이용약관과 개인정보 수집 방침에 동의합니다.</label > </div> <button type="submit">가입하기</button> </form> <script src="./js/validation.js"></script> </body> </html> JS window.addEventListener("load", function () { clearMessages(); var formElem = document.querySelector("form"); formElem.onsubmit = submitForm; }); function clearMessages() { var message = document.getElementsByClassName("alert-message"); for (var i = 0; i < message.length; i++) { message[i].style.display = "none"; } } function submitForm() { var accountInput = document.querySelector("input[name='account']"); var passwordInput = document.querySelector("input[name='password']"); var passwordConfirmInput = document.querySelector("input[name='password2']"); var selectInput = document.querySelector('select[name="birth-month"]'); var radioInput = document.querySelector('input[name="gender"]:checked'); var checkInput = document.querySelector('input[name="agree"]'); console.log(accountInput.value); console.log(passwordInput.value); console.log(passwordConfirmInput.value); console.log(selectInput.value); console.log(radioInput.value); console.log(checkInput.value); return false; }
- 미해결프로그래밍 시작하기 : 웹 입문 (Inflearn Original)
콘솔이 안나옵니다.
자바스크립트 연결은 alert창이 떠서 확인 했는데 밑에 console.log를 했을때 적용이 안됩니다. '가입하기'버튼만 누르면 그냥 새로고침만 됩니다. 뭐가 잘못되었을까요...?. window.addEventListener('load',function(){ //이벤트를 여러개 지정 가능 clearMessages(); var formElement=document.querySelector('form'); formElement.onsubmit=submitForm; //on지정후 이벤트명 지정 });// 페이지가 로드되는 시점부터 코드가 실행됨을 보장 function clearMessages(){ var messages=document.getElementsByClassName('alert-message'); //class이름을 이용해서 HTML요소들을 가져오는 메소드 for (var i=0; i<messages.length; i++){ messages[i].style.display='none'; } } function submitForm() { //account info var accountInput=document.querySelector('input[name="account"]'); //document.querySelector: DOM의 자식 노드를 순회하여 매개변수의 선택자를 찾아 반환 var passwordInput=document.querySelector('input[name="password"]'); var passwordConfirmInput=document.querySelector('input[name="password2"]'); //select, radio, checkbox var selectInput=document.querySlector('select[name="birth-month"]'); var radioInput=document.querySlector('input[name="gender"]:checked'); var checkInput=document.querySlector('input[name="agree"]'); console.log(accountInput.value); console.log(passwordInput.value); console.log(passwordConfirmInput.value); console.log(selectInput.value); console.log(radioInput.value); console.log(checkInput.value); return false; //return false: 실행이 안되도록 지정 }
- 미해결프로그래밍 시작하기 : 웹 입문 (Inflearn Original)
inline-block이 작동하지 않습니다
알려주신대로 .cell { display: inline-block; width: 30%; margin: 0 1%; } 이렇게 작성해 보았는데요 width와 margin은 정상적으로 작동되는데 inline-block은 정상적으로 작동되지 않습니다 <div class="cell" style="display: inline-block;"> 으로 넣어봐도 세로로만 배열되지 가로로는 배열되지 않네요 어떤 점이 문제일까요?
- 미해결프로그래밍 시작하기 : 웹 입문 (Inflearn Original)
웹에서 구현이 안돼요
어떻게 하면 웹에서도 구현이 제대로 될까요?
- 미해결프로그래밍 시작하기 : 웹 입문 (Inflearn Original)
자동줄바꾸기가 않되요~!
코드 입력 시, 한 화면을 넘어가면 자동으로 아랫줄에 줄바꿈 됏음 좋겠는데 그게 않되요ㅠㅠ 계속 쭉 한 줄로 되는데 이거 보기 불편해서 그러는데 줄바꿈 설정하는 기능 따로 있나요???
- 미해결프로그래밍 시작하기 : 웹 입문 (Inflearn Original)
저도 14분 47초 구 글 로고 질문드립니다.
셀렉터로 구글 로고 클릭하면 div#logo 뜹니다. 그래서 똑같이 getElementById("logo"); 로 해서 출력해봤는데 null값이 뜹니다. 왜그렇죠 ? 살펴보니까 id = "logo" 라고 되어있는데 ... ; 저는 스코프에 ntp logo 라고 이것떄문에 그런가요? 네이버 나 다른 페이지는 id값 잘 가져오는데 구글에서는 id 값 이 다 null뜨네요 ;;
- 미해결프로그래밍 시작하기 : 웹 입문 (Inflearn Original)
인스타그램 카드 만들기 질문 있습니다.
안녕하세요. 강의 잘 들었습니다. 마지막으로 인스타그램 카드만들기 듣고 있는데요. footer 영역할 때 boarder 부분이 저 같은 경우는 이상하네요. CSS 파일 에서 footer.card-comment input 에서 주는 padding 때문인 것 같은데요. 저만 왜 그런 걸 까요? Boxing Size 를 boarder 로 하면 될 것 같은데 footer에서는 못 본것 같아아서요. 혹시 몰라 footer 스타일 시트 부분도 같이 올립니다. 어떻게 해야 하는지 답변 부탁드려요. /* 푸터 */ footer.card-comment { position: relative; height: 55px; border-top: 1px solid #e0e0e0; } footer.card-comment input { width: 100%; height: 100%; border: 0; outline: 0; padding: 0 15px; color: #606060; } footer.card-comment > div { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); } footer.card-comment > div > button { color: #0095f6; opacity: 0.5; padding: 10px 5px; }
- 미해결프로그래밍 시작하기 : 웹 입문 (Inflearn Original)
모양이 조금 다릅니다..
안녕하세요. 영상을 보고 똑같이 만들었는데 저 공백부분은 간격이 왜이렇게 넓은지 .. 두번씩 다시 코딩해보아도 잘 못찾겠습니다.