49,500원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결CSS Flex와 Grid 제대로 익히기
"Flex UI #7 - 카드 리스트" 에서 gap을 사용하지 않는 이유가 있을까요?
안녕하세요! 카드리스트를 만들때 .card-item 간 간격을 padding으로 설정하고, 그것을 감싸는 .card-list 에 마이너스 margin 값을 주어 처리하는 방법으로 안내를 주셨는데요, ( 그 밖에 container에 overflow: hidden 마지막에 설정) 혹시 이부분 .card-list에 gap 값을 지정해서 간격을 주면 마이너스 마진이나 다른처리가 필요없는것 아닌가 해서요..! 혹시 gap 을 사용하지 않는 이유가 있을지 궁금해서 여쭤봅니다..! (ie브라우저 이슈등이 있을지요.??)
- 미해결CSS Flex와 Grid 제대로 익히기
[ Grid 반응형 페이지 Step3 ] 영상 업데이트
[ Grid 반응형 페이지 Step3 ] 2:55 지점에서 gap: 2%;를 column-gap: 2%;로 수정하라고 하시고, 영상 업데이트도 곧 하신다고 하셨는데, 영상이 그대로인거 보니 깜빡 하신 것 같아요~!
- 미해결CSS Flex와 Grid 제대로 익히기
auto-fill, minmax(200px, auto) 중 auto에 대해서
안녕하세요. auto-fill, minmax(200px, auto) 일 경우 auto는 어떤 알고리즘을 갖는지 명시된 곳이 있을까요? 전 max에 auto니까 컬럼이 늘어날 수 있는만큼 자동으로 늘어난다 로 이해하고 있었는데, 남는 공간을 차지하지 않더라구요 auto-fill/auto-fit의 차이로는 남는 공간에 대해서 이해할 수 있는데, max로써 auto가 어떤 이유로 max값을 만들었고 남는 공간이 생겼는지 궁금해져서 남겨봅니다
- 미해결CSS Flex와 Grid 제대로 익히기
안녕하세요! 정리관련 문의드립니다.
안녕하세요! 정말 좋은 강의 제공해주셔서 감사합니다. 다름이 아니라 개인적인 공부를 진행하면서 배운 내용들을 정리한 후 개인 블로그에 항상 업로드를 진행하고 있습니다. 혹시 출저를 명확하게 밝히고 해당 강의도 정리한 내용들을 블로그에 올려도 괜찮은지 궁금합니다!
- 미해결CSS Flex와 Grid 제대로 익히기
프로덱트1-CTA&Map Section 강의 중 잘못된 부분 있는것 같아 올립니다.확인해주세요.
보시면 강의에서 마지막줄 쪽에 </div> 태그 하나 빼먹으신것 같은데요. 강의를 또 반복듣고 해도 폼요소가 Contact us!라고 적힌 타이틀 박스안에 안들어 오길래~ 왜그럴까 보니 강사님이 영상 잘 확인해 보시면 </div> 태그 하나가 빠지셨더라고요. 확인해주세요. </div> </div> </div> </section> My BSS web Home Intro Services Slogan Gallery Contact Find us Welcome to my first website. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquid, temporibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Est laborum a dolorem sapiente iusto ab repellat quia eius reprehenderit eos! Read more Easy contact! Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis, quis. I agree to provide privacy. Submit Link 1 Link 2 Link 3 Link 4 Greetiongs! Introduce our website. Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem dicta sequi voluptatibus rerum voluptatum officia iste voluptates asperiores! Laudantium minima mollitia unde magnam quia doloribus veniam quasi odio hic a. Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor, dolorum sint minima rem doloribus dolore aliquid distinctio labore aperiam tenetur. Our amazing services Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque error provident ad ipsum iste facere blanditiis quas deleniti doloremque non. Skide title Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam fugiat repellendus numquam dolorem rem, temporibus quis aperiam odit! Neque, iure. View more... Skide title Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam fugiat repellendus numquam dolorem rem, temporibus quis aperiam odit! Neque, iure. View more... Skide title Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam fugiat repellendus numquam dolorem rem, temporibus quis aperiam odit! Neque, iure. View more... Skide title Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam fugiat repellendus numquam dolorem rem, temporibus quis aperiam odit! Neque, iure. View more... Skide title Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam fugiat repellendus numquam dolorem rem, temporibus quis aperiam odit! Neque, iure. View more... Skide title Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam fugiat repellendus numquam dolorem rem, temporibus quis aperiam odit! Neque, iure. View more... Our Slogan... Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque repellendus delectus possimus eos debitis recusandae blanditiis atque assumenda itaque quos! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque repellendus delectus possimus eos debitis recusandae 1 Feature 1 Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci odit consequatur laudantium neque harum vitae provident omnis sapiente ut hic! 2 Feature 2 Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci odit consequatur laudantium neque harum vitae provident omnis sapiente ut hic! 3 Feature 3 Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci odit consequatur laudantium neque harum vitae provident omnis sapiente ut hic! Our gallery Lorem, ipsum dolor sit amet consectetur adipisicing elit. Delectus mollitia dolorem et molestiae minima, necessitatibus facere a exercitationem dolorum qui? Gallery 1 View this gallery Gallery 2 View this gallery Gallery 3 View this gallery Gallery 4 View this gallery Gallery 5 View this gallery Gallery 6 View this gallery Contact us anytimes! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Non, iusto vero nisi voluptatem quis optio recusandae nobis excepturi? Quam, error? 02-111-1111 Contact us! Lorem ipsum dolor sit amet consectetur adipisicing elit. At, nemo! phone: 02-11-1111 email: jdoe@email.com I agree to provide privacy. Send!
- 미해결CSS Flex와 Grid 제대로 익히기
flex1 flex3 flex1 관련 질문드립니다!
선생님 안녕하세요! flex-basis:0의 의미가 아이템이 기본적으로 점유하는 크기가 0이 된다라고 이해하고있습니다. 선생님 강의를 듣던중 flex: 1 => flex-grow:1 / flex-shrink:1 / flex-basis:0 flex: 3 => flex-grow:3 / flex-shrink:1 / flex-basis:0 flex: 1 => flex-grow:1 / flex-shrink:1 / flex-basis:0 이런식으로 나오게 되는데 이렇게되면 basis가 0 즉 아이템이 점유하는 기본크기가 0 이므로 컨테이너의 전체 넓이를 1:3:1로 가져가는 것으로 이해를 했습니다! 하지만 개발자 도구화면가서 div들의 width 값을 보게 되면 정확히 1:3:1 의 비율이 나오지 않더군요 ㅠㅠ 제가 잘못 이해하는 부분이 있을까요?
- 미해결CSS Flex와 Grid 제대로 익히기
미디어 쿼리 질문 및 primary 질문
1. 저에 브라우저에는(크롬, 브레이브)미디어 퀴리를 1400px로 지정을 안해도 secondary-b 가 알아서 사이즈가 늘어납니다.왜 이런지 궁금합니다.2. primary 맨 하단에 보시면 secondary-a 와 secondary-b 보다 하단이 조금 위쪽으로 있습니다.하단을 똑같이 맞추고 싶은데 이것은 어떻게 하는지 궁금합니다3. ui-page.css .modal 에 top: 80px을 안해줘도 기본값으로 똑같은 위치에 있습니다. 그리고 top:10px 이렇게 수정을 해도 올라가지 않습니다. 내려가는것은 되는데 올라가는 것은 안됩니다.
- 미해결CSS Flex와 Grid 제대로 익히기
padding 0 1rem질문입니다.
안녕하세요 강의듣다가 궁금한점이있어서 질문드립니다. 현재 강사님이 하신대로 코드작성했을때는 반응형으로 600이상에서는 2줄 1200이상에서는 3줄이제대로 나오는데요 이방식은 default.css가 적용되있을때 제대로 나오고 만약 reset을 안해주면 윗부분과 같이 보라색으로 공간이생기면서 제대로 반응형이 안됩니다.. 여기서 제가 flex-item에 flex: auto을 해주면 600의 경우만약 50%씩 길이를해서 반씩 나눠서 합이 100%가되면 강사님처럼 제대로 공간이 채워지지만 9개중 짝이안맞는 1개의경우 flex:auto로 인해서 공간이 100%늘어나 간격이이상해집니다.. 강사님이 주신 reset.css때매 줄간격이맞는거같은데.. 이럴경우 프로젝트할때마다 강사님의 reset파일을 써야할까요? 만약 그게아니라면 현재 상태에서 어떻게 보라색 간격을 없앨수있을까요?? 아래는 제가 혼자할때 만든 실습코드입니다. http://colorscripter.com/s/UAEVG5f
- 미해결CSS Flex와 Grid 제대로 익히기
.page-header 영역에 grid-row 추가하면??
.page-header에 grid-row: 2/3을 추가하면 아래와 같이 이미지가 깨지고 있어서요.. 이전에 레이아웃 수업들을때는 header에도 각 셀에 맞춰서 grid-row값을 추가했던거 같은데, 이번에는 추가하면 아래와 같이 깨지는데, 그 이유를 알 수 있을까요?? 그리구, 레이아웃 작업하실때 header, footer 와 같이 페이지 전체를 차지하는 요소들에 대해서는 grid-row를 사용안하시는지도 궁금합니다. 도통 모르겠어서요..ㅠ
- 미해결CSS Flex와 Grid 제대로 익히기
flex 모달 만들때
position: fixed; left: 0; right: 0; top: 0; bottom: 0; 이부분이 적힌것에 대해서 질문하려고 하는데요, 포지션 고정시킨후 위아래 왼쪽 오른쪽 0을 했는데, 모달이 중간에 오게 되는게 잘 이해가 안돼요. (저부분 없이) justify-content, align-items로만 하면 왜 안되는건가요? (왜 정중앙에 오지 않는걸까요?) position에 대해 이해가 부족해서 그런지 이해가 잘 안돼요^^ㅎㅎ
- 미해결CSS Flex와 Grid 제대로 익히기
개수에 따른 궁금증
지금은 4개씩 총 16개가 있는데요. 만약 개수가 랜덤인 경우에도 CSS만으로 이러한 작업을 할 수 있나요?
- 미해결CSS Flex와 Grid 제대로 익히기
flex-basis 문의드립니다.
flex-basis 문의드립니다. 혼자 해보면서 잘 안되어 문의드립니다. 우선 강사님 코드는 당연히 잘 되는데요. flex-basis: 100px width: 100px 를 비교할 때 item요소에 한국어나 띄어쓰기가 들어가면 제대로 동작하지 않던데 왜 그런 것인가요? ex) flex-basis : 100px aaaaa aaa aaaa 이런 식으로 하면 자동으로 다음줄로 이동합니다.
- 미해결CSS Flex와 Grid 제대로 익히기
Flex 핵심정리#7-유용한 기법들 강의에서 css에서 특정 브라우저만 값을 따로 지정할 수 있는 방법
안녕하세요. 강사님 Flex 핵심정리#7-유용한 기법들 강의 중에 Header, 본문, footer 구조 로 되어 있고 css에서 container 클래스에 min-height:100vh를 넣었지만 IE11에서는 적용이 안되어 height:100vh 와 overflow:auto 로 수정했습니다. 근데 하나의 css 파일에서 chrome 등 다른 브라우저에는 min-height:100vh 기능을 넣고 싶고 IE11에서만 height:100vh 와 overflow:auto로 적용 하고 싶습니다. css에서 특정 브라우저만 값을 따로 지정할 수 있는 방법이 있습니까? 실제 상용에서는 어떤 방법으로 해결하는지 궁금합니다. 강의가 많은 도움이 됩니다. 감사합니다.
- 미해결CSS Flex와 Grid 제대로 익히기
padding-bottom: 60%과 가로스크롤 질문
height; 0을 주고 padding-bottom에다가 %을 하면 부모의 width 값이 크거나 작아지면서 변할때 마다 그 width값의 60%가 해당 요소의 hieght 값이 된다는 거는 알겠는데 그럼 padding-bottom이 .card-image의 높이 역할을 대신해준다고 보면 될까요? 굳이 padding-bottom에다가 % 주는거 말고, .card-image의 height에다가 %를 직접 주지 않는 이유를 생각 해봤는데 그냥 .card-image(자식)에 height: 60%을 하게 되면 부모인 .card-item의 width 60% 값을 .card-image의 height으로 설정 하는게 아니라 .card-item(부모)의 height 60% 값을 .card-image의 height으로 하는 것 같군요. 결론은 .card-item(부모)의 width값이 변할때마다 .card-image의 height 값을 유동적으로 바꿀려면 padding를 이용해서 마치 (padding-bottom 또는 padding-top)이 .card-image(자식)의 height처럼 작동 해야하는 군요. 어떤 요소의 padding 값에 % 주게 되면 그 값의 기준은 그 요소의 부모의 width값인지 궁금합니다. 자식의 height에 직접 %으로 준거는 부모의 height를 기준으로 계산하기 때문에 기존의 height 값을 0으로 초기화하고 부모의 width 값을 기준으로 % 계산을 하는 padding-top 또는padding-bottom을 이용해서 hight을 설정 하는 것 같은데 맞나요? padding-top, padding-bottom, padding-left, padding-right 모두 %를 쓰게 되면 부모의 width값을 기준으로 되는 것 같은데 맞나요? ============ 선생님 가로스크롤를 overflow로 해결하셨는데 저는 이해가 되지 않아서 혹시 그림으로 설명 가능할까요? ㅠㅠ margin: 0 - 1rem; 부터 개발자 도구를 봐도 잘 모르겠습니다 ㅠㅠ 그리고 .cart-list-con으로 감싼 이유가 뭔가요? ㅠㅠ
- 미해결CSS Flex와 Grid 제대로 익히기
fixed의 속성 질문
fixed속성에 left: 0 right: 0 bottom: 0 top: 0을 모두 주게 되면 왜 .modal의 width , height값이 자동으로 화면 전체 영역을 꽉차게 만드는 건지 잘 모르겠습니다. ㅠㅠ bottom보다는 top이 우선권이 있고, right보다는 left가 우선권이 있으면 왼쪽 위에 배치되어야 하는게 아닌가요? ============================== 아 그리고 여러가지 실험을 하다가 문득 궁금한게 있는데 fixed속성에 left: 0 top: 0 width: 100% height: 100% 을 하면 위에 말한 것 처럼 잘 동작이 되는데 fixed일때 width: 100%, height: 100%의 의미가 .modal의 부모의 100%을 의미한건지 아니면 뷰포트의 100%을 의미한건지 잘 모르겠습니다다. 즉 fixed일때 width: 100%, height: 100%이면 width: 100vw, height: 100vh랑 같은 의미인지 궁금합니다
- 미해결CSS Flex와 Grid 제대로 익히기
width 질문
플렉스 아이템에 width 값을 100px을 주면 1분코딩에서 사이트에서는 두번째 플렉스 아이템에서 BBBBB가 자동으로 줄바꿈이 되는데 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>CSS Flex</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="flex-container"> <div class="flex-item">AAA</div> <div class="flex-item">BBBBBBBBBBBBBBBBBBBBB</div> <div class="flex-item">CCCC</div> </div> </body> </html> @import url('reset.css'); .flex-container { display: flex; border: 5px solid tomato; } .flex-item { border: 5px solid black; width: 100px; } 제가 쓴 소스코드에서는 BBBBBBBB 라고 써져 있는 두번째 플렉스 아이템의 내용이 왜 줄 바꿈이 안되고 글씨가 옆으로만 가는 건지 잘 모르겠습니다. ㅠㅠ
- 미해결CSS Flex와 Grid 제대로 익히기
min-width: 600px
위와 같은 코드를 작성하여서 min-width가 600px 이 되는 시점에서부터 컨텐츠가 2개 보이려고 했는데 검사창에서 해당하는 .primary 창의 width가 583인 시점부터 변하는 이유는 오른쪽 스크롤값가지 min-width에 포함시키기 때문인가요 ?? .card_list { display: grid; grid-template-columns: repeat(auto-fill, minmax(100%, auto)); column-gap: 2%; } @media (min-width: 600px) { .card_list { display: grid; grid-template-columns: repeat(auto-fill, minmax(43%, auto)); column-gap: 2%; } } @media (min-width: 1200px) { .card_list { display: grid; grid-template-columns: repeat(auto-fill, minmax(30%, auto)); column-gap: 2%; } }
- 미해결CSS Flex와 Grid 제대로 익히기
질문이 있습니다.
auto-fill과 auto-fit은 columns에만 해당 하는 건가요?? rows에 적용하면 아무런 반응이 없어서요..
- 미해결CSS Flex와 Grid 제대로 익히기
input - submit 질문이 있습니다.
안녕하세요, 질문이 있습니다. 찾기 버튼에서 <button type="submit">을 쓰지 않고 <input type="submit">을 쓴 이유가 있을까요?
- 미해결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하지 않는 걸까요?? ---------------------------- 어떻게든 구글링해서 이해해보려고 했는데, 도저히 이해가 안되서 부득이하게 질문드립니다. 감사합니다.