176만명의 커뮤니티!! 함께 토론해봐요.
해결됨
[코드캠프] 시작은 프리캠프
안녕하세요. 취업을 목표로 공부하고 있는 코린이 입니다. 섹션2 CSS 파트의 "회원가입" 화제 과제를 하는 중에, 며칠동안 코드를 계속 수정하고 고쳐도 (아직 제 실력으로는) 해결이 어려운 부분들이 있어 질문을 남기게 되었습니다. 저는 맥북을 사용하고, chrome으로 구현하고 있습니다. <input> 관련 input[type="radio"] { appearance: none; border-radius: 50%; width: 20px; height: 19.95px; background-color: #ebebeb; border: 1px solid #d2d2d2; } <input type="radio" ~> 위의 input 태그의 외형을 CSS로 변경할 때 (특히, 배경 색상) 코드가 반영이 안되는 부분이 있어 인터넷 검색을 하다보니, appearance: none; 을 지정해 줘야 한다는 것을 알게 되었습니다. 이 부분에서, 'input 태그에 class 또는 id를 적용시킬 때 항상 appearance를 적용해야 하는지' 궁금합니다. 나머지는 다했는데... / <div> 속 <input>의 flex 정렬 과제의 90%는 구현했습니다.. 그런데 부모박스를 <div>로 지정하고 자식 박스에 <input> 태그가 포함되었을 때, position: flex; justify-content: row/column; 와 같은 flex 정렬 코드가 반영이 되지 않고 있습니다. 최대한 자력으로 해결해보려고 노력하고 있지만, 아직 제 실력이 부족하여 며칠을 고민해도 쉽게 해결하지 못하고 있습니다... 선생님의 고견이 절실한 순간입니다. 완강하는 그날까지! html <!DOCTYPE html> <html lang="ko"> <head> <title>회원가입</title> <link href="./02-signup_실습.css" rel="stylesheet"> </head> <body> <!-- 회색 배경 --> <div class="Graybg"> <!-- 회원가입 배경 --> <div class="SignUpbg"> <!-- Group5 --> <div class="Group5"> <!-- 회원가입을 위해~ --> <div class="Title"> 회원가입을 위해<br> 정보를 입력해주세요 </div> <!-- Group1 --> <div class="Group1"> <div class="Textbox">* 이메일</div> <div class="vector1"></div> </div> <!-- Group2 --> <div class="Group1"> <div class="Textbox">* 이름</div> <div class="vector2"></div> </div> <!-- Group3 --> <div class="Group1"> <div class="Textbox">* 비밀번호</div> <div class="vector2"></div> </div> <!-- Group4 --> <div class="Group1"> <div class="Textbox">* 비밀번호 확인</div> <div class="vector2"></div> </div> <!-- 성별 --> <div class="gender"> <!-- 여성 --> <div class="genderBox"> <div><input type="radio"></div> <div>여성</div> </div> <!-- 남성 --> <div class="genderBox"> <div><input type="radio"></div> <div>남성</div> </div> </div> <!-- 체크박스 --> <div class="checkBox"> <input type="checkbox"> <div class="genderText"> 이용약관 개인정보 수집 및 이용, 마케팅 활용 선택에 모두 동의합니다. </div> </div> <!-- 선 --> <div class="line"></div> <!-- 가입 버튼 --> <button> <div class="signUpText">가입하기</div> </button> </div> </div> </div> </body> </html> CSS .Graybg { position: absolute; width: 1920px; height: 1080px; background-color: #FFFFFF; border: 1px dotted black; display: flex; justify-content: center; align-items: center; } .SignUpbg { width: 670px; height: 960px; background: #FFFFFF; border: 1px solid #AACDFF; box-shadow: 7px 7px 39px rgba(0, 104, 255, 0.25); border-radius: 20px; display: flex; justify-content: center; align-items: center; } .Group5 { width: 470px; height: 818px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; } .Title { box-sizing: border-box; width: 466px; height: 94px; font-family: 'Noto Sans CJK KR'; font-style: normal; font-weight: 700; font-size: 32px; line-height: 47px; color: #0068FF; } .Group1 { width: 466px; height: 80px; display: flex; flex-direction: column; justify-content: space-between; } /* 성별 */ .gender { width: 140px; height: 23.94px; position: flex; flex-direction: row; flex-wrap: nowrap; border: 1px dotted black; } .genderBox { width: 60px; height: 23.94px; display:flex; flex-direction: row; justify-content: space-between; align-items: center; border: 1px dotted black; } input[type="radio"] { appearance: none; border-radius: 50%; width: 20px; height: 19.95px; background-color: #ebebeb; border: 1px solid #d2d2d2; } .genderText { font-family: 'Noto Sans CJK KR'; font-style: normal; font-weight: 400; font-size: 16px; line-height: 24px; color: #000000; } /* 성별 */ /* 체크박스 */ .checkBox { position: flex; flex-direction: row; align-items: center; width: 454px; height: 21.06px; font-family: 'Noto Sans CJK KR'; font-style: normal; font-weight: 400; font-size: 14px; line-height: 21px; border: 1px dotted black; } input[type="checkbox"] { width: 20px; height: 20px; } .checkBoxText { width: 419px; height: 21px; font-family: 'Noto Sans CJK KR'; font-style: normal; font-weight: 400; font-size: 14px; line-height: 21px; color: #000000; } /* 체크박스 */ .vector1 { width: 466px; height: 0px; border: 1px solid #0068FF; } .vector2 { width: 466px; height: 0px; border: 1px solid #CFCFCF; } /* 선 */ .line { width: 470px; height: 1px; background: #E6E6E6; } /* 가입 버튼 */ button { box-sizing: border-box; display: flex; justify-content: center; align-items: center; width: 470px; height: 75px; background: #FFFFFF; border: 1px solid #0068FF; border-radius: 10px; } button:hover { background: yellowgreen; } .signUpText { width: 70px; height: 27px; font-family: 'Noto Sans CJK KR'; font-style: normal; font-weight: 400; font-size: 18px; line-height: 27px; text-align: center; color: #0068FF; }
html/css javascript input HTML/CSS flex 정렬
강우주
2023-02-08T14:23:23.627Z
댓글 1
좋아요 0
조회수 2281
해결됨
쉽게 배우고, 포트폴리오로 만드는 반응형 웹! #설화수
경로를 확실히 주었는데 vs code에서는 작동하지만 intellij 에서는 적용되지 않습니다. 다른 방법은 없을까요?
html/css HTML/CSS 클론코딩 반응형-웹 반응형-웹 클론코딩
boxman
2023-02-08T09:41:23.795Z
댓글 1
좋아요 1
조회수 439
미해결
모바일 웹 퍼블리싱 포트폴리오 with Figma
쌤! 프로젝트 단독으로 모바일웹할때는 절대주소라고 말씀하셨는데 다른 학생이 한 것에는 상대주소로 되어있었잖아요 포폴이라서 그런거라고 말씀하셨는데요 몇번들어도 그부부분이 이해가 되지않아서요 ~ 모바일에 웹에 목업을 할꺼라서 그런건가요??
html/css 포트폴리오 jquery 모바일-디자인 HTML/CSS 포트폴리오 figma 모바일-디자인
비타민걸
2023-02-08T09:04:46.024Z
댓글 2
좋아요 1
조회수 420
미해결
처음 만난 리액트(React)
const {comments} = props; 의미? {} 안에는 어떤 것을 넣는 것인지요? 각 항을 설명해 주세요 { comments.map ((comments, index)=>{ return <CommentListitem key={comment.id} comment={comment} />; 리액트 진짜 어렵네요 CommentList.jsx 일부 입니다 function CommentList(props){ const {comments} = props; return( <Wrapper> { comments.map ((comments, index)=>{ return <CommentListitem key={comment.id} comment={comment} />; })} </Wrapper> ); }
html/css react javascript HTML/CSS
jetski0222
2023-02-08T01:52:13.662Z
댓글 1
좋아요 1
조회수 1176
미해결
처음 만난 리액트(React)
const Wrapper =styled.div 이게 무슨의미인지요? 또 문법이 괄호도 없고 빽틱으로만? & >*{ :not(:last-child){ margin-bottom:16px; } 이건 또 무슨의미인지요 CommentList.jsx 의 일부 입니다 const Wrapper =styled.div` display:flex; flex-direction : column; align-items:flex-start; justify-content : center; & >*{ :not(:last-child){ margin-bottom:16px; } } `;
html/css react javascript HTML/CSS
jetski0222
2023-02-08T01:46:35.927Z
댓글 3
좋아요 0
조회수 680
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
슬라이드가 되지 않습니다 ㅠ 어디부분이 잘못되었는지 확인부탁드립니다! <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <header> <div class="header-logo"> <a href="#"><img src="img/logo.png" alt=""></a> </div> <div class="nav"></div> </header> <div class="slide"> <a href="#"><img src="img/slide1.jpg" alt=""></a> <a href="#"><img src="img/slide2.jpg" alt=""></a> <a href="#"><img src="img/slide3.jpg" alt=""></a> </div> <div class="items"> <div class="news"></div> <div class="banner"> <a href="#"><img src="img/banner_img.jpg" alt=""> </a> </div> <div class="shortcut"> <a href="#"><img src="img/shortcut_img.jpg" alt=""></a> </div> </div> <footer> <div class="footer-logo"> <a href="#"><img src="img/logo2.png" alt=""></a> </div> <div class="copy"> 서울특별시 동대문구 장안벚꽃로 279 한국산업인력공단 서울지역본부<br> 전화번호: 1644-8000 동대문구 휘경동 전동중학교 건너편. </div> <div class="sns"> <a href="#"><img src="img/sns1.png" alt=""></a> <a href="#"><img src="img/sns2.png" alt=""></a> <a href="#"><img src="img/sns3.png" alt=""></a> </div> </footer> </div> <script src="script/jquery-1.12.4.js "></script> <script src="script/custom.js"></script></body></html> @charset "utf-8"; .container{ width: 1200px; border: 1px solid red;} header{ height: 100px;}header>div{ height: 100px; }.header-logo{ width: 200px; line-height: 130px; float: left;}.nav{ width: 800px; border: 1px solid wheat; float: right;} .slide{ position: relative; width: 1200px; height: 300px;}.slide>div{ position: absolute; top: 0; left: 0; animation: slide 10s linear infinite;}@keyframes slide { 0% { top: 0; } 30% { top: 0; } 35% { top: -300px; } 65% { top: -300px; } 70% { top: -600px; } 95% { top: -600px; } 100% { top: 0; }}.items{ overflow: hidden;}.items>div{ height: 200px; float: left; border: 1px solid darkmagenta; box-sizing: border-box;}.news{ width: 400px; border: 1px solid darkorange;}.banner{ width: 400px; }.shortcut{ width: 400px;} footer{ overflow: hidden;}footer>div{ height: 100px; float: left; box-sizing: border-box;}.footer-logo{ width: 200px; padding-top: 28px;}.copy{ width: 800px; text-align: center; padding-top: 29px;}.sns{ width: 200px; line-height: 140px; padding-left: 11px;}
html/css jquery 웹-디자인 HTML/CSS 웹 디자인
기쁜 돌고래
2023-02-07T11:55:33.773Z
댓글 1
좋아요 1
조회수 490
해결됨
[코드캠프] 강력한 CSS
새 글 쓰기 > 에서 > 이동하는 방법이 궁금합니다.
98198821
2023-02-07T07:15:21.321Z
댓글 2
좋아요 0
조회수 512
미해결
처음 만난 리액트(React)
안녕하세요 질문이 있습니다. 에러는 발생하지 않는데 클릭 했을 때 페이지가 안 넘어 가집니다. 주소를 입력해서 접속할 때도 잘되는데 클릭 시에 아무 반응이 없습니다. 뭐가 문제일까요?
html/css react HTML/CSS javascript
exwhite
2023-02-06T05:50:16.890Z
댓글 2
좋아요 0
조회수 565
해결됨
[코드캠프] 시작은 프리캠프
안녕하세요 선생님. 주말까지 코드캠프의 프리캠프 강의를 마치고 오늘 css javascript 강의까지 모두 결제했습니다! css로 넘어가기 전에 다시 한번 숙제와 싸이월드를 혼자 만들어 보고 있는데요. 해당 숙제를 하면서 하나 궁금증이 있어 질문 남깁니다. 일단 코드를 먼저 보여드리자면 <html> <css> 이렇게 작성하였고 결과물은 이렇게 됐습니다! 혹시 radio 부분인 여성과 남성 중 하나 체크하는 항목은 정렬이 글씨와 동그라미가 잘 안되는데 어떻게 해야 될지 알려주시면 감사하겠습니다!
html/css HTML/CSS javascript
데싸데분
2023-02-06T02:14:41.911Z
댓글 1
좋아요 0
조회수 398
미해결
애플 웹사이트 인터랙션 클론!
setLayout 함수 끝에 들어가는 ${sceneInfo[i].scrollHeight}px ; 부분에서 따옴표로 잘못 작성해서 좀 해맸었습니다 ㅎㅎ; ${} 부분을 풀어 쓰면 정확하게 어떤식으로 표기가 되는건지.. 궁금합니다. 제 예상으로는 for문 안에 따로 변수를 선언하지 않고, 계산된 값을 바로 가져오기 위해 사용한 것 같은데 맞을까요..??
html/css HTML/CSS svg 웹-디자인 javascript 인터랙티브-웹 웹 디자인 클론코딩 인터랙티브-웹 클론코딩
꿀잠
2023-02-05T14:02:19.987Z
댓글 1
좋아요 0
조회수 528
해결됨
[코드캠프] 강력한 CSS
02-04 flex 실습 중 div들의 가로사이즈와 세로사이즈는 따로 사이즈를 지정하지 않았음에도 불구하고 글자에 맞춰서 정해지는 것 같은데, 원리가 무엇인가요? 감사합니다.
liltjay
2023-02-05T07:25:00.446Z
댓글 1
좋아요 0
조회수 325
해결됨
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
남겨주신 노마크코더님의 영상과 기술블로그 글을 보았는데요. DOM 의 풀네임 (Document Object Model) 말처럼 HTML, CSS, JS 파일들을 객체화하여 따로 분리하여 연결해주는 모델링이 속도가 빠르게 해주는 핵심 이유 이며, 객체화를 통해 브라우저에서 직접 모든 렌터, 레이아웃을 계산하는게 아닌 Offline 상태에서 계산하여 결과값만 브라우저에 나타내기 때문이다. 라고 이해를 하고 있는데 맞을까요? 이런 React의 동작방식과 작업방식이 가장 빠른건 아니지만 웬만한 웹에서 빠르게 동작하고 충분히 빠르고 효율적이기에 많은 서비스들에서 사랑 받고 있는 프레임워크다. 혹시 이렇게 정리하는게 조금 제가 잘 이해를 못 하고 있는 부분일지요.
html/css react express javascript node.js HTML/CSS tensorflow 머신러닝 머신러닝 배워볼래요? react-native nodejs
promotion
2023-02-05T05:23:43.574Z
댓글 1
좋아요 1
조회수 348
해결됨
[코드캠프] 강력한 CSS
안녕하세요 단위심화 강의 중 두 번째 실습 과정 중, 두 번째 줄에 사진이 3개만 들어가는데 왜 그런건지요..?? flex-wrap: wrap; 까지 적용시켰는데 영상과는 다르게 되네요..
liltjay
2023-02-05T02:34:21.933Z
댓글 1
좋아요 0
조회수 366
미해결
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
안녕하세요 콘솔에 404 에러가 떠서 목서버를 확인해보니 아래와 같은 오류가 떴는데 이러한 경우 어떻게 해결할 수 있을까요.. { "error": { "name": "usageLimitError", "header": "Usage limit reached", "message": "Your team plan allows 1000 mock server calls per month. Contact your team Admin to up your limit." } }
html/css tensorflow javascript node.js 머신러닝 배워볼래요? react nodejs 머신러닝 react-native HTML/CSS express
유영
2023-02-04T08:12:41.733Z
댓글 1
좋아요 0
조회수 651
미해결
부트스트랩 5(Bootstrap 5) - 기초부터 웹 프로젝트 만들기
강사님이 올려주신 파일 그대로 열었는데 이런식으로 깨집니다. 어떻게 해결해야하나요? <!DOCTYPE html> <html lang="en"> <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"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <link rel="stylesheet" href="/assets/css/app.css"> <title>My Second Web</title> </head> <body> <header id="header" class="wrapper"> <section id="navTop" class="nav-top py-2 d-none d-md-block"> <div class="container"> <div class="row align-items-center justify-content-center"> <div class="col-3 text-start lead fast-counsel"> <a href="#" class="btn btn-outline-dark">Contact</a> </div> <div class="col-4 logo"> <a href="index.html" class="navbar-brand d-flex"> <img src="/assets/images/dummy-logo.png" alt="" class="img-fluid ms-auto" width="200px" data-bs-toggle="tooltip" data-bs-placement="bottom" title="My amazing website!!"> </a> </div> <div class="col-5 text-end socials"> <a href="#" class="mx-1 text-decoration-none"> <img src="/assets/images/icon-phone.png" alt="Phone" width="40px" class="shadow-box"> </a> <a href="#" class="mx-1 text-decoration-none"> <img src="/assets/images/icon-kakao-channel.png" alt="Kakao Channel" width="40px" class="shadow-box"> </a> <a href="#" class="mx-1 text-decoration-none"> <img src="/assets/images/icon-facebook.png" alt="Facebook" width="40px" class="shadow-box"> </a> <a href="#" class="mx-1 text-decoration-none"> <img src="/assets/images/icon-twitter.png" alt="Twitter" width="40px" class="shadow-box"> </a> <a href="#" class="mx-1 text-decoration-none"> <img src="/assets/images/icon-youtube.png" alt="Youtube" width="40px" class="shadow-box"> </a> </div> </div> </div> </section> <nav id="navPrimary" class="navbar navbar-expand-md navbar-dark"> <div class="container-xxl"> <a class="navbar-brand d-block d-md-none" href="index.html"> <img src="/assets/images/dummy-logo.png" alt="Logo" class="img-fluid"> </a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navPrimaryContent"> <ul class="navbar-nav mx-auto mb-2 mb-lg-0"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="index.html">Home</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Intro </a> <ul class="dropdown-menu" aria-labelledby="navbarDropdown"> <li><a class="dropdown-item" href="page.html">About us</a></li> <li><a class="dropdown-item" href="page.html">Find us</a></li> </ul> </li> <li class="nav-item"> <a class="nav-link" href="page.html">Documents</a> </li> <li class="nav-item"> <a class="nav-link" href="page.html">Gallery</a> </li> <li class="nav-item"> <a class="nav-link" href="page.html">Blog</a> </li> <li class="nav-item"> <a class="nav-link" href="page.html">Events</a> </li> <li class="nav-item"> <a class="nav-link" href="page.html">Reviews</a> </li> <li class="nav-item"> <a class="nav-link" href="page.html">Reservation</a> </li> <li class="nav-item"> <a class="nav-link btn btn-outline-secondary" href="#"><i class="fa fa-search"></i></a> </li> </ul> </div> </div> </nav> </header> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script> <!-- Kakao map appkey here --> <script src="/assets/js/app.js"></script> </body> </html>
html/css HTML/CSS 웹 디자인 웹-디자인 javascript bootstrap
지루한 오리
2023-02-04T08:02:28.299Z
댓글 1
좋아요 0
조회수 1228
미해결
실용적인 웹 프로그래밍
안녕하세요. '자바 스크립트로 뉴스 기사 본문만 보이게 하기' 강의목차를 수강하는 중간에 궁금한 점이 생겨서 이렇게 질문남깁니다. querySelector는 #이나 . 을 이용하는 걸로 알고있는데, 제가 사용하려는 부분이 i 태그인 경우에는 어떻게 입력해야하는지 모르겠습니다..
html/css HTML/CSS javascript
이다민
2023-02-04T07:43:03.991Z
댓글 1
좋아요 0
조회수 519
해결됨
[코드캠프] 시작은 프리캠프
<div class="left__body__footer"> <div class="wrapper__feel"> <div class="feel__title">오늘의 기분</div> <select class="feel__select"> <option>기쁨 <i class="fa-regular fa-face-smile"></i> </option> select option 에서 기쁨 뒤에 아이콘 삽입하려는데 코드를 어떻게 짜야 아이콘이 삽입이 되는지 질문합니다
html/css javascript HTML/CSS
frontend
2023-02-04T05:09:22.468Z
댓글 1
좋아요 0
조회수 456
미해결
비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
vi /etc/nginx/sites-available/default 수정 전에는 정상 작동합니다. 그런데 아래와 같이 수정하면 에러 발생합니다.
html/css aws git javascript rest-api HTML/CSS mysql github
jksyk
2023-02-04T03:32:36.555Z
댓글 3
좋아요 0
조회수 744
미해결
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
ngrok 연결도 다 했고 url에다가 POSTMAN으로 GET 요청하면 데이터도 잘 불러와지는데 결과창을 보면 데이터가 불러와지지 않아 화면이 제대로 뜨질 않네요...해결 방법이 있을까요?
html/css tensorflow 머신러닝 배워볼래요? node.js react-native express react 머신러닝 nodejs HTML/CSS javascript
hyj_0327
2023-02-03T13:19:28.232Z
댓글 1
좋아요 0
조회수 768
해결됨
[코드캠프] 시작은 프리캠프
학습자료를 노션으로 올려주셨는데 해당 학습자료는 다운로드하여 pdf로 사용이 불가능한 것인가요? 링크를 통해서만 접근이 가능한 것일까요?
html/css javascript HTML/CSS
w3w
2023-02-03T03:21:48.129Z
댓글 1
좋아요 0
조회수 286
