173만명의 커뮤니티!! 함께 토론해봐요.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
fiqma에 무료버전은 코드가 없어 비슷하게 만드는데 한참을 태그 찾고 다녔습니다 ㅠㅠ 비전공자이다보니 너무 부족한 실력에 창피합니다, 부족한점이나 지적사항은 감사히 받아가겠습니다. 추가 질문으로 이름 비밀번호 비밀번호 가로줄 실선이 여백이남아 .title{ color: rgb(121,121,121); } .title input{ width: 470px; } 으로 하여 해결하였는데 위처럼 이중으로 코드 작성이 되어 좋지 않아보이는데 무엇이 문제일까요.. 아래는 과제입니다. .page1{ width: 1920px; height: 1440px; display: flex; align-items: center; justify-content: center; } .minpage1{ width: 670px; height: 960px; display: flex; align-items: center; justify-content: space-evenly; border: 1px solid rgb(170,205,255); border-radius: 20px; box-shadow: 7px 7px 39px 0px rgba(0, 104, 255, 0.25); } input{ border: 0; font-size: 30px; padding: 0 0 12px 0; border-bottom: 1px solid #CFCFCF; } .minpage2{ width: 470px; height: 818px; font-family:"Noto Sans CJK KR"; font-size: 16px; display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; } .title{ color: rgb(121,121,121); } .title input{ width: 470px; } h2{ width: 466px; height: 94px; font-family: "Noto Sans CJK KR"; font-size: 32px; color: rgb(0,104,254); } .agree{ width: 470px; display: flex; gap:10px; color: black; font-size: 14px; border-bottom: 1px solid #E6E6E6; padding-bottom: 10px; } .genders{ display: flex; flex-direction: row; text-align: center; justify-content: center; } button{ color: #0068FF; text-align: center; font-size: 18px; width: 470px; height: 75px; border-radius: 10px; border: 1px solid #0068FF; background: #FFF; } <!DOCTYPE html> <html lang="en"> <head> <title>회원가입</title> <link rel="stylesheet" href="./exercise.css"> </head> <body> <div class="page1"> <div class="minpage1"> <div class="minpage2"> <h2>회원 가입을 위해<br>정보를 입력해주세요</h2> <div class="title">*이메일<br><input type="text"><br></div> <div class="title">*이름<br><input type="text"><br></div> <div class="title">*비밀번호<br><input type="password"><br></div> <div class="title">*비밀번호 확인<br><input type="password"><br></div> <div class="genders"><input type="radio" name="gd">여성<input type="radio" name="gd">남성<br></div> <div class="agree"><input type="checkbox">이용약관 개인정보 수집 이용, 마케팅 활용 선택에 모두 동의합니다.</div> <div><button>가입하기</button></div> </div> </div> </div> </body> </html>
alsdyalsdyd
2024-09-12T22:21:35.480Z
댓글 2
좋아요 0
조회수 192
미해결
뉴욕 프로덕트 디자이너가 알려주는, 입문자를 위한 UX디자인 개론
좋은 사례) Gmail PC 버전 카테고리별 전체 이메일 선택 기능: 왼쪽 상단 전체 이메일 체크 박스 옆에 작은 드롭다운 화살표를 배치함으로써 단순히 전체 이메일이 아닌 카테고리별 (read/unread/starred/unstarred) 전체 이메일을 선택 할 수 있다는 것을 사용자가 직관적으로 이해하게끔 되어있는데, 이는 행동 유도성의 원리에 부합하는 좋은 UX 사례라고 생각합니다. 안 좋은 사례) 카카오 웹툰 어플리케이션: 일반적인 웹툰 독자들은 요일별로 정리 및 나열된 페이지에 익숙한데, 어느 시점부터 카카오 웹툰 어플은 가장 첫 화면에 장르별 웹툰을 배치했고 하단 메뉴에서 '시간표'를 클릭해야 일반적으로 익숙한 요일별 웹툰을 볼 수 있습니다. 10년 이상된 웹툰 독자로서 저는 해당 UI가 아직도 익숙하지 않아 원하는 웹툰을 찾기 위해 헤매는 경우가 종종 있습니다. 이는 일관성의 원리의 기준에서 안 좋은 UX 사례라고 생각됩니다.
Yoolim Hwang
2023-12-05T05:33:10.641Z
댓글 2
좋아요 0
조회수 731
해결됨
[코드캠프] 시작은 프리캠프
완벽하지는 않지만, 이미 올려주셨던 분들의 코드까지 참조해서 좀 더 나은 버전으로 만들어 봤습니다. 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; }
회원가입 HTML/CSS 과제 javascript css 정렬 코드 공유
최다니엘
2022-12-31T13:27:49.797Z
댓글 1
좋아요 2
조회수 3751
미해결
제목과 같습니다. 커리큘럼 상에는 시험이 없지만 중간에 시험이나 과제 등이 있을까요?
김준호
2021-11-08T02:38:29.524Z
댓글 0
좋아요 0
조회수 223
미해결
프로그래밍, 데이터 과학을 위한 파이썬 입문
수고 많으십니다. 4달 전 수강까지는 과제 제출이 문제 없이 되었습니다. 이번에 다시 8강부터 과제 제출 후 강의를 수강하려 했으나, 과제 제출 시 "hash key is already used."오류가 발생하고 과제 제출 확인이 되지 않는 문제가 발생하고 있습니다. 이전 문의 내용을 확인해봤을때, 제가 사용한 해쉬키는 상단 hashkey에 나와있는 sub-a2df1-155826-????4 를 사용했습니다 install.bat까지 실행해봤을 때 backend.ai-client 모듈 설치 관련해서는 문제가 없는 것으로 보입니다. 어떤 문제인지 확인 부탁드리겠습니다.
과제 bigdata 과제제출 python 문제 과제제출문제 과제오류 제출오류 해쉬오류 hash
차윤성
2021-11-07T16:17:11.329Z
댓글 0
좋아요 0
조회수 469
