22,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 해결됨[코드캠프] 시작은 프리캠프
싸이월드 만들기 1탄 과제 코드 질문
싸이월드 만들기 1탄 과제 만들기 코드를제가 한 과제와 비교하면서 공부하고 있습니다.저하고 다른 부분이 있어서 그 이유가 궁금합니다. HTML <div class="left__body__footer"> <div class="wrapper__feel"> <div class="feel__title">오늘의 기분</div> <select class="feel__select"> <option>기쁨 😊</option> <option>슬픔 😭</option> <option>화남 😠</option> <option>분노 😡</option> </select> </div> </div>html은 과제 class 이름 참고하면서 만들어서 똑같습니다. CSS.wrapper__feel { <--------- 과제 예시 코드 display: flex; flex-direction: column; justify-content: center; width: 100%; }위의 코드가 과제 예시 코드입니다.아래 코드가 제가 한 코드입니다..feel__select { <------ 제가 한 코드 width: 100%; } <-width 차이-> 저는 div태그가 블록레벨 태그라서 <div class="feel__title">오늘의 기분</div> 안에 있는 '오늘의 기분'은 왼쪽으로 정렬되기 때문에 그대로 두고위의 코드 예시처럼 select 박스만 크기 조절하여 해결했습니다. 저는 과제 내용의 셀렉트 박스의 width를 select 박스 자체에 100%로 주었고과제 예시 코드는 자식요소의 div와 select가 포함된 <div class="wrapper__feel"> div를 정렬한 뒤 width 100%를 주었더라구요.그런데 아래의 코드처럼 flex 정렬부분을 주석처리하니깐 width 속성이 안 먹더라구요.그 이유가 궁금합니다. .wrapper__feel { /* display: flex; flex-direction: column; justify-content: center; */ width: 100%; } +++ 제가 한 코드를 지우고 과제 예시 코드 중 width: 100%; 부분을 지워도 과제 예시 코드와 결과와 같습니다.flex 정렬이 되면 footer의 width 100% 속성이 상속되는 건가요?display 정렬과 width의 관계에 대해 알고 싶습니다..wrapper__feel { display: flex; flex-direction: column; justify-content: center; /* width: 100%; */ <---- 과제 예시 코드의 이 부분을 지워도 결과가 같습니다. }제가 한 코드를 지우고 이렇게만 해도 같은 결과가 나옵니다. 차이를 알고 싶습니다..feel__select { <- 제가 한 이 코드를 지우고 위의 코드 정렬부분만 실행해도 결과가 같음. width: 100%; }
- 해결됨[코드캠프] 시작은 프리캠프
싸이월드 2탄 코드가 없는 것 같습니다.
안녕하세요.싸이월드 2탄 코드가 없는 것 같습니다. 2탄이 1탄 코드와 동일한 것 같네요.강사님, 설명해주신 <div class="wrapper__right"> 관련된 코드가 전부 없네요.노션 페이지 업데이트 부탁드립니다.
- 해결됨[코드캠프] 시작은 프리캠프
강사님 펜 작성 도구
안녕하세요 강의와 큰 관련이 없는데 ^^강사님 사용하시는 화면에 펜을 그리는 도구는 어떤걸 사용하시나요? 화살표도 변경되고 이쁘고 신기한 것 같아서 문의드립니다 ㅎㅎ
- 해결됨[코드캠프] 시작은 프리캠프
싸이월드1 질문입니다. 2
.fas{ color: black; margin-right: 8px; }아이콘에 width와 height 를 따로 주지 않아도 margin-right로 아이콘과 텍스트사이에 공간을 줄 수 있는데.fas { color: black; margin-right: 10px; width: 5px; height: 5px; }처럼 width와 height 값을 따로 줘야하나요?? 그리고,.fas { color: black; width: 5px; height: 5px; }이렇게 주었을때 갑자기이미지와 같이 아이콘과 텍스트가 겹쳐지는데 이유가 뭔가요????
- 해결됨[코드캠프] 시작은 프리캠프
싸이월드 1탄 질문 입니다.
과제 완료후 정답과 비교를 하여는데,바디 프로필 부분에서 왼쪽 위에 정렬이 되어 있어저는.left__body__profile{ width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; font-size: 9px; font-family: 'Malgun Gothic'; }이라고 정리를 하였습니다. 하지만 정답안에는.left__body__profile{ width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-start; }이라고 되어 있는데align-items 는 flex-start 로 안해도 되는 건가요??align-items 이나 justify-content 중 하나만 쓰거나 아애 안써도 같은 결과가 나오는데 둘중 하나는 꼭 써줘야하는건가요?아님 justify-content 만 써야 하는건가요?
- 해결됨[코드캠프] 시작은 프리캠프
수학객체 숫자 자동생성 강의 부분 질문이 있습니다
강의 상으로 let result = String(Math.floor(Math.random() * 1000000)).padStart(6,0) 까지 배우고 여기서 같은 6자리 수가 반복으로 나오는데 이를 랜덤하게 나오게 하는 법은 내일 배운다고 말하고 바로 넘어가던데요 그 뒤 강의를 들어봐도 관련 객체강의는 더 없고 후에 갑자기 Dom을 이용해 html상으로 직접 기능을 만들고 구현해보는 강의에서 똑같이 vscode에 입력할 때는 숫자가 랜덤하게 배정되더군요. 제가 강의를 잘 못 들은건지 모르겠습니다만 저는 왜 '랜덤하게 나오지 않고 같은 숫자가 나오는지' 에 대한 해답을 강의에서 들을 수 없었습니다. 그래서 여기 게시판에 질문합니다 제가 본 강의 내용에서 놓친거라면 제 잘못이지만 강의 과정 내에서 간략히 생략되어버린 거라면 솔직히 좀 화날 거 같아요. 방대한 과정을 축약해서 설명한 것이라 간소화되는 게 많은 건 이해하지만 설명하던 것에 대한 해답이 없다면 그건 좀 아니잖아요
- 해결됨[코드캠프] 시작은 프리캠프
위치 조정이 안 됩니다
회원가입 창 실습중인데요. 아래 사진처럼 왼쪽으로 박스가 치우쳐져 있습니다.혹시나 flex 정렬이 먹힐까 싶어 direction을 row로 주고 justify content를 center로 줘봤지만 아무런 변화도 없습니다. 초반부부터 막힌 거 같은데 이거 어떻게 중앙으로 돌리나요?
- 해결됨[코드캠프] 시작은 프리캠프
파이널 과제 질문입니다.
파이널 과제중 질문입니다.비밀번호가 공란일 때 는 오류가 안떠서 문의드려요 ㅠㅠ에러문구가 아예 안뜨나 싶기도 했는데일치하지 않는건 떠서 문의드립니다.ㅠㅠ
- 해결됨[코드캠프] 시작은 프리캠프
game.js 작동이 안됩니다
코드 적은게 작동이 안되는데 혹시 이 문구와 관련이 있을까요..?
- 해결됨[코드캠프] 시작은 프리캠프
타이머제작 질문드립니다.
복습하다가 코드를 새로 적어봤는데. 이렇게 해도 동작은 되는데 혹시 문제가 있을까요..!?
- 해결됨[코드캠프] 시작은 프리캠프
class="inputbox"과 class="input"의 차이가 있나요?
왼쪽은 class="input"으로 class를 지정한것이고오른쪽은 class="inputbox" class를 지정한 것인데요왜 왼쪽과 오른쪽이 차이가 나는것인가요?
- 해결됨[코드캠프] 시작은 프리캠프
vscode live server 기동관련
live server 기동 시 크롬창이 활성화 되어 있으면 기동되지 않습니다.크롬창을 모두 종료 후 기동하면 정상적으로 작동하는데크롬창을 끄지 않아도 정상적으로 기동되게 하려면 어떻게 해야할까요?
- 해결됨[코드캠프] 시작은 프리캠프
굵은커서 후 !입력한됨?
vscode 새 파일생성 후 !입력 하려는데 입력창 굵은 커서에서 입력이 안됩니다
- 해결됨[코드캠프] 시작은 프리캠프
CSS정렬 - 회원가입 과제 코드 공유
완벽하지는 않지만, 이미 올려주셨던 분들의 코드까지 참조해서 좀 더 나은 버전으로 만들어 봤습니다.100% 완전하지는 않은 코드지만 그래도 가시적으로 보기에는 더 나은 것 같아서 코드 공유 드립니다.<!-- test.html --> <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>회원가입</title> <link rel="stylesheet" href="./test.css"> </head> <body> <div> <div class="container"> <h2>회원가입을 위해<br>정보를 입력해주세요.</h2> <!-- input도 inline요소중에 하나다. --> <!-- inline이란 하나의 태그가 레코드(가로)방향을 모두 차지하는게 아니라, 자신이 속한 영역만 가지게 되는 것이다. --> <label for="email">* 이메일<br> <input type="text" id="email"><br><br> </label> <label for="name">* 이름<br> <input type="text" id="name"><br><br> </label> <label for="password1">* 비밀번호<br> <input class="pw" id="password1" type="password"><br><br> </label> <label for="password2">* 비밀번호 확인<br> <input class="pw" id="password2" type="password"><br><br> </label> <!-- 선택 영역 두번째 --> <!-- name을 부여함으로 인하여 radio의 선택 가능한 것들을 하나의 그룹으로 묶어준다. --> <form> <input type="radio" class="radio" name="gender">  여성 <input type="radio" class="radio" name="gender">  남성 </form> <br><br> <form> <input type="checkbox" class="agree">  이용약관 개인정보 수집 및 정보이용에 동의합니다. </form> <hr> <hr> <button>가입하기</button> <!-- 기능자체는 input의 타입을 button으로 하면 사용은 가능하지만, 굳이 button 태그를 사용하는 이유는 --> <!-- 커스터마이징이 button 태그가 더 용이하기 때문이다. --> <!-- <input type="button" value="가입하기"> --> </div> </div> </body> </html> /* test.css */ div { /* 바로 상위 태그인 body를 기준으로 맞춰주게끔 */ /* position의 absolute라는것이, 설정하게 되면 바로 직계부모 태그의 영향아래 놓이게 된다는 말이다. 더불어서 네모를 영역으로 봤을때 왼쪽 상단 꼭지점을 기준으로 움직이게 된다. */ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 670px; height: 960px; background: #FFFFFF; border: 1px solid #AACDFF; box-shadow: 7px 7px 39px rgba(0, 104, 255, 0.25); border-radius: 20px; /* 이것의 의미는 타겟팅된 영역에 대해 지정된 만큼 움직여주는 거라고 한다. */ /* justify-content: space-evenly; align-content: column; */ margin: 0px; padding: 100px; box-sizing: border-box; display: flex; flex-direction: column; flex-wrap: nowrap; } h2 { width: 466px; height: 94px; left: 725px; top: 132px; font-family: 'Noto Sans CJK KR'; font-style: normal; font-weight: 700; font-size: 32px; line-height: 47px; color: #0068FF; justify-content: space-evenly; } button { width: 400px; height: 50px; left: 725px; top: 875px; background-color: #FFFFFF; color: royalblue; border-radius: 8px; border: #0068FF solid 1px; } input { padding: 0px; border: none; border-bottom: 1px solid #CFCFCF; width: 466px; height: 30px; } label { color: lightgrey; } .radio { align-items: center; font-size: 20pt; width: 15px; height: 15px; } /* div.container { justify-content: space-between; flex-direction: row; align-items: center; } */ input.agree { align-items: center; font-size: 20pt; width: 15px; height: 15px; }
- 해결됨[코드캠프] 시작은 프리캠프
반복문 질문
안녕하세요?개발자 도구 console창에서 let persons로 객체 배열을 선언하고 반복문 초기식에 선생님처럼 let count가 아닌 int i로 하여 만들었더니 Unexpected identifier 'i' 오류가 뜨더라구요. 객체 배열 선언할 때 사용했던 변수 선언 방식? 데이터 타입?을 for문에 넣을 때도 그대로 사용해야하는건가요?덧붙여, 쉽게 설명해주시는 좋은 강의 잘 듣고 있습니다. 새해 복 많이 받으세요 :) !!
- 해결됨[코드캠프] 시작은 프리캠프
강사님, 안녕하세요! 자료 관련해서 질문 드립니다!
위와 같은 PPT 파일은 어디에서 받을 수 있을지요?다른 질문글들을 보아도 각 자료들의 링크나 위치에 대해서 묻는 내용이 많은 것 같습니다.혹시 강사님께서 만들어주신 좋은 강의에만 더 집중할 수 있도록 각 강의에 활용된 자료들을 강의마다 링크를 달아주실 계획은 없을지요?
- 해결됨[코드캠프] 시작은 프리캠프
div 상자 안에 div가 안들어가져요
html<!DOCTYPE html> <html lang="kr"> <head> <title>Document</title> <link rel="stylesheet" href="../cyworld/styles/jukebox.css"> </head> <body> <div class="Bigframe"> <div class="pic"> <div class="pic_title"> <duv class="main_title">추억의 BGM</div> <div class="sub_title">TODAY CHOICE</div> </div> <div class="Line"></div> <div class="pics"> <div class="pic1"> <img src="./images/y사진.png" class="album_pic"> <div class="song_title">Y(Please Tell Me Why)</div> <div class="artist">프리스타일</div> </div> <div class="pic1"> <img src="./images/snow.png" class="album_pic"> <div class="song_title">눈의 꽃</div> <div class="artist">박효신</div> </div> <div class="pic1"> <img src="./images/love.png" class="album_pic"> <div class="song_title">사랑했나봐</div> <div class="artist">윤도현</div> </div> </div> </div> <div class="list"> <div class="pic_title"> <duv class="main_title">추억의 BGM</div> <div class="sub_title">TODAY CHOICE</div> </div> <table class="music_list"> <tr> <th class="checkbox"><input type="checkbox"></th> <th class="number">번호</th> <th class="song">곡명</th> <th class="artist">아티스트</th> </tr> <tr> <td class="checkbox1"><input type="checkbox"></td> <td class="number1">1</td> <td class="song1">눈의 꽃</td> <td class="artist1">박효신</td> </tr> <tr> <td class="checkbox1"><input type="checkbox"></td> <td class="number1">2</td> <td class="song1">사랑스러워</td> <td class="artist1">김종국</td> </tr> <tr> <td class="checkbox1"><input type="checkbox"></td> <td class="number1">3</td> <td class="song1">내사람:Partner For Life</td> <td class="artist1">SG워너비</td> </tr> <tr> <td class="checkbox1"><input type="checkbox"></td> <td class="number1">4</td> <td class="song1">Love Love Love</td> <td class="artist1">에픽하이</td> </tr> <tr> <td class="checkbox1"><input type="checkbox"></td> <td class="number1">5</td> <td class="song1">애인...있어요</td> <td class="artist1">이은미</td> </tr> </table> </div> </div> </body> </html>css*{ box-sizing: border-box; margin: 0px; padding: 0px; } body,html{ width:100%; height: 100%; } .Bigframe{ display: flex; flex-direction: column; width: 100%; padding: 20px 30px; justify-content: space-between; align-items: center; } .pic{ width: 100%; } .pic_title{ width: 100%; display: flex; flex-direction: row; } .main_title{ color: #55B2E4; font-size: 13px; font-weight: 700; } .sub_title{ font-size: 8px; padding-left: 5px; display: flex; flex-direction: column; justify-content: flex-end; } .Line{ width: 100%; border-top: 1px solid gray; } .pics{ display: flex; flex-direction: row; justify-content: space-around; padding-top: 12px; } .album_pic{ width: 120px; height: 120px; padding: 5px; } .song_title{ font-family: 'Malgun Gothic'; font-weight: bold; font-size: 11px; color: #0F465E; display: flex; flex-direction: row; justify-content: center; } .artist{ font-family: 'Malgun Gothic'; font-weight: 700; font-size: 10px; display: flex; flex-direction: row; font-weight: bold; justify-content: center; } .list{ width: 100%; } .music_list{ width: 100%; padding-top: 8px; border-spacing: 0px; } .music_list th{ height: 20px; font-size: 10px; font-weight: bold; color: gray; background-color: #eeeeee; border-top: 1px solid gray; border-bottom: 1px dashed gray; } .music_list td{ height: 20px; font-size: 10px; color: #0f465e; border-bottom: 1px dashed gray; } .checkbox1{ width:5%; text-align: center; } .number1{ width:10%; text-align: center; } .song1{ width:45%; text-align: left; } .artist1{ width:30%; text-align: center; } 실행 시Bigframe(wrapper)안에 두 상자가 다 안담아져요어디가 문제 일까요..?ㅠㅠ
- 해결됨[코드캠프] 시작은 프리캠프
과제는 완성할때까지 해야하나요?
구글링해가면서 여기까진 왔는데 막혀서 도저히 진행이 안되네요어떻게 과제는 성공할때까지 잡고있어야하나요 아니면 우선 넘어갔다가 추후에 다시 돌아봐도 되는건가요?
- 해결됨[코드캠프] 시작은 프리캠프
선생님 혹시 회원가입 코드 받을 수 있을가요?
다방면으로 해봤는데 도저히 답이 잘 안나와서요 코드를 받을 수 있는지 여쭈어봅니다
- 해결됨[코드캠프] 시작은 프리캠프
CSS 정렬 강의에 대한 회원가입 완성코드를 볼 수 있을까요?
대부분 이 과정을 시작하는 분들이 아무래도 생초급자 분들이 많은걸로 보이는데요.다소 설명이 부실한 느낌이 있습니다.얼추 하였기는 하나, 완성하신 예제를 보고 싶은데요! 혹시 가능할까요?