173만명의 커뮤니티!! 함께 토론해봐요.
해결됨
[코드캠프] 강력한 CSS
강의 중에는 absolute의 기준점이 첫번째가, 상위 부모 엘리먼트 중 relative 값을 가진 엘리먼트 두번째는, 상위 부모 중 relative 없는 경우 body 라고 하셨는데 실습해보니 상위 부모중 relative가 아니라 static을 제외한 position값을 가지기만 하면 해당 엘리먼트가 기준으로 되는 것 같습니다. 요악하자면 아래 내용이 맞을까요? 조상 중 relative뿐만 아니라 position을 가진 요소가 없다면 초기 컨테이닝 블록( <body> 요소)를 기준으로 삼는다.
해결됨
[코드캠프] 강력한 CSS
align-items는 아이템이 한줄 일때 우선적용 align-content는 두줄 이상일때 적용으로 이해하고 있는데, 아이템이 동적으로 늘어나서 한줄일 때도 있고 두줄 이상일때도 있는 경우엔 두가지 속성 다 줘야 할까요? ex. align-items: center; align-content: center;
미해결
[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
안녕하세요 지금 응용해서 만들고 있는 수강생입니다 일단 정말 좋은 강의 감사드려요! 응용해서 만들고 있는 도중에 for문이 qIdx가 0일 때는 한번 1번일 때는 두 번이 돌아요 ex. qIdx가 2일 때 1과 2가 돌아서 결과 값이 이상해져요 혹시 몇 시간 째 구글링 해도 모르겠어서 이렇게 문의 남깁니다!
미해결
웹 애니메이션을 위한 GSAP 가이드 Part.01
안녕하세요! 키프레임 파헤치기 실습예제에 어몽이가 안 나오는 데 저만 그럴 걸까요?ㅠㅠ 결과물 화면에 아무것도 뜨지 않습니다. 백그라운드에 있는 url 이미지는 열리는데 말이죠...
해결됨
입문자를 위한, HTML&CSS 웹 개발 입문
flexbox 만들 때 자식요소에 display: flex;만 들어가면 부모 요소는 이름이 상관없는건가요?? 예시로 보여주신 .flex-container가 아니라 다른 이름으로 지정해도 상관없는건지 궁금합니다!!
미해결
초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
안녕하세요. 정말 기초적이라고 생각 하실 수 있는데 정말 모르겠어요 ㅜㅜ.. scrollMove 라는 함수 매게변수에 moveY가 있는데요. moveY가 움직이는 y값이라고 하셨잖아요 그걸 변수로 어디에다가 지정해놓지 않았는데 moveY가 움직이는 y값일거다 라는걸 어떻게 알고 if문이나 다운 클리어, 업 클리어에 어떻게 쓰는거죠? moveY에는 아무런 값이 지정되어 있지 않은데 if문 조건문에 쓰이는거 보면 이해가 잘 안가요 ㅜ
해결됨
만들면서 배우는 HTML/CSS
안녕하세요. 페이지 중간에 콘텐츠 영역 넣는 실습을 하고 있는데 크롬창에서 보니 저는 수치가 저렇게 뜨길래 mergin-left, mergin-top을 각각 -640, -480으로 지정했습니다. 그런데 확인해보니 위치가 다음과 같이 나오더라구요😣 코드는 아래와 같이 작성했습니다..! .contents{ position: absolute; top:50%; left:50%; margin-left:-640px; margin-top:-480px; z-index:20; text-align: center; font-family: "Malgun Gothic", sans-serif; } 그래서 수코딩님과 같은 수치로 코드를 작성해봤는데 정중앙에 오는 것 같아요! 뭐가 이상한건가요?..
해결됨
[코드캠프] 시작은 프리캠프
완벽하지는 않지만, 이미 올려주셨던 분들의 코드까지 참조해서 좀 더 나은 버전으로 만들어 봤습니다. 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문에 넣을 때도 그대로 사용해야하는건가요? 덧붙여, 쉽게 설명해주시는 좋은 강의 잘 듣고 있습니다. 새해 복 많이 받으세요 :) !!
해결됨
[코드캠프] 시작은 프리캠프
사진과 같이 wrapper__left__header와 wrapper__left__body를 정의하는 순간부터 레이아웃이 강의와는 다르게 망가지는데 뭐가 문제인지 모르겠습니다 ㅠㅠ flex로 정렬해 봐도 바뀌는 게 없습니다... 왜인지 알려주시면 감사하겠습니다
해결됨
웹 애니메이션을 위한 GSAP 가이드 Part.01
선생님~ 혹시 gsap 심화강의(scrollTrigger 포함)에 반응형 관련 강의도 있을까요 ㅠㅠ? gsap 공부하면서 가장 어려운게 반응형인 것 같아요 ㅠㅠ 비율 구하기나, 크기조정, 위치값 같은게 너무 어렵네용 ;ㅅ;
미해결
처음 만난 리액트(React)
이곳에서 코드를 똑같이 따라했는데 아래와 같은 오류가 뜨네요 ㅜㅜ 에러가 왜 나는지 모르겠습니다.
미해결
처음 만난 리액트(React)
에러가 나서요ㅠ
미해결
모바일 웹 퍼블리싱 포트폴리오 with Figma
안녕하세요! 코딩웍스 선생님 강의를 열심히 듣고있는 학생입니다! :) 공유해주신 폴더 모두 찾아보았는데 모바일 웹 HTML 와이어프레임 구조 , HTML 와이어프레임 실습 (로그인폼) 관련된 파일을 찾아봐도 없는데 혹시 어디에 있는지 알려주시면 감사하겠습니다!
미해결
처음 만난 리액트(React)
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 사진 첨부 순서대로 index.js, Comment.jsx, CommentList.jsx, npm start시 출력되는 크롬 화면입니다. 이전 시계 실습에서도 동일하게 빈 화면이 출력 됐는데 타 수강생님이 올려주신 코드를 적용하니 해결이 됐어서 다음 챕터를 진행하였습니다. 그런데 동일하게 빈화면이 출력되어 어떤 부분에서 문제가 있는지 도저히 찾을 수 없어서 질문드립니다.
미해결
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
postman에서 우측 상단의 no environment를 클릭해도 다른 항목이 나오지 않습니다.
해결됨
HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
선생님 안녕하세요. 햄버거 메뉴 만들 때 label에 position: relative label span 에 position: absolute 이렇게 포지션값을 주었는데, 사이드바 만들면서 label의 position: relative 를 absolute로 바꿔주게 되는데 그럼 label span 의 position: absolute 의 relative는 무엇이 되는 건가요?? label의 포지션을 앱솔루트로 바꿨는데도, label span에는 영향이 없는 이유가 궁금합니다 label[for=trigger] { /* border: 1px solid red; */ width: 30px; height: 20px; display: block; position: absolute; cursor: pointer; right: 10px; top: 50%; transform: translateY(-50%); transition: 0.5s; } label[for=trigger] span { position: absolute; height: 2px; background-color: #000; width: 100%; left: 0; transition: 0.3s; } /* sidebar */ .sidebar { background-color: #000; width: 300px; height: 100vh; position: fixed; right: -300px; transition: 0.5s; }
미해결
만들면서 배우는 HTML/CSS
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>심플포트폴리오</title> <tink href="css/reset.css" rel="stylesheet" type="text/css"/> <tink href="css/reset.css" rel="stylesheet" type="text/css"/> <script src="js/jquery.1.12.4.js" type="text/javascript"></script> <script src="plugins/bxslider/js/jquery.bxslider.js" type="text/javascript"></script> <script> $(document).ready(function(){ $('.slider').bxSlider({ controls:false, pager:false, auto:true }); }); </script> </head> <body> <div class="background__01"></div> <div class="background__02"></div> <div class="background__03"></div> </div> </body> </html> html,body{ width: 100; height: 100; } .bx-wrapper, .bx-vi.slider.slider{ width: 100; height: 100; } .background__01{ width: 100; height: 100; background: url("../images/a.jpg") no-repeat; background-size: cover; background-image: center; } .background__02{ width: 100; height: 100; background: url("../images/a.jpg") no-repeat; background-size: cover; background-image: center; } .background__03{ width: 100; height: 100; background: url("../images/a.jpg") no-repeat; background-size: cover; background-image: center; } 어떻게 해야 하나요 ??
미해결
HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
border을 없에거나 바꾸고 싶은데 어떻게 해야 되나요? border:none 해도 그대로고 border 속성을 바꿔도 밖에 검은색 solide가 없어지지 않습니다. 왜 이렇게 되는건가요
해결됨
부트스트랩 5(Bootstrap 5) - 기초부터 웹 프로젝트 만들기
질문글을 작성하다가 원인을 찾아서 문제해결했습니다만, 추후 다른 분께 도움이 될까 봐 간략하게 올립니다. 문제 #intro .intro-first-card .overlay a:hover { color: #fafa6f; } 위 코드가 동작하지 않았습니다. 원인 bootstrap.min.css 버전에 따른 .link-light 차이 강의&수업자료 버전은bootstrap@5.0.2/dist/css/bootstrap.min.css을 사용 .link-light {color: #f8f9fa;} 제 버전은 bootstrap@5.2.1/dist/css/bootstrap.min.css .link-light {color: #f8f9fa!important;} 해결 #intro .intro-first-card .overlay a:hover { color: #fafa6f !important; }
