묻고 답해요
152만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
순위 정보를
불러오고 있어요
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
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를 적용 해서 그런것 같은데 선생님이 강의 진행 하실때는 왜 안나타난 걸까요??
-
미해결한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
프로젝트 완성 예시 css 밀림
강의 헤더 부분에서 스타일이 깨지는 현상이 발생했습니다.제 프로젝트에서만 문제가 발생하는 줄 알았는데 완성된 프로젝트 완성 예시에서도 문제가 발생하는 것을 확인했습니다..MyButton의 스타일과.head_btn_right의 스타일에서 간격 차이가 생겨서 밀리는 것 같은데,혹시 어떤 식으로 해결하면 좋을까요?
-
미해결
웹화면 깨짐현상
홈페이지만들어서 nginx로 배포했습니다,,, 만 이런식으로 디자인이랑 글씨가 다깨져서 보입니다zzz 그냥 runserver 했을때는 괜찮았는데 왜이러는걸까요? 이런현상을 뭐라하나요? 뭔지알면 스택오버플로우에 질문이라도 할텐데 무슨현상이라고 하는지도 모르겠습니다
-
미해결애플 웹사이트 인터랙션 클론!
overflow-x:hidden을 사용했는데, 모바일 화면에서 우측이 잘리고 가로 스크롤이
d위 이미지처럼 가로 스크롤이 생기는 데 overflow-x: hidden 기능이 적용되지 않아서 생기는 문제일까요?
-
해결됨Svelte.js SPA 영화 검색 프로젝트
autoprefixer를 스태틱한 css에 적용할 수 있는 방법이 있을까요?
안녕하세요 강의 다 본 후 구성 비슷하게 맞춰서 작업하고 있는데요 scss를 사용하면 vue도 마찬가지지만 svelte는 유니크한 클래스가 붙잖아요, 그래서 나중에 css 디버깅할 때 너무 불편해서 그냥 css 파일을 별도로 만들어서 붙여봤거든요, 1. head 태그에 링크로 css 삽입하는 방법,2. main.js에 import 해서 css를 불러 오는 방법을 사용했는데 autoprefixer가 적용이 안되네요... 따로 css-loader나 file-loader를 적용해야 하나 해서 snowpack.config.js 옵션을 봤더니 rule 옵션은 없는거 같고.. 다른 방법이 있을까요? ㅠㅠ
-
미해결
slick slider 오류
위처럼 제가 만드려는 사이트에 슬릭 슬라이더를 적용하니 원래 크기는 320px인데 394px 이나 늘어났습니다 ㅠㅠ 검색해보니 슬릭 슬라이더 고유 style이 먹히는 바람에 저렇게 된 것 같은데 제가 커스텀한 css로 슬라이더 적용하는 방법 찾고 싶습니다... 버튼도 설정한 적 없는데 가운데로 와서 수정도 잘 안 돼 도움 남겨봐요... + 수정 위의 상황을 고치면 이런식으로 화살표 오류는 여전한 채 slidesToShow 가 안 먹힙니다ㅠㅠ 반응형인 responsive도 전혀 안 먹히고 있어요,,,
-
해결됨인터랙티브 웹 개발 제대로 시작하기
강의 중 overflow:hidden;에 관한 질문드립니다.
3개의 문2 강의 8:13에 .door-back 에 overflow: hidden;을 작성하셨는데요. 이미지가 해당 영역 밖으로 나갔을 때, 보이지 않게 하게 하기 위해서였죠. 그런데, 여기서 position: absolute;을 안 주면, 다음과 같은 상황이 발생하는데요. 아마, 제 생각에는 door-back 상위의 영역 ( 부모나 조부모 영역 )으로 넘어가면, overflow: hidden;이 더이상 적용이 안 되서 이런 현상이 발생하는 거 아닌가 하는 추측을 해봅니다. 그런데, 이 상황을 position: absolute;를 넣어주면, 완벽하게 해결이 되네요. 어떻게, absolute가 이 현상을 방지하는지 궁금합니다. 혼자 이해해보려고 했지만, 도저히 모르겠어서 질문드립니다. 감사합니다.
-
미해결UX/UI 시작하기 : Figma 입문 (Inflearn Original)
기본 폰트 설정
피그마에 모든 페이지에 일관성 있는 기본 스타일값을 주고 css 처럼 기본 스타일 초기값 설정 못하나요?
-
해결됨인터랙티브 웹 개발 제대로 시작하기
CSS로 이미지를 삽입하는 것과 HTML에서 이미지를 삽입하는 것의 차이점이 무엇인가요??
안녕하세요~ 1분 코딩님 이미지를 삽입할 때, 2가지 방법이 있는데요. "CSS 에서 background 속성으로 이미지를 삽입하는 것"과 "HTML에서 img 태그를 이미지를 삽입하는 방식" 이 2가지 방식을 언제 사용하면 좋다거나, 언제는 사용하면 안 되는 상황이 있나요?? 예를 들어, 어느 상황에서는 CSS에 이미지를 집어넣는 게 컨트롤 하기 더 유리한 케이스라든지 혹은 HTML의 img 태그는 중요한 이미지들을 삽입하는 데 쓴다는 등 ... CSS에서 이미지를 넣는 방식과 HTML에서 이미지를 넣는 방식 구지 2가지 방식을 만들어 놓은 이유가 있을 것같아서 질문드립니다. 감사합니다.
-
미해결<1만 시간의 법칙> 웹 페이지 제작하기
.title_img img css 작성 문의 드립니다.
.title_img img{ width:100%; height:auto; } 이렇게 height:auto 를 주셨는데 height값은 어떻게 설정 되는건가요? width는 부모 요소의 100% 라 564px 인걸로 알고 있습니다 ㅠㅠ
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
css외부링크시 실시간미리보기 적용이 안됩니다.
■ 질문 남기실 때 꼭! 참고해주세요.- 먼저 유사한 질문이 있었는지 검색해주세요.- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다.
-
미해결
매개변수 문자열 없는 url 링크 구별 방법
안녕하세요 현재 개인 프로젝트 웹 사이트를 제작하다가 일주일동안 정말 해결 안 되는 난제가 있어서 질문 드립니다.. 도와주세요 ㅠㅠ 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으로 이동할 때 이미지 자체가 이동해서 중간과정이 이상하던데 혹시 이러한 경우는 안되는 것일까요?
-
미해결CSS 기본부터 활용까지
p태그끼리 마진을 주지 않았는데 사이 간격
4:27초쯤에 p태그끼리 마진을 아직 주지 않은 상태인데 왜 사이에 간격이 있나요?
-
해결됨쉽게 배우고, 포트폴리오로 만드는 반응형 웹! #설화수
[header] navigation script 작성하기 8분짜리 강의 추가 설명 부탁
[header] navigation script 작성하기 8분짜리 강의를 듣다 갑자기 nav.js파일안에 //nav const gnb=$('.gnb');//Active const gnb_menu_list=$('.nav_d1.d1_Over');//selector const sub_menu=$('.sub_menu');//On const sub_menu_list=$('.sub_menu>ul>li');//현재 순서값에 Over 추가가 되어있으시더라고요. [header] navigation menu layout css 작성하기 12분짜리 강의에는 설명이 전혀 안되있다가 갑자기 그 다음 강의에 들어가 있고 그거에 대한 언급은 안되어있네요. 설명 부탁드릴수 있을런지요. 그리고 클래스명이 복잡하게 되어있어 내용이해하는 흐름이 강의 들으면서 계속 중간중간 힘드네요.ㅠㅠ 그리고 순서값이 안나오는 이유는 무엇일까요? ㅠㅠ 제이쿼리를 몰라서요~ 많이 질문하게 되네요
주간 인기글
순위 정보를
불러오고 있어요
