49,500원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결CSS Flex와 Grid 제대로 익히기
page에 관해서
div.page 전체를 감싼 다음 order로 나누셨는데 div.page를 없애고 secondary-a primary secondary-b 를 div.page로 감싼다음 @media(min-width:1024px){.page{display:flex }} 해도 상관없지 않나요?
- 미해결CSS Flex와 Grid 제대로 익히기
figure
시각장애인들을 위해서 img의 alt 속성에 img를 주는것으로 알고있습니다. figure안에 img 태그를 넣은 이유가 시각장애인을 위한 이유라고 생각해도 괜찮을까요? 만약 img 태그를 넣지 않고 figure태그만 있어도 시각장애인분들이 image인지 알 수 있나요?
- 미해결CSS Flex와 Grid 제대로 익히기
DB이미지 때문에 figure태그를 사용하는 이유가 궁금합니다.
"figure 태그의 이미지는 일반적으로 DB에 있는 이미지를 불러오기 때문에 인라인 CSS로 넣는 것이 합리적입니다."라는 말씀의 좀 더 정확한 이유가 궁금합니다. 제 추측으로는 이미지 다운로드 완료 전부터 UI크기를 잡기가 img태그보다 유용해서인 것 같은데, 맞나요? 아니면 완료 실패해도 브라우저의 완료 실패 디폴트 이미지를 띄우기 싫다거나.. 추가로 figure의 background로 이미지 설정하는게 웹표준에 반하는건 아닌지도 궁금합니다. 그래서 img태그 안에 alt를 설정해서 넣어두신건가 해서요.
- 해결됨CSS Flex와 Grid 제대로 익히기
flex-item에서 줄바뀜에 대하여...
Flex 핵심정리 #5 강의 실습 중에 의문점이 생겨서 질문드립니다. 제가 아래 html 처럼 작성하고 브라우저를 전체화면으로하고 확인했을 때는 예상한 대로 1:3:1로 공간을 잘 분배했습니다. 그리고 제가 브라우저를 500px로 하고 새로 고침을 하니까, flex-basis가 width를 강제하지 않는 특징 때문에 1:3:1의 비율을 안 지키더군요. 그런데 문제는 <div>AAAAAAAA<div>의 내용을 Lorem으로 길~게 늘린 후에 브라우저 창을 500px로 새로고침하면, 줄 바꿈이 일어납니다. 이게 이상합니다. 애초에 AAAAAAA.. 라는 텍스트도 1:3:1을 못지키니 줄바꿈이 일어나는게 맞지 않나요?? 대체 이 줄바꿈의 기준이 뭔가요??? <!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">AAAAAAAAAAAAAAA</div> <div class="flex-item">BBB</div> <div class="flex-item">CCCCCCCC</div> </div> </body> </html>
- 미해결CSS Flex와 Grid 제대로 익히기
flex-grow, justiy-content 차이...점
음, flex-grow말고 .menu에서 justify-content: space-around; 로 해도, 동일한 효과가 나옵니다. 어떤 차이가 있는건가요? 어느 방식이 현명(?)한것인지 궁금합니다. 항상 이런 점이 어렵게 느껴집니다.ㅠ
- 해결됨CSS Flex와 Grid 제대로 익히기
선생님! 벌써 내일이 수요일이에요!!
새로운 강의 이번주에 내시기로 했짢아요!!? 약속 했짢아요!!? 벌써 내일이 수요일이에요ㅠ-ㅠ 저 정말 선생님 새로운 강의 듣고싶다구요... 선. 생. 님.. 저는 목이 마릅니다.. 매우.. 매.애..우.. 이 목마름은 오.직 선생님의 New강의만이 해결할 수 있습니다! 매일 선생님 1분코딩블로그에도 들어가보는데요..ㅠ 제품 카테고리 들어가보면 역시나.. 아무런 소식도없네요 만약 new강의가 나오면 어디서 소식을 들으면될까요!!? 선생님 인스타하세요? 아이디가 뭐죠?? 페이스북하세요!? 아이디가 뭐죠!?
- 미해결CSS Flex와 Grid 제대로 익히기
flex-grow
flex: 1 1 auto를 주셨는데 flex : 1 를 줘서 flex-basis를 0으로 만들어도 상관은 없나요?
- 미해결CSS Flex와 Grid 제대로 익히기
메뉴 속 컨텐츠(text) 줄바꿈 관련 질문
안녕하세요! 강의 너무 잘 듣고 있습니다 ㅠㅠ!! 다름이 아니라 메뉴창 만들고 크기를 줄이다보면 list가 작아짐에 따라서 컨텐츠 내용이 줄바꿈 되는데 이를 방지하기 위해서는 'min-width'를 사용하면 될까요? 아니면 다른 방법이 또 있을까요??
- 미해결CSS Flex와 Grid 제대로 익히기
min-width에 대해서..
미디어쿼리를 사용하고 있는데 모바일 -> pc 순으로 레이아웃을 만드는 게 좋다고 말씀하셔서 min-width를 이용하여 화면의 px을 늘려가면서 만들려고 합니다.(react에서 styled-componet 사용 중입니다.) 이 부분은 header부분인데 처음 만들때 max-width로 만들었습니다. min-width로 수정하려고 하는데 혹시 어떻게 바꿔야 될지 알고 싶습니다. 밑의 코드에서 transition이나 transform , padding-top등 화면이 min-width가 커질수록 필요가 없어져서 없애야 되는데 어떻게 없애는지 궁금합니다. const List = styled.ul` display: flex; flex-flow: row nowrap; @media only screen and (max-width: 768px) { flex-flow: column nowrap; background-color: #0d2538; position: fixed; top: 0; right: 0; height: 100vh; width: 300px; padding-top: 3.5rem; transition: trasnform 0.3s ease-in-out; transform: ${({ open }) => (open ? `translateX(0)` : `translateX(100%)`)}; @media only screen and (max-width: 500px) { width: 100%; } } `;
- 해결됨CSS Flex와 Grid 제대로 익히기
선생님 새로운 강의 언제 출시되나요?
4월에 출시예정이라고 알고있었는데.. 혹시 미뤄지신건가요?? 기다리고있겠습니다@-@! 충성충성
- 미해결CSS Flex와 Grid 제대로 익히기
flex상속 질문이요
flex-item에 display:flex를 줄수 있나요?
- 미해결CSS Flex와 Grid 제대로 익히기
align-content 질문
flex-wrap를 준 상태에서 반응형인 경우 두줄 이상 떨어지는 구조는 그러면 무조건 align-content를 줘야 하나요?
- 미해결CSS Flex와 Grid 제대로 익히기
안녕하세요 강의 잘 듣고 있습니다!
수업 잘 듣고 있습니다 유익한 수업 정말 감사합니다! 그런데 혹시 개념 정리는 따로 pdf 올리실 생각은 없으신가요? 아무래도 개념이 복잡하다보니 따로 익히고 싶어서요!
- 미해결CSS Flex와 Grid 제대로 익히기
2단 카드 리스트 만들기에서 가로스크롤 문제가 있어요...
2단 만들기에서 똑같이 따라했는데 가로 스크롤이 생겨요 ㅠㅠ코드도 똑같이 했는데 왼쪽은 적용이 되고, 오른쪽은 적용이 안되는 상황이에요... 무엇이 잘못 되었을까요..?
- 미해결CSS Flex와 Grid 제대로 익히기
이해가 안갑니다..
flex-grow에 들어가는 숫자의 의미는 아이템들의 flex-basis를 제외한 여백 부분을 flex-grow에 지정된 숫자의 비율로 나누어 가진다 라고 하셨는데.. 여기 보시면 flex-basis가 0 , 즉 auto로 되어있는데요. 강의에서 설명한 대로 생각하면 lorem에 저렇게 좁은 공백이 있어선 안되는 겁니다. 순수하게 저 문장만 놓고 보자면요. 공부하다가 혼돈이 와서 뒤에와서 다시 보고 있는데 어패가 있어서 질문을 합니다. 감사합니다.
- 미해결CSS Flex와 Grid 제대로 익히기
안녕하세요~
이 강좌의 모든 강의를 학습한 학생입니다. 이 강의에서 가장 좋았던 것은 모든것을 구현해놓은 결과물을 보여주고 이건 이렇게 만들었다 코드를 보여주며 알려주는것이 아닌 모든것을 구현해놓은 결과물을 보여주고 그것을 하나하나 다시 만들어가며 설명해주는것이 좋았습니다. 그래서 그런데.. 다른 웹사이트들 클론코딩같은것도 강의 만드실 생각없으신가요? 예를들어서 노마드코더에는 css마스터클래스라는게있는데 여러 웹사이트들을 클론코딩한 강의들이있습니다. https://academy.nomadcoders.co/courses/360503/lectures/14618355 근데 아쉬운점이.. 쌤처럼 강의를 안하고 결과물을보여주고 이건 이런식으로했다 설명방식이더라구요 .. ㅠㅠ 혹시 쌤은 웹 페이지 클론강의 내실 계획은 없으신가요?
- 미해결CSS Flex와 Grid 제대로 익히기
.card-desc 문단 크기만큼 높이 조정하기 질문있습니다.
각 문단의 길이에 따라 card-desc의 높이가 달라지는 문제를 해결하는 부분이 이해가 잘 안됩니다. 1. 각각의 .card-item을 flex container로 만들고 .card-image와 .card-desc가 flex item이 된다. 2. card-item의 정렬 방향을 column으로 바꾼다. 3. .card-desc의 flex 속성을 1 1 auto를 준다. flex-grow 에 1을 주므로써 문단의 길이에 맞게 유연하게 늘리는 거잖아요? 근데 카드는 각각 개별 아이템이니까 개별 아이템이 갖고 있는 문단의 길이에 따라 달라야되는것 아닌가요? ㅠㅠ 어떻게 같은 행의 문단이 같은 높이로 늘어날 수 있는거죠 ?
- 미해결CSS Flex와 Grid 제대로 익히기
TEST 3개중에서 첫번째가 아닌 두번째 나오게 하려면 어떤 방법이 있을가여?
nth-child()는 동작 안하는거 같습니다.
- 미해결CSS Flex와 Grid 제대로 익히기
핵심정리#6 grid-auto-comlumns
안녕하세요 강의 잘 보고 있습니다. 핵심정리#6 강의중 마지막 부분에 grid-template-columns:50px; grid-auto-comlumns: 1fr 2fr; 이렇게 되어있는데, 의미는.. 첫 열의 사이즈 50px을 제외하고 (그리드사이즈-50px)를 1:2비율로 자동으로 조절하는게 맞는거지요 ?
- 해결됨CSS Flex와 Grid 제대로 익히기
질문이 있습니다.
모달창 적용 도중 문제가 있었습니다. 검색창 오른쪽에 깃발을 옮기고 버튼 클릭 시 모달창이 뜨긴 하지만 스크롤이 자꾸 맨 아래로 가더라구요. 마치 웹 페이지에서 "맨 아래로" 버튼을 클릭한 것 처럼요. 그래서 선생님이 제공하신 완성 코드와 비교해봤습니다. 이 부분에서 top:0 값을 주셨더라구요. 근데 반응형 페이지 만들기 3번 강의에서는 돌려봐도 이 부분이 없으신데 강의에서는 동작이 잘 되시더라구요. 어떤 차이점이 있길래 전 top: 0을 적용해야 하고 선생님은 안해도 되는건가요 ?