49,500원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결CSS Flex와 Grid 제대로 익히기
https://www.inflearn.com/questions/64102
https://www.inflearn.com/questions/64102 이전 질문에서 설명해주신걸 보았으나 잘 이해가 가지 않아 다른 질문 드립니다! height: 0; padding-bottom: 60%; 을 주면 보이지 않던 이미지가 보이게 되는데 그 이유가 아직도 잘 이해가 안갑니다. 올려주신 이전 답변에서 padding bottom만 남고 height은 0이 되는데 어떻게 보이지 않던 이미지가 보이게 되는건지... 다시 설명을 부탁드리겠습니다 ㅠㅠ 감사합니다!
- 미해결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 여기를 보았고 제가 엉뚱한 곳을 보고 있는것인지요. 이유가 정말! 궁금합니다 . 혹시 알려주실 수 있을까요? ㅠㅠ 시간 내주셔서 감사합니다!
- 미해결CSS Flex와 Grid 제대로 익히기
.modal에 대한 스타일 속성 질문
해당 강의에서 .modal에 대해position: fixed;left: 0;right: 0;top: 0;bottom: 0;를 입력하니까 화면에 꽉 차는 것이 이해가 안되는데요, 그냥 위에처럼 입력하면 그 element는 부모 element의 width & height 만큼 크기를 갖게 된다고 생각하면 될까요?(강의 코드에서는 .modal 클래스가 가리키는 element의 경우 position이 fixed이므로 body 태그가 부모 element인 것으로 이해했습니다)
- 미해결CSS Flex와 Grid 제대로 익히기
flex의 align-content 질문
선생님 align-content가 flex-wrap이 wrap일때 넘치는 요소 처리 방법이잖아요 근데 align-content적용 했는데 왜 넘치지도 않았는데 flex-end를 쓰면 왜 밑으로 내려가나요?
- 미해결CSS Flex와 Grid 제대로 익히기
재생이 안되요..
Flex 핵심정리 #8 - 개별 아이템 속성 이부분 재생이 되지않아요..
- 미해결CSS Flex와 Grid 제대로 익히기
#5 width 관련 질문
이게 유연하니까 더 헷갈리는거 같은데, 그러니까... width 를 주면, 블록처럼 되는 성질이 있는건가요. 그래서 border-box 를 줘야 하는걸까요? border-box 안주면 3번째부터 2개가 밑으로 떨어지더라구요.
- 미해결CSS Flex와 Grid 제대로 익히기
display: flex
안녕하세요! 위 강의 내용에서 display: flex만 주면 figure과 div 가 나란히 row 방향으로 배치될 것이라 생각했는데, div의 내용만 보이네요. 이유가 figure의 height가 0이라서 그런건가요? 왜 그런거죠?
- 미해결CSS Flex와 Grid 제대로 익히기
flex-shrink 속성은 flex-grow속성이 1 이상되면 속성이 무시되나요?
flex-shrink 속성 기본 값 이 1이라서 컨텐츠가 크기에 맞게 줄어드는것을 확인했습니다. 하지만 flex-grow 속성 값이 1 이상이되었을때 flex-shrink 속성값이 1이여도 박스가 줄어들지 않던데 맞는건가요? flex: 1 1 auto; // flex-shrink 속성을 1, 0을해도 결과는 같음 flex: 0 1 auto; // 정상작동
- 미해결CSS Flex와 Grid 제대로 익히기
height 관련 여쭤보고싶습니다 선생님
안녕하세요 선생님.아래 사진은 현재 flex-grow 를 하지 않은 상태입니다.height의 값이 세번째 카드에 맞춰져서 높이가 맞춰진걸 확인할 수 있는데요 이게 왜 이렇게 적용이 자동으로 되는걸까요?
- 미해결CSS Flex와 Grid 제대로 익히기
flex-basis 예제 질문드립니다
https://codepen.io/swimmimg-goggle/pen/XWMLjpx 영문 띄어쓰기 혹은 한글로 작성시에 해당 속성이 적용되지 않았습니다. 혹 왜그런지 알 수 있을까요?
- 미해결CSS Flex와 Grid 제대로 익히기
max-width
만약 모바일 버전 위주로 코등을 했다면 min-width로 설정해야학 데탑위주로 코등을 했다면 max-width로 설정해야 할까요 ?!
- 미해결CSS Flex와 Grid 제대로 익히기
안녕하세요!
body { display: flex; align-items: center; justify-content: center; transform: perspective(1000px); /* perspective: 1000px; */ color: black; background: #fff000; } 위와 같이 transform 속성에 perspective를 주어도 똑같은건가요 ? 두개 같은 문법이라면 보통 어느 표현을 더 자주 사용할까요 ?? 애니메이션 효과가 조금 부족한테 유튜브 영상으로만 들어도 충분할까요 아니면 다른 강의도 결제해서 듣는게 나을까요?
- 미해결CSS Flex와 Grid 제대로 익히기
정렬 질문있습니다 !
만약 1개의 태그가 4개가아닌 그 이상의 태그가 존재할 경우에는 3/4 이런식으로 명시해주면 정렬이 정상적으로 작동되나요 ? 그 밑으로도 관련 태그들을 정렬하면서 홀수개로 카테고리 갯수가 종료되면 다음 카테고리가 시작되어야하는데 이럴경우 어떻게 대처하는지 궁금합니다.
- 미해결CSS Flex와 Grid 제대로 익히기
그리드로 만들어낼 수 있는 창의적인 방법
덮어씌워 만들 수 있는 게 어떤게 있을까요 ? 간단하게라도 알려주시면 감사하겠습니다 ! 떠오르지않아서
- 미해결CSS Flex와 Grid 제대로 익히기
안녕하세요 footer 관련 질문 드립니다 !
footer에서 width 가 줄어들어서 width:100%채워주셨는데 왜 줄어든걸까여 ? 줄어든 이유를 모르겠습니다 그럼 그 전에는 안 줄어든건가요 ?! 윗 컨텐츠 영역에서는 20% 60% 20% 이렇게 총 100%가 채워졌을텐데 footer 부분에서도 따로 width 값을 명시해줘야한다는 말씀이신건가요 ? 만약 이 말이 맞다면 그 전에는 왜 정상 작동됐는지 궁금합니다 !
- 미해결CSS Flex와 Grid 제대로 익히기
display: flex와 display:none 함께 사용하는 법.
안녕하세요 1분코딩 너무나도 재밌게 듣고있는 수강생입니다 ^^ 선생님 제가 flex를 이용해서 메뉴바를 만드는데 (2단으로 만듭니다. float : left로 사용해왔는데) display:none을 flex와 같이 사용하면 display:none을 적용하면 플랙스 적용된 위치가 자꾸바뀌어요! 제이쿼리나 자바스크립트를 이용해서 display했던 것을 보이게 하면 또 바뀌어있고요! 이거 해결방법있으실까요?ㅠㅠ
- 미해결CSS Flex와 Grid 제대로 익히기
뭘 잘못 건드렸을까요? 어느 부분 문제로 보이는지 말씀부탁드리겠습니다ㅠ
ui.css /* menu */ .menu { display: flex; flex-direction: row; } .menu-item { /* flex-grow: 1; */ width: 25%; background: gold; transition: 0.5s; } .menu-item:hover { /* flex-grow: 1.5; */ width: 35%; background: crimson; } .menu-link { display: block; padding: 1em; font-size: 1.2rem; font-weight: bold; color: #555; text-decoration: none; text-align: center; } .menu-link:hover { color: white; } /* search */ .search-form { display: flex; height: 40px; } .search-form input[type='search'] { flex: 1; margin-right: 10px; border: 0; border-radius: 0.3em; font-size: 1rem; padding: 0 1em; } .search-form input[type='submit'] { width: 4em; border: 0; border-radius: 0.3em; font-size: 1rem; background: gold; } /* bullet list */ /* https://copychar.cc/ */ .info-list-item { display: flex; margin:0.5em 0; } .info-list-item:before { content: ''; margin-right: 0.5em; } /* message */ .user-item { display: flex; margin-bottom: 1.5em; } .user-photo { flex-shrink: 0; width: 50px; height: 50px; margin: 0.5em; border: 2px solid #333; border-radius: 50%; background-color: gold; background-repeat: no-repeat; background-position: center; background-size: 150%; } /* friend list */ .friend-item { align-items: center; } .user-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* modal */ .modal { display: flex; position: fixed; left: 0; right: 0; top: 0; bottom: 0; background: rgba(0, 0, 0, 0.3); justify-content: center; align-items: center; } .dialog { width: 50vw; padding: 2em; border-radius: 1em; background: white; } /* card list */ .card-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, auto)); column-gap: 2%; } .card-item { display: flex; flex-direction: column; margin-bottom: 2rem; } .card-image { height: 0; padding-bottom: 60%; background: lightgray; background-repeat: no-repeat; background-position: center; background-size: cover; } .card-image img { display: none; } .card-desc{ flex: 1 1 auto; padding: 1em; background: white; } ui-page.css .header { display: flex; justify-content: space-between; height: 80px; align-items: center; padding:0 1rem; } /* .header에 justify-content: space-between; 대신 사용 가능 */ /* .search-form { margin-left: auto; } */ .website-title { flex-shrink: 0; margin-right: 10px; color: #555; } .search-form { width: 240px; max-width: 60%; margin-left: auto; margin-right: 3rem; } .primary { padding:1rem; } @media (max-width: 600px) { .menu { flex-direction: column; } .menu-item { width: 100%; transition: none; } .menu-item:hover { transition: 0.5s; width: 100%; } } .secondary { padding: 1rem; } .secondary-a { background:white; } .secondary-b { color: white; background:#666; } .footer { padding: 1rem; border-top: 1px solid lightgray; text-align: center; } .mb2rem { margin-bottom: 2rem; } .modal-switch { font-size: 2rem; } .modal { display: none; top: 80px; } #modal-switch:checked ~ .modal { display: flex; } label[for="modal-switch"] { display: inline-flex; align-items: center; justify-content: center; position: absolute; top: 1.3rem; right: 1rem; width: 40px; height: 40px; /* background: red; */ } label[for="modal-switch"]::before { content: "⚑"; font-size: 2rem; } #modal-switch:checked ~ label[for="modal-switch"]::before { color:blue; } #modal-switch, label[for="modal-switch"] span { overflow: hidden; position: absolute; width: 1px; height: 1px; opacity: 0; top: 0; } @media (min-width: 1024px) { .page { display: grid; grid-template-columns: 20% 1fr 20%; grid-template-areas: 'header header header' 'menu menu menu' 'secondary-a primary secondary-b' 'footer footer footer' ; } .header { grid-area: header; } .menu { grid-area: menu; } .primary { grid-area: primary; } .secondary-a { grid-area: secondary-a; } .secondary-b { grid-area: secondary-b; } .footer { grid-area: footer; } } @media (min-width:1400px) { .page { display: grid; grid-template-columns: 300px 1fr 300px; } }
- 미해결CSS Flex와 Grid 제대로 익히기
padding 질문
삭제된 글입니다
- 미해결CSS Flex와 Grid 제대로 익히기
제가 잘 이해하고 있는게 맞다면
flex #7 강의 3:13 초 장면은 늘어난게 아닌 줄어들고 있는거죠 ?? flex-grow 기본 값이 0이고, flex-shrink는 1이니까 지금 확면 꽉차게 늘어난 것처럼 보여도 사실은 content가 길어서 쭉 늘어진 걸 shrink가 줄이고 있는 거구여 ?