묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결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가 먹지 않을꺼라고 생각이들었는데요. 먹어지는 이유가 있을까요?..
-
해결됨[코드캠프] 시작은 프리캠프
input 태그 / flex 정렬
안녕하세요. 취업을 목표로 공부하고 있는 코린이 입니다.섹션2 CSS 파트의 "회원가입" 화제 과제를 하는 중에, 며칠동안 코드를 계속 수정하고 고쳐도(아직 제 실력으로는) 해결이 어려운 부분들이 있어 질문을 남기게 되었습니다. 저는 맥북을 사용하고, chrome으로 구현하고 있습니다. <input> 관련input[type="radio"] { appearance: none; border-radius: 50%; width: 20px; height: 19.95px; background-color: #ebebeb; border: 1px solid #d2d2d2; } <input type="radio" ~> 위의 input 태그의 외형을 CSS로 변경할 때 (특히, 배경 색상) 코드가 반영이 안되는 부분이 있어 인터넷 검색을 하다보니, appearance: none;을 지정해 줘야 한다는 것을 알게 되었습니다.이 부분에서, 'input 태그에 class 또는 id를 적용시킬 때 항상 appearance를 적용해야 하는지' 궁금합니다. 나머지는 다했는데... / <div> 속 <input>의 flex 정렬과제의 90%는 구현했습니다.. 그런데 부모박스를 <div>로 지정하고자식 박스에 <input> 태그가 포함되었을 때,position: flex;justify-content: row/column;와 같은 flex 정렬 코드가 반영이 되지 않고 있습니다. 최대한 자력으로 해결해보려고 노력하고 있지만, 아직 제 실력이 부족하여며칠을 고민해도 쉽게 해결하지 못하고 있습니다...선생님의 고견이 절실한 순간입니다. 완강하는 그날까지!html<!DOCTYPE html> <html lang="ko"> <head> <title>회원가입</title> <link href="./02-signup_실습.css" rel="stylesheet"> </head> <body> <!-- 회색 배경 --> <div class="Graybg"> <!-- 회원가입 배경 --> <div class="SignUpbg"> <!-- Group5 --> <div class="Group5"> <!-- 회원가입을 위해~ --> <div class="Title"> 회원가입을 위해<br> 정보를 입력해주세요 </div> <!-- Group1 --> <div class="Group1"> <div class="Textbox">* 이메일</div> <div class="vector1"></div> </div> <!-- Group2 --> <div class="Group1"> <div class="Textbox">* 이름</div> <div class="vector2"></div> </div> <!-- Group3 --> <div class="Group1"> <div class="Textbox">* 비밀번호</div> <div class="vector2"></div> </div> <!-- Group4 --> <div class="Group1"> <div class="Textbox">* 비밀번호 확인</div> <div class="vector2"></div> </div> <!-- 성별 --> <div class="gender"> <!-- 여성 --> <div class="genderBox"> <div><input type="radio"></div> <div>여성</div> </div> <!-- 남성 --> <div class="genderBox"> <div><input type="radio"></div> <div>남성</div> </div> </div> <!-- 체크박스 --> <div class="checkBox"> <input type="checkbox"> <div class="genderText"> 이용약관 개인정보 수집 및 이용, 마케팅 활용 선택에 모두 동의합니다. </div> </div> <!-- 선 --> <div class="line"></div> <!-- 가입 버튼 --> <button> <div class="signUpText">가입하기</div> </button> </div> </div> </div> </body> </html> CSS.Graybg { position: absolute; width: 1920px; height: 1080px; background-color: #FFFFFF; border: 1px dotted black; display: flex; justify-content: center; align-items: center; } .SignUpbg { width: 670px; height: 960px; background: #FFFFFF; border: 1px solid #AACDFF; box-shadow: 7px 7px 39px rgba(0, 104, 255, 0.25); border-radius: 20px; display: flex; justify-content: center; align-items: center; } .Group5 { width: 470px; height: 818px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; } .Title { box-sizing: border-box; width: 466px; height: 94px; font-family: 'Noto Sans CJK KR'; font-style: normal; font-weight: 700; font-size: 32px; line-height: 47px; color: #0068FF; } .Group1 { width: 466px; height: 80px; display: flex; flex-direction: column; justify-content: space-between; } /* 성별 */ .gender { width: 140px; height: 23.94px; position: flex; flex-direction: row; flex-wrap: nowrap; border: 1px dotted black; } .genderBox { width: 60px; height: 23.94px; display:flex; flex-direction: row; justify-content: space-between; align-items: center; border: 1px dotted black; } input[type="radio"] { appearance: none; border-radius: 50%; width: 20px; height: 19.95px; background-color: #ebebeb; border: 1px solid #d2d2d2; } .genderText { font-family: 'Noto Sans CJK KR'; font-style: normal; font-weight: 400; font-size: 16px; line-height: 24px; color: #000000; } /* 성별 */ /* 체크박스 */ .checkBox { position: flex; flex-direction: row; align-items: center; width: 454px; height: 21.06px; font-family: 'Noto Sans CJK KR'; font-style: normal; font-weight: 400; font-size: 14px; line-height: 21px; border: 1px dotted black; } input[type="checkbox"] { width: 20px; height: 20px; } .checkBoxText { width: 419px; height: 21px; font-family: 'Noto Sans CJK KR'; font-style: normal; font-weight: 400; font-size: 14px; line-height: 21px; color: #000000; } /* 체크박스 */ .vector1 { width: 466px; height: 0px; border: 1px solid #0068FF; } .vector2 { width: 466px; height: 0px; border: 1px solid #CFCFCF; } /* 선 */ .line { width: 470px; height: 1px; background: #E6E6E6; } /* 가입 버튼 */ button { box-sizing: border-box; display: flex; justify-content: center; align-items: center; width: 470px; height: 75px; background: #FFFFFF; border: 1px solid #0068FF; border-radius: 10px; } button:hover { background: yellowgreen; } .signUpText { width: 70px; height: 27px; font-family: 'Noto Sans CJK KR'; font-style: normal; font-weight: 400; font-size: 18px; line-height: 27px; text-align: center; color: #0068FF; }
-
미해결SCSS(SASS)+GRID+FLEX 실전 포트폴리오 퍼블리싱
live sass complier 버전 문제
안녕하세요!live sass compiler 익스텐션 설치 및 세팅 영상 공부하고 있는데요!강의에 나오는 ritwick dey의 익스텐션은 더 이상 사용이 불가하다고 하여, 그 아래에 있는 glenn marks 버전을 설치했습니다.설치 후 json 세팅을 하고 있는데설정 > 확장에 live sass compiler가 나오지 않아 문의 드립니다. sass를 검색했을 때 아래 부분만 나오는데요! json 세팅을 할 수 있는 다른 방법이 있을까요? 감사합니다.
-
미해결
오랜만에 웹설계 업무로 돌아와서 최근 경향 질문드립니다.
전에 잠깐 웹페이지 제작 업무를 맡게 되어서html/css/js와 반응형 미디어 쿼리로 웹사이트를 만들었는데저는 px단위로 크기를 잡고 position으로 위치를 잡았는데 요즘은다양한 방법들이 있더라구요 제가 전담해서 프론트 개발을 할개 아니라화면설계와 간단한 데이터베이스 웹 연동, 테스트용 서비스 페이지 제작정도만하려고 합니다.퇴근 후, 주말 시간을 활용해서 관련 공부를 하려고 하는데 flex&grid같은걸 공부할지다른 프레임워크같은걸 공부할지 고민입니다.미디어쿼리나 자바스크립트 같은건 기억이 조금은 나는데 레이아웃 잡는게어렵네요..ㅠㅠ 선배님들 도와주세요 ^^
-
미해결CSS Flex와 Grid 제대로 익히기
flex 모달 만들때
position: fixed; left: 0; right: 0; top: 0; bottom: 0; 이부분이 적힌것에 대해서 질문하려고 하는데요, 포지션 고정시킨후 위아래 왼쪽 오른쪽 0을 했는데, 모달이 중간에 오게 되는게 잘 이해가 안돼요. (저부분 없이) justify-content, align-items로만 하면 왜 안되는건가요? (왜 정중앙에 오지 않는걸까요?) position에 대해 이해가 부족해서 그런지 이해가 잘 안돼요^^ㅎㅎ
-
미해결CSS Flex와 Grid 제대로 익히기
flex-basis 문의드립니다.
flex-basis 문의드립니다. 혼자 해보면서 잘 안되어 문의드립니다. 우선 강사님 코드는 당연히 잘 되는데요. flex-basis: 100px width: 100px 를 비교할 때 item요소에 한국어나 띄어쓰기가 들어가면 제대로 동작하지 않던데 왜 그런 것인가요? ex) flex-basis : 100px aaaaa aaa aaaa 이런 식으로 하면 자동으로 다음줄로 이동합니다.
-
해결됨플렉스(Flex) 반응형 웹사이트 포트폴리오(The World's Best Cities)
질문드립니다 강사님
강사님 각각의 section안의 .inner 바로 밑에 class 명 주실때 - heading 과 -content가 section 마다 다르게 붙는데 그 기준이 혹시 따로 있는지 궁금해서 여쭤봅니다!
-
미해결<M.B.I.T> 테스트 페이지 만들기! with Django
display: flex 오류
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.\ 안녕하세요 선생님 ㅠ css적용하는데 display: flex; 적용하자마자 이 난리가 납니다... 왜그럴까요? #main_contents { display: flex; justify-content: center; margin-top: 100px; width: 100%; height: 100%; }
-
미해결[리뉴얼] 코딩자율학습 제로초의 자바스크립트 입문
flex 관련해서 질문 있습니다.
안녕하세요. 제로초님 제로초님 하고 같이 진행한 미니 프로젝트들 더 예쁘게 만들어보고 싶어서 html하고 CSS을 추가 작업하고 있는데요. 현재 이런 틀을 만들려고 합니다. 그리고 다 완성도 했는데... 작업 도중에 이해가 안 되는 부분 2가지가 발생해서 질문드립니다. 질문 코드 링크입니다. => https://codepen.io/uscgil0127/pen/bGobxxq 해당 코드를 확인해보시면, CSS 부분에 Q1. max-height를 설정해줬는데, 왜 내부의 박스들이 overflow해도 height가 max 값만큼 늘어나지 않나요?? => 제 생각에는 내부 박스들이 외부 박스를 삐져나오면, max-height가 발동해서 늘어날 수 있는만큼 늘어날 거라고 생각했는데, 늘어나지를 않네요;;;;;; max 값만큼 height가 늘어나지 않으면, max-height의 유용성을 잘 모르겠습니다... --------------------------- Q2. CSS 부분에서 .h20 .h40 .h80 에서 flex: 4 0 40%; 를 적용해주면 margin 값인 0.5rem이 포함되서, container 박스를 overflow한 것같은데, 왜 그냥 height: 20%를 설정해줬을 때는 박스를 overflow하지 않는 걸까요?? ---------------------------- 어떻게든 구글링해서 이해해보려고 했는데, 도저히 이해가 안되서 부득이하게 질문드립니다. 감사합니다.
-
미해결CSS Flex와 Grid 제대로 익히기
flex 관련해서 질문 있습니다.
flex 연습 삼아서, 이런 모형을 만들어봤는데요. 만드는 도중에 이해할 수 없는 부분이 2가지 있어서 질문드립니다. 질문에 관한 코드 링크입니다. => https://codepen.io/uscgil0127/pen/bGobxxq Q1. max-height를 설정해줬는데, 왜 내부의 박스들이 overflow해도 height가 max 값만큼 늘어나지 않나요?? => 제 생각에는 내부 박스들이 외부 박스를 삐져나오면, max-height가 발동해서 늘어날 수 있는만큼 늘어날 거라고 생각했는데, 늘어나지를 않네요;;;;;; max 값만큼 height가 늘어나지 않으면, max-height의 유용성을 잘 모르겠습니다... --------------------------- Q2. CSS 부분에서 .h20 .h40 .h80 에서 flex: 4 0 40%; 를 적용해주면 margin 값인 0.5rem이 포함되서, container 박스를 overflow한 것같은데, 왜 그냥 height: 20%를 설정해줬을 때는 박스를 overflow하지 않는 걸까요?? ---------------------------- 어떻게든 구글링해서 이해해보려고 했는데, 도저히 이해가 안되서 부득이하게 질문드립니다. 감사합니다.
-
해결됨SCSS(SASS)+GRID+FLEX 실전 포트폴리오 퍼블리싱
질문있습니다
섹션 3. SCSS 핵심이론 활용 예제(Examples of using)까지 듣고 평소에 관심 있던 네비바 디자인을 연습삼아 하고 있습니다. 밑에 링크는 제가 관심있던 네비바 디자인를 사용하고 있는 웹사이트 입니다. 웹사이트 삼성화재 바로가기 밑에 링크는 codeopen으로 제가 비슷하게 만들어 봤습니다. codepen 바로가기 네비바 아이템에 마우스 오버되면 서브 메뉴가 스르륵 내려가게 하고 싶습니다. 현재 디스플레이 none block 으로 만들었습니다. opacity 으로 적용 했지만 해결되지 않았어요. 혹시 좋은 방법 없을까 하고 질문올립니다.
-
미해결CSS Flex와 Grid 제대로 익히기
flex UI #1 메뉴와 #4 메시지리스트 #7 카드리스트 질문있습니다!
안녕하세요 강사님! flex UI #1 메뉴 에서 flex-grow는 자식요소 정렬한 뒤 100%로 늘리기 위해서 사용하면 IE에서 일부 지원이 되지 않는 것이 있으니 %로 사용하는 방향으로 이해를 했는데요. flex UI #4 메시지리스트 수업에서는 좌측의 이미지 너비를 줄어들지 않게 하기 위해서 flex-shrink를 사용하셨던데 이것은 IE에서 지원이 가능한건가요? #7 카드리스트에는 <figure class="card-img" style="background-image: url(ryon.png);"> <img src="ryon.png" alt="라이언"> </figure> 구조를 짠 뒤 css에서 img를 none 처리 하는 이유가 무엇인지 궁금합니다. :D 감사합니다!!
