24%
37,130원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결CSS Flex와 Grid 제대로 익히기
Flex ui#1 부분질문이요
는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. flex 로 메뉴바를 만들때 home about product contac간의 간격을 넓히거나 줄일수없나요 ?
- 미해결CSS Flex와 Grid 제대로 익히기
스크롤바 / modal 표시 위치 질문
1. 브라우저의 너비를 조정하여 card-list 가 2열로 나타날 때 1분코딩님의 브라우저엔 수직 스크롤바가 안 생기던데, 이건 어떻게 하는 건가요? 제가 따라한거는 card-list 가 열이 몇개든 다 스크롤바가 생깁니다. 2. modal-switch 를 체크하면 modal 이 디스플레이되는데, 제 것은 화면 하단으로 내려가서 디스플레이가 됩니다. 아마 <div class="modal"> 이 구문이 body 의 맨마지막에 위치해 있어서 그런거 같은데, 1분코딩님 화면을 보면 현재 화면위치에서 modal 이 디스플레이되거든요. 어떤 차이가 있어서 그런지, 제가 뭘 빼먹은게 있는지 궁금합니다.
- 미해결CSS Flex와 Grid 제대로 익히기
box-sizing 관련 질문
안녕하세요 이거 카드 만들기하다가, 음.. 이렇게 하면 안될꺼 같은데? 하고 하니까 안되더라구요. 그래서 코드를 다운받아서 제가 확인해보니 box-sizing이 border-box더라구요. 저는 default 값인 content-box를 주로 사용하고 있는데요, 저는 처음배울때부터 content-box를 그냥 사용해서 그냥 이렇게 사용하고 있었는데, 문득 이 둘의 장단? 에 대해서는 한번도 제대로 생각해본적이 없는거 같아요. 강사님이 border-box를 사용하시는 이유에 대해서 혹시 여쭤볼 수 있을까요? (위는 calc 사용해서 해결했습니다)
- 미해결CSS Flex와 Grid 제대로 익히기
before{ content: xxx; } 이 구문이 수행이 안됩니다.
위 캡쳐화면과 같이 원래 list 의 쩜 표시로 변화가 없네요. 코드는 똑같이 했습니다. 제 pc 환경은 윈도우10 이고 크롬 브라우저에서 봤습니다. 어떻게 조치를 할 수 있을까요?
- 해결됨CSS Flex와 Grid 제대로 익히기
파이어폭스 개발자 모드에서 검사기에 그리드 안나와요 ㅜㅜ..
firefox의 inspect element > rules 에서 grid가 사용이 안되었다고 자꾸 나옵니다.. ㅜㅜ 구글링하다보니 display: grid에 격자 모양이 붙었다면 나와야 하는 게 맞는 것 같은데 왜일까요..? ㅜㅜ 헤더 문제인가 해서 헤더도 강사님 소스에서 붙이고 필요한 것만 덧붙였는데 안되네용.. ㅜㅜ 왜일까요..? css link로 다른 폴더 안의 css를 붙여서 그럴까요? ㅜ
- 해결됨CSS Flex와 Grid 제대로 익히기
media min-width: 600에서 flex-item width
강의를 보고 혼자서 작성해보았는데요.. chrome 브라우저를 사용중입니다. min-width: 600px에서 flex-item을 50%를 주었는데 자꾸 두번째 item이 떨어져서 border 영역만큼 빼고 width를 잡아주었어요. 이게 맞는걸까요 ? ㅜㅜ 선생님은 reset이나 item영역의 border를 어떻게 주셨는지요? 쌤처럼 item에 패딩도 예쁘게 넣어주고 싶은데 reset을 안했으니 브라우저 차이인건지.. 궁금해요 ㅜㅜ! 그리고 min-width: 900px로 넘어갈 때 grow 0 이 계속 적용이 되는데 제가 css 초보여서 이게 맞는건지 제가 잘못 작성한 건지 모르겠어요..
- 미해결CSS Flex와 Grid 제대로 익히기
13:45 에서 커서가 위치한 행을 주석처리하는 단축키
13:45 에서 커서가 위치한 행을 주석처리하는 단축키 좀 알려주세요^^
- 미해결CSS Flex와 Grid 제대로 익히기
display : flex
display : flex 는 부모 속성인데 왜 item 에 주는 건가요?
- 미해결CSS Flex와 Grid 제대로 익히기
grid에서 align-content,justify-content
flex 강의때 반응형으로 팝업 3개를 오른쪽 하단에 배치하려한다는 질문드렸을 때 답주신 내용으로 구현이 되었습니다.. 정말 감사합니다!ㅎㅎ 하지만 한가지 문제가 크롬에서는 잘되는데.. ie11에서 align-items: flex-start; 가flex-end 처럼 보여지는 문제때문에 grid로 align-content: end;justify-content:end; 를 써서 오른쪽 하단에 팝업3개를 오게 하고싶은데 ie11에서는 안되니까... grid를 이용할 생각은 하지 말아야할지..ㅜㅜ 여쭤봅니다..
- 미해결CSS Flex와 Grid 제대로 익히기
이미지태그 질문요!
img 태그와 figure 태그와 위 둘은 html이며 주요 콘텐츠, 카드 UI일때 사용하고 background-image의 차이를 알고 싶어요. 얘는 CSS 배경요소로 꾸며줄때 사용하는 거는 알겠는데 img랑 figure 태그 사용 차이점이 헷갈려요. 혹시 제가 놓친 부분이 있다면 알려주세요!
- 미해결CSS Flex와 Grid 제대로 익히기
선생님 안녕하세요 가로스크롤 질문좀 드리겠습니다.
저도 가로스크롤이 생겨 질문을 찾아보게 되었는데 가로스크롤에대해서 여쭤보신분 답글에 선생님이 영상을 업데이트해주신다는 댓글을 보았습니다. 영상을 다시 보았는데 혹시 아직 업데이트가 안된것이 맞나요 ? 소스코드에는 card-list-con이라는 div태그가 추가되어있는게 확인이 됬습니다!
- 미해결CSS Flex와 Grid 제대로 익히기
선생님 안녕하세요 질문좀 드리겠습니다
2:24초에 item들을 width값을 100px씩 주었는데 제 지식으로는 컨텐츠(BBBBB)의 총 합Px값이 width값을 넘어가게 되면 width는 100px로 고정되고 그냥 컨텐츠들이 넘쳐버리게 되서 결론적으로는 CCC와 컨텐츠들이 겹치는것으로 생각을 했습니다. 실제로 제 코드의 결과도 제 생각과 일치했고요 아래는 저의 코드와 그에 따른 결과입니다. 그런데 2:24초에 나오는 width 100px코드 블럭 아래에 있는 결과를 보면 BBB는 줄바꿈이 되어있는데 혹시나해서 스튜디오밀 사이트도 들어가서 개발자도구랑 전부 뒤져봤는데도 제가 준 속성 외에는 아무것도 되있지 않은데 왜 저와 다른 결과를 출력하는건지 잘 이해가 되지를 않아서 질문하게 되었습니다. lorem 처럼 중간에 띄어쓰기가 있으면 width는 줄바꿈이 일어난다는점에 착안해서 처음에는 BBB가 중간에 띄어쓰기가 되어있어서 저렇게 줄바꿈이 되어있나 했는데 개발자 도구를 봤는데 아무런 띄어쓰기도 되어있지 않았습니다. 정말 차이점을 모르겠는데 왜 결과가 다른지 여쭤보고싶습니다!
- 미해결CSS Flex와 Grid 제대로 익히기
order 시 item 높이에 대해 질문이 있습니다.
안녕하세요. https://codepen.io/seon-o/pen/yLVjpyd 팝업이 3개일 때,반응형으로 1300이하일 땐 좌측으로 세개가 오게하고 싶습니다. 보라색의 팝업 높이가 길어 order로 옆으로 보냈는데 초록색 팝업이 보라색 높이 때문에 주황색 팝업과 붙지 않습니다... 초록색 팝업에 transform: translateY(280px); 를 주면 원하는 디자인이 나오지만 매번 이미지 높이가 달라서요.. 이 문제를 풀지못해서 수강 신청하게 되었는데 강의를 봐도 해당 내용을 이해못해서요..ㅠㅠ이럴때 좋은 방법이 있을까요?
- 미해결CSS Flex와 Grid 제대로 익히기
시맨틱 태그
좋은 강의 항상 감사드립니다. <header>, <nav>, <main>, <article>, <section>, <aside> 등등 꽤 다양한 개념들이 나옵니다. 저렇게 나눠놨지만 정확한 차이점들을 구별 하기 힘든 경우도 많습니다. 선생님도 그렇게 나누시는데 기준을 가지고 나누는건가 여쭙고 싶습니다. 강의를 보지않고 직접 해보려고 해도 저 부분들이 헷갈릴 떄가 많은데 저 부분들을 좀 덜 신경써도 되는건지 은근 신경이 많이 쓰이는 부분입니다. 제가 아직 공부가 덜 돼서 감(?)이 부족한 거라고 생각합니다. 전달하려는 내용이 잘 전달되는지 모르겠습니다. 답변 감사드립니다.
- 미해결CSS Flex와 Grid 제대로 익히기
8:48쯤..
일분이가 통통 뛰는게 탄력을 주기위해 세로로 70%줄었다가 늘어나게 했다고 하셨는데 뒤 이어 z축 설명하실때, 일분이가 뛰는 방향이라고 설명하셔서 그럼 스케일도 z축방향으로 커져야하는 거 아닌가요? 왜 스케일은 y축방향으로 커지게 했는지 이해가 안되네요 ㅠㅠ
- 미해결CSS Flex와 Grid 제대로 익히기
색감 관련 궁금증
chrome 창에서 열었을때랑 firefox에서 열었을 때, 예제의 빨간계열 색감이 달라보이네요. 크롬에서는 약간 탁해보인다면 파이어폭스에서는 쨍한 컬러라고 해야하나요? 이럴경우 색감을 어떻게 맞추어주어야하나요? 갑자기 궁금해져서 ㅎㅎ 앗 그리고 공유해주신 html 파일 보다가 폰트 사이즈는 왜 %로 줬나요? 그리고 -moz-osx 이게 어떤 속성을 준것인지 text-rendering은 무슨 속성인가요? html { font-size: 87.5%; /* 14px */ font-family: Roboto, 'Noto Sans KR', sans-serif; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility !important; }
- 미해결CSS Flex와 Grid 제대로 익히기
질문이요!
column-gap: 2%;로 수정해주세요! 라고 하셨는데 높이의 경우 무한정 늘어날 수 있기 때문에컨테이너의 폭에 따라 카드 리스트의 높이가 넘칠 수 있어서,이 경우에는 column-gap만 주는 것이 더 바람직합니다. - gap이 2%일 경우 row-gap도 2%로 늘어날텐데 왜 무한정 늘어나는거죠?ㅠㅠ 높이가 왜 무한정 늘어나는건가요? 위 설명으로 이해가 안가요 ㅠ 어렵네요. padding-bottom의 경우도 width100%를 기준으로 60%까지만 늘어나게 하겠다. 한건데 column-gap만 적용했는데 왜 가로 갭은 또 띄어져있는건지..@.@
- 미해결CSS Flex와 Grid 제대로 익히기
뭔가 이상합니다...
width:100px로 하면 content양이랑 상관없이 너비가 100px가 되는거고 flex-basis:100px로 하면 content양이 적어도 100px인거는 width와 같지만 content양이 많아졌을때는 100px이상으로 넘어간다고 이해했는데요. .flex-container { display: flex; flex-direction: row; } .flex-item { /* width: 200px; */ /* width는 안의 내용물이 얼마있던간에 너비를 고정시켜준다. */ flex-basis: 200px; /* flex-basis는 고정값은 아니고 기본값을 주는것이라 내용물이많으면 더 커진다. */ /* flex-basis는 item의 기본크기이다. */ } 위와같이 설정값을 주었고 flex-basis를했는데 너비가 200px로 고정되고 내용물이 width를 썼을때처럼 아래로 내려가더라구요,,, 뭐가 잘못된거죠?? 제가 제대로 이해한건 맞는건가죠??
- 해결됨CSS Flex와 Grid 제대로 익히기
질문이 있습니다!
복습하던 중에요. <input type="checkbox" id="modal-switch"> <lable for="modal-switch"> // input을 위해 label이 존재 (왜? 인풋창을 설명하기 위해 이해를 돕기위해서) <span>modal 열고 닫기</span> </label> <style> .test { color: dodgerblue; } #modal-switch:checked ~.test { color: crimson; } </style> // 원래는 html 상에 style 태그를 하면 좋지 않다. 잠시 테스트 할 때 편의상 사용한다. <p class="test">TEST</p> <p class="test">TEST</p> <p class="test">TEST</p> <div class="modal"> <div clas="dialog"> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repellat labore, consectetur nihil commodi corrupti quasi accusantium autem! Illo consectetur ea sequi quo voluptatum nulla beatae vero at maiores blanditiis. Aliquam vitae ex dicta praesentium nemo itaque soluta corrupti voluptates quo! </div> </div> input과 label 태그 중간에 style 태그를 넣어주셨는데 가운데에 넣어주신 이유가 있을까요? label 아래에 p태그가 이어져야 할 것 같은데 갑자기 style이 들어온 느낌이라 위로 올리던지 아래로 내리던지 위치는 상관없고 설명하시느라 중간에 넣으신건가요?
- 미해결CSS Flex와 Grid 제대로 익히기
미디어쿼리에 관한 질문입니다!
혹시 CSS @media 에 관한 내용이 이 강의에 포함 되어있는진 아직 다안들어서 모르겠지만 따로 강의가 있나요?? 아 그리고 미디어쿼리가 .css파일 내 위치에도 영향을 받나요? ㅠ.flex-container {...} 위에 미디어를 사용했더니 원하는 작동이 안돼서요ㅠㅠ