49,500원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 해결됨CSS Flex와 Grid 제대로 익히기
#7 IE 버그 Flex로 해결 방법이 궁금합니다.
height:100vh 및 overflow:auto 속성은 footer가 position:fixed 된 느낌이 들어, 혹시 content 가 길어질시에 밀려나도록 flex로 작업 할 수 있는 방법이 있을까요? 안된다면 어떤 방식으로 IE에서 처리할 수 있을까요? (컨텐츠 적을시, 한화면 전체가 넘어갈시 동시처리)
- 미해결CSS Flex와 Grid 제대로 익히기
studiomeal 사이트 접속이 안되네요!
보안의 이유로 접속 거부 당하고 있습니다. 확인 부탁드립니다.
- 해결됨CSS Flex와 Grid 제대로 익히기
modal 하단 페이지 출력...
아, 저도 이미 질문 올리신 terecal님 처럼 modal이 하단에 위치해서 뭔가 싶어서 몇번이나 다시 해 보아도 마찬가지였는데... 댓글 보고 확인하고 정상적으로 출력 되는것 확인했어요. 저같은 경우 영상을 보고 진행하는데... 마지막 코드부분에도 'top:0;'는 빠져 있는것 같습니다..^^;;;
- 해결됨CSS Flex와 Grid 제대로 익히기
언어에 따른 자동 줄바뀜.
좋은 강의 재미나게 시청(?)중입니다. 강의영상 6:39초 search-form size 정의하는 부분을 보다가 궁금즘이 생겨서 문의드려봅니다. flex로 display설정되어있는 .header아래에서... 강의에서는 '1분코딩'이지만, website-title이 상황에 따라 (띄워쓰기없는 긴영문으로 되어있을경우) 옆으로 삐져나가는 현상이 생기는것 같아서요. 그냥 overflow:hidden;을 추가하면 가로 scroll이 생기지 않고 그냥 삐져나갔구나 하면 될 건 같은데, 한글이나 영문 띄워쓰기가 있는 경우에는 h1 tag가 자동으로 줄바꿈 하기도 하는것 같아서... 왤까..하는 궁금증이 생겨 문의글 남겨봅니다. 어떻게 처리(or이해)하면 될까요? 한글의 경우, 띄워쓰기나 길게 붙어있는 경우에도 h1 tag의 타이틀이 정상적으로 자동 줄 바뀜이 되는데, (일단 줄바뀜되어 ux깨지는건 제외하구요...) 길게 붙어있고, 띄워쓰기가 없는 영문의경우 h1 tag의 width는 고정인가요...? (width값을 fix해서 주면 줄바뀜이 되긴 합니다...) case1 ) 한글, 띄워쓰기 O case2) 한글, 띄워쓰기X case3) 한글+영어, 띄워쓰기 O case4) 영어, 띄워쓰기 X ----> 요놈이 질문의 포인트입니당. 영역을 띄워넘어...스크롤이 생겨버림. (.header에서 overflow:hidden;으로 감출 순 있겠지만, 왜 이아이는 h1 tag가 자동 줄바꿈 안되나요...?) h1 tag에 width를 고정하여 주었을 경우... 이땐 알아서 줄바꿈 해서 보여주네요. flex와 관계는 없는것(?)같기도 한데....^^;; 처음에 타이틀을 그냥 길게 아무 영타로 타이핑 해 놓고 수업 진행 하다가... 강사님 처럼(캡쳐화면) 안되고, 안 이쁘게 찾기가 삐져나가서.. 2시간동안 궁금해서 이것저것보고, 앞수업에서 만들었던 css도 보고 하다가... 원인(?)을 확인하고 질문드려요. 제가 또 뭘 잘못 알고 있는거라면... 조언 부탁드려봅니다... :)
- 해결됨CSS Flex와 Grid 제대로 익히기
.card_image height 맞추기 문의
지난 interactive web강의가 좋아서,,, 로드맵 따라 정주행중입니다. 이번 강의는 들으면서 저도 궁금한 점들이 몇몇 있었는데, 제가 궁금한건 이미 다른 분들도 궁굼해 하셨네요. :) https://www.inflearn.com/questions/64102 를 보고 한가지만 더 질문이 있어서요..^^;; .card_image class에서 height를 가로비율 유지하기 위해서, height=0으로 세팅하고, margin-bottom: 60%으로 주었는데, 같은 방식으로 백그라운드의 이미지를 보여주는것이 목표라면, margin-bottom 대신에 margin-top: 60% ; 주거나, margin : calc(60%/2) 0 ; 으로 지정하고 계산해도 되는거죠? bottom만 써야 하는지 아닌지 궁금해요. https://www.inflearn.com/questions/64102
- 미해결CSS Flex와 Grid 제대로 익히기
후 이제 반이라니....
https://leetube.s3.ap-northeast-2.amazonaws.com/index.html 완성했어요! fixed로 네비게이션 고정까지 차근차근 설명 감사합니다 :) flex, grid의 정석....
- 미해결CSS Flex와 Grid 제대로 익히기
브라우저 체크에 관해서
수업과 관계 없을지도 모르겠지만 궁금해서요!! 혹시 자바스크립트를 이용해서 어떠한 브라우저를 사용하고 있는지 확인 하는 방법이 있을까요? 애플 사이트 보니깐 익스플로어를 사용하면 다른 브라우저로 이동하게 해버려서 어떻게 하는 건지 궁금해요!!
- 해결됨CSS Flex와 Grid 제대로 익히기
align-items: stretch;
안녕하세요? 좋은 강의 감사드립니다. 강의 마지막에 (저번 메뉴 강의 때 처럼 padding 을 주는 대신) align-items: stretch; 속성을 이용해서 높이만 늘이셨는데요, 같은 방식으로 메뉴에 적용해보니 높이만 늘어날 뿐 메뉴의 텍스트는 위에 붙어있습니다. 그러고 보니 stretch 는 높이만 늘일 뿐 텍스트를 세로방향으로 중간에 놓지는 않는 것 같은데요 input 엘리먼트의 텍스트는 왜 자동으로 세로방향의 중간으로 놓여지나요?
- 미해결CSS Flex와 Grid 제대로 익히기
justify-items는 없다.
IDE에서 justify-items가 단축키로 뜨지만, 실제 구현된 API는 아닌 거 같네요. align-content의 경우 wrap에서 가로축이 세로축으로 변환되는 상황이 나오지만, 세로축에서 가로축으로 wrap은 일어나지 않기 때문!!!????? justify-content / align-items / align-content가 헷갈리는데 잘 정리 됐어요 :)
- 미해결CSS Flex와 Grid 제대로 익히기
modal 에 관한 질문입니다.
강의에서는 modal를 만들때, ui.css랑 ui.page를 분리해서 html에 넣는방식을 사용했는데, 저는 css하나로 만들고있었습니다. 근데 modal를 display : flex / none을 동시에 하는 상황이 발생하게되어 작동되지않았는데 css파일을 분리하지않고 css하나로 만들경우엔 modal을 어떻게 처리해야할까요?..
- 미해결CSS Flex와 Grid 제대로 익히기
카테고리 정렬하기.
신박한 아이디어입니다.. 이게 컬럼으로도 정렬이 될까 생각해서 grid-column으로 똑같은형태로 적용해보았습니다만 각각의 컬럼이 빈틈없이 채워지지는 않네요. 컨테이너의 어떤 속성을 부옇면 제대로 정렬리 가능할까요?
- 미해결CSS Flex와 Grid 제대로 익히기
border-radius에 관해 질문드립니다.
강의중에서 말씀하신대로 padding을 0 1rem을 주면 각 card-item이 떨어져서 한줄에 3개씩보여질때 효과적이지만, 강의에서 나온 card는 사각형이라 상관없지만, 만약 card에 radius를 주고싶다면 li에 padding을 주었기때문에 작동하지않습니다. card가 사각형이 아니라 원형을 주고싶을땐 어떻게 설정해야할까요? desc / img 에 각각 radius를 주면 이상하게 나오고.. li자체는 50%라 li에 주게되면 간격이 꽉차는 현상이 나옵니다.
- 미해결CSS Flex와 Grid 제대로 익히기
grid 질문입니다.
grid에서 text 의 길이가 길어져 버리면 css에서 지정한 넓이를 무시하고 text의 길이만큼 넓이를 가져가 버리는데 grid > div (그리드의 직계자식) 에 overflow: hidden; 을 주는 것 밖에 방법이 없을까요? # 코드: https://codesandbox.io/s/admiring-microservice-nh7j7?file=/index.html ## 참고그림: 첫번째 요소가 넓이가 text 크기만큼 늘어남.
- 미해결CSS Flex와 Grid 제대로 익히기
reset css 로 사용하는 default.css 에 관해서
안녕하세요. 10개월차 웹개발자입니다. 반응형 웹을 다루는데 어려움이 있어서 강의를 듣게 되었는데요! 여백을 0px 으로 만들기 위해 사용하는 default.css 의 경우 일반적으로 현업에서 작업을 할 때, 기본적으로 사용하는 초기 세팅 CSS 인가요? 아니면 강의의 이해를 돕기위해 사용하는 것인가요? 전자(현업에서 주로 초기 세팅으로 사용)의 경우 이 default.css 파일을 활용해도 괜찮을까요?
- 미해결CSS Flex와 Grid 제대로 익히기
padding-bottom: 60%질문드립니다
card-list요소가 부모고 card-image가 자식이 될텐데 그럼 card-image에 padding-bottom:60%하고 height: 0;을 처리한다면 card-image는 card-list요소 높이 60%만큼을 먹는 상태인가요? 그부분이 헷갈리네요 ㅠㅠㅠ
- 미해결CSS Flex와 Grid 제대로 익히기
min-height관련 질문드립니다!
항상 코딩함에 있어서 부모에게 높이를 안주면 자식이 높이를 못가지는 문제가 생기는데 보통 html,body에 100%를 주면서 해결하더라구요 근데 상황따라 이게 잘 안될때가 있던데 min-height: 100vh와 body height:100%를 같이 먹이면 자식들 컨텐트의 크기에 상관없이 전체를 덮을 수 있을까요? https://qastack.kr/programming/6654958/make-body-have-100-of-the-browser-height 여기서도 해결 방법이 다양하게 나열되어있는거 같던데 보통 잘 안되는게 많더라구요 ㅠ
- 미해결CSS Flex와 Grid 제대로 익히기
padding-bottom : 60% 를 적용한뒤 이미지가 안보여여
카드 리스트를 만들던중 padding-bottom:60% 을 적용해도 이미지가 보이지 않아서여.card-image { height:0; padding-bottom:60% }이렇게 하면 이미지가 넓이에 맞춰서 반응형이 된다는데 사실 무슨말인지 이해도 안가고 되지도 않아서여 한번 봐주시면 감사여 http://terecal-hyun.co.kr/skilnote2/myshortcut/css-flex-tutorial-terecal/7
- 미해결CSS Flex와 Grid 제대로 익히기
메뉴바 css 적용할때 em 단위를 왜 쓰시는건지 궁금해요
안녕하세요 강사님 좋은 강의 감사드립니다 질문이 하나 있습니다 아래 코드에서 padding 과 font-size 의 단위로 em을 사용하신 이유가 무엇인지 궁금합니다 부모 태그의 폰트 사이즈에 숫자를 곱하는거라는데 부모 사이즈에 폰트 사이즈는 현재 디폴트잖아여 굳이 em을 사용하신 이유가 있으신가여?em이란 단위를 써본적이 별로 없어서 좀 난해하게 느껴져여 .menu-link { display:block; padding:1em; font-size: 1.2rem; font-weight: bold; color: #555; text-decoration: none; text-align: center;} 알려주시면 감사여 ~!
- 미해결CSS Flex와 Grid 제대로 익히기
반응형 max-width min-width를 어떤식으로 사용하나요 ㅠ?
이 예제에선 min-width만 사용하시던데! min은 값을 어디어디 까지만 줄어들게하는 속성맞지요? max는 어디까지 값을준만큼만 커지게 하는 속성이구요; 근데 media에선 min만 줘도 상관없나요? 저는 pc버전에서 모바일로 하는건만 봐서 모바일에서 pc로 가는건 처음봐서요 ㅠ
- 미해결CSS Flex와 Grid 제대로 익히기
아 그리고 하나만더 여쭤볼게요 ㅠ
그 플렉스를 쓸때 item들은 width를 퍼센트로 주는게 좋은건가요? 픽셀로주면 플렉스 유연함이 사라지나요?; 그리고 content에 플렉스를 주고 아이템들에게 영향이 가는데 그 아이템들의 자식들한테 즉 content에 후손에게도 영향이가나요? 아니면 아이템들에게 다시 플렉스를 줘서 그안에 자식에게 다시 플렉스 효과를 주어야하나요?;