이런 사이트를 만든 적이 있는데요, 가로나 세로 단일방향에 대한 것(음료/푸드/상품탭)은 display : flex; 로 하는게 맞는거고 저는 그당시 테두리 있는 박스 두개를 먼저 display : grid; justify-content : center; 를 주고, 내부에 개별 이미지들을 display: flex; flex-wrap: wrap; justify-content: flex-start; 이렇게 줬었더라고요 오늘 수업에 따르면 이미지 배치는 행과 열이니까 display : grid; 로 두고 행, 열, 여백 등을 지정해서 4열xn행 이렇게 되게 코드를 짰어야 하는걸까요? 저 프로젝트할때는 저게 최선인거 같았는데 css 다시 공부하면서 꺼내보니까 왜 저렇게 했었는지도 기억이 안나네요ㅠ
.container { justify-items(가로 방향 정렬) : center; align-items(세로 방향 정렬) : center; } 를 설정하는데 각각 색깔이 차있는 div박스가 왜 찌부되는건가요.....???? 가로세로 길이가 지정되있지 않아서 인가요? 외부 컨테이너에서 정렬을 한다는게 내부 요소를 정렬하는건가요? 자식요소를 정렬하는건가요?(둘이 같은 의미인가요??) 다른 프로젝트 할 때도, 뭐가 자꾸 원하는대로 가운데로 안가서 justify-items : center를 쓰면된다는 소리를 듣긴 했었는데, 그때는 아예 의미도 모르고(다른 강사가 안짚어줬는지 까먹었는지) 아 저거 써도 왜 가운데로 안가냐ㅠ 했던 기억이 있는데 정확한 정황은 까먹었네요. 그래서 왜 찌부가 되고 있는걸까요? html&css 강의 마지막에 큰 멘붕 왔습니다
안녕하세요. 근래에 vanila JS로 SPA를 구현해보고 싶어서 구글링을 해보았습니다 생각보다 여러 자료들이 나오는데 어떤 자료가 적합할지 모르겠어서 혹시 자료를 추천해주실 수 있으신가하여 질문 올리게 되었습니다:) 자료가 많아서 몇개를 선정하기 애매하시다면 혹시 vanilla JS로 SPA 구현할때 참고자료로 삼기위한 기준을 알려주실 수 있으실까요? 글 읽어주셔서 고맙습니다! 새해 복 많이 받으세요:)
수업을 듣는 중에 가상 클래스의 정의가 이해가 가지 않아서 질문을 드려요수업에서는 가상 클래스의 정의를 ' 별도의 클래스를 정의하지 않아도 지정한 것처럼 ' 이라는 문구가 적혀있는데,가상 클래스의 사용할 때는 '클래스의 이름: 가상 클래스의 이름' 으로 작성을 하는 데, 이러면 클래스를 정의한 상태인 것 같아서 이해가 되지 않습니다. 혹시 좀 더 풀어서 설명해 주시면 안될까요?
다른 수강생분들에게도 문제 해결에 도움을 줄 수 있도록 좋은 질문을 남겨봅시다 :) 1. 질문은 문제 상황을 최대한 표현해주세요. 2. 구체적이고 최대한 맥락을 알려줄 수 있도록 질문을 남겨 주실수록 좋습니다. 그렇지 않으면 답변을 얻는데 시간이 오래걸릴 수 있습니다 ㅠㅠ ex) A라는 상황에서 B라는 문제가 있었고 이에 C라는 시도를 해봤는데 되지 않았다! 3. 먼저 유사한 질문이 있었는지 꼭 검색해주세요! 강의에 사용하시는 노션 링크가 영상 하단에 있다고 커뮤니티에서 찾아보았는데, 아무리 찾아도 없어서, 혹시 어디서 찾아볼수있을까요?
자식요소에 float값이 있으면 부모요소는 높이 값을 잃어버릴때, float : left 와 right 둘 다 있을 때 높이를 잃어버리는건가요? 자식요소가 여러 개 있으면 여러 개 모두 float 있을 때 잃어버리는거지요? 혹시 부모요소에 overflow:hidden을 해서 높이 값을 찾아주는 것에 원리가 있을까요?
좋은 내용 감사합니다. 프롬프트 내용중에 "Translate Into Korean~" 이라는 내용으로 답변을 한글로 받게 됩니다. 혹시 [events] 밑에 오는 사용자 입력값과 동일한 언어로 결과를 받고 싶다면 어떻게 작성하면 될까요? 강의 내용을 기준으로 다국어 서비스를 만들려고 하는데, 영어가 짧아서 질문 드려요
.app-ui { /* border: 1px solid red; */ width: 340px; height: 640px; transform: rotate(-30deg) skewX(20deg); /* transform: skewX(); */ position: relative; } .app-ui:hover img:nth-child(1){ transform: translate(40px, -40px); } .app-ui 요소를 rotate (-30deg) skewX(20deg) 해서 .app-ui:hover 밑에 이미지를 translate(40px, -40px) 한 것 같은데 이 때 숫자는 어떻게 40이라는 값이 나온걸까요? 수직으로 올리는 값을 어떻게 정하는 걸까요? 10 20 30 40 다 넣어보면서 찾는건가요..? ㅠㅠ
영상 : [ 손쉬운 조작 OrbitControls] 에서 three의 경로 설정 중 THREE.WebGLRenderer: WebGL 1 support was deprecated in r153 and will be removed in r163 WebGL 1 지원은 r153에서 사용 중단되었으며 r163에서 제거될 예정입니다. 라는 메세지가 나왔습니다. 질문 : 이게 나중에는 오류가 날 수 있다는 뜻인가요? 맞다면 어떻게 대비를 해야 하는지 궁금합니다.
강의 너무 잘 보고 배우고 있습니다!! 감사합니다 🙂 카드를 한장이 아니라 여러 장이 나오게 만들고 싶어서 혼자 코드를 수정해봤는데요 key 값이 없어서 오류가 난다고 하는데요 1-1.이 상태에서는 어떻게 key값을 넣어줘야 할까요? 1-2. 다른 방법은 없을까요? import Card from "./Card"; const names = [ { id: 1, name: "학생 1", comment: "리액트 공부중입니다" }, { id:2, name: "학생 2", comment: "리액트 공부중임니댜" } ] function ProfileCard(props) { <div> {names.map((name) => { return ( <Card title={name.name} backgroundColor="#B57EDC" comment={name.comment} /> ) })}; </div> } export default ProfileCard;
