묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결
(css)이름이 같은 여러개의 class내 특정 텍스트 찾기
안녕하세요같은 이름의 클래스는 여러개를 생성할 수 있다고 알고 있는데요만일 a라는 1억개의 클래스(뭐든 상관없음)에각각 텍스트가 다르게 지정되어 있는 경우예를 들어<div class="a"> 사과 </div><div class="a"> 배 </div><div class="a"> 귤 </div><div class="a"> 바나나 </div><div class="a"> 익은 사과 </div><div class="a"> 덜 익은 사과 </div>...엄청나게 많은 a라는 class가 있을때제가 사과라는 텍스트가 포함된 a 클래스만 찾아서빨간색으로 style을 주고 싶을때 직접 사과라는 줄에 font 명령어를 넣지 않고<style> </style> 이용해서밖에서 css로 일괄 적용한다고 하면사과라는 텍스트를 찾을때 무슨 명령어를 써야 되나요?
-
미해결Next + React Query로 SNS 서비스 만들기
rightSectionWrapper,leftSectionWrapper 중앙정렬 질문입니다!
flex 컨테이너 안에 rightSectionWrapper,leftSectionWrapper 에 각각 flex-grow:1을 주어 컨테이너의 남은 여백을 똑같이 가져가고 leftWrapper에는 flex-end, rightWrapper에는 flex-start를 주어 중앙정렬 처럼 보이게 나타내는 것까지는 이해 하였습니다.그런데 직접 코드를 작성하여 로컬에서 실행해보니 flex-grow가 적용이 되질 않습니다. . 개발자 도구를 확인해보면 분명 적용돼있는데 오른쪽 끝에 덩그러니 여백이 남아있습니다. 깃허브의 코드와 비교해보니 다른게 없어 ch2-1의 코드를 복붙해서 로컬에서 돌려봤더니 똑같이 flex-grow가 적용되지 않았습니다. 어떤 문제가 있어서 그런 것일까요 .. ? 코드는 문제가 없어 보이긴하는데 .. import { ReactNode } from "react"; import style from "@/app/(afterLogin)/layout.module.css"; import Link from "next/link"; import Image from "next/image"; import ZLogo from "../../../public/zlogo.png"; export default function AfterLoginLayout({ children, }: { children: ReactNode; }) { return ( <div className={style.container}> <header className={style.leftSectionWrapper}> <section className={style.leftSection}></section> </header> <div className={style.rightSectionWrapper}> <div className={style.rightSectionInner}> <main className={style.main}>{children}</main> <section className={style.rightSection}></section> </div> </div> </div> ); } .container { display: flex; align-items: stretch; background-color: #fff; } .leftSectionWrapper { display: flex; align-items: flex-end; flex-direction: column; flex-grow: 1; } .leftSection { background-color: orange; height: 100dvh; width: 275px; padding: 0 8px; } .rightSectionWrapper { display: flex; align-items: flex-start; height: 100dvh; flex-direction: column; flex-grow: 1; } .rightSectionInner { display: flex; flex-direction: row; background-color: aqua; width: 990px; height: 100%; } .rightSection { background-color: aquamarine; height: 100%; }
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
과제 완료
직접 짜보니 어렵습니다.완성하고 보니 뿌듯한데 지저분하게 짠 것 같네요..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; }
-
미해결
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] 를 어떤 식으로 바꿔야할까요..?
-
미해결Do it! Node.js 프로그래밍 입문
22강 연락처 추가하기 - css 파일 경로 지정
모듈화한 _header.ejs 파일에서 css 지정경로가 왜href="/css/style.css" 가 되는지 궁금합니다. _header.ejs 파일은 views폴더의 하위 폴더인 include안에 저장되어 있는데, 만약 css 파일의 상대경로를 지정하려면href="../../public/css/style.css"가 되어야 하지 않나요?
-
미해결
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를 사용해야 하더군요. 이게 강의 내용상 중요한 부분은 아니지만, 원인이 궁금해서 질문 남깁니다.
-
해결됨Next + React Query로 SNS 서비스 만들기
leftSectionWrapper와 rightSectionWrapper 중앙 정렬
leftSectionWrapper와 rightSectionWrapper를 중앙 정렬시키기 위해 각각에 flex-grow: 1 을 주셨는데container에 margin: 0 auto 주는 것과 동일한건지 궁금합니다!
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
Mini Quiz 질문
<div class="box1"> <div class="text1">이 박스의 세로 사이즈는 몇 px일까요?</div></div> .box1 { border: 1px solid black; padding: 10px 20px;}.text1 { font-size: 24px; height: 3em;}text1이라는 클래스를 가진 div의 세로 사이즈는 어떻게 될까요?이 문제를 잘 모르겠습니다.
-
미해결
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%; }
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
animation 질문- 하나의 @keyframes로 특정 이벤트없이 한번, hover이벤트시 한번 적용 방법 문의.
animation 질문- 하나의 @keyframes로 특정 유저 이벤트없이 한번, 마우스 hover 이벤트시 한번 적용하는 방법 문의 드립니다. css 강의 ‘animation 실습’ 강의 40분 전후의 쇼핑몰 배너 애니매이션 코드를 변경해서 아래 코드처럼/* html 부분 */ <section class="mainBanner"> <h1 class="text">Welcome to my shop</h1> </section> /* css 부분 */ .text { font-size: 42px; font-weight: 700; color: white; text-shadow: 9px 6px 5px rgba(0, 0, 0, 0.5); animation: titleText 1s ease-in-out; } .mainBanner:hover .text { animation: titleText 1s ease-in-out; } @keyframes titleText { 0% { transform: translateY(70px); } 92% { transform: translateY(-10px); } 100% { transform: translateY(0px); } }@keyframes에 titleText란 이름으로 정의한 애니메이션을, 페이지 로드시에 1번, 마우스 hover 시 1번 재생시키려고 css를 작성했더니 로드시에만 적용되고 호버시엔 적용이 안되더군요. 그래서 아래처럼 동일 keframes를 복사 붙여넣기 하고 이름만 바꿔서 hover에 적용하였더니 잘되더군요.{ font-size: 42px; font-weight: 700; color: white; text-shadow: 9px 6px 5px rgba(0, 0, 0, 0.5); animation: titleText 1s ease-in-out; } .mainBanner:hover .text { animation: titleText2 1s ease-in-out; } @keyframes titleText { 0% { transform: translateY(70px); } 92% { transform: translateY(-10px); } 100% { transform: translateY(0px); } } @keyframes titleText2 { 0% { transform: translateY(70px); } 92% { transform: translateY(-10px); } 100% { transform: translateY(0px); } } 이런식의 중복 css가 발생하는 비효율적인 방법말고, 하나의 @keyframes로 특정 유저 이벤트없이 한번, hover이벤트시 한번 적용하는 방법 중 html, css만으로 적용하는 방법이 없을까요?도움 부탁드립니다~
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
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; }처음이니 엉성한 것은 어쩔 수 없겠지만 몇 가지 피드백을 받고 싶어 문의 남깁니다.코드가 너무 긴 것 같아 불필요한 부분이 있거나 단순화 할 수 있는 부분을 알고 싶습니다.피그마에 있는 회원가입 폼을 보며 만들었지만 거기에 있는 수치를 거의 활용하지 않고 만들었어요. 문서로 된 수치를 적용하는 게 쉽지 않았는데 이에 대한 팁이 있을까요?이번 과제를 하면서 느낀 건 다른 코드를 많이 보는 게 큰 도움이 된다는 거였어요. 다양한 코드를 볼 수 있는 사이트다 커뮤니티가 있다면 알려주실 수 있나요? 이쪽 업계에 대한 인연이 아예 없어 정보가 너무 없네요.
-
미해결
input 태그 한글 작성시 '마지막 글자 밀림' 오류와 '문자열 마무리' 오류
안녕하세요 !! 다름이 아니라 현재 제가 일반 브라우저가 아닌 C#기반으로 돌아가는 웹을 작업중인데요input 태그에 한글 작성시 '마지막 글자 밀림'오류와 '문자열 마무리'오류가 발생되어 혹시 해결 방법을 아시는 분이 있을까 하여 글 남깁니다..! 제발 도와주세요 감사합니다 !
-
미해결
코딩할 때 용량차이 이미지 코드
코딩할 때 로딩속도 때문에 통이미지를 바로 넣기보다 html코드작성을 하는걸 더 선호하는데코드가 길어지면 또 그것도 느려지는거 아닌가 하는 의문이 문득 들어서요!통이미지가 많은 것 보다 코드작성이 훨씬 로딩에는 좋은게 맞을까요? 아 추가적으로svg보다 image로 넣는게 보통 용량이 더 큰가요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
CSS관련 질문
과제를 하면서 css 수정하면서 구글링 해봐도 해결이 안되는 부분이 있어 질문드립니다! export const SubmitBtn = styled.button` height: 52px; padding: 14px 60px; background-color: ${props => props.color}}; border: none; font-style: normal; font-weight: 500; font-size: 16px; line-height: 24px; margin-top: 74px; box-sizing: border-box; cursor: pointer; `수정하기/ 취소하기 버튼 CSS입니다. 이렇게 작성했을 때..이렇게 나옵니다. 분명 border: none; 을 작성해줬는데 적용이 안됩니다.이상해서 CSS 속성 하나씩 지워줬을 때,export const SubmitBtn = styled.button` height: 52px; padding: 14px 60px; // background-color: ${props => props.color}}; border: none; font-style: normal; font-weight: 500; font-size: 16px; line-height: 24px; margin-top: 74px; box-sizing: border-box; cursor: pointer; `이런식으로 background-color(또는background 속성)를 주석으로 처리하니 아래 사진처럼 테두리 선이 사라졌습니다.background 속성을 줬을 때 border: none 도 안먹히고 cursor: pointer; 속성도 안먹히던데 뭐가 문제인걸까요..ㅜㅜ
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
margin 대신 padding을 자주 쓰는 이유
Updated news 와 TODAY STORY를 띄우는 방식으로 padding-left를 쓰는 것도 그렇고, 이전 코딩들에서도 padding을 주로 사용하시더라고요.padding을 이용하면 내부 크기를 줄이고 공백을 만드는 방식이므로 전체 크기가 변하지 않기 때문에, box-sizing: border-box를 이용하는 것과 같은 맥락으로 이해해도 될까요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
[CSS-in-js] Emotion styled components 관련 질문입니다.
const Wrapper = styled.div` @media (max-width: 767px) { width: 760px; & > div { width: 700px; } }; width: 1200px; padding: 30px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; margin: 0 auto; & > div { width: 1000px; } `1) 위의 내용과 같이 CSS-in-js 코드 작성하고 화면 너비를 767px 이하로 조정하였음에도 Wrapper 자손 div 선택자들의 너비가 width: 700px로 조정되지 않습니다. 아래 그림과 같이 @mobile 밖의 코드인 1000px로 계속 강제적용이 되는것으로 보입니다. 왜 이런 것인지 알 수 있을까요?2) 논외로 위의 코드와 같이 & > div 를 이용하여 자손 div 태그들에 너비를 정해준 후, 따로 const 이용하여 자손 div 중 하나를 상수 지정하여 너비를 설정해주면, Wrapper에서 &>div를 이용해서 지정한 너비로 또 계속 강제적용되는 것으로 보입니다. & > div가 가장 우선적인 설정인가요? 답변 부탁드리겠습니다ㅠ
-
해결됨[코드캠프] 시작은 프리캠프
CSS정렬 - 회원가입 과제 코드 공유
완벽하지는 않지만, 이미 올려주셨던 분들의 코드까지 참조해서 좀 더 나은 버전으로 만들어 봤습니다.100% 완전하지는 않은 코드지만 그래도 가시적으로 보기에는 더 나은 것 같아서 코드 공유 드립니다.<!-- test.html --> <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>회원가입</title> <link rel="stylesheet" href="./test.css"> </head> <body> <div> <div class="container"> <h2>회원가입을 위해<br>정보를 입력해주세요.</h2> <!-- input도 inline요소중에 하나다. --> <!-- inline이란 하나의 태그가 레코드(가로)방향을 모두 차지하는게 아니라, 자신이 속한 영역만 가지게 되는 것이다. --> <label for="email">* 이메일<br> <input type="text" id="email"><br><br> </label> <label for="name">* 이름<br> <input type="text" id="name"><br><br> </label> <label for="password1">* 비밀번호<br> <input class="pw" id="password1" type="password"><br><br> </label> <label for="password2">* 비밀번호 확인<br> <input class="pw" id="password2" type="password"><br><br> </label> <!-- 선택 영역 두번째 --> <!-- name을 부여함으로 인하여 radio의 선택 가능한 것들을 하나의 그룹으로 묶어준다. --> <form> <input type="radio" class="radio" name="gender">  여성 <input type="radio" class="radio" name="gender">  남성 </form> <br><br> <form> <input type="checkbox" class="agree">  이용약관 개인정보 수집 및 정보이용에 동의합니다. </form> <hr> <hr> <button>가입하기</button> <!-- 기능자체는 input의 타입을 button으로 하면 사용은 가능하지만, 굳이 button 태그를 사용하는 이유는 --> <!-- 커스터마이징이 button 태그가 더 용이하기 때문이다. --> <!-- <input type="button" value="가입하기"> --> </div> </div> </body> </html> /* test.css */ div { /* 바로 상위 태그인 body를 기준으로 맞춰주게끔 */ /* position의 absolute라는것이, 설정하게 되면 바로 직계부모 태그의 영향아래 놓이게 된다는 말이다. 더불어서 네모를 영역으로 봤을때 왼쪽 상단 꼭지점을 기준으로 움직이게 된다. */ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 670px; height: 960px; background: #FFFFFF; border: 1px solid #AACDFF; box-shadow: 7px 7px 39px rgba(0, 104, 255, 0.25); border-radius: 20px; /* 이것의 의미는 타겟팅된 영역에 대해 지정된 만큼 움직여주는 거라고 한다. */ /* justify-content: space-evenly; align-content: column; */ margin: 0px; padding: 100px; box-sizing: border-box; display: flex; flex-direction: column; flex-wrap: nowrap; } h2 { width: 466px; height: 94px; left: 725px; top: 132px; font-family: 'Noto Sans CJK KR'; font-style: normal; font-weight: 700; font-size: 32px; line-height: 47px; color: #0068FF; justify-content: space-evenly; } button { width: 400px; height: 50px; left: 725px; top: 875px; background-color: #FFFFFF; color: royalblue; border-radius: 8px; border: #0068FF solid 1px; } input { padding: 0px; border: none; border-bottom: 1px solid #CFCFCF; width: 466px; height: 30px; } label { color: lightgrey; } .radio { align-items: center; font-size: 20pt; width: 15px; height: 15px; } /* div.container { justify-content: space-between; flex-direction: row; align-items: center; } */ input.agree { align-items: center; font-size: 20pt; width: 15px; height: 15px; }
-
미해결
오랜만에 웹설계 업무로 돌아와서 최근 경향 질문드립니다.
전에 잠깐 웹페이지 제작 업무를 맡게 되어서html/css/js와 반응형 미디어 쿼리로 웹사이트를 만들었는데저는 px단위로 크기를 잡고 position으로 위치를 잡았는데 요즘은다양한 방법들이 있더라구요 제가 전담해서 프론트 개발을 할개 아니라화면설계와 간단한 데이터베이스 웹 연동, 테스트용 서비스 페이지 제작정도만하려고 합니다.퇴근 후, 주말 시간을 활용해서 관련 공부를 하려고 하는데 flex&grid같은걸 공부할지다른 프레임워크같은걸 공부할지 고민입니다.미디어쿼리나 자바스크립트 같은건 기억이 조금은 나는데 레이아웃 잡는게어렵네요..ㅠㅠ 선배님들 도와주세요 ^^
-
해결됨[코드캠프] 시작은 프리캠프
Live-server로 html 파일을 볼때 이상한 것들도 같이 보여요
hl-aria-live-container 가 무엇인가요??모든 div에 css를 적용 해서 그런것 같은데 선생님이 강의 진행 하실때는 왜 안나타난 걸까요??
