묻고 답해요
130만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결플렉스(Flex) 반응형 웹사이트 포트폴리오(The World's Best Cities)
가로스크롤
■ 질문 남기실 때 꼭! 참고해주세요.- 먼저 유사한 질문이 있었는지 검색해주세요.- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다. 선생님 안녕하세요pc, 모바일 반응형은 대응이 됐는데,웹사이트 창을 1250px정도로만 줄여도가로스크롤이 발생을 해서요ㅠㅠ 혹시 이런 경우에는,div와 이미지 크기를 80%같은 수치로 줄여야하는건지?아니면 overflow로 대응을 해야하는건지?궁금합니다. 혹시 몰라서 제가 임의로img에max-width:100%height:auto로 해놨는데 이미지가 안넘어가고 가로스크롤이 발생해서요ㅠㅠ답변주시면 감사합니다. 다른 질문들을 확인해보니,@media (min-width: 768px) and (max-width: 1024px)이런식으로 대응하라고 하셨는데폰트사이즈와 이미지를 줄여야하는건가요?ㅠㅠㅠ아니면 flex구조를 컬럼으로 바꿔야할까요?
-
미해결퍼블리싱 핵심이론 PDF 교재 및 예제파일(HTML+CSS+FLEX+JQUERY)
임시이미지 사이트 close
HTML 교재 19 페이지 http://placehold.it 열리지 않아요, 없어진것 같음 다른 사이트 알려주세요 그리고 13페이지 한글입숨 사이트 열리지 않아요, 일시적인지 는 몰라도 찾아보니http://guny.kr/stuff/klorem/여기 지원되네요
-
미해결CSS Flex와 Grid 제대로 익히기
px, em ,rem을 어떻게 감각적으로 쓸 수 있을까요?
백엔드 지망생입니다. 개인프로젝트 겸 기본적인 css 지식은 있어야 할 것 같아서 하고 공부하고 있는데, 아직 px와 em rem을 언제 어떻게 써야 할지 잘 모르겠네요..px em rem의 개념은 잘 알고 있지만 강사님꼐서 어떤 상황에선 px을 쓰시고 em을 쓰시고 rem을 쓰시는데 초보자 입장에서 잘 와닿지 않네요.. 3:42초에 search-form input[type='search']에만 보더라도 한 클래스 안에 3개의 px em rem이 써 있는데 이런 감각적인 것을 어떻게 연습하면 좋을까요? 레이아웃 크기 지정도 그렇지만 또 font크기도 px em rem을 따로 쓰던데 이것도 감을 못잡겟네요..
-
미해결CSS Flex와 Grid 제대로 익히기
강의에 나오는 html 자동으로 만들어주는 편집기에 대해 알 수 있을까요?
css 셀렉터 처럼 쓰면 예를 들어ul.menu하면 자동으로 html 완성되는 기능입니다.html 작성이 매우 편한거 같아서요!가르쳐주시면 감사하겠습니다.
-
미해결SCSS(SASS)+GRID+FLEX 실전 포트폴리오 퍼블리싱
모달창에서 반응형 보여주기
안녕하세요 선생님.혹시 Modal 창으로 포트폴리오를 보여 줄 시, 창크기를 줄여서 반응형이 구현된다는 걸 보여 줄 수 있는 방법이 있을까요? (모달창의 창크기가 조절이 되게끔 하는 방법)수업시간에 지나갔는지 기억이 잘 안나네요 ㅎㅎ; 혹시나 불가능하다면, 어쩔 수 없이 링크버튼이 연결된 버튼을 따로 주는 방법이 좋을까요? 항상 감사드립니다.
-
해결됨CSS Flex와 Grid 제대로 익히기
flex-basis auto, 0 차이
flex-basis에서 auto로 설정하는 것과 0으로 설정하는 것의 차이가 무엇인지 궁금합니다.따로 코드를 짜서 실행하면 autof로 설정했을 때와 0으로 설정했을 때 결과물이 똑같아서 차이가 궁금합니다.
-
미해결플렉스(Flex) 반응형 웹사이트 포트폴리오(The World's Best Cities)
상위 태그 영역 무시 하는 방법
<div className="할아버지"> <div className="아버지"> <div className="본인"></div> </div> </div>;분명 이 강의 어디에서 배웠는데 기억이 안나서 질문을 올립니다.classname="본인"이 아버지의 영역을 무시하고할아버지의 영역을 기준으로 본인의 영역을 설정하는 방법이 있었는데요 기억이 안나네요분명 아버지 class에 어떤 css 속성을 설정을 해주면 아버지의 영역을 무시할 수 있었던 것으로 기억을 하는데 도움 부탁드립니다!
-
미해결SCSS(SASS)+GRID+FLEX 실전 포트폴리오 퍼블리싱
선생님 sass 환경설정 화면이 선생님과 달라요
선생님 강의 자세하게 설명해주셔서 너무 잘 듣고있습니다.Sass 환경설정 후 선생님처럼 동일한 코드를 붙여넣으면"liveSassCompile.settings.generateMap": false, "liveSassCompile.settings.formats":[ // This is Default. { "format": "expanded", "extensionName": ".css", "savePath": "/css" } ], "liveSassCompile.settings.autoprefix": [], "liveSassCompile.settings.excludeList": [ "**/node_modules/**", ".vscode/**", ], "liveSassCompile.settings.includeItems": [ ], }저는 이런 에러가 떠요.아무리 구글링을 해도 다들 셋팅 방법만 나와있고 이런 설명이 없어서요..샘 답변 부탁드립니다.
-
미해결CSS Flex와 Grid 제대로 익히기
padding 대신 gap을 쓰는게 더 편하지 않나요?
안녕하세요!강의 재밌게 수강하고 있습니다 :)해당 카드 리스트를 만들 때는 padding보다 gap을 쓰면 더 간단하게 만들 수 있지 않나요??왜 padding을 쓰신 건지 궁금합니다!
-
미해결CSS 레이아웃 - flex & grid
flex-box 하위 요소 아이템들은 자동적으로 높이값 flex-box 높이값과 같아진다고했는데,
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.안녕하세요 강의를 듣던중 flex-box 안에 있는 하위 요소들이 자동적으로 flex-box 높이 값을 먹는다고 했는데 실제로, <ul class="container"> <li class="item">호랑이</li> <li class="item">고양이</li> <li class="item">냥냥이</li> <li class="item">강아지</li> <li class="item">고슴도치</li> </ul> .container { display : flex} 적용했을경우 li 태그들이 container 와 높이가 같은걸 확인 할 수있었습니다. 그런데 왜 <div class="container"> <div class="item">호랑이</li> <div class="item">고양이</li> <div class="item">냥냥이</li> <div class="item">강아지</li> <div class="item">고슴도치</li> </div>인경우 container 하위 요소 div 들은 자신의 높이값을 유지하나요 ?
-
해결됨플렉스(Flex) 반응형 웹사이트 포트폴리오(The World's Best Cities)
반응형 적응형 구분
안녕하세요 선생님!플렉스 강의 너무 잘 듣고 있습니다.최근 플렉스 강의를 중반부 이상듣고 다른 사이트들 브라우저 검사로 스타일시트 염탐? 하고 있는데 궁금한점이 생겨서 문의드립니다.인프런 메인화면의 경우 브라우저 가로 사이즈를 줄이면 반응형으로 컨텐츠 영역이 크기에 맞게 줄어드는데크몽, 당근마켓 메인화면의 경우 브라우저 가로 사이즈를 줄이면컨텐츠 1200px 영역 양옆 마진만 줄어들면서 모바일 태블릿 영역까지 가면 가로스크롤이 길게 생기는데요...요런 사이트들은 브라우저 검사-> 토글디바이스툴바 로 아이폰12pro 선택하고 새로고침을 해야 모바일 레이아웃이 나오고 있는데해당 사이트들은 반응형 사이트가 아닌건가요? 적응형 웹 사이트의 경우 카카오뱅크, 다방 으로 pc, mobile 따로 사이트가 있는 적응형 사이트로 알고 있습니다.(실제로 위에 토글디바이스툴바 방식으로 새로고침 하면 m.***.com || ***.com/mobile)크몽, 당근마켓이 적응형일 경우 주소가 변경되야 될꺼 같은데 주소 변동이 없어서 더 궁금합니다;;제가 잘못 이해하고 있을 수도 있습니다.ㅠ답변 부탁드립니다. 감사합니다.
-
미해결SCSS(SASS)+GRID+FLEX 실전 포트폴리오 퍼블리싱
강의 자료
이미지는 어디서 다운 받는거죠?
-
미해결CSS Flex와 Grid 제대로 익히기
animation forwards 관련 질문
안녕하세요, "CSS Flex와 Grid 제대로 익히기" 강의 및 "인터렉티브 웹개발 제대로 시작하기"강의를 듣고 예제를 응용 중 다음과 같은 질문사항이 생겼습니다."3D 보드게임판" 예제에 보면 초기에 "starting" 애니메이션 지정을 통해 카메라 앵글을돌려주는데 forwards 속성을 사용하여 마지막 프레임에서 멈추게 하는 것은 이해를 하였습니다.여기에 더 나아가 "전진! 3D 스크롤" 예제에 나오는 방향키 액션으로 앵글을 돌리는 액션을추가해보고 싶어 코드를 수정하였는데요. 질문은 위 starting 애니메이션 지정을 빼면 방향키 이벤트 키로 앵글을 서서히 누른만큼돌아가게 만들기는 했는데, starting 애니메이션 지정만 넣으면 방향키 이벤트가 먹통이되는 것을 확인하였습니다. 이리저리 알아본 바로는 애니메이션의 forwards 속성에 의해이후 rotate() 가 적용이 안되는 것처럼 보이는데, "animationFillMode" 속성을 통해 "none" 이나"backwards" 를 주면 방향키 이벤트가 정상작동 하지만, starting 으로 이미 돌아간 앵글에서첫 프레임으로 "짠" 하고 되돌아가고 방향키 이벤트가 먹는 것처럼 되어 자연스럽지가 않아보이는데 이를 해결하는 방법이 있을까요?
-
미해결SCSS(SASS)+GRID+FLEX 실전 포트폴리오 퍼블리싱
맥북에서 scss 설치
맥북에서 vscode에 live sass compiler 설치하려고하니 setting docs가 없을때는 어떻게 해야하나요?
-
미해결SCSS(SASS)+GRID+FLEX 실전 포트폴리오 퍼블리싱
beautify 확장자가 더이상 관리되지 않다고합니다
beautify 확장자가 더이상 관리되지 않다고 해서beautify css/sass/scss/less 확장자를 다운받았는데괜찮을까요??
-
미해결CSS Flex와 Grid 제대로 익히기
auto-fill, auto-fill이 적용되지 않는것 에 대해 질문드립니다.
Q1: auto-fill 에 대해 질문드립니다.<Grid #3 강의의 4:30초> 에서셀이 2개 있고, grid-template-columns에 minmax(200px, auto)가 설정되어 있으며 auto-fill이 적용되어 있을때grid-template-columns: repeat(auto-fill, minmax(200px, auto))전체 Grid Container의 넓이가 500px 일때에, 셀의 column 길이가 200px 이상이 되어지게 됩니다.제가 알기로는 minmax(최솟값, auto) 라면 셀의 길이가 최솟값 보다 커지려면 셀이 가지는 컨텐츠의 길이가 최솟값보다 커야된다고 알고 있는데요.그런데 왜 auto-fill이 설정되어 있을때에는 컨텐츠의 column 길이가 200px 보다 작은데 왜 Grid Container의 넓이 만큼 늘어나는 것인가요?이것이 auto-fill을 적용하여 Grid의 기본 성질인 꽉 차게 늘어나는 성질때문에 그런가요?Q2 auto-fill 적용불가에 대해 질문드립니다.저의 브라우저에서 테스트 해본결과, auto-fill이 적용이 되지 않는 부분은셀이 2개가 있고, column의 길이가 minmax(200px, auto) 이며, auto-fill을 사용하고, Grid Container의 넓이가 600px 초과 된다면,셀이 가지는 column의 길이가 원래는 Grid Container의 길이만큼 꽉차게 늘어나다가 200px이 가질 수 있는 크기를 넘어서게 되니 꽉차지 않게 되는 것 같습니다.위의 질문과 동일한 것같습니다만,자동으로 늘어나는 것은 400px (200px 셀 2개) 의 크기보다 Grid Container의 길이에서 뺀것의 크기가 200px 이상이라면 자동으로 늘어나는 것이 중단되고,200px 이하라면 늘어나는 것이 되는 것인데,왜 200px 이하라면 늘어나는 것입니까? Grid Container의 넓이를 200px으로 나눌때 나머지가 200px 보다 작다면 그냥 Grid의 성질에 의해 늘어나는 것인가요? Flex만 사용하던 사람이라 minmax의 대한 성질과 auto-fill을 공부하니 약간 했갈리네요...
-
미해결CSS Flex와 Grid 제대로 익히기
flex-grow IE 질문드립니다.
안녕하세요 선생님. 강의에서 menu-item에 길이를 width 혹은 flex-grow를 넣을 수 있는데 인터넷 익스플로어 때문에 width를 사용하셨는데 caniuse에서 확인하면 IE 버전10이상부터는 flex-grow를 지원하는게 맞을까요?<!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" /> <!-- <link rel="stylesheet" href="ui.css" /> --> <style> .menu { display: flex; } .menu-item { width: 25%; /* flex-grow: 1; */ background: gold; } .menu-item:hover { width: 35%; /* flex-grow: 1.5; */ background: crimson; transition: all 0.5s ease-in-out; } .menu-link { display: block; /* 클릭하는 버튼 영역을 키우기 위해서 */ padding: 1em; font-size: 1.2rem; font-weight: bold; color: #555; text-decoration: none; text-align: center; } .menu-link:hover { color: #ffffff; } </style> </head> <body> <ul class="menu"> <li class="menu-item"> <a href="#" class="menu-link">Home</a> </li> <li class="menu-item"> <a href="#" class="menu-link">About</a> </li> <li class="menu-item"> <a href="#" class="menu-link">Product</a> </li> <li class="menu-item"> <a href="#" class="menu-link">Contact</a> </li> </ul> </body> </html>
-
미해결CSS Flex와 Grid 제대로 익히기
Flex-grow가 적용되는 영역에 대해 질문드립니다.
혹시 Flex-direction: row이고, Flex-wrap이 Wrap으로 설정되어 있고, 아이템들은 width: 33.3333%의 크기를 가지며, Height들은 서로서로 다 다를때, Wrap되어 행이 2개가 생길때에Flex-grow가 1로 Item들에 설정되어 있다면 모든 행의 높이가 가장 큰 높이에 맞춰지게 되는데요.https://blogpack.tistory.com/863 여기나 이 강의에서 학습한 대로 1행에서는 flex-grow의 이해가 쉽게 됬습니다.그치만, 제가 언급한 지금 이 예처럼 2열이고 높이가 서로다른 3개의 아이템들일 경우에는 Flex-grow가 한 행의 영역에서 남은 여백을 참조하여 모든 높이를 최대까지 늘리는 것인가요?flex-grow 또는 flex-shrink가 적용되는 영역은 한 행이나 열에서 적용되나요?각각의 Item들에 적용하는 속성이니 이해가 조금 어렵네요... 많은 조언 부탁드립니다.
-
미해결CSS Flex와 Grid 제대로 익히기
Grid 수직정렬 문의
안녕하세요. 영상 잘 보고 있습니다.문의드리고 싶은 내용은 다음과 같습니다.3행 1열 의 부모 컨테이너와 자식요소 (.logo, .search-bar, .banner) 일때.container { display: grid; grid-template-columns : 20% 1fr 20%; }@media (max-width: 600px) { // 에서 1행 3열로 변동하게 된다면#header{ display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr 1fr 1fr; } .logo, .search-bar, .banner{ grid-column: 1/2; grid-row: 1/2; }}자식요소에 grid-column: 1/2; grid-row: 1/2; 적용시키는게 일반적인 방법인가요?
-
해결됨SCSS(SASS)+GRID+FLEX 실전 포트폴리오 퍼블리싱
@mixin 관련 질문입니다.
@mixin 파트 시청중 궁금점이 생겨서요!첫번째 이미지 처럼 hover를 저렇게주고 css 컴파일하면은두번째이미지처럼 3개의 hover를 가진 css로 컴파일 되어서 보여지는데요.저러면은 괜히 css만 지저분해져보이는데 저렇게 hover를 주는 이유가 있었을까여?.그리고 css 컴파일 된것을 보면은ex) .complete.complete:hover -> 이렇게 되어있으면은 제가 알고 있는 css개념으로는.complete 클래스를 가지면서 .complete를가진 요소에 hover를 줘라라고 알고있기때문에hover가 먹지 않을꺼라고 생각이들었는데요. 먹어지는 이유가 있을까요?..