묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
함수, 변수의 호이스팅 부분 질문있습니다.
함수, 변수의 호이스팅 강의 영상 부분에if (storageData?.complete) { newLi.classList.add("complete"); }이 코드에서 storageData 뒤에 ? 이 물으표가 없으면 매개변수를 받아오지 않게 되니 undefined라고 강사님이 말씀하시는데 이게 무슨 말인지 잘 모르겠습니다. 그리고 ToDoList에서 리스트에 추가를 하고 더블클릭 삭제, 전체 삭제까지는 어느정도 이해가 되는데 로컬스트리지 전체 부분이 조금 이해도 어려운데 어떻게 이해를 하면서 공부를 하면 좋을까요?
-
미해결[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
객체 localStorage 부분 질문있습니다.
현재 객체 localStorage저장 부분의 인강을 보다 궁금한점 있어 질문을 드립니다.const saveItemsFn = function () { const saveItems = []; for (let i = 0; i < todoList.children.length; i++) { const todoObj = { contents: todoList.children[i].querySelector("span").textContent, complete: todoList.children[i].classList.contains("complete"), }; saveItems.push(todoObj); } localStorage.setItem("saved-items", JSON.stringify(saveItems)); };현재 자바스크립트 코드 제일 마지막 부분에 saveItemsFn함수가 저장하는 부분이니 이 함수안에 localStorage.setItem을 사용해서 로컬스토리지에 저장을 하는것까지는 이해가 되었는데 저장된걸 가져오기 위해 const savedTodoList = localStorage.getItem("saved-items");localStorage.getItem을 사용하는데 여기서 첫번째로 이 코드 위치가 다시 제일 위쪽에 작성이 되었는지 궁금하고 두번째로 이 코드가 saveItemsFn 함수 안에 작성이 되지 않은 이유는 getItem이 저장하는 코드가 아니기때문에 saveItemsFn안이 아닌 따로 다시 작성이 된것인가요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
graphql codegen 설치
섹션 10에서 graphql codegen 설치하려는데요강의에서는 yarn add -D @graphql-codegen/cli을 설치하라고 하는데 지금 설치하려고 사이트에 들어가니yarn add --dev typescript @graphql-codegen/cli로 되어 있는데 같은 건가요?그냥 아래 명령어 실행해도 되나요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
섹션4 01-02-emotion 에러가 나는데 못찾겠습니다ㅜ
설치가 잘못된 걸까요.. yarn dev하니 오류가 납니다ㅜ
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
이번 final 과제 피드백 부탁드립니다!
안녕하세요! 강의 잘 듣고 있습니다!이번 과제 코드 피드백 부탁드립니다!고맙습니다.<화면><html><!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>SignUp</title> <link rel="stylesheet" href="./final.css"> <script defer src="./final.js"></script> </head> <body> <div class="wrapper"> <div class="wrapper__header"> <span id="header__title">코드캠프 회원가입</span> </div> <div class="wrapper__body"> <div class="wrapper__text"> <input type="text" id="email" placeholder="이메일을 입력해 주세요."> <span class="errorMsg email">이메일이 올바르지 않습니다.</span> <input type="text" id="name" placeholder="이름을 입력해 주세요."> <span class="errorMsg name">이름이 올바르지 않습니다.</span> <input type="text" id="pw1" placeholder="비밀번호를 입력해 주세요."> <span class="errorMsg pw1">비밀번호를 입력해주세요.</span> <input type="text" id="pw2" placeholder="비밀번호를 다시 입력해 주세요."> <span class="errorMsg pw2">비밀번호를 입력해주세요.</span> </div> <div class="wrapper__phone" oninput="phone()"> <input type="text" id="num1" maxlength="3"> - <input type="text" id="num2" maxlength="4"> - <input type="text" id="num3" maxlength="4"> </div> <div class="wrapper__certification"> <div class="cert__number"> <span id="certNum">000000</span> <button class="chkBtn" disabled="true">인증번호 전송</button> </div> <div class="cert__time"> <span id="certTimer">3:00</span> <button class="chkBtn" disabled="true">인증완료</button> </div> </div> <div class="wrapper__select"> <div class="select__locale"> <select id="locale"> <option selected disabled>지역을 선택하세요</option> <option value="서울">서울</option> <option value="경기">경기</option> <option value="인천">인천</option> </select> <span class="errorMsg locale">지역을 선택해주세요.</span> </div> <div class="select__gender"> <label for="woman"> <input type="radio" name="gender" id="woman"> 여성 </label> <label for="man"> <input type="radio" name="gender" id="man"> 남성 </label> </div> <span class="errorMsg gender">성별을 선택해주세요.</span> </div> </div> <div class="divideLine"></div> <div class="wrapper__check"> <!-- <button class="submit" disabled="true">가입하기</button> --> <button class="submit">가입하기</button> </div> </div> </body> </html> <css>*{ box-sizing: border-box; margin: 0; } html, body{ width: 540px; } .chkBtn{ width: 120px; height: 40px; border: 1px solid #D2D2D2; border-radius: 7px; font-size: 16px; font-weight: 400; color: #0068FF; background-color: #FFF; cursor: pointer; } .chkBtn.active { width: 120px; height: 40px; border: 1px solid #D2D2D2; border-radius: 7px; font-size: 16px; font-weight: 400; background-color: #0068FF; color: #FFF; cursor: pointer; } .errorMsg{ width: 100%; color: red; font-size: 10px; display: flex; flex-direction: column; align-items: center; visibility: hidden; } .wrapper{ width: 100%; height: 100%; padding: 60px 80px; border: 1px solid #AACDFF; border-radius: 20px; box-shadow: 7px 7px 39px rgba(0, 104, 255, .25); } .wrapper__header{ width: 100%; font-size: 32px; font-weight: 700; color: #0068FF; padding-bottom: 60px; } .wrapper__body{ width: 100%; } .wrapper__text > input{ width: 100%; height: 60px; margin-top: 20px; font-size: 16px; font-weight: 400; border: 1px solid #D2D2D2; border-radius: 7px; padding: 18px; } .wrapper__phone{ width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 20px 0; } .wrapper__phone > input{ width: 100px; height: 40px; border: 1px solid #D2D2D2; border-radius: 7px; } .wrapper__certification { width: 100%; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; } #certNum, #certTimer{ color: #0068FF; font-size: 18px; padding-right: 20px; } .cert__time{ padding: 20px 0; } .wrapper__select{ width: 100%; display: flex; flex-direction: column; align-items: center; } .select__locale{ width: 100%; display: flex; flex-direction: column; justify-content: center; } #locale{ width: 100%; height: 60px; border: 1px solid #D2D2D2; border-radius: 7px; color: #797979; font-size: 16px; font-weight: 400; padding: 18px; } .select__gender{ width: 140px; display: flex; justify-content: space-between; padding-top: 30px; } .divideLine{ width: 100%; border: 1px solid #E6E6E6; margin: 20px 0; } .wrapper__check{ width: 100%; display: flex; justify-content: center; } .submit { width: 100%; height: 60px; font-size: 18px; font-weight: 400; color: #0068FF; background-color: #FFF; border: 1px solid #0068FF; border-radius: 7px; } <js>const submit = document.querySelector('.submit'); // 가입하기 const numberChk = document.querySelector('.cert__number .chkBtn'); // 인증번호 전송 const timeChk = document.querySelector('.cert__time .chkBtn'); // 인증완료 let time = 180; // 180초, 인증 시간 let isStarted = false; // email const emailChk = () => { let email = document.getElementById('email').value; if(email.includes('@') === true){ let isEmail = email.split('@')[1].includes('.'); if(isEmail === false){ document.querySelector('.errorMsg.email').style.visibility = 'visible'; document.querySelector('.errorMsg.email').value = ''; return false; } else { document.querySelector('.errorMsg.email').style.visibility = 'hidden'; return true; } } else { document.querySelector('.errorMsg.email').style.visibility = 'visible'; document.getElementById('email').value = ''; return false; } } // name const nameChk = () => { let name = document.getElementById('name').value; if(name.length === 0){ document.querySelector('.errorMsg.name').style.visibility = 'visible'; return false; } else { document.querySelector('.errorMsg.name').style.visibility = 'hidden'; return true; } } // pw const pwChk = () => { let pw1 = document.getElementById('pw1').value; let pw2 = document.getElementById('pw2').value; if(pw1 && pw2){ if(pw1 === pw2){ document.querySelector('.errorMsg.pw1').style.visibility = 'hidden'; document.querySelector('.errorMsg.pw2').style.visibility = 'hidden'; return true; } else { document.querySelector('.errorMsg.pw1').style.visibility = 'visible'; document.querySelector('.errorMsg.pw2').style.visibility = 'visible'; document.querySelector('.errorMsg.pw1').innerHTML = '비밀번호가 일치하지 않습니다.' document.querySelector('.errorMsg.pw2').innerHTML = '비밀번호가 일치하지 않습니다.' return false; } } else { document.querySelector('.errorMsg.pw1').style.visibility = 'visible'; document.querySelector('.errorMsg.pw2').style.visibility = 'visible'; return false; } } // phone const phone = () => { let num1 = document.getElementById('num1').value; let num2 = document.getElementById('num2').value; let num3 = document.getElementById('num3').value; if(num1.length === 3) { document.getElementById('num2').focus(); if(num2.length === 4) { document.getElementById('num3').focus(); } } if(num1.length === 3 && num2.length === 4 && num3.length === 4){ numberChk.classList.add('active'); certification(); } } const certification = () => { // 인증번호 numberChk.disabled = false; numberChk.addEventListener('click', e => { let randomNumber = String(Math.trunc(Math.random() * 1000000)).padStart(6, '0') document.getElementById('certNum').innerText = randomNumber; // 타이머 if(isStarted === false){ isStarted = true; timeChk.disabled = false; let timer = setInterval(() => { if(time >= 0){ let min = Math.trunc(time / 60); let sec = String(time % 60).padStart(2,'0'); document.getElementById('certTimer').innerText = `${min}:${sec}`; time--; } else { clearTime(timer); } }, 100) timeChk.addEventListener('click', e => { if(time >= 0){ alert('인증이 완료 되었습니다.'); clearTime(timer); submit.disabled = false; } }) } }) } const clearTime = (timer) => { timeChk.classList.remove('active'); numberChk.classList.remove('active'); document.getElementById('certNum').innerText = '000000'; document.getElementById('certTimer').innerText = '0:00'; timeChk.disabled = true; numberChk.disabled = true; isStarted = false; clearInterval(timer); } const checkValidation = () => { emailChk(); nameChk(); pwChk(); if(emailChk() && nameChk() && pwChk()) { return true; } else { return false; } } // 검증 submit.addEventListener('click', e => { checkValidation(); if(checkValidation()){ alert('코드캠프 가입을 축하합니다.'); } });
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
함수에 대해 질문있습니다.
자바스크립트 함수가 조금 어려운데 함수는 그냥 관련된 코드들을 작성할 때 사용하나요? 예를 들어 input으로 어떠한걸 한다면 input 함수를 만들어서 이 함수안에는 input과 관련된 코드들을 작성한다고 보면되는건가요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
그리드 부분 질문있습니다.
그리드 부분 영상에서 헷갈리는 부분이 있습니다. 그리드 강의 영상에는 밑에 이미지처럼 grid-column: 1 / 3 부분이 첫번째 라인에서 시작해서 3번라인에서 끝난다고 하는데 사이부분까지 해서 4개의 라인이 되서 grid-column: 1 / 3이 아니라 1 / 4 가 아닌가요? 혹시 몰라 노션을 보니 노션은 1 / 4라고 되어있던데 뭐가 맞는 것인지 너무 헷갈립니다.
-
해결됨Next.js 시작하기(feat. 지도 서비스 개발)
아주 기초적인 질문입니다.
현재 next.js 를 생성시킨후, 서버 start를 시킨후, 화면을 수정하면, 화면이 리로딩되고 있지 않습니다. 계속 새로 빌드를 해야지만, 화면 소스가 바꼈을 경우, 리로딩이 되는건가요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
css에서 calc에 대해 질문있습니다.
현재 css에서 calc부분에 대해 강의를 보고 있는데 궁금한 점이 처음부터 계산해서 한번에 값을 적으면 되지 왜 calc(100% - 70px) 이런식으로 하는지 궁금합니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
eslint 설치후 eslint.config.mjs 파일 생성이되고 .eslintrc.js 없습니다.
eslint 설치후 eslint.config.mjs 파일 생성이되고 .eslintrc.js 는 없습니다. 그리곳 eslint 설치시 첫 옵션 3가시 선택(강제로 고처주는옵션) 3번째 옵션도 없습니다. 2가지만 나오네요
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
localhost:3000/qqq 안됩니다..
사이트에 연결할 수 없다라고 나옵니다..혹시 몰라 5000/qqq도 해봤는데.. 액세스 거부로 나오구요.방화벽도 꺼져있습니다..ㅠ
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
react hooks 포트폴리오 리펙토링 질문
import { Modal } from "antd"; import DaumPostcodeEmbed from "react-daum-postcode"; import * as S from "./BoardWrite.style"; import UploadImage from "../../../commons/uploadImage/uploadImage.container"; import { v4 as uuidv4 } from "uuid"; import { useBoard } from "../../../commons/hooks/customs/useBoard"; import { useCheckedId } from "../../../commons/hooks/customs/useCheckedId"; import { useForm } from "react-hook-form"; import { useToggle } from "../../../commons/hooks/customs/useToggle"; import { useEffect, useState } from "react"; import type { IBoardWriteProps } from "./BoardWrite.types"; import { useAuth } from "../../../commons/hooks/customs/useAuth"; export interface Iform { writer: string; password: string; title: string; contents: string; boardAddress: { zipcode: string; address: string; addressDetail: string; }; youtubeUrl: string; images: string[]; } export default function BoardWrite(props: IBoardWriteProps): JSX.Element { useAuth(); const { id } = useCheckedId("boardId"); const { onClickWrite, onClickEdit, onChangePassword } = useBoard({ boardId: id, }); const [files, setFiles] = useState(["", "", ""]); // const [isActive] = useToggle(); const [isOpenModal, modalToggle] = useToggle(); // 게시글 작성 안했을시 오류 보여주는 state const [Error] = useState(""); const { register, handleSubmit, setValue } = useForm<Iform>(); useEffect(() => { if (props.data) { setValue("writer", props.data.fetchBoard.writer ?? ""); setValue("title", props.data.fetchBoard.title ?? ""); setValue("contents", props.data.fetchBoard.contents ?? ""); setValue( "boardAddress.zipcode", props.data.fetchBoard.boardAddress?.zipcode ?? "" ); setValue( "boardAddress.address", props.data.fetchBoard.boardAddress?.address ?? "" ); setValue( "boardAddress.addressDetail", props.data.fetchBoard.boardAddress?.addressDetail ?? "" ); setValue("images", props.data.fetchBoard.images ?? ["", "", ""]); } const images = props.data?.fetchBoard.images; if (images !== undefined && images !== null) setFiles([...images]); }, [props.data]); const onChangeFiles = (file: string, index: number): void => { // file값은 url값 index는 해당하는 number값. const newFiles = [...files]; newFiles[index] = file; setFiles(newFiles); setValue("images", newFiles); }; return ( <S.Wrapper> <S.BoardTitle>게시글 {props.isEdit ? "수정" : "등록"}</S.BoardTitle> <S.WriterSection> <S.HalfSection> <S.BoardLabel>작성자</S.BoardLabel> <S.BoardInput type="text" defaultValue={props.data?.fetchBoard.writer ?? ""} placeholder="작성자를 입력해주세요" {...register("writer")} /> <S.Error>{Error}</S.Error> </S.HalfSection> <S.HalfSection> <S.BoardLabel>비밀번호</S.BoardLabel> <S.BoardInput type="password" placeholder="비밀번호를 입력해주세요." {...register("password")} onChange={onChangePassword} /> <S.Error>{Error}</S.Error> </S.HalfSection> </S.WriterSection> <S.Section> <S.BoardLabel>제목</S.BoardLabel> <S.BoardInput type="text" placeholder="제목을 입력해주세요" {...register("title")} /> <S.Error>{Error}</S.Error> </S.Section> <S.Section> <S.BoardLabel>내용</S.BoardLabel> <S.BoardContents id="title" placeholder="내용을 입력해주세요" {...register("contents")} ></S.BoardContents> <S.Error>{Error}</S.Error> </S.Section> <S.Section> <S.BoardLabel>주소</S.BoardLabel> <S.ZipCodeWrapper> <S.ZipCodeInput placeholder="07725" readOnly {...register("boardAddress.zipcode")} /> <S.ZipCodeButton onClick={modalToggle}> 우편번호 검색 {/* 모달창의 state를 받아와서 true라면 모달창을 열어준다. */} {isOpenModal && ( <Modal open={isOpenModal}> <DaumPostcodeEmbed onComplete={(data) => { setValue("boardAddress.zipcode", data.zonecode); setValue("boardAddress.address", data.address); modalToggle(); }} /> </Modal> )} </S.ZipCodeButton> </S.ZipCodeWrapper> <S.Address readOnly {...register("boardAddress.address")} /> <S.Address type="text" placeholder="상세주소를 입력해주세요" {...register("boardAddress.addressDetail")} /> </S.Section> <S.Section> <S.BoardLabel>유튜브</S.BoardLabel> <S.BoardInput type="text" placeholder="링크를 복사해주세요" {...register("youtubeUrl")} /> </S.Section> <S.Section> <S.BoardLabel>사진 첨부</S.BoardLabel> {/* 이미지 업로드 컴포넌트 분리 */} <S.ImageWrapper> {files.map((el, index) => ( <UploadImage key={uuidv4()} files={el} // 여기로 들어온 el값은 ""값 기본값이기 때문에 index={index} onChangeFiles={onChangeFiles} /> ))} </S.ImageWrapper> </S.Section> <S.Section> <S.BoardLabel>메인 설정</S.BoardLabel> <S.RadioButton type="radio" id="youtube" name="radio-button" /> <S.RadioLabel htmlFor="youtube">유튜브</S.RadioLabel> <S.RadioButton type="radio" id="image" name="radio-button" /> <S.RadioLabel htmlFor="image">사진</S.RadioLabel> </S.Section> <S.RegistButton onClick={handleSubmit(props.isEdit ? onClickEdit : onClickWrite)} isEdit={props.isEdit} > {props.isEdit ? "수정" : "등록"}하기 </S.RegistButton> </S.Wrapper> ); }포트폴리오 리펙토링을 진행하다가 useForm의 defaultValue를 사용할때 텍스트 데이터는 잘 들어오다가modal창의 주소 데이터나 images 배열은 제대로 들어오지 않아서 방법을 찾다가 setValue를 이용해서 값을 넣어주는 방법이 있어서 이렇게 작성해봤는데 useEffect를 이용해서 만들어봤는데 setValue는 setState와 같은 기능을 하는것같아서 이런식으로하면 리렌더링의 문제가 없는지 궁금합니다
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
final 과제 코드 질문입니다.
제가 한 final 과제 코드와 정답 코드를 비교해보고 싶은데 final 정답 코드가 있을까요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
섹션 7 GraphQL 관련 질문 드립니다
안녕하세요섹션 04-05-graphql-mutation-product 따라하고 있는데 도중에 저런 에러 메세지가 떴습니다.디버깅 하려고 해도 Network 부분에 message 부분이 안 뜨네요ㅠ 검색해보니 쿠키 및 인터넷 기록 삭제해보라고 나오는데..삭제해도 해결이 안 되고요ㅠㅠ 어떻게 해야 해결될까요?도움 부탁드립니다
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
[20-03-search-keyword] 에서 질문 있습니다.
다른 코드는 다 처리되고 화면에 반영되는데,노란 부분만 그냥 건너뛰어져요.강의 영상 코드와 여러번 비교하며 그대로 타이핑 했는데요 ㅠ아에 처리도 안되고 그냥 건너뛰어져요 ㅠ
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
내장함수 리뷰 강의 질문입니다.
내장함수 리뷰 강의에서 let isStarted = false 이 부분을 작성해주는 이유와 let timer를 해서 setInterval 앞에 timer를 붙여 재할당부분 그리고, clearInterval(timer) 이 부분에 대해 강의를 여러번 봐도 설명이 조금 어렵더라구요. 조금 쉽게 설명부탁드리겠습니다 ^^
-
미해결[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
yarn dev 가 실행되지 않습니다.
"devDependencies": { "@types/node": "^17.0.2", "@types/react": "^17.0.2", "typescript": "^4.9.4" }이렇게 강사님과 버젼을 맞췄음에도 불구하고 yarn dev 가 실행되지 않습니다. 터미널에서 권장한 방법으로 yarn add --dev @types/react 를 입력하면 "devDependencies": { "@types/node": "^17.0.2", "@types/react": "^18.3.1", "typescript": "^4.9.4" }이렇게 돌아가버립니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요 section04 게시글 등록 과제를 하다가 모르는 부분이 있어 질문 드립니다.
자꾸 저 부분이 빠져나가서 도대체 이유를 모르겠습니다. 강사 님 코드를 똑같이 붙여넣기 해도 똑같은 결과가 나옵니다참 이상 한 거는 InputWrapper안에 Address를 하나를 지우면 올바르게 가운데 출력이 됩니다. 코드는 강사님꺼랑 완전 똑같은데 결과가 왜 이렇게 나오는지 궁금합니다. 아무리 생각해도 똑같이 InputWrapper안에 있으면 잘 나와야 하는데 이유를 모르겠습니다. 아래는 <Address />를 하나 지웠을 경우 입니다. 또한 위에 정렬이 안된 부분도 WriterWrapper 안에 width = 100%를 지우면 정렬이 됩니다. 도대체 왜 이 두 요소만 다르게 출력 되는지 도저히 모르겠습니다.
-
미해결[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
회원가입 과제 완료용
안녕하세요!!과제 완료해서 피드백 부탁드리고자 올렸습니다!앞으로 잘 부탁 드립니당~<html><!DOCTYPE html> <html lang="ko"> <head> <title>회원가입</title> <link rel="stylesheet" href="./02-signup.css"> </head> <body> <div class="signUpContent"> <h2> 회원 가입을 위해<br> 정보를 입력해주세요 </h2> <label for="email" class="label text">* 이메일</label> <input id="email" class="input_text" type="text"> <label for="name" class="label text">* 이름</label> <input id="name" class="input_text" type="text"> <label for="password" class="label text">* 비밀번호</label> <input id="password" class="input_text" type="password"> <label for="password_chk" class="label text">* 비밀번호 확인</label> <input id="password_chk" class="input_text" type="password"> <div class="signUpChk"> <input id="gender_w" class="input_radio" type="radio" name="gender"> <label for="gender_w" class="label gender">여성</label> <input id="gender_m" class="input_radio" type="radio" name="gender"> <label for="gender_m" class="label gender">남성</label> </div> <div class="agreeChk"> <input type="checkbox" id="input_chk"> <span class="agree_text"> 이용약관 개인정보 수집 및 이용, 마케팅 활용 선택에 모두 동의합니다. </span> </div> <div class="out-line"> <div class="line"></div> </div> <button> <span>가입하기</span> </button> </di> </body> </html><css>* { box-sizing: border-box; } h2 { font-size: 32px; color: #0068FF; font-weight: 700; line-height: 47px; } .out-line{ padding: 30px 0px; } .line { border-bottom: 1px solid #E6E6E6; } .label{ font-size: 16px; font-weight: 400; line-height: 24px; } .signUpContent{ width: 670px; height: 960px; border: 1px solid #AACDFF; border-radius: 20px; box-shadow: 7px 7px 39px rgba(0, 104, 255, .25) ; display: flex; flex-direction: column; padding: 72px 100px 70px 100px; } .label.text{ padding: 20px 20px 0 0; color: #797979; } .input_text{ border-style: none; border-bottom: 1px solid #CFCFCF; height: 60px; } .signUpChk{ display:flex; justify-content: center; align-items: center; padding: 50px 0; } .input_radio{ margin: 0 5px 0 0; width: 20px; height: 20px; } .label.gender{ padding-right: 30px; } .agreeChk{ display: flex; justify-content: center; align-items: center; } .agree_text{ height: 22px; font-size: 14px; font-weight: 400; line-height: 20px; } button{ width: 470px; height: 75px; background-color: #FFF; border: 1px solid #0068FF; border-radius: 10px; } button > span { font-size: 18px; font-weight: 400; color: #0068FF; }
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
graphQL 강의중
플레이 그라운드에서 스크랩 해오면 코드에서 인식이 안돼는것 같은데 원인을 못찾겠습니다 ㅠ
