묻고 답해요
130만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결인터랙티브 웹 개발 제대로 시작하기
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 사용하고 있습니다. 감사합니다.
-
미해결<M.B.I.T> 테스트 페이지 만들기! with Django
CSS적용
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. INDEX에서는 CSS가 적용이 됬었는데 FORM에서는 CSS가 적용이 안되요ㅠㅠ 다 똑같이 했는데 왜 적용이 계속 안될까요? 인터넷에서 쿠키 삭제하면 된다그래서 쿠키삭제도 했는데 계속 적용이 안됩니다....
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
[그랩마켓] Javascript 적용하기 - 1 강의 내용 중 App.css 관련 질문
Javascript 적용하기 과정에서 App.css를 모두 날리고 아래와 같이 App.css를 수정하였습니다. [App.css 코드] html, body, #root, #root > div { height: 100%; } 그런데 브라우져 화면에서 보면 height 100%가 적용되어 있지 않은 것 같은 화면으로 확인 되고 있습니다. [화면 이미지] 위와 같이 height가 적용되지 않은 것 과 같은 모습으로 보입니다. 개발자 도구에서 height 적용을 확인 해 보면 모두 100%로 되어 있습니다. [html 100% height] [body 에서 height 100%로 설정된 이미지] [root와 첫 번재 div에 height 적용된 이미지] 어디가 잘못 되었는지 가르쳐 주시면 감사하겠습니다. 혹시 몰라서 index.js, App.js, App.css 코드를 아래에 적어놓겠습니다. [index.js] import "./index.css"; function MainPage() { return ( <div> <div id="header"> <div id="header-area"> <img src="images/icons/logo.png" /> </div> </div> <div id="body"> <div id="banner"> <img src="images/banners/banner1.png" /> </div> <h1>판매되는 상품들</h1> <div id="product-list"></div> </div> <div id="footer"></div> </div> ); } export default MainPage; [App.js] import "./App.css"; import MainPageComponent from "./main/index.js"; import "./index.css"; //index.css는 export 객체가 없다 그래서 그냥 ./index.css를 하면 된다 function App() { return ( <div> <MainPageComponent></MainPageComponent> </div> ); } export default App; [App.css] html, body, #root, #root > div { height: 100%; } 감사합니다.
-
미해결
png파일 관련
안녕하세요 html과 css를 시작한지 얼마 안되 왕초보입니다. 동영상 강의를 들으면서 따라하는 중인데 css에서 png파일이 적용이 안돼서 질문 남깁니다ㅜ 이 png 파일이 스프라이트 형식으로 되어있어서 이미지가 여러 개 있는데 처음 로고에 적용할 때는 투명 배경이 적용돼서 잘 적용했습니다. 두 번째에 같은 이미지의 다른 부분(검색 아이콘)을 넣으려고 했더니 같은 png파일임에도 불구하고 회색 배경?이 같이 들어가더라고요ㅠㅠ 여기서부터 강의를 못듣고 있습니다. 혹시 문제를 아시는 분 답변 부탁드립니다ㅠㅠㅠ
-
미해결<1만 시간의 법칙> 웹 페이지 제작하기
컨텐츠 영역의 높이 차이
검은색 줄이 쳐져 있는 모습을 보면 알 수 있듯이 공유하기 버튼과 훈련하기 go go 버튼의 높이가 차이가 납니다. 제 오류인가 싶어 fianl 코드로 실행을 해보아도 똑같았습니다. <div class=share> 부분에만 따로 덜 넣거나 더 넣은 것도 아니고 같은 buttons 의 css를 따르고 다른 것은 배경화면의 색과 왼쪽의 마진을 넣은 것 뿐입니다. 제 컴퓨터의 에러로 이런 것인가요? 아니면 따로 해결방법이 있을까요?
-
미해결나만의 포트폴리오 웹페이지 만들기
챕터 6에서 해결이 안되고 있습니다.
보시는것 처럼 작게 화면을 했을때 왼쪽에만 여백이 있습니다. 3번정도 영상 돌려보면서 제가 잘못쓴게 있을까 봤는데도 없고.. 해결이 안되네요ㅠㅠ 그리고 아래 메인,서브,텍스트가 보이질 않는데 해결방법을 몰라 애만 타네요ㅠㅠ +추가로 사진 대신 유튜브 링크를 올리고 싶은데 방법이 있을까요? 구글링을 하고 싶은데 어떻게 검색을 해야할지 막막합니다ㅠㅠ
-
미해결실습 UI 개발로 배워보는 순수 javascript 와 VueJS 개발
컴포넌트 제작시 글로벌 css와 Scoped css
프로젝트에서 주로 글로벌하게 css를 사용하고 있는데 scoped하게 사용하거나 둘을 적절하게 사용하는게 더 좋은가? 라는 생각을 하고 있는데 어떤것이 더 나은지 모르겠고 둘을 섞어 쓴다면 그 기준을 잘 정하지 못하겠는데 어떻게 하는것이 좋다고 생각하시는지 궁금합니다.
-
미해결작정하고 장고! Django로 Pinterest 따라만들기 : 바닥부터 배포까지
PyCharm HTML 스타일(CSS) 자동완성 문의
먼저 훌륭한 강의를 공급해주셔서 감사합니다. 강의자 영상에서는 Template 코드 작성 시 HTML 인라인 스타일을 작성할 때 CSS 스타일 제안 및 자동완성이 지원되는 모습을 볼 수 있는데 제 개발환경(PyCharm Comm.)에서는 Suggestion이 발생하지 않습니다. 해당 옵션을 어떻게 활성화하는지 문의드립니다.
-
미해결풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
구조 가상 클래스 셀렉터는 보통 어디에 사용하나요?
안녕하세요, 잔재미코딩님! 강의 너무 재미있게 잘 듣고 있습니다~ CSS 파트에 Selector 부분을 공부하고 있는데요~ 구조 가상 클래스 셀렉터의 개념과 작동원리는 잘 이해가 가지만, 이 셀렉터들이 보통 어떤 용도로 많이 사용되는 지 궁금합니다! 실제 사이트에서 어떻게 적용되고 있는지 좋은 예시를 알려주실 수 있을까요? 감사합니다!