묻고 답해요
130만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
궁금합니다
선생님 input 을 왜 display none을 해서 없애는 건가요?? 그리고 label span 안에 width: 100% height 2px background-color: #000 을 준 상태에서label span:nth-child(1){}label span:nth-child(2){}label span:nth-child(3){}각각 자식 span 안에 퍼센트만 쓰면 높이 2px 길이가 100% 인 검은색 이 들어가는건가요 ??
-
미해결실전! 웹사이트제작! Step by Step! ('크루알라모드'_반응형웹 제작)
수업자료 오류
안녕하세요.수업자료 다운시 내용이 없습니다.압축폴더가 올바르지 않다며 풀리지도 않습니다.jaja29@naver.com으로 보내주실 수 있을까요?
-
미해결초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
섹션12 보너스 챕터에 관한 질문입니다!
섹션12에서 텍스트가 나타나고 사라지는 인터렉션에서 처음 텍스트를 스크롤 하지 않고 처음 텍스트만 보이다가 스크롤이 시작되고 나서 사라지고 다음텍스트가 보이게 하려면 어떻게 코드를 작성해야할까요?
-
미해결반응형 웹사이트 포트폴리오(Architecture Agency)
트리거메뉴 제이쿼리
<!doctype html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'> <title>DesignWorks Architecture Agency</title> <!-- Page Scroll Effects JS & CSS --> <script src="/js/jquery-2.1.4.js"></script> <script src="js/velocity/modernizr.js"></script> <script src="js/velocity/velocity.min.js"></script> <script src="js/velocity/velocity.ui.min.js"></script> <script src="js/velocity/main.js"></script> <link rel="stylesheet" href="/js/velocity/velocity.css"> <!-- Custom JS & CSS --> <script src="/custom.js"></script> <link rel="stylesheet" href="/style.css"> <link rel="stylesheet" href="/reponsive.css"> </head> <!-- hijacking: on/off - animation: none/scaleDown/rotate/gallery/catch/opacity/fixed/parallax --> <body data-hijacking="on" data-animation="rotate"> <div class="container"> <section class="cd-section visible" id="home"> <div> <div class="content"> <img src="/images/temp-section-01.jpg"> </div> </div> </section> <section class="cd-section" id="about"> <div> <div class="content"> <img src="/images/temp-section-02.jpg"> </div> </div> </section> <section class="cd-section" id="project"> <div> <div class="content"> <img src="/images/temp-section-03.jpg"> </div> </div> </section> <section class="cd-section" id="plan"> <div> <div class="content"> <img src="/images/temp-section-04.jpg"> </div> </div> </section> <section class="cd-section" id="awards"> <div> <div class="content"> <img src="/images/temp-section-05.jpg"> </div> </div> </section> <section class="cd-section" id="location"> <div> <div class="content"> <img src="/images/temp-section-06.jpg"> </div> </div> </section> <section class="cd-section" id="content"> <div> <div class="content"> <img src="/images/temp-section-07.jpg"> </div> </div> </section> <header> <div class="gnb-inner"> <div class="logo"> <a href="#none"><img src="/images/logo.png"></a> </div> <div class="gnb"> <div class="menu"> <a href="#home">Home</a> <a href="#about">About</a> <a href="#project">Project</a> <a href="#plan">Plan & History</a> <a href="#awards">Awards</a> <a href="#location">Location</a> <a href="#contact">Contact</a> </div> <div class="slogan">We design places, not projects.</div> </div> <div class="trigger"> <span></span> <span></span> <span></span> </div> </div> </header> </div> <nav> <ul class="cd-vertical-nav"> <li><a href="#0" class="cd-prev inactive">Next</a></li> <li><a href="#0" class="cd-next">Prev</a></li> </ul> </nav> </body> </html>@media (max-width: 768px) { /* Entire Layout */ .cd-section { height: auto; } .cd-section > div { height: auto; } .content { position: static; width: 100%; height: 100%; } /* Header */ .menu { display: block; } .slogan { display: none; } .gnb { background-color: #fff; position: fixed; top: 0; right: -270px; width: 250px; height: 100vh; box-shadow: -5px 0 10px #0000002a; transition: 0.3s; } .gnb.active { right: 0; } .menu { line-height: 40px; margin-top: 60px; } .menu a { display: block; text-align: right; padding-right: 20px; color: black; font-size: 20px; } /* Trigger */ .trigger { display: block; width: 24px; height: 14px; position: absolute; right: 20px; top: 20px; } .trigger span { position: absolute; height: 1px; width: 100%; background-color: black; transition: 0.3s; } .trigger span:nth-child(1) { top: 0; } .trigger span:nth-child(2) { top: 50%; width: 90%; } .trigger span:nth-child(3) { top: 100%; } .trigger.active span:nth-child(1) { top: 50%; transform: rotate(45deg); } .trigger.active span:nth-child(2) { top: 50%; width: 90%; opacity: 0; } .trigger.active span:nth-child(3) { top: 50%; transform: rotate(-45deg); } }$(function(){ /* Trigger */ $('.trigger').click(function(){ $(this).toggleClass('active') $('.gnb').toggleClass('active') }) $('section, .menu a').click(function(){ $('.gnb').removeClass('active') }) }) 모바일에서 트리거메뉴 클릭시 제이쿼리(아이콘X로 변경 슬라이더메뉴 나오기)가 적용되지 않는데 왜 이럴까요 ㅠ 클레스네임부분에서 틀린게 없습니다
-
미해결SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 with Figma
figma 파일 임포팅이 되지 않습니다.
beyond insight > 피그마 원본 > 수강생 참고자료, 파일 임포팅이 되지 않습니다 ㅜ 파일명이 수강생 참고자료(Beyond Insight).fig..fig..fig 입니다.
-
미해결반응형 웹사이트 포트폴리오(Architecture Agency)
트리거메뉴 제이쿼리
모바일에서 트리거메뉴 클릭시 제이쿼리(아이콘X로 변경 슬라이더메뉴 나오기)가 적용되지 않는데 왜 이럴까요 ㅠ 클레스네임부분에서 틀린게 없습니다
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
선생님 궁금합니다
■ 질문 남기실 때 꼭! 참고해주세요.- 먼저 유사한 질문이 있었는지 검색해주세요.- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다. input type=radio 는 어차피 화면에 안보이게 할껀데왜 작성하나요? 화면에 보이는건 label만 인 것 같은데 궁금합니다!
-
미해결모바일 웹 퍼블리싱 포트폴리오 with Figma
개별페이지 HTML+CSS+JS 퍼블리싱(프리로딩)에서 배경 이미지 관련 질문
안녕하세요.모바일 웹 퍼블리싱 수업을 차근차근 잘 듣고 있습니다.강의 중간중간 설명해주시는 부분이 많은 도움이 되고 있습니다. ^^오늘 프리로딩 퍼블리싱 파트를 들었는데요,배경 이미지가 피그마에서 완성한 디자인과 배율이 달라보이는데 이 부분을 효과적으로 조절하려면 css background 에서 어떻게 조절하면 좋은지 궁금합니다.
-
미해결초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
5-3-1 강좌 섹션 질문 합니다.
안녕하세요, 수식 설명 강좌까지도 몇번이고 돌려봐도, 브러우저 스크롤 관점에서도, 애니메이션되는 요소 관점에서도 당최 명확하게 이해가 되지 않아서요,브라우저 스크롤 애니메이션 관련해서 이 강좌만큼 자세한 내용의 것이 없어서, 꼭 이해하고 싶어 이렇게 문의 드립니다.제가 이해한 것은1. 요소의 offsetTop과 scrollTop 값을 통해서 계산한 위치값 포인트에서, 모든 애니메이션이 시작한다(모든 애니메이션의 시작)2. 패럴럭스 애니메이션을 위해서, 해당 이미지가 일어날 섹션이 아닌, 그 위의 섹션 위치에서 애니메이션을 실행한다.3. 값은 1000이든 2000이든 어떤 값에서 0으로 줄어드는 로직으로 계산한다.이 세가지 내용입니다. parallaxThisTop = winScrollTop - parallaxOffsetTop; //패럴럭스가 시작될 위치값을 구함.해당 구문 이후로는 계속 이해가 가질 않아서요 텍스트로 길게 장황하게 라도 설명해주시면, 작성해주신 텍스트 내용 안에서 다시 이해해보는데 큰 도움이 될 듯합니다. 감사합니다.var parallaxSpeed = 1200; // 패럴럭스 요소의 스피드[질문]parallaxSpeed를 거리라고 강좌에서 말씀해주셨는데, 1200로 초기화 될 때, 이때 1200이란 어디를 start로, 기준으로 해서 이미지 요소가 반응하는 걸까요?숫자 1200은 브라우저를 스크롤 할 경우, 이미지 요소들이 반응?하기까지의 간격, 거리 라고 이해하고 있습니다.혹시 이 1200이란 숫자가 작동하기 시작하는 출발점이 parallaxThisTop인가요?거리라고 말씀하셨는데, parallaxSpeed 어디에서 어디까지의 거리를 의미하는지 궁금합니다.parallaxPercent = parallaxThisTop / parallaxSpeed * 100; // 이동할 거리 백분율 값을 담음[질문]여기서 이동할 거리가 브라우저 스크롤를 할 수 있는 거리라는 의미일까요?,이동하는 거리라면, 어디를 출발점으로 시작되는 간격(거리)일까요?강의에서 말씀하시는 거리라는 의미가 브라우저가 스크롤되는 거리와 이미지 요소가 반응하는 거리를 구분해서 의미하면 될까요var parallaxStartValue = 1000; //패럴럭스요소가 200 위치에서 시작하도록 설정합니다.[질문]패럴럭스 요소라 함은 이미지 요소라고 이해하고 있는데요, 200 위치라고 하는 게 어디를 시작점으로 200만큼 y축 아래로 내려온 것인가요?변수명의 의미와 용도에 대해서 다시 한번 설명 해주실 수 있을까요?패럴럭스가 시작할 위치라고 강좌에서 설명해주셨는데요, parallaxThisTop도 패럴럭스가 시작된 위치인 것과 어떤 차이점이 있는지요?var parallaxSpeed = 1200; // 패럴럭스 요소의 스피드var parallaxMoveDistance; // 패럴럭스 요소가 움직일 거리를 담을 변수 선업합니다[질문]첫번째 변수(parallaxSpeed)를 강좌에서 거리라고 설명해주셨는데, 변수명 parallaxMoveDistance의 거리랑 각각 어떤 다른의미의 거리인가요?parallaxPercent = parallaxThisTop / parallaxSpeed * 100; // 이동할 거리 백분율 값을 담음parallaxMoveDistance = Math.max(parallaxStartValue - parallaxStartValue, Math.min(parallaxStartValue, parallaxStartValue - (parallaxStartValue * (parallaxPercent/100)))); //패럴럭스 요소가 움직일 거리를 구함[질문]parallaxPercent는 브라우저의 스크롤되는 거리는 구하는 것이고,parallaxMoveDistance는 브라우저 스크롤 할때, 패럴럭스 되는 요소의 거리를 구하는 것인지요? 모든 변수명에 para~가 있어서 어떤 요소의 거리를 의미하는지 헷갈립니다.
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
메인슬라이드 오류문의
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>조이컨트리클럽</title> <link rel="stylesheet" href="/css/style.css"> </head> <body> <div class="container"> <div class="main-content"> <div class="left"> <header> <div class="header-logo"><img src="images/logo.png" alt="조이컨트리클럽"></div> <div class="navi"> <!-- navigation --> <ul class="menu"> <li> <a href="#">CLUB</a> <div class="sub-menu"> <a href="#">클럽소개</a> <a href="#">시설안내</a> </div> </li> <li> <a href="#">BOOKING</a> <div class="sub-menu"> <a href="#">요금안내</a> <a href="#">예약안내</a> <a href="#">위약안내</a> </div> </li> <li> <a href="#">INFORMATION</a> <div class="sub-menu"> <a href="#">명예의전당</a> <a href="#">이벤트</a> <a href="#">자료실</a> <a href="#">포토갤러리</a> </div> </li> <li> <a href="#">COMMUNITY</a> <div class="sub-menu"> <a href="#">공지사항</a> <a href="#">Q&A</a> </div> </li> </ul> </div> <div class="spot-menu"> <a href="#">로그인</a> <span>|</span> <a href="#">회원가입</a> </div> </header> </div> <div class="right"> <!-- 슬라이드 비주얼 --> <div class="slide"> <div class="slide-image"> <div class="slide-image-inner slide-items"> <a class="slide-item" href="#"><img src="images/slide_01.png" alt="slide1"></a> <a class="slide-item" href="#"><img src="images/slide_02.png" alt="slide2"></a> <a class="slide-item" href="#"><img src="images/slide_03.png" alt="slide3"></a> </div> </div> <!-- 슬라이드 배너 --> <div class="slider-banner"> <a href="#"><img src="images/icon_01.png" alt="예약일정">예약일정</a> <hr> <a href="#"><img src="images/icon_02.png" alt="멤버십">멤버십</a> <hr> <a href="#"><img src="images/icon_03.png" alt="오시는길">오시는길</a> <!-- 이미지만 고퀄로 변경 --> </div> </div> <div class="items"> <div class="shortcut"> <img src="images/ad.png" alt="카카오광고"> <div class="shortcut-content"> <h3>조이컨트리클럽 X 카카오골프</h3> <p>국내 최대 규모 골프장 조이컨트리 클럽과 카카오골프가 함께하는 10주년 행사! 카카오골프로 조이컨트리 클럽 신규가입시 라운드 30만원 상당의 쿠폰과 카카오골프 굿즈를 선물드려요.</p> </div> <a href="#"><img src="images/more_button.png" alt="더보기버튼"></a> </div> <div class="new"> <!-- 탭메뉴 --> <div class="tab-inner"> <div class="btn"> <a href="#" class="active">공지사항</a> <a href="#">갤러리</a> </div> <div class="tabs"> <div class="tab1"> <a href="#" class="open-modal">가을 맞이 신규 회원가입 특전을 안내드립니다.<b>2023.10.01</b> </a> <a href="#">9월 임시휴무 안내<b>2023.08.11</b> </a> <a href="#">카카오 골프 제휴 이벤트 안내<b>2023.05.11</b> </a> <a href="#">사이트가 리뉴얼 되었습니다.<b>2023.01.11</b> </a> </div> <div class="tab2"> <a href="#"> <img src="images/gallery-01.png" alt="이미지1"> <span>이미지1</span> </a> <a href="#"> <img src="images/gallery-02.png" alt="이미지2"> <span>이미지1</span> </a> <a href="#"> <img src="images/gallery-03.png" alt="이미지3"> <span>이미지1</span> </a> <a href="#"> <img src="images/gallery-04.png" alt="이미지4"> <span>이미지1</span> </a> <a href="#"> <img src="images/gallery-05.png" alt="이미지5"> <span>이미지1</span> </a> </div> </div> </div> </div> </div> </div> </div> <footer> <div class="foot-logo"> <a href="#"><img src="images/foot_logo.png" alt="조이컨트리클럽"></a> </div> <div class="copyright"> (주)조이컨트리클럽 | 대표자 : 전현무 | 개인정보관리책임자 : 박나래 | 사업자등록번호 : 000-000-0000 | 주소 : 서울특별시 송파구 송파대로 22길 조이컨트리클럽 copyright(c)2023.(주)조이컨트리클럽 </div> <div class="sns"> <a href="#"><img src="images/youtube.png" alt="유튜브"></a> <a href="#"><img src="images/facebook.png" alt="페이스북"></a> <a href="#"><img src="images/twitter.png" alt="트위터"></a> </div> </footer> </div> <!-- 팝업창 --> <div class="modal"> <div class="modal-content"> <h2>가을 맞이 신규 회원가입 특전을 안내드립니다.</h2> <p>조이컨트리 클럽은 가을맞이 신규회원 가입 특전을 실시합니다.<br/> 주요 특전혜택은 아래와 같으니 참고 부탁드립니다.<br/> <br/> - 가입 특전 -<br/> 1. 라운딩 오후4시 이후 무료입장 가능<br/> 2. 캐디비용 지원<br/> 3. 식사 쿠폰 10매 제공<br/> <br/> 감사합니다. </p> <a class="close-modal" href="#none">닫기</a> </div> </div> <script src="script/jquery-1.12.4.js"></script> <script src="script/main.js"></script> </body> </html> @charset "utf-8"; body{ margin: 0; color:#333; background-color:#fff; font-size: 16px; } a{text-decoration:none; color:inherit;} /* Entire Layout */ .container{ } .main-content{ display:flex; } .main-content > div{ } .main-content > div{ } .main-content .left{ width: 200px; background-color:#eee; } .main-content .right{ flex:1; } /* header */ header{} header > div{} header .header-logo{ border:1px solid #000; } /* Navigation */ header .navi{ height: 300px; width: 200px; } header .menu{ list-style:none; padding:0; margin:0; } header .menu li{ width: 200px; box-sizing:border-box; text-align:center;} header .menu li > a{ display:block; width: 200px; border:1px solid #444; transition:0.5s; padding:5px; background-color:#fff; color:#333; } header .menu li:hover > a{ color:#fff; background-color:#333; } header .menu .sub-menu{ display:none; } header .menu .sub-menu a{ display:block; padding:5px; box-sizing:border-box; } header .menu .sub-menu a:hover{ background-color:#333; color:#fff; } header .spot-menu{ text-align:center; margin-top:30px; font-size: 14px; } header .spot-menu a:hover{ text-decoration:underline; } /* shortcut */ .right{} .right .slide{ height: 400px; } /* 슬라이드이미지 */ .slide { height: 400px; position: relative; } .slide-image{ height: 400px; position: relative; overflow: hidden; } /* Slide Animation */ .slide-image-inner { /* 실제로 움직이는 요소 */ position: absolute; top: 0; left: 0; font-size: 0; animation: slide 0.5s linear ease-in-out; height: inherit; } .slide-image-inner a { /* 움직이는 .slide-image-inner에 포함된 요소 */ height: inherit; } .slide-image-inner a img { width: 100%; height: inherit; /* 부모요소인 a의 너비에 유동적으로 맞춰지게 하는 속성 */ object-fit: cover; } .slide .slider-banner{ background-color:#efefef; position:absolute; top: 0; right: 0; width: 50px; height:250px; padding:10px; text-align:center; } .slide .slide-banner hr{ } .slide .slider-banner a{ font-size:12px; font-weight:500; } .slide .slider-banner a:nth-child(3){ border-bottom:none; } .slide .slider-banner img{ width:50px; display:block; } /* shortcut */ .items{} .items .shortcut{display:flex; align-items:center;height:200px;} .items .shortcut img{} .items .shortcut a{position:absolute; right:20px;} .items .shortcut .shortcut-content{} .items .shortcut .shortcut-content h3{font-size: 20px;font-weight:900;} .items .shortcut .shortcut-content p{font-size:16px; font-weight:200;} /* news&gallery */ .items .new{ height: 250px; } .items .new .tab-inner{ width: 95%; margin: 0 auto; margin-top: 25px; } .items .new .tab-inner .btn{} .items .new .tab-inner .btn a{ border:1px solid #000; display:inline-block; width: 100px; padding: 5px; border-radius:5px 5px 0 0; margin-right: -6px; border-bottom:none; margin-bottom:-1px; background-color:#000; color:#fff; text-align:center; font-size: 14px; padding:8px; box-sizing:border-box; } .items .new .tab-inner .btn a.active{ background-color:#fff; color:#000; } .items .new .tab-inner .tabs{border:1px solid #333;} .items .new .tab-inner .tabs .tab1 a{ display:block; padding:3px; border-bottom:1px dashed #bbb; font-size: 15px; margin:10px; } .items .new .tab-inner .tabs .tab1 a:first-child{margin-top:20px;} .items .new .tab-inner .tabs .tab1 a:last-child{ border-bottom:none; } .items .new .tab-inner .tabs .tab1 a b{ float:right; font-weight: normal; } .items .new .tab-inner .tabs .tab2{ display:none; height: 170px; text-align:center; padding-top: 20px; box-sizing:border-box; } .items .new .tab-inner .tabs .tab2 a{ display:inline-block; text-align:center; margin:0 18px; } .items .new .tab-inner .tabs .tab2 a img{ height:120px; border-radius:5px; } .items .new .tab-inner .tabs .tab2 a span{ display:block; } /* footer */ footer{ display:flex; background-color:#222; align-items:center; color:#666; height:100px; } footer .foot-logo{ width: 200px; } footer .copyright{ padding:10px; flex:1; } footer .sns{ width: 230px; text-align:center; } footer .sns a img{ width: 35px; border-radius:10px; margin-right:10px; } /* 팝업 */ .modal { background-color: rgba(0, 0, 0, 0.19); position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; display: none; } .modal-content { width: 450px; background-color: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 20px; border-radius: 10px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.13); } .close-modal { float: right; border: 1px solid #000; padding: 5px 10px; } /* 이건 하면 좋고 안해도 괜찮습니다. */ .modal-content h2 { text-align: center; font-size: 18px; color: #111; padding: 7px; } .modal-content p{ text-align:center; } .modal-content .close{ background-color:#000; color:#fff; padding:5px; font-size: 15px; } // Navigation (1차메뉴 색상 활성화 고정) $('.menu li').mouseenter(function(){ $(this).children('.sub-menu').stop().slideDown() }) $('.menu li').mouseleave(function(){ $(this).children('.sub-menu').stop().slideUp() }) // 메인비주얼슬라이드 // setInterval(콜백함수, 시간); // animate(속성값, 콜백함수); setInterval(function(){ $('.slide-item').animate({top: '-100%'}, function(){ $('.slide-item').css({top: 0}); $('.slide-item:first-child').appendTo('.slide-item'); }); }, 3500); // Tab Menu $('.items .new .tab-inner .btn a:first-child').click(function(){ $('.tab1').show() $('.tab2').hide() $(this).addClass('active') $(this).siblings().removeClass('active') }) $('.items .new .tab-inner .btn a:last-child').click(function(){ $('.tab2').show() $('.tab1').hide() $(this).addClass('active') $(this).siblings().removeClass('active') }) // 팝업창 열고닫기 $('.open-modal').click(function(){ $('.modal').fadeIn() }) $('.close-modal').click(function(){ $('.modal').fadeOut() })
-
미해결반응형 웹사이트 포트폴리오(Architecture Agency)
custom.js 의 click 부분
custom.js에서 $(function(){ $('.trigger').click(function(){ $(this).toggeClass('active') $('.gnb').toggeClass('active') }) $('section, .menu a').click(function(){ $('.gnb').removeClass('active')}) $('.menu a').click(function(e) { e.preventDefault(); $.scrollTo(0, 900); }); }) 제이쿼리스크롤을 index.html에 링크 건 후에 custom.js의 click 부분들에 줄이 그어졌습니다."선언이 여기에 사용되지 않음으로 표시되었습니다" 라고 뜨는데 어떻게 해결해야 할까요?
-
미해결반응형 웹사이트 포트폴리오(Architecture Agency)
브라켓 자동 줄바꿈
자동으로 위로 줄이 올라가는데 어떻게 해결해야 하나요?..
-
미해결스프링 프레임워크는 내 손에 [스프2탄]
com.mysql
43강 4분 <dependency><groupId>com.mysql</groupId><artifactId>mysql-connector-j</artifactId> </dependency> 저는 이부분에 처음부터 이렇게 뜨는데 왜그런걸까요?
-
미해결SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 with Figma
Html 코드 스니펫 문의
코드 스니펫은 어떤걸 사용하시나요. 추천하는게 있나요?
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
css peaker
css peaker 기능 중 해당 태그에서 alt + F11 누르면 해당 css가 아래에 뜨는 게 안되네요ㅠㅠ ctrl 누르고 클릭하면 해당 css파일에 해당 태그 스타일로 넘어가는건 정상 작동합니다. ■ 질문 남기실 때 꼭! 참고해주세요.- 먼저 유사한 질문이 있었는지 검색해주세요.- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다.
-
미해결모바일 웹 퍼블리싱 포트폴리오 with Figma
.stop().slideDown과 같이 슬라이드 다운 앞에 스탑을 쓰는 이유
-.stop().slideDown과 같이 슬라이드 다운 앞에 스탑을 쓰는 이유가 뭘까요? 강의에서는 큐?를 없애기 위해서라고 들렸는데 이해를 못하겠어요 ㅠ 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
-
미해결반응형 웹사이트 포트폴리오(App Official Landing Website)
제이쿼리 탭메뉴 클릭 질문
개인 포트폴리오 웹 사이트 작업 중에 질문이 있습니다.기초반 중급반 고급반 버튼 각자 클릭하면 색깔이 바뀌면서 아래에 4개의 사진들이 바뀌는 형태로 하고 싶은데 잘되지 않습니다. html <div class="online-inner"> <section class="online"> <div class="online-title"> <h2> 온라인 강의 미리보기 <i class="fa fa-line-chart" aria-hidden="true"></i> </h2> </div> <div class="online-content"> <div class="online-btn"> <a class="active" href="#none">기초반</a> <a href="#none">중급반</a> <a href="#none">고급반</a> </div> <div class="online-tabs"> <div class="online-tab1"> <div class="online-tab-inner"> <a href="#none"><img src="images/tab1-img-01.jpg"></a> <a href="#none"><img src="images/tab1-img-02.jpg"></a> <a href="#none"><img src="images/tab1-img-03.jpg"></a> <a href="#none"><img src="images/tab1-img-04.jpg"></a> </div> </div> <div class="online-tab2"> <div class="online-tab-inner"> <a href="#none"><img src="images/tab2-img-01.jpg"></a> <a href="#none"><img src="images/tab2-img-02.jpg"></a> <a href="#none"><img src="images/tab2-img-03.jpg"></a> <a href="#none"><img src="images/tab2-img-04.jpg"></a> </div> </div> <div class="online-tab3"> <div class="online-tab-inner"> <a href="#none"><img src="images/tab3-img-01.jpg"></a> <a href="#none"><img src="images/tab3-img-02.jpg"></a> <a href="#none"><img src="images/tab3-img-03.jpg"></a> <a href="#none"><img src="images/tab3-img-04.jpg"></a> </div> </div> </div> </div> </section> </div> CSS.online-inner { background-color: #5f98e7; } .online { width: 1300px; margin: auto; padding: 50px 0; } .online-title { text-align: center; } .online-title h2 { font-size: 35px; font-weight: 600; color: #fefefe; } .online-content {} .online-btn { text-align: center; } .online-btn a { display: inline-block; padding: 10px 18px; margin-right: 30px; border: 1px solid #295aa0; border-radius: 30px; background-color: #fff; } .online-btn .active { background-color: #132f55; color: #fff; } .online-tabs {} .online-tab-inner { padding-top: 50px; text-align: center; } .online-tab-inner a { margin-right: 20px; } .online-tab-inner a img { width: 280px; } .online-tab1 {} .online-tab2 { display: none; } .online-tab3 { display: none; } $('.online-btn button:nth-child(1)').click(function(){ $('.online-tab1').show() $('.online-tab2').hide() $('.online-tab3').hide() $(this).addClass('active') $(this).siblings().removeClass('active') }) $('.online-btn button:nth-child(2)').click(function(){ $('.online-tab2').show() $('.online-tab1').hide() $('.online-tab3').hide() $(this).addClass('active') $(this).siblings().removeClass('active') }) $('.online-btn button:nth-child(3)').click(function(){ $('.online-tab3').show() $('.online-tab1').hide() $('.online-tab2').hide() $(this).addClass('active') $(this).siblings().removeClass('active') })마지막 jquery입니다. 웹디자인기능사 시험처럼 탭메뉴 2개일때는 됐는데 3개로 형태바꾸니까 잘되지 않습니다.
-
미해결실전! 웹사이트제작! Step By Step! _Basic (한화캐미컬_반응형웹)
태그 사용 관련 질문 있습니다.
안녕하세요, 좋은 강의 제공 해주셔서 감사드립니다.section.about 영역 마크업 강의 수강 중 궁금한게 있어 질문 드립니다.img 태그를 감싸실 때 p 태그를 사용 하셨는데 따로 이유가 있을까요? UI상 리스트에서 하나의 문단으로써 자리하기에 그런것일까요?<li> <a href="#"> <p class="img"> <img src="img/about_1.jpg" alt="회사소개" /> </p> <div class="text"> <h3>회사소개</h3> <p>삶의 가치를 높이는 기술기업, 한화 케미칼</p> <p class="more">more</p> </div> </a> </li>
-
미해결SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 with Figma
scss 관련 코딩 스타일 실무 질문
저희 직장 사수가 실무에서 사용할 때에는 작은 프로젝트 외 금융권 같은 큰 프로젝트는body{display:block;height:100px;width:100px;}무조건 이런 방식으로 모든 공백을 최소화해서 코딩을 해서 작성해야 한다고 했는데,scss를 사용할 경우에는 위처럼 작성하는 것은 사실상 불가능하고, 한 줄씩 띄워서 쓰는 방식이랑, 실제 컴파일러도 그렇게 만들어 컴파일해주는데,이렇게 제작해도 성능 상의 큰 차이가 없나요? 프리랜서 외주 제작을 받는다고 가정하면 한줄 코딩 최적화보다는 ,하단 코딩스타일처럼 제작해서 주는 것이 맞을까요? body { display:grid; height: 100vh; justify-content: center; align-items: center; background-color: #222; }
-
해결됨반응형 웹사이트 포트폴리오(Architecture Agency)
마우스 휠 감도 문제 / 스크롤시 화면 다다음으로 넘어감
스크롤했을때 한 페이지씩 넘어가다가도가끔씩 2개의 페이지가 샤샥하고 한번에 넘어갈때가 있는데마우스 휠감도 조절해봐도 안되네요 ㅠ방법이 있을까요?