49,500원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결CSS Flex와 Grid 제대로 익히기
질문이 잇습니다.
flex: 1을 주면 basis가 0이 되는건가요? 그리고 basis가 0이 되면 차일드로 해논 width값은 없어지는건가요? 그냥 비율에 맞게 0으로 모두 바꿔버리는 거지요? auto 로 해노면 값을 width값으로 정해져서 적용할수잇구요?ㅠ 헷가리네요 ㅠ 아그리고 flex: 1 1 200px로 햇을시 basis 픽셀은 영향을 안받나요? ㅠㅠ
- 미해결CSS Flex와 Grid 제대로 익히기
2단->3 단
강의 너무 잘 보고 있습니다. 강의 듣다가 잘 안되는 부분이 있어서 질문 남깁니다. 1->2단은 정상적으로, 되는데, 2->3단은 제대로 적용이 안되는데... 뭐가 문제일까요?!
- 미해결CSS Flex와 Grid 제대로 익히기
grid로 2단 작성시 질문입니다..
간단한게 왼쪽에 메뉴 오 른쪽에 내용 이렇게 grid로 했는데요(grid-template-columns:150px 1fr;) 왼쪽 메뉴 클릭시 오른쪽에 내용을 나타나게 하려면 어떠한 방법을 써야 하나요??
- 미해결CSS Flex와 Grid 제대로 익히기
모달이 중간이 아니라 페이지 하단에 출력되여
모달이 중간이 아니라 페이지 하단에 출력되는데 css가 잘못된거 같은데 어디서 잘못된건지 잘못찾겠어서여 한번 봐주시면 대단히 감사여 git: https://github.com/hyunsokstar/my_flex
- 미해결CSS Flex와 Grid 제대로 익히기
강의도중 텍스트 질문
어떤 이유인지 간단한 설명 부탁드려도 될까요? display none과 width: 0은 무조건적으로 지양해야 할까요?
- 미해결CSS Flex와 Grid 제대로 익히기
flexgrid_1분코딩\섹션1_Flex_핵심정리\06-align-items.html
코드 <!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="default.css"> <style> .flex-container { display: flex; flex-wrap: wrap; /* flex-direction: column; */ /* align-items: stretch; */ /* align-items: flex-start; */ /* align-items: flex-end; */ /* align-content: center; */ /* justify-content: center; */ align-items: center; /* align-items: baseline; */ height: 600px; } </style> </head> <body> <div class="flex-container"> <div class="flex-item">AAAAAAAAAAAA</div> <div class="flex-item">BBB</div> <div class="flex-item">CCCCCCC</div> <div class="flex-item">AAAAAAAAAAAA</div> <div class="flex-item">BBB</div> <div class="flex-item">CCCCCCC</div> <div class="flex-item">AAAAAAAAAAAA</div> <div class="flex-item">BBB</div> <div class="flex-item">CCCCCCC</div> <div class="flex-item">AAAAAAAAAAAA</div> <div class="flex-item">BBB</div> <div class="flex-item">CCCCCCC</div> </div> </body> </html> 화면 궁금한 점 - align-items , align-content의 차이를 잘모르겠습니다. - align-items에서 줄이 넘어갈 때 왜 중앙에 커다란 공백이 생기는 것이죠? 따로 지정해주지 않았는데 이런 처리가 자동으로 되버리니 당황스럽네요 - align-items : stretch를 하고 align-content : center 하면 align-content : center 만 적용이 되는데 음.. 둘의 관계가 정확히 어떻게 되는 건지 모르겠어요 align-content : center align-items : stretch align-items : stretch align-content : center 위 2가지 경우 모두 다 align-items : stretch가 무시되는 화면을 출력합니다. 저는 align-item 이나 align-content나 개별 아이템의 수직정렬에 관계하는 것 처럼 보이거든요. 실제로 줄바꿈이 일어나지 않을 때 align-content 가 align-item의 역할도 할수 있는 것 같고요 감사합니다.
- 미해결CSS Flex와 Grid 제대로 익히기
강의에서 사용하시는 ppt 자료는 어디에 있죠? 걸어두신 홈페이지는 https가 아니어서 경고가 뜹니다.
강의와 관련있는 질문을 남겨주세요.• 강의와 관련이 없는 질문은 지식공유자가 답변하지 않을 수 있습니다. (사적 상담, 컨설팅, 과제 풀이 등)• 질문을 남기기 전, 비슷한 내용을 질문한 수강생이 있는지 먼저 검색을 해주세요. (중복 질문을 자제해주세요.)• 서비스 운영 관련 질문은 인프런 우측 하단 ‘문의하기’를 이용해주세요. (영상 재생 문제, 사이트 버그, 강의 환불 등) 질문 전달에도 요령이 필요합니다.• 지식공유자가 질문을 좀 더 쉽게 확인할 수 있게 도와주세요.• 강의실 페이지(/lecture) 에서 '질문하기'를 이용해주시면 질문과 연관된 수업 영상 제목이 함께 등록됩니다.• 강의 대시보드에서 질문을 남길 경우, 관련 섹션 및 수업 제목을 기재해주세요. • 수업 특정 구간에 대한 질문은 꼭 영상 타임코드를 남겨주세요! 구체적인 질문일수록 명확한 답을 받을 수 있어요.• 질문 제목은 핵심 키워드를 포함해 간결하게 적어주세요.• 질문 내용은 자세하게 적어주시되, 지식공유자가 답변할 수 있도록 구체적으로 남겨주세요.• 정확한 질문 내용과 함께 코드를 적어주시거나, 캡쳐 이미지를 첨부하면 더욱 좋습니다. 기본적인 예의를 지켜주세요.• 정중한 의견 및 문의 제시, 감사 인사 등의 커뮤니케이션은 더 나은 강의를 위한 기틀이 됩니다. • 질문이 있을 때에는 강의를 만든 지식공유자에 대한 기본적인 예의를 꼭 지켜주세요. • 반말, 욕설, 과격한 표현 등 지식공유자를 불쾌하게 할 수 있는 내용은 스팸 처리 등 제재를 가할 수 있습니다. .
- 미해결CSS Flex와 Grid 제대로 익히기
gap을 대신하여 margin을 사용할 경우.
gap을 대신하여 margin을 사용할 경우. 크롬에서는 margin 과 gap 이 중복으로 실행되어 배치가 틀려지는데 explorer 에만 margin 을 부여 할 수 있는 방법이 있을까요?
- 미해결CSS Flex와 Grid 제대로 익히기
반응형으로 고쳐보고 싶은데요..
반응형으로 고치려면 어떻게 해야하는지 알 수 있을까요 ㅠㅠ?
- 미해결CSS Flex와 Grid 제대로 익히기
다운로드 파일이 안열려요
윈도우유저인데 파일이 이진이거나 지원되지 않는 텍스트 인코딩을 사용해서 ~ 이런식으로 나오는데 어떻게 해야될까요 ?? 다른 분들은 어떻게 했는지 모르겠네요
- 해결됨CSS Flex와 Grid 제대로 익히기
#7강의편, iE버그 해결 시,overflow:auto;를 하는 이유
안녕하세요. #6편에서 플렉스 아이템 단독으로 움직일 시, margin-left:auto: 주는 설명처럼, 강의 #7편에 .IE버그 해결 할때 1) 어떤 이유 때문에, "overflow:auto;"를 줘야하는지 2) 어떤 특성으로 "overflow:auto;"를 줘야 하는지 설명 부탁드립니다:] margin-left:auto;설명이 금방 이해가 되어#7부분 도 설명을 듣고 싶습니다:]
- 미해결CSS Flex와 Grid 제대로 익히기
11분 38초쯤 코드에 질문있습니다.
11분 38초 ui-page.css 코드중에 #modal-switch, label[for="modal-switch"] span 을 만든 이유가 뭔가요? 그냥 input태그에 이벤트리스너만 달아줘도 동작할 것 같은데..어떤 이유가 있는건지 궁금합니다!
- 미해결CSS Flex와 Grid 제대로 익히기
원래 css 작업하실 때 작은 요소부터 작업하고 큰 레이아웃 작업하시나요?
원래 css 작업하실 때 강의처럼작은 요소(헤더,풋터, 네비, 유저, 모달 등등)부터 작업하고 큰 레이아웃 작업하시나요?그리고 css 파일은 ui는 ui끼리 모으고,레이아웃을 관리하는 ui-page 를 따로 작성하여서 관리하시나요?작은 요소부터 css 작업을 하는 이유와 css파일을 하나의 요소 css파일와 레이아웃 css파일을 나눠서 관리하는 이유가 궁금합니다.
- 미해결CSS Flex와 Grid 제대로 익히기
안녕하세요 질문이 있습니다
이걸보세요 여기에서 큰 점을 없에고 싶은데 어덯게 없에나요?
- 미해결CSS Flex와 Grid 제대로 익히기
테이블 디자인 문의 드립니다.
위에 이미지와 비슷한 테이블을 만들어 보려고 합니다. 필드 클릭시 해당 레코드의 input 태그가 활성화 되면서 SAVE 와 Cancel 버튼이 보여지게 하려고 합니다. ( 위 이미지는 Edit 버튼 클릭시 해당 레코드의 input 태그가 활성화 되는것 같습니다. ) 예시나 팁을 좀 주실수 있을까요?
- 미해결CSS Flex와 Grid 제대로 익히기
-ms- 관련
1. ms로 바꾸는 과정에서 밑의 코드처럼 일일히 새로 클래스명을 지정해주고 바꾸면서 진행했습니다. 동작은 잘됩니다. 근데 IE에서는 nth-child()가 부모없이 사용할때는 안먹히나요? 먹히지 않아서 새로 클래스명을 지정해주었습니다.. #sort__control--category:checked~.grid__section-1 { -ms-grid-column: 1; -ms-grid-row: 3; } #sort__control--category:checked~.grid__section-2 { -ms-grid-column: 1; -ms-grid-row: 4; } 2. 제일 문제가 label인데 input을 -ms-grid-column로 옮겨도 label이 따라오지 않습니다.. label을 -ms-grid-column으로 옮겨도 계속 스크린샷과 같이 고정되어있습니다. 어떻게 해결하나요?
- 해결됨CSS Flex와 Grid 제대로 익히기
flex-shrink가 정확히 어떤 기준으로 값이 줄어드는 건가요?
이번에 FLEX_UI# - 4.메세지 리스트 강좌를 들으면서 이것저것 실험하다가 이상하다고 느낀게 있어서 질문 올립니다. 저는 flex-shrink가 줄어드는 비율이며그 값이 현재 <p class="message-content"> 와 <figure class="user-photo"> 가 같기 때문에 당연히 <p class="message-content"> 이 줄어드는 길이와 <figure class="user-photo">가 줄어드는 길이가 같은 줄 알았습니다. 그런데 오늘 메세지 리스트 강좌를 들으면서 아래 html을 테스트해봤는데, 전혀 그렇지 않았습니다. 아래 html을 통해서 브라우저(FireFox)를 열고, 개발자 도구를 열어 테스트를 해봤습니다. 브라우저 화면을 천천히 줄이면서 개발자 도구를 통해 3번째 행의 flex-item들이 flex-shrink에 의해서 얼마만큼의 길이로 줄어드는지 관찰했습니다. figure.user-photo :기본 크기 (width: 50px) 50px유연성 (flex-shrink: 1) -13.77px p.message-content :콘텐츠 크기 : 1003.22px유연성 (flex-shrink: 1) -276.25px 만약 저의 생각(=착각)대로라면, 둘 다 똑같이 -13.77 px로 줄어들거나, 아니면 둘 다 똑같이 -267.25px 로 줄어들어야 했으니 말입니다. 제가 착각했다는 건 이제 알았지만, 위같은 값(-13.77px , -276.25px) 이 나오는 이유는 아직도 의문입니다. 왜 이런건지 알려주실 수 있을까요? <!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="default.css"> <style> /* message */ .user-item { display: flex; } .user-photo { width: 50px; height: 50px; border: 2px solid #333; border-radius: 50%; background-color: gold; background-repeat: no-repeat; background-position: center; background-size: 150%; /* 수정 */ } </style> </head> <body> <ul class="user-list message-list"> <li class="user-item message-item"> <figure class="user-photo" style="background-image: url(images/ilbuni.png);"></figure> <p class="message-content"> Lorem ipsum dolor sit amet con </p> </li> <li class="user-item message-item"> <figure class="user-photo" style="background-image: url(images/ilbuni.png);"></figure> <p class="message-content"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus debitis maiores nisi. Reiciendis, minus. Cumque, voluptate! Corporis natus inventore error voluptas blanditiis? Cum debitis voluptas rem fuga porro, nulla quae at voluptatem laudantium consequuntur autem maxime quis obcaecati? Nulla, in. </p> </li> <li class="user-item message-item"> <figure class="user-photo" style="background-image: url(images/ilbuni.png);"></figure> <p class="message-content"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus debitis maiores nisi. Reiciendis, minus. Cumque, voluptate! Corpe </p> </li> </ul> </body> </html>
- 미해결CSS Flex와 Grid 제대로 익히기
gap, padding-bottom
1. gap에서는 어떤 기준으로 %가 동작하나요? 2. padding-bottom의 %값 기준은 figure태그의 부모인 li의 width 기준으로 잡히는게 맞을까요?
- 해결됨CSS Flex와 Grid 제대로 익히기
Flex 핵심정리 #5 에서 flex의 결과에 대한 질문입니다.
강의를 다시 복습차원에서 보고있는데, 실습을 하다보니 조금 이해가 안되는 일이 발생해서 질문합니다. 아래와 같이 html을 작성하고 브라우저로 열어보면 예상한대로 1:3:1 로 나뉜 화면이 나왔습니다. 그런데 개발자 도구를 열어서 flex-item의 실제 길이 값들을 보니 ... 첫번째 flex-item 가로 너비 : 394.41두번째 flex-item 가로 너비 : 1131.2세번째 flex-item 가로 너비 : 394.41 라는 값이 나왔습니다. 394.41 x 3 = 1183.23 이라는 값이 나옵니다.여기서부터 이상하다는 걸 느꼈습니다.나중에 더 자세히 flex-item의 border와 padding 값을 제외한 크기만을 갖고 봤더니,그건 1:3:1 비율을 맞추는 것을 확인했습니다. 왜 이러는 건가요???? default.css에서 box-sizing : border-box 을 했음에도padding과 border를 제외한 내용물만으로 비율을 짜는 <!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="default.css"> <style> .flex-container { display: flex; } .flex-item:nth-child(1) { flex: 1 1 0%; } .flex-item:nth-child(2) { flex: 3 1 0%; } .flex-item:nth-child(3) { flex: 1 1 0%; } </style> </head> <body> <div class="flex-container"> <div class="flex-item">AAAAAAAAAA</div> <div class="flex-item">BB</div> <div class="flex-item">CCCCCCC</div> </div> </body> </html>
- 미해결CSS Flex와 Grid 제대로 익히기
inline요소안에 block요소
<a href="#"> <figure></figure> <a/> 이렇게 하게되면 a의 width, height는 0인데 figure의 width는 body의 width와 같던데 이건 어떻게 된건가요? inline요소안에 block요소가 들어가면 이런건가요?