묻고 답해요
156만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결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 기준으로 잡히는게 맞을까요?
