묻고 답해요

173만명의 커뮤니티!! 함께 토론해봐요.

input 태그 / flex 정렬

해결됨

[코드캠프] 시작은 프리캠프

안녕하세요. 취업을 목표로 공부하고 있는 코린이 입니다. 섹션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">  <div class="Group5">  <div class="Title"> 회원가입을 위해<br> 정보를 입력해주세요 </div>  <div class="Group1"> <div class="Textbox">* 이메일</div> <div class="vector1"></div> </div>  <div class="Group1"> <div class="Textbox">* 이름</div> <div class="vector2"></div> </div>  <div class="Group1"> <div class="Textbox">* 비밀번호</div> <div class="vector2"></div> </div>  <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
input
javascript
HTML/CSS
flex
정렬

강우주 2023-02-08T14:23:23.627Z 댓글 1 좋아요 0 조회수 2270

CSS정렬 - 회원가입 과제 코드 공유

해결됨

[코드캠프] 시작은 프리캠프

완벽하지는 않지만, 이미 올려주셨던 분들의 코드까지 참조해서 좀 더 나은 버전으로 만들어 봤습니다. 100% 완전하지는 않은 코드지만 그래도 가시적으로 보기에는 더 나은 것 같아서 코드 공유 드립니다.  <!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>   <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>   <form> <input type="radio" class="radio" name="gender">&nbsp 여성 <input type="radio" class="radio" name="gender">&nbsp 남성 </form> <br><br> <form> <input type="checkbox" class="agree">&nbsp 이용약관 개인정보 수집 및 정보이용에 동의합니다. </form> <hr> <hr> <button>가입하기</button>    </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 조회수 3753

s(문자열) 과 d(정수) 의 {:x} 구문 사용시 정렬 다른거 맞나요?

미해결

프로그래밍 시작하기 : 파이썬 입문 (Inflearn Original)

부등호를 사용하지 않고, 콜론만 사용하여 정렬시, default 로 문자열로 지정하여 정렬하면, 왼쪽 정렬이 되고, print('{:10s}' , format(nice)) -> 왼쪽 정렬 정수로 지정하여 정렬하면, 오른쪽 정렬이 되는게 맞나요? print('{:10d}' , format(42)) -> 오른쪽 정렬 강의를 보면, 그렇게 정렬이 된것 같은데, 설명을 안해주셔서요. 문자와 숫자가 다른 경우들이 또 발생하나요?

정렬
python

swlee523 2021-09-16T02:24:26.806Z 댓글 1 좋아요 0 조회수 270

버블정렬 질문입니다.

미해결

데이터 자동화(with VBA)

안녕하세요, 강의 잘 보고 있습니다. new collection 배열안에 있는 요소들을 버블정렬을 이용해서 정렬을 하셨는데 아시다시피 버블정렬은 시간복잡도가 O(n^2)로 데이터 수가 많을수록 속도가 상당히 느려지는데 이를 보완하기 위해 병합정렬이나 퀵소트가 있는걸로 알고있습니다. 액셀 내에서는 이러한 merge sort나 quick sort를 내장함수로 지원하지 않는지 궁금합니다. 무조건 버블정렬을 써야하는지, (현업에서는 그냥 써도 무방하니까 쓰는 것인가요?? ㅎㅎ) 궁금하네요!

정렬
excel
VBA

녕나 2021-04-08T08:40:59.144Z 댓글 1 좋아요 1 조회수 419

Spring Sort를 QueryDSL 변환 적용하는 방법 문의

미해결

실전! Querydsl

안녕하세요. 강사님 QueryDSL 재미있게 배웠습니다. 정렬기준을 아래와 같이 받았을 때 pageable 파라미터를 이용해서 QueryDSL에 적용하는 방법에 대해서 고민입니다. 정렬기준 입력 형태: URI?sort=field1,asc&sort=field2,desc org.springframework. data .domain.Sort 방법1. pageable 값을 얻어와 직접 queryDSL에 OrderSpecifier로 지정 if (pageable != null) { query.offset(pageable.getOffset()); query.limit(pageable.getPageSize()); for (Sort.Order o : pageable.getSort()) { PathBuilder<Object> orderByExpression = new PathBuilder<Object>(Object.class, "object"); query.orderBy(new OrderSpecifier(o.isAscending() ? com.mysema.query.types.Order.ASC : com.mysema.query.types.Order.DESC, orderByExpression.get(o.getProperty()))); } } 방법2. applyPagination() 함수로 매핑 getQuerydsl().applyPagination(pageable, jPQLQuery); 결과적으로 방법2가 더 깔끔해 보이는데 원본 엔티티와 DTO객체가 달라서 org.hibernate.hql.internal.ast.QuerySyntaxException이 발생하는 이슈가 있습니다. 현재까지 결론은 방법1을 사용해야할 것으로 보이는데 더 좋은 방법을 아시는지 문의드립니다. 감사합니다.

querydsl
sort
JPA
정렬
java
변환

배워야산다 2021-02-14T15:10:18.971Z 댓글 1 좋아요 0 조회수 2794

인프런 TOP Writers

주간 인기글

[부산] AI 세미나 : 9월 수강생 모집 Edun
🚀 끝까지 만들어 본 적 있나요? | 실서비스 완성 + 수익 창출 모임 💰 catalyst collectiv
🚀 끝까지 만들어 본 적 있나요? | 실서비스 완성 + 수익 창출 모임 💰 catalyst collectiv
9월 출시 예정 공연 예매 플랫폼 멀티켓과 함께할 백엔드 개발자를 구합니다 sumin
🚀 끝까지 만들어 본 적 있나요? | 실서비스 완성 + 수익 창출 모임 💰 catalyst collectiv