묻고 답해요
156만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
A1 작업하는데 와이어프레임이 무너지고, hover일부가 적용 안되고 메뉴바가 슬라이드를 밀어냅니다. 탭메뉴도 작동하지 않습니다..
이곳저곳 실수가 너무 많은데 처음 연습하는거다보니까 어디서부터 잘못된건지 혼자 알기가 너무 어려워 질문글 올립니다. ㅜㅜ 어디가 잘못된건지 지적 꼭 좀 부탁드립니다.<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>Just 쇼핑몰</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <header> <div class="header-logo"> <a href="#none"><img src="images/header-logo.jpg" alt="헤더로고"></a> </div> <div class="navi"> <ul class="menu"> <li>탑 <div class="sub-menu"> <a href="#none">블라우스</a> <a href="#none">티</a> <a href="#none">셔츠</a> <a href="#none">니트</a> </div> </li> <li>아우터 <div class="sub-menu"> <a href="#none">자켓</a> <a href="#none">코트</a> <a href="#none">가디건</a> <a href="#none">머플러</a> </div> </li> <li>팬츠 <div class="sub-menu"> <a href="#none">청바지</a> <a href="#none">짧은바지</a> <a href="#none">긴바지</a> <a href="#none">레깅스</a> </div> </li> <li>악세서리 <div class="sub-menu"> <a href="#none">귀고리</a> <a href="#none">목걸이</a> <a href="#none">반지</a> <a href="#none">팔찌</a> </div> </li> </ul> </div> </header> <div class="slide"> <div class="slide-items"> <a href="#none" class="slide-item"><img src="images/slide-1.jpg" alt="슬라이드1"></a> <a href="#none" class="slide-item"><img src="images/slide-2.jpg" alt="슬라이드2"></a> <a href="#none" class="slide-item"><img src="images/slide-3.jpg" alt="슬라이드3"></a> </div> </div> <div class="items"> <div class="news"> <div class="tab-inner"></div> <div class="btn"> <a href="#none" class="btn1">공지사항</a> <a href="#none" class="btn2">갤러리</a> </div> <div class="tabs"> <div class="tab1"> <a href="#none"> SMS 발송 모바일 서비스 개선작업 안내입니다.<b>2020.01.09</b></a> <a href="#none">휴대폰 인증 서비스 개선 작업 기간 연장합니다.<b>2020.01.07</b></a> <a href="#none">카드사 부분 무이자 할부 이벤트 2월 3일까지 혜택<b>2019.12.31</b></a> <a href="#none">올앳 시스템 작업 안내<b>2019.12.20</b></a> <a href="#none">휴대폰 결제 시스템 작업이 완료되었습니다.<b>2019.12.20</b></a> </div> <div class="tab2"> <a href="#none"><img src="images/pic.jpg" alt="이미지1"></a> <a href="#none"><img src="images/pic1.jpg" alt="이미지2"></a> <a href="#none"><img src="images/pic2.jpg" alt="이미지3"></a> </div> </div> </div> </div> <div class="banner"> <a href="#none"><img src="images/banner.jpg" alt="배너"></a> </div> <div class="shortcut"> <a href="#none"><img src="images/shortcut.jpg" alt="쇼컷"></a> </div> </div> <footer> <div class="footer-logo"> <a href="#none"><img src="images/footer-logo.jpg" alt="푸터로고"></a> </div> <div class="copyright"> <a href="#none">법적고지 개인정보취급방침 개인정보처리방침<br>상호 : 엣지컴퍼니 | 대표자 : 홍길동 | 개인정보관리책임자 : 장길산 차장 <br>사업장주소 : 서울특별시 강남구 테헤란로 123-56</a> </div> <div class="SNS"> <a href="#none"><img src="images/sns-01.png" alt=""></a> <a href="#none"><img src="images/sns-02.png" alt=""></a> <a href="#none"><img src="images/sns-03.png" alt=""></a> </div> </footer> </div> <script src="script/jquery-1.12.4.js"></script> <script src="script/custum.js"></script> </body> </html>@charset "utf-8"; body{ margin: 0; background-color: #fff; color: #333333; font-size: 15px; } body a{ text-decoration: none; color: #333333; } .container{ width: 1200px; margin: auto; } header{ height: 100px; border: red solid 1px; box-sizing: border-box; position: relative; z-index: 10; } .slide{ height: 300px; width: 1200px; border: red solid 1px; box-sizing: border-box; position: relative; overflow: hidden; } .items{ height: 200px; border: red solid 1px; box-sizing: border-box; overflow: hidden; } footer{ height: 100px; border: red solid 1px; box-sizing: border-box; overflow: hidden; } .items > div{ height: 200px; float: left; } .footer>div{ float: left; height: 100px;} .header-logo{ width: 200px; border: red solid 1px; box-sizing: border-box; float: left; margin-top: 25px; } .navi{ width: 500px; border: red solid 1px; box-sizing: border-box; float: right; text-align: center; } .slide-items{ border: red solid 1px; box-sizing: border-box; position: absolute; height: 300px; font-size: 0; left: 0; top: 0; } .news{ width: 400px; border: red solid 1px; box-sizing: border-box; font-size: smaller; } .banner{ width: 400px; border: red solid 1px; box-sizing: border-box; font-size: 0; } .shortcut{ width: 390px; border: red solid 1px; box-sizing: border-box; font-size: 0; } .footer-logo{ width: 250px; height: 100px; border: red solid 1px; box-sizing: border-box; float: left; margin: 20px; } .copyright{ width: 700px; border: red solid 1px; box-sizing: border-box; text-align: center; height: 100px; padding-top: 10px; color: darkgray; float: left; } .sns{ width: 250px; height: 100px; border: red solid 1px; box-sizing: border-box; float: left; } .sns a img{margin: 20px;} /* 네이게이션 */ ul.menu{padding: 0px; list-style: none;} .menu li{ float: left; background: #fff; width: 25%; font-weight:bolder; } .sub-menu{ display: none; background: #fff; } .sub-menu a { display: block; background: #fff; } .menu>li>a {display: block; padding: 5px;} ul.menu li:hover > a { color: #fff; background-color: black; } ul.menu li .sub-menu a:hover{ color: #fff; background-color: black; } /* 탭메뉴 */ .btn{margin-left: 4px;} .btn a{ display: inline-block; border: #333333 1px solid; border-radius: 5px 5px 0 0; width: 100px; text-align: center; margin-right: -6px; background-color: #ddd; margin-bottom: -3px; border-bottom: none; } .tab-inner{width: 80%; margin: auto; border: 1px solid #000; box-sizing: border-box;} .tab1{border: 1px solid #000; padding: 0 10px;} .tab1 a{ display: block; padding: 5px; border-bottom: #333333 1px solid; } .tab1 a:last-child{border-bottom: none;} .tab1 a b {float: right; font-weight: normal;} .tab2{ border: 1px solid #000; display: none; height: 165px; text-align: center; padding-top: 20px; box-sizing: border-box; } .btn a.active {background-color: #fff;} $(".menu li").mouseenter(function(){ $('.sub-menu').stop().slideDown() }) $(".menu li").mouseleave(function(){ $('.sub-menu').stop().slideUp() }) $('.slide-item:gt(0)').hide() setInterval(function(){ $('.slide-item:first-child').fadeOut(500).next().fadeIn(500) $('.slide-item:first-child').appendTo('.slide-items') },3500) $('.btn a:first-child').click(function(){ $('.tab1').show() $('.tab2').hide() $(this).addClass('active') $(this).siblings().removeClass('active') }) $('.btn a:last-child').click(function(){ $('.tab2').show() $('.tab1').hide() $(this).addClass('active') $(this).siblings().removeClass('active') }) $(this).addClass('active') $(this).siblings().removeClass('active')
-
미해결HTML/CSS 베이스캠프
섹션 9 css구현에서 background img넣는게 안되네요
background-image: url('images/img_hodu_header.png') bottom right no-repeat이렇게 했는데 배경에 이미지로 고양이 사진이 안들어가요ㅜ
-
미해결나만의 포트폴리오 웹페이지 만들기
CSS가 적용이 안됩니다.
/* ABOUT AREA */ .about-area { height: auto; position: relative; } .about-area > .picture { display: block; text-align: center; padding: 20px; } @media (min-width: 992px) { .about-area > .picture { width: calc(40% - 40px); display: inline-block; } } .about-area > .picture > img { max-width: 300px; max-height: 300px; border-radius: 15px; } .about-area > .picture > .name { font-size: 25px; text-align: center; padding: 15px 0; } .about-area > .picture > .description { font-size: 14px; font-family: 'Noto Sans KR', sans-serif; } .about-area > .text { display: block; padding: 30px; } @media (min-width: 992px) { .about-area > .text { width: calc(60% - 100px); display: inline-block; padding: 0 50px; } } .about-area > .text * { font-size: 16px; }4-2. CSS 강의에서분명 똑같은 방식으로 붙여넣었지만 소개 글 및 정보란이 사진 오른쪽으로 가지 않습니다... 어떻게 해야할까요
-
미해결HTML/CSS 베이스캠프
섹션 9, 10에 압축폴더가 압축파일이 이상해요
압축파일이 안열려요 메일 알려드릴게요 보내주세요ㅜ
-
해결됨React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드
안녕하세요 선생님 특정 IP만 접속 가능한 기능 강의 예정 있으실까요??
CH5-1에서 언급해주신 특정 IP만 접속 가능한 화이트리스트, 블랙리스트 기능 혹시 강의 예정 있으실까요?? 막상 언급하시니 궁금해서요...
-
미해결처음 만난 리액트(React)
안드로이드 에뮬레이터 오류
안녕하세요 vscode에서 안드로이드 에뮬레이터를 사용해서 켰는데 이렇게 뜨는데 무슨 오류일까요 ㅠㅠ 계속 안 고쳐지네요ㅠㅠ
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
일반적인 css 꾸미기에서 width와 height의 값?
강의 잘 듣고 있습니다.질문이 있는데요,일반적인 css 꾸미기에서 width와 height의 값은 개발자가 아닌웹디자이너가 항상 알려주기도 하나요?즉 만약 vs code에서 파일이 index.html이 있고 index.css가 있다고 한다면, index.html에서 작성한 내용에 index.css에서 꾸며줄 시에 width 값과 height 값이 몇 픽셀인지, 혹은몇 퍼센트인지 정할 때 잘 모르겠다면 어떻게 해야 하나요? 개발자가 width 값과 height 값을 잘 모른다면감으로 크기를 늘렸다가 줄였다가 반복 하면서 적당한 width값과 height값을 찾아나가는 건가요?피그마에서는 보통 디자인이 다 된 결과 값을 보고 vs code에 코딩한다면 상세 정보를 보고 width크기,height크기,폰트 크기, 폰트 weight등등 다양하게 그대로 css에 적어주기만 하면 되는데요, 그랩 선생님 강의에서는 피그마로 볼 수 있게 추가 안내가 없어서, 스스로 강의 들은 이후 강의 없이 복습 할 시에(그랩마켓 웹화면 구현하기 1~3) 혹시나 각각 css로 꾸밀 때 width, height은 외우거나 혹은 보고 css에 적용하는 방식의 공부법 밖에 없는걸까요? 아니면 실무에서는 웹디자이너가 이미지등등의 경우에 width,height,기타 등등을 알려주기에 그대로 css에 코딩해주면 되는 것인지요? 그랩님, 답변 부탁드립니다.
-
해결됨이거 하나로 종결-스프링 기반 풀스택 웹 개발 무료 강의
안녕하세요
스프링관련 프로젝트를 하려고하는데 마침 무료강의가 있어서 들어보려고 합니다.그런데 유료강의랑 무료강의랑 커리큘럼이 비슷한 것 같은데 차이점이 있을까요? 유료강의가 좀 더 자세히 알려주는건가요? 아니면 최신업로드여서 유료강의인가요? 궁금합니다.
-
해결됨이거 하나로 종결 - 32시간 고품질 스프링 풀스택 웹 개발
다음강좌가 또나오나요? 언제쯤 출시되나요?
오늘 올라온 새소식보고 문의남깁니다.현재 이강좌 구입해서 아직 듣고있지않고있거든요다음강좌가 스프링부트 리액트라고하는데지금강좌랑 내용상 겹침이 거의없는건가요?? 한가지 건의를드리자면 next.js나 장고계열에선 강의들을보면 결제기능까지 탑재하는 강의내용이 많은데 유독 스프링계열강의들에선 crud까지만 강의하고 대부분의 강좌들이 결제기능구현하는내용이 없더라구요스프링공부하는이유가 쇼핑몰같은걸 갠적으로 만들어보려고 학습하는데;;;; 다음강의 출시하실예정이라면 개인이 혼자 웬만한 웹사이트 제작할수있게 결제부터 다양한 기능구현에대한 내용을 포함시켜주실수있는지 궁금합니다. 왜 스프링계열에선 결제api연동하는걸 강의하는내용들을 다루지않는지 궁금하긴하네요
-
해결됨Figma 디자인부터 퍼블리싱까지
모바일 포트폴리오 이미지
안녕하세요,모바일 버전 포트폴리오 이미지에서#portfolio .container { /* display: flex; flex-wrap: wrap; gap: 20px; */ }이 부분을 주석으로 바꾸면이렇게 세로가 아니라 가로로 바뀌는데뭐가 잘못된걸까요?
-
미해결구글 애드센스 수익형 워드프레스 블로그 만들기
랭크메쓰 설정방법 질문
저는 위에 같이 나오는데 어떻게 설정하면 될까요?
-
해결됨Figma 디자인부터 퍼블리싱까지
#portfolio .container 넓이
안녕하세요,#portfolio .container 빨간색 영역의 넓이를정하지 않았는데#portfolio .container li img { width: 100%; } 이렇게 넘치던 이미지가#portfolio .container li img { width: 100%; }img에서 넓이를 100%로 맞추니까빨간색 전체 영역이줄어들었는데 무슨 이유로 줄어들었는지 궁금합니다
-
해결됨Figma 디자인부터 퍼블리싱까지
마진확인하는 법
피그마 디자인에서좌우 마진 100px 있는건 어떻게 확인하면 되나요?
-
해결됨Figma 디자인부터 퍼블리싱까지
svg 이미지 저장
안녕하세요,피그마에서 로고를 svg로 저장하면이미지가 아니라 인터넷창으로 연결되는데뭐가 문제일까요?
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
footer 높이 값
세로 2칼럼(C2타입) Part ①』 영상 18분 58초 지점에서, 강사님께서 footer > div에 height: 100px를 적용하시던데, 혹시 이 부분의 높이는 50px이 맞는 값이 아닌가요?footer의 높이가 100px로 주어졌는데footer > div에 height: 100px를 적용하면 실제 높이는 200px 아닌가요?
-
해결됨Figma 디자인부터 퍼블리싱까지
오토레이아웃
오토레이아웃을 했더니이미지처럼 간격이 틀어집니다어떻게 해야되나요?ㅠㅠ
-
해결됨Figma 디자인부터 퍼블리싱까지
버튼이 없습니다
Icon 인스턴트는 만들고 십자모양 아이콘을 선택했는데 2:52분에 나오는버튼이 안나옵니다어떻게 해야되나요
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
div 상하분배?가 안돼요
■ 질문 남기실 때 꼭! 참고해주세요.- 먼저 유사한 질문이 있었는지 검색해주세요.- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다.질문 하실 때 어떤 유형인지 말씀해주세요. ex) A1 작업하는데 ???이 안됩니다.2강 가로 고정형 레이아웃 A3 유형 푸터 부분 변형하는 것 듣다가 선생님 따라 똑같이 썼는데도 푸터 부분의 div가 변형이 안되고 이런식으로 분배가 돼요. 3-4번 반복해서 코드 쓰신거 보고 있는데 뭐가 다른지 모르겠어요 ㅠㅠ엉엉
-
미해결구글 애드센스 수익형 워드프레스 블로그 만들기
404 페이지 푸터가 안보이네요 ㅠ
404페이지 푸터가 안보이는데 다시보이게 설정하려고 매니저>에서 푸터에서 글로벌 푸터 선택했는데도 안보이네요 무슨문제일까요?
-
미해결애플 웹사이트 인터랙션 클론!
[크로스브라우징] safari에서 동영상 영역 미노출
안녕하세요.공유해주신 자료를 보다가 보니 사파리 브라우저에서는 첫번째 동영상 영역이 크롬 브라우저와 다르게 영상이 없거나, 화면 스타일이 다르게 노출되는 것 같아서요. 오류인지 문의드립니다.apple-clone-v11/@simple-version/index.htmlapple-clone-v11/@ipad-stroke-effect/index.html
