22,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 해결됨[코드캠프] 강력한 CSS
grid속성 6:36에 나오는 것.
가로의 1fr과 세로의 1fr이 같은 단위인가요? 즉 가로에서 1FR이 100px이었다면 세로의 1fr도 100PX인가요?
- 해결됨[코드캠프] 강력한 CSS
left:calc(100% - 100px) 질문드립니다.
.container { position: relative; width: 100%; height: 104px; /* height:104px 이유 : box-sizing:border-box 설정 때문 */ background: rebeccapurple; border: 2px solid red; } .item { width: 100px; height: 100px; background-color: black; display: flex; justify-content: center; align-items: center; animation-name: moveBox; animation-duration: 2s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; position: absolute; } .item span { color: white; } @keyframes moveBox { from { border-radius: 0; left: 0; } to { border-radius: 50%; left: calc(100% - 100px); } } item에 애니메이션 효과를 넣고 .container에서 범위에 벗어나지 않게 @keyframes moveBox에서 left:calc(100% - 100px)을 했는데 영상 설명에서 .item width 크기가 100px이라고 하셨는데 이해가 잘 되지 않아서 질문드립니다ㅠㅠ
- 해결됨[코드캠프] 강력한 CSS
텍스트박스안에서 padding-bottom 이 이렇습니다
padding 값을 상하좌우 모두 20px 값으로 주었습니다 그런데 padding 값에 따라 위쪽, 왼쪽, 오른쪽은 모두 먹히는데 아랫쪽은 적용이 안되어서 이렇게 나오더라구요 이건 아래쪽은 이런건가요 ?
- 해결됨[코드캠프] 강력한 CSS
단위심화 강의 중 질문 있습니다.
안녕하세요 단위심화 강의 중 두 번째 실습 과정 중, 두 번째 줄에 사진이 3장밖에 안 들어가는데 왜 그런건가요..?? flex-wrap: wrap; 까지 적용시켰는데 되지 않네요. 보시는 바와 같이 윗줄은 4장이 출력 되는데, 밑줄은 3장만 출력이 됩니다. 제가 작성한 코드는html<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>06-02-calc2</title> <link rel="stylesheet" href="./index.css"> </head> <body> <div class="container"> <div class="sidebar"> <ul> <li>메뉴1</li> <li>메뉴2</li> <li>메뉴3</li> <li>메뉴4</li> </ul> </div> <div class="contents"> <div class="item">상품</div> <div class="item">상품</div> <div class="item">상품</div> <div class="item">상품</div> <div class="item">상품</div> <div class="item">상품</div> <div class="item">상품</div> </div> </div> </body> </html>css* { box-sizing: border-box; } .container { display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; } .sidebar { width: 170px; background-color: orange; padding: 5px 15px; } .sidebar ul { width: 100%; padding: 0; } .sidebar ul li { list-style: none; padding: 5px 0; color: #ffffff; border-bottom: 1px dashed rgba(255,255,255,0.3); /* 메뉴 사이 구분선*/ } .contents { width: calc(100% - 170px); display: flex; flex-direction: row; align-items: flex-start; flex-wrap: wrap; } .item { width: 24%;/ height: 180px; background-image: url("../img/dochihello.jpg"); }
- 해결됨[코드캠프] 강력한 CSS
영상 중간 생략
섹션0 실습1 강의 39분 50초~ 듣다가 질문남깁니다적용이 안되는 이유를 설명하시는데 영상이 끊기고 생략되어있네요..그리고 강의 들을 때 가끔씩 오류인지 똑같은 부분이 반복되는 문제도 생깁니다 ㅠ,ㅠ
- 해결됨[코드캠프] 강력한 CSS
transition 활용 예시
새 글 쓰기 > 에서 > 이동하는 방법이 궁금합니다.
- 해결됨[코드캠프] 강력한 CSS
flex
02-04 flex 실습 중 div들의 가로사이즈와 세로사이즈는 따로 사이즈를 지정하지 않았음에도 불구하고 글자에 맞춰서 정해지는 것 같은데, 원리가 무엇인가요? 감사합니다.
- 해결됨[코드캠프] 강력한 CSS
단위심화 강의 중..
안녕하세요 단위심화 강의 중 두 번째 실습 과정 중, 두 번째 줄에 사진이 3개만 들어가는데 왜 그런건지요..?? flex-wrap: wrap; 까지 적용시켰는데 영상과는 다르게 되네요..
- 해결됨[코드캠프] 강력한 CSS
15:41에 나오는 grid 예시
안녕하세요 수업을 듣다가 15:41에 나오는 예시가 잘못된것같아서 질문남겨봅니다! 강사님이 써준 코드대로면 grid-column이 적용되는 범위가 첫번째 1fr과 두번째 2fr 사이까지가 아닌가요?그림으로 보여드리자면파랑색 부분이지 않나요?답변해주시면 감사하겠습니다! ++++++ 좋은 강의감사합니다 재밌게 공부중입니다!
- 해결됨[코드캠프] 강력한 CSS
단위 심화 강의 중 질문..
안녕하세요 <단위 심화> 강의 중 .item2 { background: green; width: calc(100%- 70px); height: 50px; } "- 사이에 공백을 넣지 않았다. 따라서 100% 가로값만 부여가 되었고, 이 때 100%는 입력한 100%가 아니다. item2가 블록요소이기 때문에 자동으로 부모요소의 가로값을 꽉 채워서 들어간다. 그렇기 때문에 100%의 가로줄이 입력된 것이다. 따라서 이 줄은 아무런 기능을 하지 않는다."이렇게 알려주셨는데 이해가 완벽히 되지 않습니다. 더 쉽게 설명을 해주실 수 있을까요..?
- 해결됨[코드캠프] 강력한 CSS
가상요소 선택자 after 기본 dislplay 값
강의 중에선 after의 display 기본 값이 block이기 때문에명시할 필요는 없지만 flex-direction 처럼 명시해주는 것이 좋다고 말씀해주셨습니다.근데, 개발자도구를 통해서 기본값을 확인해보니 display를 명시해주지 않으면 inline으로 지정되어 있는데 최근에 바뀐걸까요?
- 해결됨[코드캠프] 강력한 CSS
absolute 기준점
강의 중에는 absolute의 기준점이 첫번째가, 상위 부모 엘리먼트 중 relative 값을 가진 엘리먼트두번째는, 상위 부모 중 relative 없는 경우 body 라고 하셨는데실습해보니 상위 부모중 relative가 아니라 static을 제외한 position값을 가지기만 하면 해당 엘리먼트가 기준으로 되는 것 같습니다. 요악하자면 아래 내용이 맞을까요?조상 중 relative뿐만 아니라 position을 가진 요소가 없다면 초기 컨테이닝 블록(<body>요소)를 기준으로 삼는다.
- 해결됨[코드캠프] 강력한 CSS
align-items VS align-content
align-items는 아이템이 한줄 일때 우선적용align-content는 두줄 이상일때 적용으로 이해하고 있는데,아이템이 동적으로 늘어나서 한줄일 때도 있고 두줄 이상일때도 있는 경우엔 두가지 속성 다 줘야 할까요?ex. align-items: center; align-content: center;
- 해결됨[코드캠프] 강력한 CSS
position 관련 질문입니다.
transform 실습 강좌일때 .container 안에 position: relative 를 주셨습니다.궁금한 점이 생겼습니다.container가 아닌base에다가 position: relative를 주면 왜 파란색 박스가 맨 위로 모이는지 이부분이 정말 궁금합니다.' 왜 container에 position: relative를 주어야 회색 상자와 파란색 상자가 원하는대로 위치하는지에 대해 알고 싶습니다.
- 해결됨[코드캠프] 강력한 CSS
클래스 명칭 제작할때 container와 wrapper 차이점
안녕하세요. 'transform, transition(나만의 쇼핑몰 만들기)' 수강 후 과제 진행 중에 있습니다.코딩실습 강의를 들으며 클래스 명칭 제작할때 container와 wrapper를 구분하는 기준을 명확하게 설명해주시지 않은 것 같아 구분 기준을 여쭤보고자 합니다.혹시 제가 이전 강의에서 설명을 놓쳤을 수도 있으니 설명한 강의챕터가 있다면, 안내해주시면 다시 듣도록 하겠습니다..답변 부탁드립니다. 감사합니다.
- 해결됨[코드캠프] 강력한 CSS
쇼핑몰 홈페이지 이미지 자료 요청
안녕하세요.나만의 쇼핑몰 홈페이지 제작 강의 수강중인데, 학습자료에 있다는 이미지 파일을 찾지 못하겠습니다. 말씀하신 학습자료가 인프런 내에는 따로 게시판으로 존재하지 않는것 같으며, 노션에도 이미지자료만 따로 못찾겠으니 안내 부탁드립니다.
- 해결됨[코드캠프] 강력한 CSS
웹 안전 색상(web safe color)를 실무에서 웹 표준 수준으로 고려하나요?
안녕하세요.[섹션 4. 색상] 강의에서 웹 안전 색상(web safe color)에 대해 언급해주셨습니다.해당 내용이 궁금해서 찾아보니 웹 표준으로 등록된 것은 아닌, PC가 256개의 색깔만 구현가능한 옛날 기준으로 만들어 진것이라고 합니다.(참고)현재 모던 브라우저에 더불어 IE또한 왠만한 rgb컬러(256^3 = 16,777,216개)가 대부분 지원가능하다는데, 실무에서도 웹 안전 색상(web safe color)를 웹 표준처럼 심각하게 고려하는지 궁금합니다.답변 부탁드립니다. 감사합니다.
- 해결됨[코드캠프] 강력한 CSS
float와 clear
안녕하세요 선생님.잘 이해가 안가서 그러는데요,css강의중 float레이아웃 파트의 20분쯤에 보시면float와 clear에 관한 내용들이 나옵니다.float를 적용해주고, clear로 float적용해줬던 것을 지워주는 개념인가요?그렇다면 애초에 float를 사용하지 않으면 굳이 clear로 지워줄 필요가 없을텐데왜 float를 만드는 것이며 왜 clear로 굳이 float를 "어떤 작용"을 하여서 핸들링 해주는 걸까요?("어떤 작용"에 대해서는 분명 눈으로는 "어떤 작용"을 한다는게 보이긴 하는데 이게 어떤것인지는 표현을 못하겠습니다 ㅠㅠ)
- 해결됨[코드캠프] 강력한 CSS
float 레이아웃편에서 질문있습니다.
메뉴만드는 과정에서 a태그가 inline속성이라패딩의 경우 넓이값은 먹지만 높이값이 먹지않기때문에 블럭요소로 바꾸라하셨는데 여기서 인라인 블럭으로 바꿔도 무방할까요? 이런경우 블럭요소와,인라인블럭요소의 사용에 따른 차이점이 궁금해요~
- 해결됨[코드캠프] 강력한 CSS
단위심화 이미지파일
단위심화 배우고있는 수강생입니다. 이미지파일 적용하라고하셔서 노션도 들어가보고 다 찾아봤는데 이미지파일이 올라오지 않은거같아서 문의남깁니다.