묻고 답해요
148만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결[리뉴얼] 코딩자율학습 제로초의 자바스크립트 입문
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하지 않는 걸까요?? ---------------------------- 어떻게든 구글링해서 이해해보려고 했는데, 도저히 이해가 안되서 부득이하게 질문드립니다. 감사합니다.
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
브라우저에 아무것도 보이지 않습니다.
안녕하세요. 강의 보면서 연습하는 중에 차례로 잘 따라하다가 CSS 컨테이너에 red라인을 넣었는데도 브라우저에서 아무것도 보이지가 않습니다. 잘못 입력된건 없는 것 같은데 뭐가 원인인지 도저히 모르겠어서 문의 드렸습니다. - 인터넷에 CSS 링크 연결 오류와 관련해 검색 해보고 크롬 캐시도 삭제 해보고 HTML에 연결된 CSS 링크에 ?ver=1, ?afer를 붙이는 등 여러 방법을 썼는데 계속 안보입니다. 제가 뭘 잘못한건지... - 평소 연습 할 때 '[다운로드] 이론학습 및 모듈제작 실습 폴더' 열어서 연습하는데 이번에는 바탕화면에 폴더를 새로 만들고 시작을 했습니다. 그 과정에서 뭔가 잘못된건지... 답답한 마음에 질문 드립니다. <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>HTML5 시멘틱 태그로 CSS 레이아웃</title> <link rel="stylesheet" href="style.css?ver=1"> </head> <body> <div class="container"> <header> <article></article> <article></article> </header> <section class="box1"></section> <section class="box2"> <article></article> <article></article> <article></article> </section> <footer></footer> </div> </body> </html> ------------------------------------------------ .container { border: 1px solid red; width: 1200px; } header {} header article {} .box1 {} .box2 {} .box2 article {} footer {} <폴더위치> <브라우저>
-
미해결
css 정리할때 이렇게 해도 괜찮을까요?
.text-layout { color: #333 } .text-layout:hover { color: #666; background: #eee } .text-layout:active { color: #555; background: #ddd } .text-layout:focus { color: #333; background: #aaa } .col-left { width: 30% } .col-right { width: 70% } 한줄코딩을 자제하는 게 좋은 건 알고 있는데 이렇게 비슷한 스타일이나 속성이 하나만 들어가는 스타일을 한줄로 작성하는 것도 권장되지 않는 방식인가요? 하나하나 엔터치기엔 너무 어지러워지는 것 같고... 또 저런 것만 붙여놓자니 일관성이 없어보이네요ㅜㅜ
-
미해결풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
overflow: none 값
강의 내용 중 overflow의 속성을 "none"으로 설정하신 부분이 있는데정확하게 "none" 값이 overflow 속성에서는 무엇을 의미하는지 궁금해서 검색해보니 관련자료가 없어서요mdn에서도 overflow에 "none"이라는 값을 찾지 못했는데, 혹시 어떤 것을 의미하는 값인지 알 수 있을까요
-
미해결Vue.js 시작하기 - Age of Vue.js
vue에서 공통 css 관리
안녕하세요 기초 강의 완강하고 실제 프로젝트에 투입하려고 하는데 공통 css 파일은 컴포넌트 단위로 관리하는 vue에서 권장하지 않는 방식일까요? 유지보수 측면에서 각 컴포넌트에서도 재사용성이 높은 스타일은 하나의 파일에서 한번에 관리하고 싶은데 기초강의에서나 기존 다른 프로젝트 파일을 열어보아도 그렇게 관리가 되어 있지 않은 거 같아 문의드립니다. 혹시 공통 css 파일로 관리하는 방법이 따로 있거나 다른 강의에서 다루고 있을까요? 답변 부탁드립니다.
-
해결됨만들면서 배우는 HTML/CSS
배경사진이 두개로 나옵니다ㅜ
index.html 파일도 style.css파일도 강의와 같이 동일하게 적는다고 따라 적었는데 실시간 웹페이지 반영하기 버튼으로 봤더니 배경 이미지가 두개로 연달아 나와서 문의 드립니다. 이건 어떻게 해결방법이 없으련지요?
-
미해결코로나맵 개발자와 함께하는 지도서비스 만들기 2
infowindow_wrap부터 css가 적용이 안돼요
안녕하세요 강사님 infowindow_wrap부터 css가 적용이 안돼요 밑에 하단까지 적용이 안되어서 투명창 그대로 구현이 되는데 제가 잘못한 부분을 찾을 수가 없네요. 코드 보시고 잘못된 부분 찾아주시면 감사드리겠습니다. - 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
-
미해결리액트로 나만의 블로그 만들기(MERN Stack)
CSS, Server -state, 비밀번호 수정
혼자 고민하다가 도저히 안되서 질문드려요.,.ㅠㅠ 1.CSS 부분 강사님 소스와 똑같이 정의해도 몇몇은 다르게 보입니다. 대표적으로 카테고리 부분에서 반응형이 작동하지 않고 잘려서 나옵니다. (이유를 모르겠습니다.) flex를 적용해제하거나 colum 설정시, 카테고리 버튼이 쭉 아래로 ( 예를들어 react, vsocde, tt 형태로) 나열이 됩니다. 2. server 부분 auth 라우터 부분에서 states(401)을 삭제후 res.json 만 보낼 경우 메인화면에서 로그인하지도 않았는데 AppNavbar.js - authLink가 자꾸 출력이 됩니다. 그래서 확인해본 결과 인정여부를 확인하는 isAuthenticated가 자꾸 true로 바뀌더군요 states를 다시 작성하니 작동이 됩니다. 전 states가 시스템에 문제를 일으키지 않고 메세지 같이 명시만 해주는걸로 알았는데 아닌건가요? 3. 프로필 수정 ( 비밀번호 수정) 로그인 직후 비밀번호 수정 버튼을 클릭 시 페이지가 이동하지 않고, 포스트 수가 증가 합니다. (예를 들어 메인화면에서 포스터수:12개, 노출되어있는 포스터: 6개, 숨겨진 포스트 6개 일시 버튼클릭 시 노출되어 있는 포스터 수(6개) 만큼 포스터수가 증가합니다. 예시대로 하면 최종적으로 12+6 =18 개가 되고있습니다). 그러나 페이지 새로고침 후 비밀번호 수정버튼을 누를시에는 정상적으로 페이지가 이동하여 작동합니다. 원인을 도저히 모르겠네요..) 깃주소 남깁니다. https://github.com/dnjsvltm201311681/cookblog
-
미해결인터랙티브 웹 개발 제대로 시작하기
Css작성순서에 대해
Css를 작성할때, position, width, height,background,overflow 등 보기편하게 or 정해진 작성하는 순서가 혹시 있을까요? .stage{ position:relative; width:100vw; height:75vw; background:#ddd; overflow:hidden; }
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기
MainImage 내의 스타일링 사라지는 문제
(이미지 올리려고 5번 새로 썼는데 안되서 글로만 남깁니다) 안녕하세요 선생님! 강의 정말 잘 듣고 있습니다. LandingPage에서 MainImage로 볼 수 있는 영화 포스터 이미지는 처음 로딩됐을 때 창을 줄이면 같이 줄어들고, width 안에 꽉 차 있습니다 더 보기 버튼을 눌러 새로운 영화 목록을 받아오거나, Detail 페이지로 넘어가면 이미지가 창을 줄여도 너비가 고정되고, 바둑판식으로 반복됩니다 확인해보니 CSS의 스타일링이 사라지는 문제인데, 원인이 무엇인지, 어떻게 해결할 수 있는지 궁금합니다! <처음 MainImage의 스타일링> <div style="background: linear-gradient(rgba(0, 0, 0, 0) 39%, rgba(0, 0, 0, 0) 41%, rgba(0, 0, 0, 0.65) 100%) center center / 100% no-repeat, url("https://image.tmdb.org/t/p/w1280/8s4h9friP6Ci3adRGahHARVd76E.jpg") center center / cover, rgb(28, 28, 28); width: 100%; height: 500px; position: relative;"> <더 보기 버튼을 누르거나 Detail 페이지로 이동했을 때 MainImage의 스타일링> <div style="background: linear-gradient(rgba(0, 0, 0, 0) 39%, rgba(0, 0, 0, 0) 41%, rgba(0, 0, 0, 0.65) 100%), url("https://image.tmdb.org/t/p/w1280/3OwaKVZf3A2NdnarqKbwzFEhKir.jpg"), rgb(28, 28, 28); width: 100%; height: 500px; position: relative;> 감사합니다.
-
미해결애플 웹사이트 인터랙션 클론!
질문 드립니다.
안녕하세요~ 매일 한걸음 한걸음 강의들으면 공부하고 있는 수강생 입니다ㅎㅎ '완전히 빠져들게~~ 세라믹' 이 문장을 중간에 오게 하기 위해서 main-message의 스타일에 top: 35vh; 를 추가해주셨는데 왜 화면의 중간에 위치하려면 35%로 적어주는 걸까요? 대략 그정도 되어보여서 임의로 정하신 건지 아니라면 통상적으로 그렇게 사용하는 건지 만약 텍스트가 2줄 이상이라면 수치는 변경되야 하는건지 잘 모르겠습니다ㅎㅎ
-
미해결CSS 기본부터 활용까지
css수업-flex 4:holy grail layout
<!-- section의 세 개: navigation, main, aside를 수평으로 layout --> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .container{ display:flex; flex-direction:column; } header{ border-bottom:1px solid gray; } footer{ border-top:1px solid gray; } .content{ display:flex; } .content nav{ border-right:1px solid gray; } .content aside{ border-left:1px solid gray; } nav,aside{ fles-basis:150px; } </style> </head> <body> <div class="container"> <header> <h1>생활코딩</h1></header> <section class="content"> <nav> <ul> <li>html</li> <li>css</li> <li>javascript</li> </ul> </nav> <main> 생활코딩은 일반인을 위한 코딩 수업 </main> <aside> /* 광고부분 */ AD </aside></section> <footer> <a href="https://opentutorials.org/course/1">홈페이지</a></footer> </div> </body> </html> Q. nav,aside{}부분은 왜 .content nav 이런식이 아닌 이유가 무엇인지 궁금합니다.
-
해결됨HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
CSS 맨 윗줄에
안녕하세요. css 맨 윗줄에 charset "UTF-8"; 안넣어도되나요? 실무에서 작업할때요?
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
css 적용 문제
안녕하세요. 그랩마켓 css 적용하다가 궁금한 점이 있어서 문의 드립니다. 리액트 자체에 이런 문제? 현상?이 있는 것 같은데. 폴더별로 index.js와 index.css를 생성 후 js에서 css를 import해서 사용하고 있습니다. 근데 a의 폴더에서 index.css파일에 div에 효과를 주면 b의 폴더의 css 또한 div에 효과가 적용됩니다. 저는 a의 폴더의 index.js div에만 효과를 적용하고 싶은데요... 해결할 수 있는 방법이 있나요???
-
미해결면접과 취업을 부르는 '퍼블리셔 개인 포트폴리오 홈페이지' 제작
CSS에서 tag와 class를 결합하여 작성하는 것에 대한 질문이 있습니다.
안녕하세요? 포트폴리오를 만들다가 문득 의문이 생겨서 질문 드립니다. CSS를 작성할 때 선택자를 최소화 하는것이 좋다고 들었는데 section.welcome 또는 a.btn.start 이런식으로 태그선택자와 클래스선택자를 결합하여 작성하는 것에 이점이 있나요? 어쩔 수 없는 경우를 제외하고는 되도록 클래스만 선택하여 스타일을 주는것이 좋은 방향이 맞나요?
-
미해결[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
질문과 버튼 사이에 사진을 추가하고 싶습니다.
문제 사진 버튼 이런 구성으로 만들고 싶은데 어떻게 하는지 궁금합니다. 질문과 버튼의 글씨가 바뀌는 것처럼 사진도 질문마다 바뀌고 페이드인/아웃 효과도 주고 싶습니다.
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
css 궁금한 점이 있습니다.
외부스타일과 내부스타일이 로딩속도(성능) 차이가 있는가요?
-
미해결
Vs Code live server 오류
vscode 코드를 작성하고 라이브 서버로 실행 시키면 사진처럼 나오는데 뭐가 문제인건가요 ?
-
미해결애플 웹사이트 인터랙션 클론!
선색님 혹시 id는 body말고 container에 줘도 괜찮을까요?
선생님 안녕하세요 :)여러 페이지를 만들때 body에 무엇을 할당할경우 영향을 최소화 하기위해(물론 영향은 없을것같습니다만.. ㅠㅠ) container에 show-scene-0같은 아이디를 줘도 괜찮을까요?
-
미해결
django login template 질문
django 공부 중인 학생입니다. 웹사이트 로그인 예제를 다음과 같이 다른 디자인으로 바꾸고 싶은데 어려움을 느껴 질문 올립니다. <div class="form-group row"> {{ form.username|add_label_class:"col-form-label col-sm-2 ml-3 font-weight-bold" }} <div class="col-sm-5"> {{ form.username|add_class:"form-control"|attr:"autofocus" }} </div> </div> <div class="form-group row"> {{ form.password|add_label_class:"col-form-label col-sm-2 ml-3 font-weight-bold" }} <div class="col-sm-5"> {{ form.password|add_class:"form-control" }} </div> </div> <!-- Email --> <input type="text" id="defaultLoginFormEmail" class="form-control mb-4" placeholder="E-mail"> <!-- Password --> <input type="password" id="defaultLoginFormPassword" class="form-control mb-4" placeholder="Password"> 위에 디자인을 아래 디자인으로 바꾸고 싶습니다. widget_tweaks 사용하고 있습니다. 감사합니다.
