묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
과제 완료
직접 짜보니 어렵습니다.완성하고 보니 뿌듯한데 지저분하게 짠 것 같네요..html<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8" /> <title>회원가입</title> <link rel="stylesheet" href="./reset.css" /> <link rel="stylesheet" href="./02-signup.css" /> </head> <body> <form class="box-form-signup" action="" autocomplete="off" > <h2>회원 가입을 위해<br />정보를 입력해주세요</h2> <label for="user-email" class="text-form-signup" >* 이메일</label > <input type="email" id="user-email" class="input-form-signup" autofocus required /> <label for="user-name" class="text-form-signup" >* 이름</label > <input type="text" id="user-name" class="input-form-signup" required /> <label for="user-password" class="text-form-signup" >* 비밀번호</label > <input type="password" id="user-password" class="input-form-signup" required /> <label for="user-password-check" class="text-form-signup" >* 비밀번호 확인</label > <input type="password" id="user-password-check" class="input-form-signup" required /> <div class="box-form-signup-gender"> <input type="radio" name="gender" id="female" /><label for="female">여성</label> <input type="radio" name="gender" id="male" /><label for="male">남성</label> </div> <div class="box-form-signup-agree"> <input type="checkbox" class="checkbox" id="agree" /><label for="agree" class="agree" >이용약관 개인정보 수집 및 이용, 마케팅 활용에 동의합니다.</label > </div> <div class="line"></div> <button type="submit">가입하기</button> </form> </body> </html>css@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap'); * { box-sizing: border-box; padding: 0px; margin: 0px; } body { font-family: 'Noto Sans KR', sans-serif; } .box-form-signup { width: 670px; height: 960px; padding: 71px 100px; margin: 60px auto; border: 1px solid #aacdff; border-radius: 20px; box-shadow: 7px 7px 39px #0068ff40; display: flex; flex-direction: column; justify-content: center; } h2 { font-size: 32px; font-weight: 700; line-height: 47.36px; color: #0068ff; margin-bottom: 48px; } .text-form-signup { font-size: 16px; font-weight: 400; color: #797979; line-height: 23.68px; } .input-form-signup { font-size: 24px; width: 466px; height: 56.35px; font-weight: 700; border-width: 0 0 1px; border-color: #cfcfcf; margin-bottom: 24px; } .input-form-signup:hover, .input-form-signup:active, .input-form-signup:focus { outline: none; border-color: #0068ff; border-width: 0 0 1.5px; } input[type='radio'] { transform: scale(1.5); margin-right: 10px; } input[type='checkbox'] { transform: scale(1.2); position: relative; bottom: -1px; } .box-form-signup-gender { align-self: center; margin: 20px auto; } .box-form-signup-gender > label { font-weight: 400; font-size: 16px; padding-right: 20px; padding-left: 5px; } .box-form-signup-agree { height: 24px; align-self: center; margin: 40px auto; } .box-form-signup-agree label { font-weight: 400; padding-left: 10px; } button { width: 100%; height: 75px; font-size: 18px; line-height: 26.64px; color: #0068ff; background-color: white; border: 1px solid #0068ff; border-radius: 10px; transition: all ease-in-out 300ms; } button:hover { color: white; background-color: #0068ff; }
-
미해결스프링 MVC 1편 - 백엔드 웹 개발 핵심 기술
2강 - Http 응답 데이터 - Html 질문
html 응답에 <head>태그가 없는 이유가 response 객체에 contentType이랑 encoding 형식을 지정해줘서 그런 것 맞나요 ? package hello.servlet.basic.response; ** import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; import java.io.PrintWriter; @WebServlet(name = "responseHtmlServlet", urlPatterns = "/response-html") public class ResponseHtmlServlet extends HttpServlet { @Override protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //Content-Type: text/html;charset=utf-8 response.setContentType("text/html"); response.setCharacterEncoding("utf-8"); PrintWriter writer = response.getWriter(); writer.println("<html>"); writer.println("<body>"); writer.println(" <div>안녕?</div>"); writer.println("</body>"); writer.println("</html>"); } }
-
미해결실전! 스프링 부트와 JPA 활용1 - 웹 애플리케이션 개발
자바스크립트 함수가 실행되지 않습니다.
인텔리제이에서 웹사이트를 개발 중인데html파일 버튼 태그에서 호출한 자바스크립트 함수가 실행되지 않는 것 같아서 onclick방식과 addEventListener 방식 모두 해봤는데 모두 실행되지 않았습니다.버튼 2개를 모두 눌러봐도 "성공"이라는 알림창이 안 뜹니다.<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html, charset=utf-8" /> <script defer src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"> function testFunc() { alert("성공!"); } document.getElementById('addListenerFunc').addEventListener('click', function(){ alert("성공"); }); document.getElementById('addListenerFunc').addEventListener('click', testFunc); </script> <title>Title</title> </head> <body> <button onclick="testFunc()">onclickFunction</button> <button id="addListenerFunc">addListenerFunc</button> </body> </html>아무리 검색해봐도 이유를 모르겠습니다.
-
미해결
canvas의 도형에 원하는 이미지들을 넣고 싶습니다.
const COLORS = [ "#394fb8", "#554fb8", "#605ac7", "#2a91a8", "#2e9ab2", "#32a5bf", "#81b144", "#85b944", "#8fc549", "#e0af27", "#eeba2a", "#fec72e", "#bf342d", "#ca3931", "#d7423a", ]; export class Polygon { constructor(x, y, radius, sides) { this.x = x; this.y = y; this.radius = radius; this.sides = sides; this.rotate = 0; } animate(ctx, moveX) { ctx.save(); const angle = PI2 / this.sides; const angle2 = PI2 / 4; ctx.translate(this.x, this.y); this.rotate += moveX * 0.008; ctx.rotate(this.rotate); for (let i = 0; i < this.sides; i++) { const x = this.radius * Math.cos(angle * i); const y = this.radius * Math.sin(angle * i); i == 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y); ctx.save(); ctx.fillStyle=COLORS[i] ctx.translate(x, y); ctx.rotate((((360 / this.sides) * i + 45) * Math.PI) / 180); ctx.beginPath(); for (let j = 0; j < 4; j++) { const x2 = 160 * Math.cos(angle2 * j); const y2 = 160 * Math.sin(angle2 * j); j == 0 ? ctx.moveTo(x2, y2) : ctx.lineTo(x2, y2); } ctx.fill(); ctx.closePath(); ctx.restore(); } ctx.restore(); } }지금은 COLORS 배열을 이용해 fillstyle의 색을 넣었는데, 색상 대신 특정 이미지들을 넣고싶습니다. ctx.fillstyle = colors[i] 를 어떤 식으로 바꿔야할까요..?
-
미해결장고 설계철학으로 시작하는 파이썬 장고 입문
CreateView에 html 코드가 어떻게 적용되는 걸까요?
안녕하세요, 수강생 김영빈입니다!강의 4-3. django-bootstrap5 적용 및 post_new 뷰 구현과 관련하여 질문이 있습니다.bootstrap을 활용하여 포스팅을 위한 form을 구성하는 와중에 app.views.py에서 클래스 기반 뷰인 post_new를 활용해 form을 사용자에게 전달하고, 사용자가 입력한 내용을 DB에도 저장시킵니다.이때 view의 함수 기반 뷰인 index나 post_detail과는 다르게 return값에 html 템플릿 인수를 적용하지 않습니다. 그런데 어떻게 연결이 되어 사용자에게 html 코드를 보여줄 수 있는 것일까요?제가 유추해보았을 때는 form_class의 인자로 넣은 PostForm을 활용해 app.forms.py의 PostForm 클래스를 참조하여, form object를 생성하고, 이 form object를 post_form의 form인자로 받아서 html 코드를 출력하는 것으로 생각했습니다만 확실하지가 않아서 문의드립니다.CreateView가 매커니즘에 대한 이해가 크지 않아서 혼란이 발생하는 것 같습니다. 어떻게 이해하면 될지, 또한 CreateView의 소스코드는 어디서 볼 수 있는지 또한 함께 질문 드립니다!
-
미해결
css position absolute설정 시 space-between이 실행되지 않습니다.
cssbody { height: 97vh; display: flex; justify-content: center; align-items: center; background-color: #f3f3f5; } .sedow { box-shadow: 0 0px 20px 5px rgba(128, 128, 128, 0.1); } .insedow { color: rgba(128, 128, 128, 0.7); } .white-color { color: #ffffff; } .font-weight-lg { font-weight: 600; } .screen-first { height: 170mm; width: 90mm; background-color: #ffffff; margin: 50px; border-radius: 40px; position: relative; } .screen-second { height: 170mm; width: 90mm; background-color: wheat; margin: 50px; border-radius: 40px; } .screen-first-icon_box { display: flex; justify-content: space-between; margin: 50px 25px 0; } .screen-first_profile_box { display: flex; justify-content: center; margin-top: 30px; } .screen-first_profile { height: 80px; width: 80px; background-color: orange; border-radius: 50%; box-shadow: 0 0px 15px 10px rgba(255, 180, 40, 0.3); } .screen-first_profile_name { text-align: center; font-size: x-large; font-weight: 750; margin-top: 40px; } .screen-first_profile_genre { text-align: center; font-weight: 600; color: rgba(128, 128, 128, 0.7); margin-top: 15px; } .screen-first_button-box { margin-top: 35px; display: flex; justify-content: center; } .screen-first_button-box_button1 { padding: 12px 32px; border-radius: 30px; background-color: black; color: #ffffff; margin-right: 5px; } .screen-first_button-box_button2 { padding: 12px 20px; border-radius: 30px; background-color: #ffffff; color: rgba(128, 128, 128, 0.7); margin-left: 5px; font-weight: 550; } .fa-heart { color: black; } .screen-first_song-list { justify-content: center; align-items: center; flex-direction: column; margin-top: 20px; margin-left: 15px; margin-right: 15px; } .screen-first_song-list_profile { display: flex; align-items: center; padding: 15px 25px; position: relative; border-radius: 20px; } .screen-first_song-list_profile_img { display: flex; align-items: center; justify-content: center; height: 45px; width: 45px; background-color: tomato; border-radius: 10px; } .screen-first_song-list_profile_text { margin-left: 15px; } .fa-ellipsis-vertical { color: rgba(128, 128, 128, 0.7); position: absolute; right: 20px; } .screen-first_song-list_profile_text_title { margin-bottom: 5px; font-size: small; } .fa-chart-simple { color: #ffffff; } .screen-first_music-player { display: flex; justify-content: space-between; align-items: center; position: absolute; bottom: 5px; } .screen-first_music-player { background-color: #222222; padding: 15px 30px; margin: 10px 15px; border-radius: 50px; } .screen-first_music-player_text_singer { margin-bottom: 7px; } .fa-pause { margin: 0 20px; } 추가로 reset.css 2.0도 적용하여 사용하고 있습니다./* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none; } table { border-collapse: collapse; border-spacing: 0; } html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="css/reset.css" /> <link rel="stylesheet" href="css/style.css" /> <script src="https://kit.fontawesome.com/3373615a5c.js" crossorigin="anonymous" ></script> </head> <body> <div class="screen-first"> <div class="screen-first-icon_box"> <i class="fa-solid fa-arrow-left fa-lg"></i> <i class="fa-solid fa-magnifying-glass fa-lg"></i> </div> <div class="screen-first_profile_box"> <div class="screen-first_profile"></div> </div> <h1 class="screen-first_profile_name">Tyler, The Creator</h1> <h4 class="screen-first_profile_genre">Rap, Hip-Hop</h4> <div class="screen-first_button-box"> <div class="screen-first_button-box_button1">Shuffle</div> <div class="screen-first_button-box_button2 sedow"> <i class="fa-solid fa-heart fa-lg"></i> 212 971 </div> </div> <ul class="screen-first_song-list"> <li class="screen-first_song-list_profile"> <div class="screen-first_song-list_profile_img"></div> <div class="screen-first_song-list_profile_text"> <h4 class="screen-first_song-list_profile_text_title insedow font-weight-lg" > Tyler, the Creator </h4> <h2 class="screen-first_song-list_profile_text_singer font-weight-lg" > EARFQUAKE </h2> </div> <i class="fa-solid fa-ellipsis-vertical fa-xl"></i> </li> <li class="screen-first_song-list_profile sedow"> <div class="screen-first_song-list_profile_img"> <i class="fa-solid fa-chart-simple fa-xl"></i> </div> <div class="screen-first_song-list_profile_text"> <h4 class="screen-first_song-list_profile_text_title insedow font-weight-lg" > Tyler, the Creator </h4> <h2 class="screen-first_song-list_profile_text_singer font-weight-lg" > EARFQUAKE </h2> </div> <i class="fa-solid fa-ellipsis-vertical fa-xl"></i> </li> <li class="screen-first_song-list_profile"> <div class="screen-first_song-list_profile_img"></div> <div class="screen-first_song-list_profile_text"> <h4 class="screen-first_song-list_profile_text_title insedow font-weight-lg" > Tyler, the Creator </h4> <h2 class="screen-first_song-list_profile_text_singer font-weight-lg" > EARFQUAKE </h2> </div> <i class="fa-solid fa-ellipsis-vertical fa-xl"></i> </li> <li class="screen-first_song-list_profile"> <div class="screen-first_song-list_profile_img"></div> <div class="screen-first_song-list_profile_text"> <h4 class="screen-first_song-list_profile_text_title insedow font-weight-lg" > Tyler, the Creator </h4> <h2 class="screen-first_song-list_profile_text_singer font-weight-lg" > EARFQUAKE </h2> </div> <i class="fa-solid fa-ellipsis-vertical fa-xl"></i> </li> </ul> <div class="screen-first_music-player"> <div class="screen-first_music-player_text"> <div class="screen-first_music-player_text_singer insedow"> Tyler, The Creartor </div> <div class="screen-first_music-player_text_title white-color font-weight-lg" > NOVEMBER </div> </div> <div> <i class="fa-solid fa-backward-step fa-lg white-color"></i> <i class="fa-solid fa-pause fa-2xl white-color"></i> <i class="fa-solid fa-forward-step fa-lg white-color"></i> </div> </div> </div> <!-- <div class="screen-second"></div> --> </body> </html> 이상하게 position absolute시에만 space-between이 작동하지 않습니다. 아무리 고민해보아도 원인을 파악할 수 없어 질문드립니다. ㅜㅜ
-
미해결스프링 MVC 1편 - 백엔드 웹 개발 핵심 기술
html input 태그에 readonly 속성 넣었을 때 배경이 회색으로 바뀌는 이유가 무엇인가요?
안녕하세요.섹션7 웹 페이지 만들기 강의 보면서 따라하던 중이었는데, 제 거랑 강의 영상이랑 모양이 다른 부분을 발견했습니다.강의 영상 캡쳐입니다.상품 상세 페이지이고, readonly 속성이 적용되어 있어 input의 배경색이 회색으로 되어있습니다.해당 부분에 사용된 html 코드입니다.<div class="py-5 text-center"> <h2>상품 상세</h2> </div> <div> <label for="itemId">상품 ID</label> <input type="text" id="itemId" name="itemId" class="form-control" value="1" th:value="${item.id}" readonly> </div> <div> <label for="itemName">상품명</label> <input type="text" id="itemName" name="itemName" class="form-control" value="상품A" th:value="${item.itemName}" readonly> </div> <div> <label for="price">가격</label> <input type="text" id="price" name="price" class="form-control" value="10000" th:value="${item.price}" readonly> </div> <div> <label for="quantity">수량</label> <input type="text" id="quantity" name="quantity" class="form-control" value="10" th:value="${item.quantity}" readonly> </div>input 태그 안에 readonly 포함되어 있습니다. 이건 제 pc에서 같은 코드로 실행한 화면입니다.readonly 적용되어 있어서 수정이 불가능하지만, 배경색은 회색이 아니라 흰색입니다. 브라우저 문제인가 싶어서 크롬, 엣지, 파이어폭스로 시도해봤지만 전부 같은 화면이 나옵니다.버전 문제인가 싶기도 한데, 검색해도 관련 내용이 변경되었다는 글을 찾지 못했습니다.input[readonly] { background-color: gray; }이렇게 css를 적용하면 된다는 글은 찾았습니다만, 강의에선 이런 코드를 사용한 적이 없습니다.css와 관련된 내용은 부트스트랩 뿐인데, 그렇다면 부트스트랩이 배경색을 변경하는 건가 싶어서 제거해보았지만 배경색은 마찬가지로 흰색입니다.강의 코드와 별개로 그냥 임의의 html 파일을 만들고, input 태그를 생성해서 테스트해봤지만 결과는 같았습니다. css없이 강의화면처럼 배경색을 회색으로 바꾸려면 readonly 대신 disabled를 사용해야 하더군요. 이게 강의 내용상 중요한 부분은 아니지만, 원인이 궁금해서 질문 남깁니다.
-
미해결
HTML 에서 a 태그의 href 만 뽑아오기
파이썬으로 왓차피디아 사이트를 크롤링 하려고 하는데요.requests 랑 Beautifulsoup 모듈을 사용하고 있습니다.{영화 제목: ~~~,제작연도 : ~~~,링크: ~~~}이렇게 만들고 싶습니다. 근데 링크를 뽑아오는 데서 문제를 겪고 있습니다. 보시다시피 아래에서 두 번째 줄에서 리스트 컴프리헨션을 활용했는데요.soup_links 에 데이터가 비어서 나옵니다.웹에서 개발자 도구로 확인했는데도 저렇게 나오는데 혹시 고수님들 어떻게 해야 링크를 크롤링 할 수 있을까요?url_watcha = "https://pedia.watcha.com/ko-KR" req_watcha = requests.get(url_watcha) html = req_watcha.text soup = BeautifulSoup(html, "lxml") soup_titles = soup.select("div.css-1ntmtyn-ContentTitle-makeTypeFunction-handleHorizontalUlRender") soup_year_countries = soup.select("div.css-zb5qbk-StyledContentYearAndNation-createMediaQuery-makePediaTypeFunction") soup_links = soup.select("li.css-1ofozqs.ei3ci1h10 > a") titles = [t.get_text(strip=True) for t in soup_titles[:10]] year_countries = [y.get_text(strip=True) for y in soup_year_countries[:10]] links = [l["href"] for l in soup_links] time.sleep(1)
-
미해결
box-sizing : border-box 전체 선택자 질문입니다
안녕하세요 선생님,HTML+CSS+JS 포트폴리오 실전 퍼블리싱 (시즌2)강의의 섹션7 : English Academy 헤더 드롭다운 네비게이션(2) 강의를 듣던 중에 .gnb li에 border-right: 1px을 주니까 마지막 트리거 버튼이 아래로 밀리는 현상이 생겨서 질문 드립니다.전체 선택자에 box-sizing : border-box 를 입력했는데 왜 이럴까 싶어서 해당 태그(.gnb li)에 직접 box-sizing : border-box를 주니까 해결은 됐습니다만 이유가 궁금해서 질문드려요.해당 태그에 float속성이 영향을 끼치는건가요? <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>헤더 드롭다운 네비게이션</title> <!-- jQuery CDN --> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <link rel="stylesheet" href="navigation2.css"> </head> <body> <div class="container"> <header> <div class="banner-outer"> <div class="banner"> <span class="close-banner"><i class="xi-close-thin"></i></span> <img src="images/banner.png" alt=""> </div> </div> <div class="lnb-outer"> <div class="lnb"> <div class="logo"> <a href="#"><img src="images/logo.png" alt=""></a> </div> <div class="lnb-nav"> <a href="#">Login</a> <a href="#">Register Membership</a> <a href="#">Education Gift</a> <a href="#">Voucher Learning Mail</a> <a href="#">Customer enter</a> </div> </div> </div> <div class="gnb-outer"> <nav> <ul class="gnb"> <li> <a href="#">Take a lecture</a> </li> <li> <a href="#">Infinite refund course</a> <div class="dropdown"> <a href="#">TOEIC refund Course</a> <a href="#">Infinite pass</a> <a href="#">TOEIC speaking Pass</a> </div> </li> <li> <a href="#">Instructor introduction</a> </li> <li> <a href="#">Free lecture</a> <div class="dropdown"> <a href="#">TOEIC refund Course</a> <a href="#">TOEIC</a> <a href="#">Free special TOEIC lecture</a> <a href="#">TOEIC 5 minutes in practice</a> <a href="#">Pronunciation travel</a> <a href="#">Daily TOEIC VOCA</a> <a href="#">Speaking practice</a> <a href="#">Writing practice</a> </div> </li> <li> <a href="#">Event <em>13</em></a> <div class="dropdown"> <a href="#">Event in progress</a> <a href="#">End event</a> <a href="#">Wouter Announcement</a> </div> </li> <li> <a href="#">Class room</a> <div class="dropdown"> <a href="#">Lecture while taking</a> <a href="#">Questions / Reviews</a> <a href="#">Coupon</a> <a href="#">Course voucher</a> <a href="#">Payment / Shipping</a> <a href="#">Level test</a> </div> </li> <li> <div class="trigger"> <span></span> <span></span> <span></span> </div> </li> </ul> </nav> </div> </header> <section> <img src="images/section-bg.png" alt=""> </section> </div> <script> $('.close-banner').click(function(){ $('.banner-outer').slideUp() // $('.banner-outer').hide() // $('.banner-outer').fadeOut() }) </script> </body> </html> /* XEION CDN */ @import url('http://cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css'); /* Google Web Font */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Noto+Sans+KR:wght@100;200;300;400;500;600;700;800;900&display=swap'); *{ box-sizing: border-box; font-family: 'Montserrat', sans-serif; outline: none; } body{ font-size: 15px; color: #333; margin: 0; line-height: 1.5em; } a{ text-decoration: none; color: #333; } /*###############header####################*/ /*###############Banner####################*/ .banner-outer{ position: relative; background: linear-gradient(to right,#00202b 50%, #fff 50%) } .banner{ width: 1450px; margin: auto; /* height: 40px; */ /* border: 1px solid red; */ } .banner img{ /* display: none; */ height: 40px; display: block; /* border: 1px solid red; */ } .close-banner{ /* display: none; */ position: absolute; /* border: 1px solid red; */ font-size: 30px; right: 10px; top: 5px; cursor: pointer; color: #aaa; } /*###############lnb####################*/ .lnb-outer{ background-color:#e2edf8 ; } .lnb{ width: 1450px; margin: auto; /* border: 1px solid red; */ display: flex; justify-content: space-between; align-items: center; padding: 15px 0; } .logo{} .lnb .lnb-nav{} .lnb .lnb-nav a{} .lnb .lnb-nav a:after{ content: '|'; font-size: 12px; color: #bbb; margin-right: 5px; /* margin-left: 3px; */ padding-left: 5px; } .lnb .lnb-nav a:last-child:after{ display: none; } .lnb .lnb-nav a:hover{color: dodgerblue ;} /*###############gnb####################*/ .gnb-outer{ background-color: #272c38; } nav{ width: 1450px; /* border: 1px solid red;; */ margin: auto; } .gnb{ /* border: 1px solid blue; */ list-style: none; margin:0; padding: 0; height: 50px; /* overflow: hidden; */ } .gnb li{ float: left; height: 50px; width: calc(calc(1450px - 50px) / 6); border-right: 1px solid #aaa; box-sizing: border-box; } .gnb li:last-child{ width: 50px; background-color: red; } .gnb li>a{ color: #eee; text-align: center; } .dropdown{display: none;} /*###############section####################*/ section{} section img{ width: 100%; }
-
미해결
빨간줄로 도배됐어요ㅠㅠ
next 13으로 typescript와 함께 개발중입니다어느 순간부터 html태그들과 improt 쪽에 빨간줄이 뜨더니 해결될 생각을 안하더라구요..많이 검색해 본 결과. @types/react, @types/react-dom 을 다운받아야 한다고 해서 다운 받았지만 해결이 안되더라구요...이 외에도 많은 방법들을 시도해 봤지만 효과가 없었습니다. 도와주세요ㅠㅠ 태크에서 나는 에러 : JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists.ts(7026)import문에서 나는 에러: Cannot find module 'next/image' or its corresponding type declarations.ts(2307)
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
CSS정렬 - 회원가입 폼 만들기 과제 질문
안녕하세요. CSS정렬까지 들은 입문자입니다.처음으로 과제를 받고 걱정 반 설렘 반으로 시작해 완성한 과제입니다.<!DOCTYPE html> <html lang="ko"> <head> <title>회원가입</title> <link href="./signup.css" rel="stylesheet"> </head> <body> <div class="total"> <h1>회원 가입을 위해<br>정보를 입력해주세요.</h1> <div class="memberinfo_box"> <div> <input type="text" placeholder="*이메일"> <br><br> </div> <div> <input type="text" placeholder="*이름"> <br><br> </div> <div> <input type="password" placeholder="*비밀번호"> <br><br> </div> <div> <input type="password" placeholder="*비밀번호 확인"> <br><br> </div> </div> <div class="memberinfo_raiod"> <div> <input type="radio" name="gender">여성 </div> <div> <input type="radio" name="gender">남성 </div> </div> <div class="agree_checkbox"> <div> <input type="checkbox">이용약관 개인정보 수집 및 이용, 마케팅 활용 선택에 모두 동의합니다. <br><br><hr> </div> </div> <div class="button"> <div> <button>가입하기</button> </div> </div> </div> </body> </html>*{ box-sizing: border-box; } .total{ width: 670px; height: 960px; border: solid 1px #0068FF; border-radius: 20px; top: 60px; left: 625px; box-shadow: 7px 7px 39px 0px #0068FF40; display: flex; flex-direction: column; align-items: center; margin-left: 800px; margin-top: 50px; } h1{ display: flex; width: 600px; padding: 50px; /* border: solid 1px none; color: #0068FF; */ border: none; color: #0068FF; } .memberinfo_box{ display: flex; flex-direction: column; /* align-items: center; */ padding: 50px; justify-content: space-around; width: 600px; height: 400px; border: none } .memberinfo_box input{ border: none; border-bottom:solid 1px #CFCFCF; width: 500px; height: 100px; } .memberinfo_raiod{ width: 400px; height: 100px; padding: 50px; /* border: solid 1px none; */ border: none; display: flex; justify-content: center; justify-content: space-evenly; } .agree_checkbox{ width: 640px; border: none; padding: 30px; display: flex; justify-content: center; } .button{ width: 200px; border: none; display: flex; justify-content: center; } .button button{ width: 500px; height: 50px; border: solid 1px #0068FF; background-color: white; color: #0068FF; border-radius: 10px; }처음이니 엉성한 것은 어쩔 수 없겠지만 몇 가지 피드백을 받고 싶어 문의 남깁니다.코드가 너무 긴 것 같아 불필요한 부분이 있거나 단순화 할 수 있는 부분을 알고 싶습니다.피그마에 있는 회원가입 폼을 보며 만들었지만 거기에 있는 수치를 거의 활용하지 않고 만들었어요. 문서로 된 수치를 적용하는 게 쉽지 않았는데 이에 대한 팁이 있을까요?이번 과제를 하면서 느낀 건 다른 코드를 많이 보는 게 큰 도움이 된다는 거였어요. 다양한 코드를 볼 수 있는 사이트다 커뮤니티가 있다면 알려주실 수 있나요? 이쪽 업계에 대한 인연이 아예 없어 정보가 너무 없네요.
-
미해결Node.js 노드 빠르게 훑어보기: 서버부터 DB까지
중간중간 html 작성 코드가 안보여서 불편합니다.
detail 코드만 생성하라는 말 빼곤 다른 html코드를 어떻게 작성했는지 궁금합니다.
-
미해결스프링 MVC 1편 - 백엔드 웹 개발 핵심 기술
item.html에 "저장완료!" 문구 넣을 때 질문 있습니다
학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요.1. 강의 내용과 관련된 질문을 남겨주세요.2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요.(자주 하는 질문 링크: https://bit.ly/3fX6ygx)3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요.(질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG)질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요.=========================================[질문 템플릿]1. 강의 내용과 관련된 질문인가요? (예/아니오)2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오)3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오)[질문 내용]<div> <h2 th:if="${param.status}" th:text="저장 완료"></h2> </div> 이렇게 div 태그 내 문구를 넣으면 오류가 뜨는데 이유가 있을까요?? 강의 내용에선 영한님이 아래와 같이 입력하셨습니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
container의 이름을 class로 주는 이유
id는 하나로 유일해야하고 그렇지 않은 경우에는 class 속성으로 이름을 주어도 상관없다고 알고있는데 여러 강의들에서도 container같은 요소를 class로 이름을 주더라구요 제 생각에는 container라는 이름을 다시 사용할 것 같지 않아서 id로 줘도 상관없을 것 같은데 그럼에도 class로 이름을 주는 이유가 있는 건지 궁금합니다.
-
미해결스프링 MVC 2편 - 백엔드 웹 개발 활용 기술
비밀번호가 틀렸을 때 사라지지 않게 하려면 어떻게 수정해야하나요?
학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요.1. 강의 내용과 관련된 질문을 남겨주세요.2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요.(자주 하는 질문 링크: https://bit.ly/3fX6ygx)3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요.(질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG)질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요.=========================================[질문 템플릿]1. 강의 내용과 관련된 질문인가요? (예/아니오)2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오)3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오)[질문 내용]password가 input에 들어가 있어서 사라진다고 하셨는데 틀렸을 때 사라지지 않고 남아있게 하려면 어떻게 해야하나요??
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
wrapper__right__body요소 안에 iframe태그를 사용하는 이유가 궁금합니다.
wrapper__right__body 요소 안에 wrapper__right__body__header, wrapper__right__body__content라는 두개의 요소를 만들어서 적용해도 될 것 같은데 iframe태그로 감싸서 따로 html문서를 만들고 적용해주는 이유가 궁금합니다.
-
미해결
input 태그 한글 작성시 '마지막 글자 밀림' 오류와 '문자열 마무리' 오류
안녕하세요 !! 다름이 아니라 현재 제가 일반 브라우저가 아닌 C#기반으로 돌아가는 웹을 작업중인데요input 태그에 한글 작성시 '마지막 글자 밀림'오류와 '문자열 마무리'오류가 발생되어 혹시 해결 방법을 아시는 분이 있을까 하여 글 남깁니다..! 제발 도와주세요 감사합니다 !
-
미해결
코딩할 때 용량차이 이미지 코드
코딩할 때 로딩속도 때문에 통이미지를 바로 넣기보다 html코드작성을 하는걸 더 선호하는데코드가 길어지면 또 그것도 느려지는거 아닌가 하는 의문이 문득 들어서요!통이미지가 많은 것 보다 코드작성이 훨씬 로딩에는 좋은게 맞을까요? 아 추가적으로svg보다 image로 넣는게 보통 용량이 더 큰가요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
섹션5 | Javascript 응용과 싸이월드 실습 4탄 복습 학습자료
안녕하세요! 강의 정말 잘보고있습니다!!프리캠프 섹션5 | Javascript 응용과 싸이월드 실습 4탄 복습 학습자료 상에서 질문이 있어서 여쭤봅니다. else if에서 조건에 만족하는 경우 alert가 뜨게끔 되어 있는 것 같아서,여기 부분에서 else if~ 부분을 아래와 같이 바꿔야하는 것이 아닌지 검토 부탁드릴게요.} else if(8>password.length || password.length>16){ alert("8~16자의 영문, 숫자, 특수문자만 사용 가능합니다.") return false
-
해결됨React 기반 Gatsby로 기술 블로그 개발하기
[17강 25강] Cannot query field "html" on type "MarkdownRemark" 오류
안녕하세요 본 강의를 통해 블로그를 만들고 있습니다.17강을 진행하는 중에 이 메세지가 발생했고, 이로 인해 게시글을 조회할 수 없었습니다. 공식문서를 찾아 봐도 뭐가 문제인지 몰랐습니다.일단 쿼리에서 html부분을 주석 처리하고 24강까지 진행했습니다. 주석처리하니 "게시글 상단부분 구현"같은 것은 잘 됩니다. 왜 html 쿼리가 진행되지 않는지 도저히 모르겠습니다.도움이 필요합니다.제 깃허브 주소는 아래와 같습니다.https://github.com/Test-Of-LEE/Test-Of-LEE-BlogProject/tree/main/BlogProject 감사합니다.
