173만명의 커뮤니티!! 함께 토론해봐요.
미해결
코딩할 때 로딩속도 때문에 통이미지를 바로 넣기보다 html코드작성을 하는걸 더 선호하는데 코드가 길어지면 또 그것도 느려지는거 아닌가 하는 의문이 문득 들어서요! 통이미지가 많은 것 보다 코드작성이 훨씬 로딩에는 좋은게 맞을까요? 아 추가적으로 svg보다 image로 넣는게 보통 용량이 더 큰가요?
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
과제를 하면서 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; 속성도 안먹히던데 뭐가 문제인걸까요..ㅜㅜ
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
Updated news 와 TODAY STORY를 띄우는 방식으로 padding-left를 쓰는 것도 그렇고, 이전 코딩들에서도 padding을 주로 사용하시더라고요. padding을 이용하면 내부 크기를 줄이고 공백을 만드는 방식이므로 전체 크기가 변하지 않기 때문에, box-sizing: border-box를 이용하는 것과 같은 맥락으로 이해해도 될까요?
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
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가 가장 우선적인 설정인가요? 답변 부탁드리겠습니다ㅠ
해결됨
[코드캠프] 시작은 프리캠프
완벽하지는 않지만, 이미 올려주셨던 분들의 코드까지 참조해서 좀 더 나은 버전으로 만들어 봤습니다. 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같은걸 공부할지 다른 프레임워크같은걸 공부할지 고민입니다. 미디어쿼리나 자바스크립트 같은건 기억이 조금은 나는데 레이아웃 잡는게 어렵네요..ㅠㅠ 선배님들 도와주세요 ^^
해결됨
[코드캠프] 시작은 프리캠프
hl-aria-live-container 가 무엇인가요?? 모든 div에 css를 적용 해서 그런것 같은데 선생님이 강의 진행 하실때는 왜 안나타난 걸까요??
미해결
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
강의 헤더 부분에서 스타일이 깨지는 현상이 발생했습니다. 제 프로젝트에서만 문제가 발생하는 줄 알았는데 완성된 프로젝트 완성 예시에서도 문제가 발생하는 것을 확인했습니다. .MyButton의 스타일과 .head_btn_right의 스타일에서 간격 차이가 생겨서 밀리는 것 같은데, 혹시 어떤 식으로 해결하면 좋을까요?
미해결
홈페이지만들어서 nginx로 배포했습니다,,, 만 이런식으로 디자인이랑 글씨가 다깨져서 보입니다zzz 그냥 runserver 했을때는 괜찮았는데 왜이러는걸까요? 이런현상을 뭐라하나요? 뭔지알면 스택오버플로우에 질문이라도 할텐데 무슨현상이라고 하는지도 모르겠습니다
미해결
애플 웹사이트 인터랙션 클론!
d위 이미지처럼 가로 스크롤이 생기는 데 overflow-x: hidden 기능이 적용되지 않아서 생기는 문제일까요?
해결됨
Svelte.js SPA 영화 검색 프로젝트
안녕하세요 강의 다 본 후 구성 비슷하게 맞춰서 작업하고 있는데요 scss를 사용하면 vue도 마찬가지지만 svelte는 유니크한 클래스가 붙잖아요, 그래서 나중에 css 디버깅할 때 너무 불편해서 그냥 css 파일을 별도로 만들어서 붙여봤거든요, 1. head 태그에 링크로 css 삽입하는 방법, 2. main.js에 import 해서 css를 불러 오는 방법을 사용했는데 autoprefixer가 적용이 안되네요... 따로 css-loader나 file-loader를 적용해야 하나 해서 snowpack.config.js 옵션을 봤더니 rule 옵션은 없는거 같고.. 다른 방법이 있을까요? ㅠㅠ
미해결
위처럼 제가 만드려는 사이트에 슬릭 슬라이더를 적용하니 원래 크기는 320px인데 394px 이나 늘어났습니다 ㅠㅠ 검색해보니 슬릭 슬라이더 고유 style이 먹히는 바람에 저렇게 된 것 같은데 제가 커스텀한 css로 슬라이더 적용하는 방법 찾고 싶습니다... 버튼도 설정한 적 없는데 가운데로 와서 수정도 잘 안 돼 도움 남겨봐요... + 수정 위의 상황을 고치면 이런식으로 화살표 오류는 여전한 채 slidesToShow 가 안 먹힙니다ㅠㅠ 반응형인 responsive도 전혀 안 먹히고 있어요,,,
해결됨
인터랙티브 웹 개발 제대로 시작하기
3개의 문2 강의 8:13 에 .door-back 에 overflow: hidden;을 작성하셨는데요. 이미지가 해당 영역 밖으로 나갔을 때, 보이지 않게 하게 하기 위해서였죠. 그런데, 여기서 position: absolute;을 안 주면, 다음과 같은 상황이 발생하는데요. 아마, 제 생각에는 door-back 상위의 영역 ( 부모나 조부모 영역 )으로 넘어가면, overflow: hidden;이 더이상 적용이 안 되서 이런 현상이 발생하는 거 아닌가 하는 추측을 해봅니다. 그런데, 이 상황을 position: absolute;를 넣어주면, 완벽하게 해결이 되네요. 어떻게, absolute가 이 현상을 방지하는지 궁금합니다. 혼자 이해해보려고 했지만, 도저히 모르겠어서 질문드립니다. 감사합니다.
미해결
UX/UI 시작하기 : Figma 입문 (Inflearn Original)
피그마에 모든 페이지에 일관성 있는 기본 스타일값을 주고 css 처럼 기본 스타일 초기값 설정 못하나요?
해결됨
인터랙티브 웹 개발 제대로 시작하기
안녕하세요~ 1분 코딩님 이미지를 삽입할 때, 2가지 방법이 있는데요. "CSS 에서 background 속성으로 이미지를 삽입하는 것"과 "HTML에서 img 태그를 이미지를 삽입하는 방식" 이 2가지 방식을 언제 사용하면 좋다거나, 언제는 사용하면 안 되는 상황이 있나요?? 예를 들어, 어느 상황에서는 CSS에 이미지를 집어넣는 게 컨트롤 하기 더 유리한 케이스라든지 혹은 HTML의 img 태그는 중요한 이미지들을 삽입하는 데 쓴다는 등 ... CSS에서 이미지를 넣는 방식과 HTML에서 이미지를 넣는 방식 구지 2가지 방식을 만들어 놓은 이유가 있을 것같아서 질문드립니다. 감사합니다.
미해결
<1만 시간의 법칙> 웹 페이지 제작하기
. title_img img { width : 100% ; height : auto ; } 이렇게 height:auto 를 주셨는데 height값은 어떻게 설정 되는건가요? width는 부모 요소의 100% 라 564px 인걸로 알고 있습니다 ㅠㅠ
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
■ 질문 남기실 때 꼭! 참고해주세요. - 먼저 유사한 질문이 있었는지 검색해주세요. - 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다. - HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요. - 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다.
미해결
안녕하세요 현재 개인 프로젝트 웹 사이트를 제작하다가 일주일동안 정말 해결 안 되는 난제가 있어서 질문 드립니다.. 도와주세요 ㅠㅠ a 태그를 이용해서 해당 링크로 이동하는 부분을 작업하고 있는데 그 url이 매개변수 변화가 없어서 어떻게 작업을 해야 될 지 모르겠습니다. 해당 url은 https://www.g2b.go.kr:8092/sm/ma/mn/SMMAMnF.do 나라장터 종합쇼핑몰 링크인데요, 검색해보시면 확인하실 수 있겠지만 검색결과에 따라 url이 변화되지 않고 쭉 저 url 그대로입니다.. 저는 (예를들어) 간판이 검색 결과로 뜨는 url로 바로 이동할 수 있게 하고 싶은데 매개변수 변화가 없다보니 저 url 그대로 a 태그에 넣게 되니까 페이지 이동하면 간판 검색 결과 페이지가 아닌 나라장터 종합쇼핑몰 메인 화면이 나오더라고요.. 어떻게 해야 제가 원하는 값을 검색하여 결과가 나온 페이지로 나올 수 있게 url을 작업할 수 있을까요 url에 어떤 파라미터, 매개변수 코딩을 해야 되는지 알려주세요 ㅠㅠ + location.search해도 빈 문자열이 나옵니다.
미해결
[신규 개정판] 이것이 진짜 크롤링이다 - 기본편
웹사이트 열기까지는 실행이 잘 되는데, 그 다음 명령어 browser . find_elements_by_css_selector ( 'a.nav.shop' ).click() 작동하지 않습니다... ㅠㅠ 터미널을 보면 사진과 같이 시스템에 부착된 장치가 작동하지 않습니다 라는데, 어떻게 해야하나요 ? 유료강의 수강직전 복습중인데 여기서 막혀서 진도가 안나갑니다. 도와주세요!
미해결
인터랙티브 웹 개발 제대로 시작하기
안녕하세요. 세로만 있는 경우는 다른 질문에도 답변을 달아주셨듯이 y값 옮기면 될 것 같습니다. 그런데 가로 세로 모두 있는 경우 ex) 0번 1번 2번 3번 4번 5번 6번 7번 8번 의 경우 animation을 줄 때 2->3으로 이동할 때 이미지 자체가 이동해서 중간과정이 이상하던데 혹시 이러한 경우는 안되는 것일까요?
