묻고 답해요
130만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨[코드캠프] 시작은 프리캠프
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"> <!-- 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; }
-
미해결SCSS(SASS)+GRID+FLEX 실전 포트폴리오 퍼블리싱
live sass complier 버전 문제
안녕하세요!live sass compiler 익스텐션 설치 및 세팅 영상 공부하고 있는데요!강의에 나오는 ritwick dey의 익스텐션은 더 이상 사용이 불가하다고 하여, 그 아래에 있는 glenn marks 버전을 설치했습니다.설치 후 json 세팅을 하고 있는데설정 > 확장에 live sass compiler가 나오지 않아 문의 드립니다. sass를 검색했을 때 아래 부분만 나오는데요! json 세팅을 할 수 있는 다른 방법이 있을까요? 감사합니다.
-
미해결
오랜만에 웹설계 업무로 돌아와서 최근 경향 질문드립니다.
전에 잠깐 웹페이지 제작 업무를 맡게 되어서html/css/js와 반응형 미디어 쿼리로 웹사이트를 만들었는데저는 px단위로 크기를 잡고 position으로 위치를 잡았는데 요즘은다양한 방법들이 있더라구요 제가 전담해서 프론트 개발을 할개 아니라화면설계와 간단한 데이터베이스 웹 연동, 테스트용 서비스 페이지 제작정도만하려고 합니다.퇴근 후, 주말 시간을 활용해서 관련 공부를 하려고 하는데 flex&grid같은걸 공부할지다른 프레임워크같은걸 공부할지 고민입니다.미디어쿼리나 자바스크립트 같은건 기억이 조금은 나는데 레이아웃 잡는게어렵네요..ㅠㅠ 선배님들 도와주세요 ^^
-
미해결CSS Flex와 Grid 제대로 익히기
flex 모달 만들때
position: fixed; left: 0; right: 0; top: 0; bottom: 0; 이부분이 적힌것에 대해서 질문하려고 하는데요, 포지션 고정시킨후 위아래 왼쪽 오른쪽 0을 했는데, 모달이 중간에 오게 되는게 잘 이해가 안돼요. (저부분 없이) justify-content, align-items로만 하면 왜 안되는건가요? (왜 정중앙에 오지 않는걸까요?) position에 대해 이해가 부족해서 그런지 이해가 잘 안돼요^^ㅎㅎ
-
미해결CSS Flex와 Grid 제대로 익히기
flex-basis 문의드립니다.
flex-basis 문의드립니다. 혼자 해보면서 잘 안되어 문의드립니다. 우선 강사님 코드는 당연히 잘 되는데요. flex-basis: 100px width: 100px 를 비교할 때 item요소에 한국어나 띄어쓰기가 들어가면 제대로 동작하지 않던데 왜 그런 것인가요? ex) flex-basis : 100px aaaaa aaa aaaa 이런 식으로 하면 자동으로 다음줄로 이동합니다.
-
해결됨플렉스(Flex) 반응형 웹사이트 포트폴리오(The World's Best Cities)
질문드립니다 강사님
강사님 각각의 section안의 .inner 바로 밑에 class 명 주실때 - heading 과 -content가 section 마다 다르게 붙는데 그 기준이 혹시 따로 있는지 궁금해서 여쭤봅니다!
-
미해결<M.B.I.T> 테스트 페이지 만들기! with Django
display: flex 오류
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.\ 안녕하세요 선생님 ㅠ css적용하는데 display: flex; 적용하자마자 이 난리가 납니다... 왜그럴까요? #main_contents { display: flex; justify-content: center; margin-top: 100px; width: 100%; height: 100%; }
-
미해결[리뉴얼] 코딩자율학습 제로초의 자바스크립트 입문
flex 관련해서 질문 있습니다.
안녕하세요. 제로초님 제로초님 하고 같이 진행한 미니 프로젝트들 더 예쁘게 만들어보고 싶어서 html하고 CSS을 추가 작업하고 있는데요. 현재 이런 틀을 만들려고 합니다. 그리고 다 완성도 했는데... 작업 도중에 이해가 안 되는 부분 2가지가 발생해서 질문드립니다. 질문 코드 링크입니다. => https://codepen.io/uscgil0127/pen/bGobxxq 해당 코드를 확인해보시면, CSS 부분에 Q1. max-height를 설정해줬는데, 왜 내부의 박스들이 overflow해도 height가 max 값만큼 늘어나지 않나요?? => 제 생각에는 내부 박스들이 외부 박스를 삐져나오면, max-height가 발동해서 늘어날 수 있는만큼 늘어날 거라고 생각했는데, 늘어나지를 않네요;;;;;; max 값만큼 height가 늘어나지 않으면, max-height의 유용성을 잘 모르겠습니다... --------------------------- Q2. CSS 부분에서 .h20 .h40 .h80 에서 flex: 4 0 40%; 를 적용해주면 margin 값인 0.5rem이 포함되서, container 박스를 overflow한 것같은데, 왜 그냥 height: 20%를 설정해줬을 때는 박스를 overflow하지 않는 걸까요?? ---------------------------- 어떻게든 구글링해서 이해해보려고 했는데, 도저히 이해가 안되서 부득이하게 질문드립니다. 감사합니다.
-
미해결CSS Flex와 Grid 제대로 익히기
flex 관련해서 질문 있습니다.
flex 연습 삼아서, 이런 모형을 만들어봤는데요. 만드는 도중에 이해할 수 없는 부분이 2가지 있어서 질문드립니다. 질문에 관한 코드 링크입니다. => https://codepen.io/uscgil0127/pen/bGobxxq Q1. max-height를 설정해줬는데, 왜 내부의 박스들이 overflow해도 height가 max 값만큼 늘어나지 않나요?? => 제 생각에는 내부 박스들이 외부 박스를 삐져나오면, max-height가 발동해서 늘어날 수 있는만큼 늘어날 거라고 생각했는데, 늘어나지를 않네요;;;;;; max 값만큼 height가 늘어나지 않으면, max-height의 유용성을 잘 모르겠습니다... --------------------------- Q2. CSS 부분에서 .h20 .h40 .h80 에서 flex: 4 0 40%; 를 적용해주면 margin 값인 0.5rem이 포함되서, container 박스를 overflow한 것같은데, 왜 그냥 height: 20%를 설정해줬을 때는 박스를 overflow하지 않는 걸까요?? ---------------------------- 어떻게든 구글링해서 이해해보려고 했는데, 도저히 이해가 안되서 부득이하게 질문드립니다. 감사합니다.
-
해결됨SCSS(SASS)+GRID+FLEX 실전 포트폴리오 퍼블리싱
질문있습니다
섹션 3. SCSS 핵심이론 활용 예제(Examples of using)까지 듣고 평소에 관심 있던 네비바 디자인을 연습삼아 하고 있습니다. 밑에 링크는 제가 관심있던 네비바 디자인를 사용하고 있는 웹사이트 입니다. 웹사이트 삼성화재 바로가기 밑에 링크는 codeopen으로 제가 비슷하게 만들어 봤습니다. codepen 바로가기 네비바 아이템에 마우스 오버되면 서브 메뉴가 스르륵 내려가게 하고 싶습니다. 현재 디스플레이 none block 으로 만들었습니다. opacity 으로 적용 했지만 해결되지 않았어요. 혹시 좋은 방법 없을까 하고 질문올립니다.
-
미해결CSS Flex와 Grid 제대로 익히기
flex UI #1 메뉴와 #4 메시지리스트 #7 카드리스트 질문있습니다!
안녕하세요 강사님! flex UI #1 메뉴 에서 flex-grow는 자식요소 정렬한 뒤 100%로 늘리기 위해서 사용하면 IE에서 일부 지원이 되지 않는 것이 있으니 %로 사용하는 방향으로 이해를 했는데요. flex UI #4 메시지리스트 수업에서는 좌측의 이미지 너비를 줄어들지 않게 하기 위해서 flex-shrink를 사용하셨던데 이것은 IE에서 지원이 가능한건가요? #7 카드리스트에는 <figure class="card-img" style="background-image: url(ryon.png);"> <img src="ryon.png" alt="라이언"> </figure> 구조를 짠 뒤 css에서 img를 none 처리 하는 이유가 무엇인지 궁금합니다. :D 감사합니다!!
-
미해결CSS Flex와 Grid 제대로 익히기
flex-grow, shrink, basis 속성에 대해 궁금한게 있습니다!
강사님 안녕하세요 유용하고 재미있는 수업 잘 듣고 있습니다! :) flex 관련 책을 별도로 보다가 챕터는 flex-grow, shrink, basis에 관한 내용을 다루는 챕터였고요. W3C 플렉서블 박스 기술 명세에 따르면 '박스의 크기 증감 속성을 개별적으로 사용하는 것'을 추천하지 않고 있습니다. 라고 되어 있어서 궁금해서 사이트를 가보았는데 별다른 내용(?)을 찾지 못했는데요. https://www.w3schools.com/css/css3_flexbox.asp 여기를 보았고 제가 엉뚱한 곳을 보고 있는것인지요. 이유가 정말! 궁금합니다 . 혹시 알려주실 수 있을까요? ㅠㅠ 시간 내주셔서 감사합니다!
-
미해결
웹디자인기능사에서 Flex 관련 속성은 쓰면 안되나요?
이번에 강의에서 Flex에 대한 것을 배웠는데요, 기존에 웹디자인기능사 공부를 하면서 flex를 적용해보니 더 수월하더라고요, 그런데 이 Flex가 웹디자인기능사에서 사용해도 되는지 안되는지 찾아보니 어느 곳에서는 써도 된다고 하고 다른 곳에서는 쓰면 안된다고 하여 확실치 않아 인프런에 이렇게 질문드립니다. 혹시 웹디자인기능사에서 Flex 관련 속성은 쓰면 안되나요? 아니면 Flex 외에도 웹디자인기능사에서 사용하면 안되는 css 속성 등이 있을까요? 시험지들을 봐도 css 금지 속성은 보이지 않긴 하지만 css에서 flex를 써도 되는지 모르겠습니다.
-
미해결CSS 기본부터 활용까지
css수업-flex 4:holy grail layout
<!-- section의 세 개: navigation, main, aside를 수평으로 layout --> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .container{ display:flex; flex-direction:column; } header{ border-bottom:1px solid gray; } footer{ border-top:1px solid gray; } .content{ display:flex; } .content nav{ border-right:1px solid gray; } .content aside{ border-left:1px solid gray; } nav,aside{ fles-basis:150px; } </style> </head> <body> <div class="container"> <header> <h1>생활코딩</h1></header> <section class="content"> <nav> <ul> <li>html</li> <li>css</li> <li>javascript</li> </ul> </nav> <main> 생활코딩은 일반인을 위한 코딩 수업 </main> <aside> /* 광고부분 */ AD </aside></section> <footer> <a href="https://opentutorials.org/course/1">홈페이지</a></footer> </div> </body> </html> Q. nav,aside{}부분은 왜 .content nav 이런식이 아닌 이유가 무엇인지 궁금합니다.
-
미해결CSS Flex와 Grid 제대로 익히기
flex-basis 예제 질문드립니다
https://codepen.io/swimmimg-goggle/pen/XWMLjpx 영문 띄어쓰기 혹은 한글로 작성시에 해당 속성이 적용되지 않았습니다. 혹 왜그런지 알 수 있을까요?
-
미해결CSS Flex와 Grid 제대로 익히기
display: flex와 display:none 함께 사용하는 법.
안녕하세요 1분코딩 너무나도 재밌게 듣고있는 수강생입니다 ^^ 선생님 제가 flex를 이용해서 메뉴바를 만드는데 (2단으로 만듭니다. float : left로 사용해왔는데) display:none을 flex와 같이 사용하면 display:none을 적용하면 플랙스 적용된 위치가 자꾸바뀌어요! 제이쿼리나 자바스크립트를 이용해서 display했던 것을 보이게 하면 또 바뀌어있고요! 이거 해결방법있으실까요?ㅠㅠ
-
미해결vue.js 실전 프로젝트(트위터 클론)
flex-1 질문드립니다.
flex 를 초기화한다는게 이전에 부모쪽에서 선언한 flex 설정들을 초기화하고 완전 따로 논다는 그럼 느낌으로 사용하면 될까요?
-
해결됨CSS Flex와 Grid 제대로 익히기
align-items 관련 질문드려요
안녕하세요 선생님 Flex UI#5번 유저리스트 공부하다 질문 있어서 글 남겨요 li.friend-item 안에 figure.user-photo 와 p.user-name이 같이 있는데 align-items:center를 줬을 때, 왜 p 태그=텍스트만 가운데 정렬되는 건가요? (혹시.. user-photo 값에 height:50px을 줬기 때문에 사진은 크기, 위치를 유지하고 텍스트만 50px 안에서 가운데 정렬돼서 그런 건가요?)
-
미해결퍼블리싱 핵심이론 PDF 교재 및 예제파일(HTML+CSS+FLEX+JQUERY)
수강기한 관련 문의
안녕하세요! 현재 퍼블리싱 관련 강의를 수강하고 있는 도중 궁금한 점이 생겨 문의드립니다. "퍼블리싱 핵심이론 PDF 교재 및 예제파일"에 수강 기한이 있는 것을 확인하였는데, 추후 교재가 수정이 된다면 기한이 끝나고 난 후 강의를 다시 구입해야 하나요? 만약, 다시 구입해야 한다면 교재가 수정(또는 개정)되었다는 것을 어떻게 알 수 있을까요? 인프런 강의에서 확인하는 방법이 될까요?
-
미해결CSS Flex와 Grid 제대로 익히기
gap, padding-bottom
1. gap에서는 어떤 기준으로 %가 동작하나요? 2. padding-bottom의 %값 기준은 figure태그의 부모인 li의 width 기준으로 잡히는게 맞을까요?