묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨[코드캠프] 강력한 CSS
안녕하세요 이미지 관련해서 질문이 있습니다,
안녕하세요 현재 이미지 관련해서 제공해주신 가이드 따라 작업 중에 있는데 비율이 다른 이미지 같은 경우 하나의 행에서는 height가 같았으나 flex-wrap 으로 다음 줄로 넘어가면 height가 달라지는지 궁금합니다. 반응형 제작 중에 있는데 desktop 미디어 쿼리에서 한 줄에 두 개의 이미지 아이템이 있을 경우 height는 같은데 mobile 미디어 쿼리에서 한 줄에 하나의 이미지만 디스플레이 하고자 할 때 height값이 달라져 이것저것 찾아보고 하루 통으로 날리고 질문드려 봅니다.....ㅠㅠ혹싀...이미지 원본 비율과도 관련이 있을까요....
-
미해결처음 만난 리액트(React)
오류가 뜹니다ㅜ
이거 왜 이런가요ㅜㅜnpm uninstall -g create-react-app 치면 저렇게 돼요ㅠㅠ
-
해결됨HTML5 & CSS3 기초 문법 올인원
flexbox와 grid
이런 사이트를 만든 적이 있는데요, 가로나 세로 단일방향에 대한 것(음료/푸드/상품탭)은 display : flex; 로 하는게 맞는거고 저는 그당시 테두리 있는 박스 두개를 먼저 display : grid; justify-content : center; 를 주고, 내부에 개별 이미지들을 display: flex; flex-wrap: wrap; justify-content: flex-start; 이렇게 줬었더라고요 오늘 수업에 따르면 이미지 배치는 행과 열이니까 display : grid; 로 두고 행, 열, 여백 등을 지정해서 4열xn행 이렇게 되게 코드를 짰어야 하는걸까요? 저 프로젝트할때는 저게 최선인거 같았는데 css 다시 공부하면서 꺼내보니까 왜 저렇게 했었는지도 기억이 안나네요ㅠ
-
미해결HTML5 & CSS3 기초 문법 올인원
#21 그리드 강의 정렬 관련 속성
.container { justify-items(가로 방향 정렬) : center;align-items(세로 방향 정렬) : center;} 를 설정하는데 각각 색깔이 차있는 div박스가 왜 찌부되는건가요.....???? 가로세로 길이가 지정되있지 않아서 인가요?외부 컨테이너에서 정렬을 한다는게 내부 요소를 정렬하는건가요? 자식요소를 정렬하는건가요?(둘이 같은 의미인가요??) 다른 프로젝트 할 때도, 뭐가 자꾸 원하는대로 가운데로 안가서 justify-items : center를 쓰면된다는 소리를 듣긴 했었는데, 그때는 아예 의미도 모르고(다른 강사가 안짚어줬는지 까먹었는지) 아 저거 써도 왜 가운데로 안가냐ㅠ 했던 기억이 있는데 정확한 정황은 까먹었네요. 그래서 왜 찌부가 되고 있는걸까요? html&css 강의 마지막에 큰 멘붕 왔습니다
-
해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
이번에 F유형이 추가된다고 들었어요..!
이 강의 잘 학습하며 1분기 시험 준비하고 있는 사람입니다!며칠전에 정확한 일정 알아보기 위해 큐넷 사이트 들어갔고 이것저것 눌러보다 작년 4분기때 F 유형이 또추가가 되었다고 하더라구요..혹시 이 부분도 준비중일까요?
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
그림 링크 아무것도 안뜹니다.
수업 영상강의처럼 진행하는데 같은 링크를 걸어도 그림이 안뜹니다!!<html> <head> <title>Hello World</title> </head> <body> <h1>Hello World</h1> <h2>Hello World</h2> <h3>Hello World</h3> <h4>Hello World</h4> <h5>Hello World</h5> <p>안녕하세요 그랩입니다.</p> <p>안녕하세요 그랩입니다.</p> <p>안녕하세요 그랩입니다.</p> <br /> <p>안녕하세요 그랩입니다.</p> <a href="https://naver.com">네이버 넘어가기</a> <img src="https://cdn.pixabay.com/photo/2015/03/26/09/47/sky-690293__340.jpg" alt="구름 사진" /> </body> </html>
-
미해결애플 웹사이트 인터랙션 클론!
Vanilla JavaScript로 SPA 만드는 자료 혹은 선택 기준을 추천해주실 수 있으신가요?
안녕하세요. 근래에 vanila JS로 SPA를 구현해보고 싶어서 구글링을 해보았습니다생각보다 여러 자료들이 나오는데 어떤 자료가 적합할지 모르겠어서 혹시 자료를 추천해주실 수 있으신가하여 질문 올리게 되었습니다:)자료가 많아서 몇개를 선정하기 애매하시다면 혹시 vanilla JS로 SPA 구현할때 참고자료로 삼기위한 기준을 알려주실 수 있으실까요? 글 읽어주셔서 고맙습니다!새해 복 많이 받으세요:)
-
미해결따라하며 배우는 HTML, CSS
가상 클래스(의사 클래스)의 정의가 이해가 되지 않습니다.
수업을 듣는 중에 가상 클래스의 정의가 이해가 가지 않아서 질문을 드려요수업에서는 가상 클래스의 정의를 '별도의 클래스를 정의하지 않아도 지정한 것처럼' 이라는 문구가 적혀있는데,가상 클래스의 사용할 때는 '클래스의 이름: 가상 클래스의 이름' 으로 작성을 하는 데,이러면 클래스를 정의한 상태인 것 같아서 이해가 되지 않습니다.혹시 좀 더 풀어서 설명해 주시면 안될까요?
-
해결됨비전공자를 위한 진짜 입문 올인원 개발 부트캠프
강의에 사용되는 노션 링크가 어디있을까요?
다른 수강생분들에게도 문제 해결에 도움을 줄 수 있도록 좋은 질문을 남겨봅시다 :) 1. 질문은 문제 상황을 최대한 표현해주세요.2. 구체적이고 최대한 맥락을 알려줄 수 있도록 질문을 남겨 주실수록 좋습니다. 그렇지 않으면 답변을 얻는데 시간이 오래걸릴 수 있습니다 ㅠㅠex) A라는 상황에서 B라는 문제가 있었고 이에 C라는 시도를 해봤는데 되지 않았다!3. 먼저 유사한 질문이 있었는지 꼭 검색해주세요! 강의에 사용하시는 노션 링크가 영상 하단에 있다고 커뮤니티에서 찾아보았는데, 아무리 찾아도 없어서, 혹시 어디서 찾아볼수있을까요?
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
퍼블리싱 해서 포트폴리오 만들려고하는데
포트폴리오 만들려고하는데 어떤 강의를 들으면 될까요?
-
미해결따라하며 배우는 HTML, CSS
스토리 생성하기 부분에서
안녕하세요. 수업 잘 듣고 있습니다.스토리 생성하기 부분에서 story__picture 부분에 top과 left 값을 주고 왜 다시 transform 값을 줘서 위치를 변화 시키는건가요?? top 과 left만 사용해서 위치를 변화시키는 것과 차이가 있을까요?
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
그림 링크 오류
Failed to load resource: the server responded with a status of 403 () 이런 에러가 뜨는데 어떻게 해결하나요ㅜ
-
미해결SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 with Figma
섹션 4. SCSS 핵심 이론(Essential Theory) 완성예제는 따로 없을까요?
다운받는 곳에 없어서요
-
해결됨HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
float과 높이 값 질문드립니다
자식요소에 float값이 있으면 부모요소는 높이 값을 잃어버릴때,float : left 와 right 둘 다 있을 때 높이를 잃어버리는건가요?자식요소가 여러 개 있으면 여러 개 모두 float 있을 때 잃어버리는거지요? 혹시 부모요소에 overflow:hidden을 해서 높이 값을 찾아주는 것에 원리가 있을까요?
-
미해결<M.B.I.T> 테스트 페이지 만들기! with Django
첫화면 버튼이 css 적용이 안됩니다..
.buttons button { width: 300px; height: 50px; padding: 5px; border-style: none; border-radius: 10px; font-family: "NEXON Lv1 Gothic OTF"; font-size: 20px; font-weight: bold; cursor: pointer; background-color: #fff; color: #7F47DD; margin-bottom: 20px; }로 코드 올려주신 것 그대로 했는데도 아래 사진처럼 기본 버튼으로 됩니다..다른 css 디자인은 잘 적용이 됩니다.뭐가 문제일까요?
-
해결됨React + GPT API로 AI회고록 서비스 개발 (원데이 클래스)
프롬프트 명령어 - 입력값과 동일한 언어로 받으려면 어떻게 작성할까요?
좋은 내용 감사합니다.프롬프트 내용중에 "Translate Into Korean~" 이라는 내용으로 답변을 한글로 받게 됩니다.혹시 [events] 밑에 오는 사용자 입력값과 동일한 언어로 결과를 받고 싶다면 어떻게 작성하면 될까요?강의 내용을 기준으로 다국어 서비스를 만들려고 하는데, 영어가 짧아서 질문 드려요
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
강의를 듣고있는데
강의 들을 때 나오는 포트폴리오 자료들은 다운 받을 수 있을까요?? 필기하면서 듣고 싶어서요!
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
rotate, skewX, translate 값 찾기 질문드립니다..
.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 다 넣어보면서 찾는건가요..? ㅠㅠ
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
화면 폭이 좁아졌을 때 질문입니다..
분리 되면 밑에 있는 요소에 가려서 글이 안보이는데 밑에 있는 요소 밑으로 밀 수 있는 방법이 있을까요? <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="css/02.hover-separate(04).css"> </head> <body> <div class="items"> <div class="item"> <div class="front"> <img src="images/space-01.png" alt=""> <h2>Mars</h2> </div> <div class="back"> <p>화성은 태양계의 네 번째 행성이다. 4개의 지구형 행성 중 하나다. 동양권에서는 불을 뜻하는 화(火)를 써서 화성이라 부르고 로마 신화의 전쟁의 신 마르스의 이름을 따 Mars라 부른다.</p> <a href="#none">Read More</a> </div> </div> <div class="item"> <div class="front"> <img src="images/space-02.png" alt=""> <h2>Jupiter</h2> </div> <div class="back"> <p>목성은 태양계의 다섯번째 행성이자 가장 큰 행성이다. 태양의 질량의 천분의 일배에 달하는 거대행성으로, 태양계에 있는 다른 모든 행성들을 합한 질량의 약 2.5배에 이른다.</p> <a href="#none">Read More</a> </div> </div> <div class="item"> <div class="front"> <img src="images/space-03.png" alt=""> <h2>Saturnus</h2> </div> <div class="back"> <p>토성은 태양으로부터 여섯 번째에 있는 태양계의 행성으로, 진성(鎭星)으로도 불렀다. 토성은 태양계 내의 행성 중 목성에 이어 두 번째로 크며, 지름은 약 12만 킬로미터이다.</p> <a href="#none">Read More</a> </div> </div> </div> </body> </html> @media (max-width:768px){ .item{ display: block; } } @import url('https://fonts.googleapis.com/css?family=Raleway&display=swap'); body{ font-family: 'Raleway', sans-serif; color: #222; line-height: 1.5em; font-weight: 300; margin: 0; background-color: #222; color: #fff; font-size: 15px; } a{ color: #fff; text-decoration: none; } .items{ text-align: center; width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } .item{ /* border: 1px solid #fff; */ width: 300px; height: 220px; display: inline-block; position: relative; margin: 10px; } .front, .back{ position: absolute; width: 100%; transition: 0.5s; } .front{ /* position: absolute; */ background-color: #333; text-align: center; height: inherit; z-index: 1; /* width: 100%; */ top: 0; } .front img{ margin-top: 8px; /* animation: ani 1s linear infinite; */ } .item:hover .front img{ animation: ani 1s linear infinite; } .front h2{ margin-top: 0; } .back { /* position: absolute; */ background-color: #fff; color: #000; height: inherit; text-align: center; padding: 20px; box-sizing: border-box; /* width: 100%; */ top: 0; opacity: 0; } .item:hover .back{ opacity: 1; } .back p{} .back a{ color: #fff; background-color: yellowgreen; padding: 5px 10px; border-radius: 20px; /* box-shadow: #222222c1 0.7px 0.7px 0.7px;/ */ margin-top: 2px; display: inline-block; } .back a:hover{ background-color: #000; } .item:hover .front{ top: -50%; } .item:hover .back{ top: 50%; } @keyframes ani{ 0% {transform: scale(1);} 50% {transform: scale(1.1);} 100% {transform: scale(1);} }
-
해결됨떠먹는 Three.js
WebGL 1 지원 중단에 대해
영상 : [손쉬운 조작 OrbitControls] 에서 three의 경로 설정 중 THREE.WebGLRenderer: WebGL 1 support was deprecated in r153 and will be removed in r163WebGL 1 지원은 r153에서 사용 중단되었으며 r163에서 제거될 예정입니다.라는 메세지가 나왔습니다. 질문 : 이게 나중에는 오류가 날 수 있다는 뜻인가요? 맞다면 어떻게 대비를 해야 하는지 궁금합니다.
