49,500원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결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 작성이 매우 편한거 같아서요!가르쳐주시면 감사하겠습니다.
- 해결됨CSS Flex와 Grid 제대로 익히기
flex-basis auto, 0 차이
flex-basis에서 auto로 설정하는 것과 0으로 설정하는 것의 차이가 무엇인지 궁금합니다.따로 코드를 짜서 실행하면 autof로 설정했을 때와 0으로 설정했을 때 결과물이 똑같아서 차이가 궁금합니다.
- 미해결CSS Flex와 Grid 제대로 익히기
padding 대신 gap을 쓰는게 더 편하지 않나요?
안녕하세요!강의 재밌게 수강하고 있습니다 :)해당 카드 리스트를 만들 때는 padding보다 gap을 쓰면 더 간단하게 만들 수 있지 않나요??왜 padding을 쓰신 건지 궁금합니다!
- 미해결CSS Flex와 Grid 제대로 익히기
animation forwards 관련 질문
안녕하세요, "CSS Flex와 Grid 제대로 익히기" 강의 및 "인터렉티브 웹개발 제대로 시작하기"강의를 듣고 예제를 응용 중 다음과 같은 질문사항이 생겼습니다."3D 보드게임판" 예제에 보면 초기에 "starting" 애니메이션 지정을 통해 카메라 앵글을돌려주는데 forwards 속성을 사용하여 마지막 프레임에서 멈추게 하는 것은 이해를 하였습니다.여기에 더 나아가 "전진! 3D 스크롤" 예제에 나오는 방향키 액션으로 앵글을 돌리는 액션을추가해보고 싶어 코드를 수정하였는데요. 질문은 위 starting 애니메이션 지정을 빼면 방향키 이벤트 키로 앵글을 서서히 누른만큼돌아가게 만들기는 했는데, starting 애니메이션 지정만 넣으면 방향키 이벤트가 먹통이되는 것을 확인하였습니다. 이리저리 알아본 바로는 애니메이션의 forwards 속성에 의해이후 rotate() 가 적용이 안되는 것처럼 보이는데, "animationFillMode" 속성을 통해 "none" 이나"backwards" 를 주면 방향키 이벤트가 정상작동 하지만, starting 으로 이미 돌아간 앵글에서첫 프레임으로 "짠" 하고 되돌아가고 방향키 이벤트가 먹는 것처럼 되어 자연스럽지가 않아보이는데 이를 해결하는 방법이 있을까요?
- 미해결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; 적용시키는게 일반적인 방법인가요?
- 미해결CSS Flex와 Grid 제대로 익히기
card__item에 display:flex를 했을 때..
강사님 질문이 있습니다...card-item에 displat:flex를 적용하면 기존 화면에서아래와 같이 화면이 나오는데요 이때 왜 card-image에 flex-shrink:0값을 줘도 이미지가 안보이는건지 잘 이해가 안됩니다이미지는 왜 사라지는건가요?
- 미해결CSS Flex와 Grid 제대로 익히기
11vmin
선생님 vmin이 브라우저 기준 가로 세로중 작은 값 기준으로 100분의 1값이라는 것은 알겠는데 왜 값을 11vmin으로 줬는지는 잘 이해가 안됩니다 그냥 원하는 수치로 11을 넣어주신간가요??
- 미해결CSS Flex와 Grid 제대로 익히기
header class 안에 div와 h2
<section class="cate-sect cate-music"> <header class="cate-sect-header"> <div class="cate-name">Music</div> <h2 class="cate-sect-title">Lorem, ipsum.</h2> </header> <p class="cate-sect-cont"> Lorem ipsum dolor sit, amet consectetur consectetur totam. </p> 강사님 강의에 <header class="cate-sect-header"> 안에<div class="cate-name">Music</div> <h2 class="cate-sect-title">Lorem, ipsum.</h2> 를 같이 넣어주신 이유가 혹시 따로 있을까요?? <header class="cate-sect-header">안에 <div class="cate-name">Music</div>만 넣어주고 <h2 class="cate-sect-title">와 <p class="cate-sect-cont"> 는 header에서 따로 빼도 될까요?
- 미해결CSS Flex와 Grid 제대로 익히기
grid 반응형 페이지 step1 질문있습니다~
강사님! grid column, row를 지정해줄 때 기존의 것에서 secondary-a, secondary-b는 grid-column,row를 지정해주지 않아도 제자리에 있으면 따로 그리드를 지정해주지 않아도 되나요? 아니면 전체 다 grid-column, row값을 줘야하나요?
- 미해결CSS Flex와 Grid 제대로 익히기
반응형 페이지 step4 order
강사님! 아이템 배치 순서를 order로 배치하면 접근성 면에서 문제가 생긴다고 하셨는데 이같은 경우에는 html 구조가 primary, secondary-a, secondary-b 순서로 되어있는데 화면상에서 보이는 순서랑 달라도 괜찮은 건가용? 혹시 다른 방법은 뭐가 있는지 궁금합니다!
- 미해결CSS Flex와 Grid 제대로 익히기
미디어쿼리 사이즈
안녕하세요? 강의 수강 중 반응형 작업에 용이한미디어쿼리 부분에 대해 궁금한 부분이 생겨서 글을 남기게 되었습니다~보통 세~네가지 미디어쿼리 사이즈로 나눠서 작업을 한다고 알고 있는데요.pc태블릿모바일이라고 가정했을 때모바일 기반의 사이트에서는 3을 기반으로 먼저 작업을 하고그다음 2.태블릿, 1. pc 순으로 작업을 하는 게 더 효율적일까요??그리고, 이 부분이 가장 궁금한 부분인데요,보통 320px ~ 480px 이 모바일 사이즈라고 알고 있는데,크롬 개발자모드에서 확인을 해보면 480px 화면에서는 폰트 사이즈가 괜찮은데, 320px 화면에서는 폰트사이즈가 크다보니 줄바꿈이 생기는 경우가 있어서요.. 320~480까지의 간격이 꽤나 큰 것 같은데 보통 이럴때는 어떻게 작업하는지 궁금합니다 ㅜㅜ
- 미해결CSS Flex와 Grid 제대로 익히기
figure + div
02:522:52 경우에 따라서는 figure + div를 감싸는 경우가 있다고 하셨는데 보통 어떠한 이유로 많이들 wrapper를 만드나요?
- 미해결CSS Flex와 Grid 제대로 익히기
CSS Grid를 통한 정렬의 장점
안녕하세요 😃신선한 그리드를 이용한 정렬을 재미있게 잘 보았습니다. 몇가지 궁금한 점이 있어서 질문 드려요~ Q1.보통 이러한 정렬은 자바스크립트를 이용하여 정렬하는 것이 일반적이라고 생각됩니다.(리액트나 기타 프레임워크를 보았을때..) 그럼에도, 이와 같이 CSS를 이용하여 정렬한다고 했을때, 어떠한 장점을 얻을 수 있을까요?? 🤔Q2.1분코딩님의 샘플 코드를 보면 큰 그리드 컨테이너 안에서 header, footer, 각각의 cards(section), 상단 버튼들이 위치하고 있습니다. 저 같은 경우는 큰 그리드 컨테이너를 잡고 그 안에 button-container, header, card-section, footer 이런 식으로 분류한후 card-section 안에서 다시 그리드를 잡아서 사용하게되었습니다. 이렇게 구조를 잡게되니, CSS만을 이용한 체크박스 이벤트를 활용할 수 없게 되었습니다.😅 제가 궁금한 점은, 그리드 레이아웃을 활용할 때는 (저처럼) 그리드 안에 섹션별로 컨테이너를 잡고 사용하지는 않고 바로 각각을 그리드 아이템으로서 위치를 잡아서 사용하게 되나요? 혹은 어느 방식을 많이 사용하게 되는지 궁금하네요. ( 질문드리고 나서 생각해보니, 캐바캐일거라는 생각이 들긴하네여. 😅)
- 미해결CSS Flex와 Grid 제대로 익히기
19강 secondary-b영역에서 background가 안칠해지는 문제
flex 반응형 페이지 step 2에서 secondary-b에서 background: #666; 이 제대로 동작하지 않습니다.firefox 개발자도구로 봤을때는 요소가 넘친다는 문구가 보이는데 어떤 문제인지 궁금합니다. 아래처럼 background를 칠해도 옆에 작은 네모 2개만 생기고 제대로 변경되지 않고 있습니다.
- 미해결CSS Flex와 Grid 제대로 익히기
search-form input[type="search"] 내에 min-width
안녕하세요. Flex 반응형 페이지 Step 2 강의대로(6:41) search-form에 width를 240px 로 주니까 search-form이 화면 밖으로 튀어나가 가로 스크롤이 생기더라고요. 그래서 소스파일 올려주신 걸로 비교를 해보니 search-form의 search input에 min-width를 0으로 준게 빠져있길래 제 소스에 넣으니 잘 동작합니다. (유연한 검색창 강의에 해당 내용이 빠져있습니다.) 왜 min-width를 0을 줘야하는거고 왜 주지 않으면 저런 화면 밖으로 튀어나가는 현상이 발생할까요?
- 미해결CSS Flex와 Grid 제대로 익히기
카드리스트-padding 0 1rem하면, 떨어져요
. https://yoonicorn.cafe24.com/flex/ui-page.html 제가 작성한 페이지입니다^^ padding만 추가하면 이렇게 됩니다. (특정구역에서만 그러는건 아니고 전반에서 그래요)