173만명의 커뮤니티!! 함께 토론해봐요.
미해결
구글 애드센스 수익형 워드프레스 블로그 만들기
강의에 대한 질문은 인프런 질문하기나, 1:1 커뮤니티 페이지에서 문의하시면 빠르게 답변 드리고 있습니다. (커뮤니티 주소 https://itconnect.dev/커뮤니티/ ) 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요 테마 파일과 CSS, PHP 파일은 아래 링크를 통해 받아보실 수 있습니다. https://drive.google.com/drive/folders/1KtkfsZe2uy5jNMps0F6gnqlEvZnq0mRN?usp=sharin 푸터를 영상에 나온것처럼 변경했는데 새로고침하면 배경색 글자색 지정한거 없어지고 위에 같이 보이네요 ㅜh1글자색으로 보여지는 것같아요 해결방법있을까요?
HTML/CSS wordpress php 웹-디자인 반응형-웹
박보름
2025-03-07T00:44:07.856Z
댓글 2
좋아요 0
조회수 135
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
D,E 최종본 제작 전 영상에서 말씀주신 파일모음을 받고싶은데 수업자료에 첨부된 파일들 확인해봐도 찾을수가 없습니다. 참고PSD. 텍스트, 사진이 포함된 수험자제공파일은 어디서 받을 수 있을까요?
Cheon
2025-03-06T13:26:20.069Z
댓글 2
좋아요 1
조회수 186
해결됨
백엔드 개발자에 의한, 백엔드 개발자들을 위한 프론트엔드 강의 - 기본편
안녕하세요. 백엔드 개발자를 목표로 공부하면서, 최소한의 프론트엔드 지식도 익히고 싶어 강의를 수강 중인 학생입니다:) 이번 Ajax 강의를 듣고 처음에는 잘 이해되지 않아 여러 번 반복해서 학습했습니다. 그 결과 왜 직렬화와 역직렬화를 하는지, 그리고 Ajax가 전체적으로 어떤 원리로 동작하는지에 대한 감은 조금 잡을 수 있었습니다. 하지만 코드를 보면 해석은 가능하지만, 직접 작성해보라고 하면 아직 어려운 상태입니다. 강의의 예제 정도는 직접 구현할 수 있을 정도로 습득하는 것이 가장 좋겠지만, 익히는 데 시간이 꽤 걸릴 것 같아 동작 방식만 이해하고 넘어가도 괜찮을지 고민이 됩니다.
HTML/CSS javascript bootstrap
형씌
2025-03-06T08:47:56.557Z
댓글 2
좋아요 1
조회수 150
해결됨
React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드
매강좌마다 깃허브 링크가있던데요 매강마다 소스코드를 일일히 다운받아야하나요??? 아니면 한번에 다운받아도되는걸 제가 착각하고있는건가요??? 강의가 진행되어질수록 그만큼 코드변경된흐름을 깃허브 트리로 펼쳐놓으신것같은데.... 하나만받아도되는건지 매강마다 깃허브가서 소스코드를 매강마다 다운받아야하는건지 궁금합니다.
HTML/CSS javascript react node.js mongodb
hdr.ecssh
2025-03-04T20:07:22.974Z
댓글 1
좋아요 0
조회수 132
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>B</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <div class="header-inner"> <header> <div class="header-logo"> <a href="#none"><img src="images/logo-header.png" alt="header-logo"></a> </div> <div class="nav"> <ul class="menu"> <li> <a href="#none">메인메뉴</a> <div class="sub-menu"> <a href="#none">서브메뉴</a> <a href="#none">서브메뉴</a> <a href="#none">서브메뉴</a> <a href="#none">서브메뉴</a> </div> </li> <li> <a href="#none">메인메뉴</a> <div class="sub-menu"> <a href="#none">서브메뉴</a> <a href="#none">서브메뉴</a> <a href="#none">서브메뉴</a> <a href="#none">서브메뉴</a> </div> </li> <li> <a href="#none">메인메뉴</a> <div class="sub-menu"> <a href="#none">서브메뉴</a> <a href="#none">서브메뉴</a> <a href="#none">서브메뉴</a> <a href="#none">서브메뉴</a> </div> </li> <li> <a href="#none">메인메뉴</a> <div class="sub-menu"> <a href="#none">서브메뉴</a> <a href="#none">서브메뉴</a> <a href="#none">서브메뉴</a> <a href="#none">서브메뉴</a> </div> </li> </ul> </div> <div class="nav-bg"></div> </header> </div> <div class="content-inner"> <div class="slide"> <div> <a href="#none"><img src="images/slide-01.jpg" alt="slide-01"></a> <a href="#none"><img src="images/slide-02.jpg" alt="slide-02"></a> <a href="#none"><img src="images/slide-03.jpg" alt="slide-03"></a> </div> </div> <div class="items"> <div class="news"> <div class="tab-inner"> <div class="btn"> <span>공지사항</span> </div> <div class="tab1"> <a href="#none">어쩌구저쩌구어쩌구저쩌구<b>0000</b></a> <a href="#none">어쩌구저쩌구어쩌구저쩌구<b>0000</b></a> <a href="#none">어쩌구저쩌구어쩌구저쩌구<b>0000</b></a> <a href="#none">어쩌구저쩌구어쩌구저쩌구<b>0000</b></a> <a href="#none">어쩌구저쩌구어쩌구저쩌구<b>0000</b></a> </div> </div> </div> <div class="gallery"> <div class="gallery-inner"> <div class="btn"> <span>갤러리</span> </div> <div class="tab2"> <a href="#none"><img src="images/gallery-01.jpg" alt="gallery-01"></a> <a href="#none"><img src="images/gallery-02.jpg" alt="gallery-02"></a> <a href="#none"><img src="images/gallery-03.jpg" alt="gallery-03"></a> </div> </div> </div> <div class="banner"> <a href="#none"><img src="images/banner.jpg" alt="banner-image"></a> </div> </div> </div> <div class="footer-inner"> <footer> <div class="copyright"> <div><p>어쩌구저쩌구 어쩌구저쩌구 어쩌구저쩌구</p></div> <div><p>어쩌구저쩌구 어쩌구저쩌구 어쩌구저쩌구</p></div> </div> <div class="family-site"> <select> <option value="">Family Site</option> <option value="">어쩌구저쩌구</option> <option value="">어쩌구저쩌구</option> <option value="">어쩌구저쩌구</option> </select> </div> </footer> </div> </div> <script src="script/jquery-1.12.4.js"></script> <script src="script/custom.js"></script> </body> </html> @charset "utf-8"; body { margin: 0; color: #333; background: #fff; font-size: 15px; } a { color: inherit; text-decoration: none; } /* .container {} */ .header-inner { background: #ddd; } header { position: relative; z-index: 1; height: 100px; justify-content: space-between; } header > div { /* border: 1px solid #000; */ height: 100px; } .header-logo { float: left; width: 200px; line-height: 130px; } .nav { float: right; width: 600px; } .menu { position: relative; z-index: 1; margin-top: 67px; list-style: none; padding: 0; display: flex; } .menu > li { flex: 1; } .menu > li > a { display: block; text-align: center; padding: 5px; background: #fff; border: 1px solid #000; } .menu > li:hover > a { color: white; background: #000; } .sub-menu { display: none; } .sub-menu > a { color: white; padding: 5px; display: block; text-align: center; } .sub-menu > a:hover { color: black; background: white; } .nav-bg { display: none; left: 0; top: 100%; position: absolute; width: inherit; height: 150px; background: #000; } /* .content-inner {} */ .slide { overflow: hidden; /* border: 1px solid #000; */ height: 300px; position: relative; } .slide > div { position: absolute; display: flex; font-size: 0; } .items { display: flex; } .items > div { /* border: 1px solid #000; */ padding-top: 10px; height: 200px; } .news { width: 425px; } .gallery-inner { margin: auto; width: 95%; } .tab-inner { float: left; width: 95%; margin: auto; } .btn > span { display: inline-block; width: 100px; height: 30px; text-align: center; line-height: 30px; border-radius: 5px 5px 0 0; border: 1px solid #000; border-bottom: none; background: white; margin-bottom: -1.5px; } .tab1, .tab2 { border: 1px solid #000; height: 160px; padding: 0 10px; } .tab1 > a { border-bottom: 1px solid black; padding: 4px 0; display: block; } .tab1 > a:last-child { border-bottom: none; } .tab1 > a > b { float: right; font-weight: normal; } .gallery { width: 425px; } .tab2 { display: flex; } .tab2 > a { margin: auto; } .tab2 img { width: 120px; } .banner { text-align: right; width: 350px; } .banner img { width: 95%; } .footer-inner { background: #ddd; } footer { display: flex; } footer > div { height: 100px; /* border: 1px solid #000; */ } .copyright { width: 1000px; } .copyright > div { /* border: 1px solid #000; */ /* box-sizing: border-box; */ height: 50%; text-align: center; line-height: 1px; } .family-site { text-align: center; width: 200px; line-height: 100px; } .container > div > * { width: 1200px; margin: auto; } setInterval(function(){ $('.slide>div').animate({left:'-100%'},function(){ $('.slide>div').css({left:0}) $('.slide>div>a:first-child').appendTo('.slide>div') }) },3500) $('.menu li').mouseenter(function(){ $('.sub-menu, .nav-bg').stop().slideDown() }) $('.menu li').mouseleave(function(){ $('.sub-menu, .nav-bg').stop().slideUp() }) 브라우저 비율을 줄인 상태로 보면 정상적으로 보이지만 브라우저 비율을 100%로 맞춰서 보면 헤더랑 푸터 배경 부분이 잘려서 보입니다. 혹시 어떤 문제가 있을까요? (100%) (75%)
Cheon
2025-03-04T13:19:08.652Z
댓글 2
좋아요 1
조회수 334
미해결
CSS Flex와 Grid 제대로 익히기
수업 목록의 수업 제목 옆에 있는 [구름 모양] 다운로드 버튼을 눌러 소스코드를 다운로드 받으세요! 해당 다운로드 버튼을 못찾겠습니다 ㅠㅠ 어디 있나요?
mkn4664
2025-03-04T08:06:31.428Z
댓글 1
좋아요 0
조회수 156
미해결
초보자를 위한 Sass 기초 강의 & 자몽톡 클론코딩
해당 강의에서 제공: 수업자료 가 있는거 같은데 이거 어디서 다운로드 받는건가요??
2025-03-03T14:28:39.658Z
댓글 1
좋아요 0
조회수 101
해결됨
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
A3 뿐만 아니라 나머지도 앞으로 오지 않아서 질문합니다 ㅠㅠ (공지사항, 갤러리는 아직 만들지 않은 상태이며 여기 올려놓은 코드는 A3입니다...! 주석 처리시킨 이상한 메모는 무시해주세요 ㅠㅠ) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css/stylesheet.css"> <script src="js/jquery-1.12.4.js"></script> <script src="js/custom.js"></script> <title>A3</title> </head> <body> <div class="container"> <header> <div class="header-logo"> <a href="#"> <img src="img/headerlogo.png" alt="header-logo"> </a> </div> <div class="navi"> <ul class="menu"> <li> <a href="#">강원천문대</a> <div class="sub-menu"> <a href="#">천문대소개</a> <a href="#">인사말</a> <a href="#">오시는길</a> </div> </li> <li> <a href="#">이용안내</a> <div class="sub-menu"> <a href="#">프로그램</a> <a href="#">관람시간표</a> <a href="#">이달의별자리</a> </div> </li> <li> <a href="#">천문대예약</a> <div class="sub-menu"> <a href="#">예약하기</a> <a href="#">예약확인</a> <a href="#">예약취소</a> <a href="#">정보서비스</a> </div> </li> <li> <a href="#">커뮤니티</a> <div class="sub-menu"> <a href="#">프로그램</a> <a href="#">공지사항</a> <a href="#">자유게시판</a> </div> </li> </ul> </div> </header> <div class="slide"> <div class="slide-items"> <a class="slide-item" href="#"> <img src="img/slide1.png" alt="slide1"> </a> <a class="slide-item" href="#"> <img src="img/slide2.png" alt="slide2"> </a> <a class="slide-item" href="#"> <img src="img/slide3.png" alt="slide3"> </a> </div> </div> <div class="items"> <div class="notice"></div> <div class="banner"> <a href="#"> <img src="img/banner.jpg" alt="banner"> </a> </div> <div class="direct"> <a href="#"> <img src="img/direct.png" alt="direct"> </a> </div> </div> <footer> <div class="footer-logo"> <a href="#"> <img src="img/footerLogo.png" alt="footer-logo"> </a> </div> <div class="footer-menu"> <div> <a href="#"> 하단메뉴1 </a> <a href="#"> 하단메뉴2 </a> <a href="#"> 하단메뉴3 </a> </div> <div> COPYRIGHTⓒ by WEBDESIGN. ALL RIGHTS RESERVED </div> </div> </footer> </div> </body> </html> @charset "utf-8"; body{ margin: 0; font-size: 15px; background-color: #fff; color: #333333; } a{ text-decoration: none; color: #333333; } .container{ /* border: 1px solid red; */ width: 1200px; margin: auto; } header{ background-color: rgb(150, 167, 236); height: 100px; } header div{ /* border: 1px solid blue; */ height: 100px; } .header-logo{ width: 200px; float: left; } .navi{ width: 600px; float: right; } .slide{ width: 1200px; height: 300px; position: relative; overflow: hidden; } .slide-items{ position: relative; } .slide-item{ position: absolute; top: 0; left: 0; } .slide div{ /* border: 1px solid green; */ height: 300px; } .items{ overflow: hidden; } .items div{ /* border: 1px solid violet; */ box-sizing: border-box; float: left; height: 200px; } .notice{ width: 500px; } .banner{ width: 350px; } .direct{ width: 350px; } footer{ background-color: rgb(222, 222, 222); overflow: hidden; } footer>div{ /* border: 1px solid salmon; */ height: 100px; float: left; box-sizing: border-box; } /*여기서부터는 일부분만 선택해서 적용하는거라 반드시 꺽쇠를 써야함!*/ .footer-logo{ width: 200px; } .footer-menu{ width: 1000px; } .footer-menu div{ /* border: 1px solid blueviolet; */ height: 50px; } /*모듈 이외 부분*/ .header-logo, .footer-logo{ text-align: center; line-height: 130px; } .footer-menu{ text-align: center; padding-top: 15px; } .footer-menu>div a{ padding: 10px; } .banner a>img, .direct a>img{ width: 350px; height: 200px; } /*내비게이션*/ .menu{ list-style: none; /* 점(목록에 쓰이는거) 없애줌*/ padding: 0; /*왼쪽 패딩 제거*/ margin-top: 35px; } .menu li{ border: 1px solid black; float: left; width: 150px;/*25%로 해도 됨*/ box-sizing: border-box; text-align: center; } .menu li>a{ /*기초 틀을 잡았으면, 모양을 만들자!*/ border: 1px solid black; display: block; padding: 5px; } .menu li:hover>a{ /*주의사항: .menu li>a:hover가 아니라 .menu li:hover>a임. 우리느 지금 박스에 호버를 줄꺼지 텍스트에 호버 줄껀 아니잖아*/ background-color: black; color: #fff; transition: 0.5s; } .sub-menu{ border: 1px solid black; background-color: #fff; display: none; } .sub-menu a{ display: block; /*배치!!*/ padding: 5px; } .sub-menu a:hover{ background-color: black; color: #fff; transition: 0.5s; } $(document).ready(function(){ /*Navigation*/ $('.menu li').mouseenter(function(){ $(this).children('.sub-menu').stop().slideDown(); }); $('.menu li').mouseleave(function(){ $(this).children('.sub-menu').stop().slideUp(); }); /*Slide*/ $('.slide-item:gt(0)').hide(); setInterval(function(){ $('.slide-item:first-child').fadeOut(500).next().fadeIn(500); $('.slide-item:first-child').appendTo('.slide-items'); }, 3000); });
도트유우카프사
2025-03-02T13:09:27.085Z
댓글 1
좋아요 1
조회수 110
미해결
Tailwind CSS로 만드는 멋진 웹 UI 스타일링
죄송하지만 질문하실 때 React 또는 Vue와 같은 자바스크립트 프레임워크에서 Tailwind CSS 설치 및 사용에 관한 질문은 하지 말아주세요. 질문하셔도 React 또는 Vue 환경을 몰라서 답변을 드릴 수가 없습니다. 오직 순수한 Tailwind CSS 관련 질문과 CSS 속성 및 활용에 관한 질문만 해주시면 감사드리겠습니다. 강의명 : 반응형 레이아웃 - Responsive Design Container 과 Responsive Design 차이가 아래가 맞을까여? Container: 전체적으로 반응형으로 설정 Responsive Design : 선언한 엘리먼트 기 으로 (국소적으로) 레이아웃을 세세하게 컨트롤 한다
아무도_모를_아이디
2025-03-02T10:44:36.041Z
댓글 2
좋아요 1
조회수 158
미해결
처음 만난 리액트(React)
안녕하세요 감사하게도 강의 잘 듣고있습니다. 혹시 실습한 코드를 받을 수 있는 git 있을까요? 개발환경 버전이 달라서 그런지 챕터6하는데 원치않게 동작하는게 있어서요
호호하하
2025-03-02T00:08:11.432Z
댓글 2
좋아요 1
조회수 231
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
저만 그런건지는 모르겠으나, 세번째 슬라이드 이미지가 고정된 상태에서 첫번째, 두번째 슬라이드 이미지가 빠르게 점멸한 뒤 크로스페이드 슬라이드가 시작합니다. 혹시 뭐가 문제일까요? (제일 아래쪽에 코드 텍스트 있습니다.) @charset "utf-8"; body{ margin: 0; font-size: 15px; background-color: #fff; color: #333333; } a{ text-decoration: none; color: #333333; } .container{ border: 1px solid red; width: 1200px; margin: auto; } header{ background-color: rgb(150, 167, 236); height: 100px; } header div{ /* border: 1px solid blue; */ height: 100px; } .header-logo{ width: 200px; float: left; } .navi{ width: 600px; float: right; } .slide{ width: 1200px; height: 300px; position: relative; overflow: hidden; } .slide-items{ position: relative; } .slide-item{ position: absolute; top: 0; left: 0; } .slide div{ /* border: 1px solid green; */ height: 300px; } .items{ overflow: hidden; } .items div{ border: 1px solid violet; box-sizing: border-box; float: left; height: 200px; } .notice{ width: 500px; } .banner{ width: 350px; } .direct{ width: 350px; } footer{ background-color: rgb(222, 222, 222); overflow: hidden; } footer>div{ /* border: 1px solid salmon; */ height: 100px; float: left; box-sizing: border-box; } /*여기서부터는 일부분만 선택해서 적용하는거라 반드시 꺽쇠를 써야함!*/ .footer-logo{ width: 200px; } .footer-menu{ width: 1000px; } .footer-menu div{ /* border: 1px solid blueviolet; */ height: 50px; } /*모듈 이외 부분*/ .header-logo, .footer-logo{ text-align: center; line-height: 130px; } .footer-menu{ text-align: center; padding-top: 15px; } .footer-menu>div a{ padding: 10px; } .banner a>img, .direct a>img{ width: 350px; height: 200px; } ㅡㅡㅡㅡㅡㅡㅡㅡㅡ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css/stylesheet.css"> <script src="js/jquery-1.12.4.js"></script> <script src="js/custom.js"></script> <title>A3</title> </head> <body> <div class="container"> <header> <div class="header-logo"> <a href="#"> <img src="img/headerlogo.png" alt="header-logo"> </a> </div> <div class="navi"></div> </header> <div class="slide"> <div class="slide-items"> <a class="slide-item" href="#"> <img src="img/slide1.png" alt="slide1"> </a> <a class="slide-item" href="#"> <img src="img/slide2.png" alt="slide2"> </a> <a class="slide-item" href="#"> <img src="img/slide3.png" alt="slide3"> </a> </div> </div> <div class="items"> <div class="notice"></div> <div class="banner"> <a href="#"> <img src="img/banner.jpg" alt="banner"> </a> </div> <div class="direct"> <a href="#"> <img src="img/direct.png" alt="direct"> </a> </div> </div> <footer> <div class="footer-logo"> <a href="#"> <img src="img/footerLogo.png" alt="footer-logo"> </a> </div> <div class="footer-menu"> <div> <a href="#"> 하단메뉴1 </a> <a href="#"> 하단메뉴2 </a> <a href="#"> 하단메뉴3 </a> </div> <div> COPYRIGHTⓒ by WEBDESIGN. ALL RIGHTS RESERVED </div> </div> </footer> </div> </body> </html> @charset "utf-8"; body{ margin: 0; font-size: 15px; background-color: #fff; color: #333333; } a{ text-decoration: none; color: #333333; } .container{ border: 1px solid red; width: 1200px; margin: auto; } header{ background-color: rgb(150, 167, 236); height: 100px; } header div{ /* border: 1px solid blue; */ height: 100px; } .header-logo{ width: 200px; float: left; } .navi{ width: 600px; float: right; } .slide{ width: 1200px; height: 300px; position: relative; overflow: hidden; } .slide-items{ position: relative; } .slide-item{ position: absolute; top: 0; left: 0; } .slide div{ /* border: 1px solid green; */ height: 300px; } .items{ overflow: hidden; } .items div{ border: 1px solid violet; box-sizing: border-box; float: left; height: 200px; } .notice{ width: 500px; } .banner{ width: 350px; } .direct{ width: 350px; } footer{ background-color: rgb(222, 222, 222); overflow: hidden; } footer>div{ /* border: 1px solid salmon; */ height: 100px; float: left; box-sizing: border-box; } /*여기서부터는 일부분만 선택해서 적용하는거라 반드시 꺽쇠를 써야함!*/ .footer-logo{ width: 200px; } .footer-menu{ width: 1000px; } .footer-menu div{ /* border: 1px solid blueviolet; */ height: 50px; } /*모듈 이외 부분*/ .header-logo, .footer-logo{ text-align: center; line-height: 130px; } .footer-menu{ text-align: center; padding-top: 15px; } .footer-menu>div a{ padding: 10px; } .banner a>img, .direct a>img{ width: 350px; height: 200px; } $('.slide-item:gt(0)').hide(); setInterval(function(){ $('.slide-item:first-child').fadeOut(500).next().fadeIn(500); $('.slide-item:first-child').appendTo('.slide-items'); }, 3000);
2025-03-01T10:22:32.811Z
댓글 2
좋아요 1
조회수 126
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
슬라이드 영역의 텍스트 부분도 주는 것으로 알고 있습니다. 그래서 코딩으로 텍스트를 띄우지 않고 포토샵에서 슬라이드의 텍스트와 슬라이드 이미지 합쳐서 저장한 뒤 코딩하는 방식으로 처리해도 감점은 없겠죠?
도트유우카프사
2025-02-28T07:55:01.745Z
댓글 2
좋아요 1
조회수 214
해결됨
[말 한마디로 뚝딱!] AI와 함께 나만의 수익화 웹사이트를 만드는 법
마우스 스크롤이 뚝뚝 끊기며 움직여서 다음번 강의때는 부드럽게 움직이면 좋겠어요... 다음번 강의도 끊기면 보다가 환불할것같네요 중간중간 설명이 생략되어서, 변수가 발생했을때 초보자들에게는 답답하게 느껴질수있을것같아요. 개발자분들에게는 당연하게 느껴질만한 부분들이겠지만, "ai로 코드 한줄 없이"가 강의의 지향점이니까 조금 더 쉽게느껴지도록 설명들을 해주시면 더욱 좋을것같아요 강의 주제와 커리큘럼은 너무 좋습니다!
황하
2025-02-28T01:57:13.966Z
댓글 2
좋아요 1
조회수 178
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>index</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"></div> <div class="nav"> <ul class="menu"> <li> <a href="#none">메뉴</a> <div class="sub-menu"> <a href="#none">서브메뉴</a> <a href="#none">서브메뉴</a> <a href="#none">서브메뉴</a> <a href="#none">서브메뉴</a> </div> </li> <li> <a href="#none">메뉴</a> <div class="sub-menu"> <a href="#none">서브메뉴</a> <a href="#none">서브메뉴</a> <a href="#none">서브메뉴</a> <a href="#none">서브메뉴</a> </div> </li> <li> <a href="#none">메뉴</a> <div class="sub-menu"> <a href="#none">서브메뉴</a> <a href="#none">서브메뉴</a> <a href="#none">서브메뉴</a> <a href="#none">서브메뉴</a> </div> </li> <li> <a href="#none">메뉴</a> <div class="sub-menu"> <a href="#none">서브메뉴</a> <a href="#none">서브메뉴</a> <a href="#none">서브메뉴</a> <a href="#none">서브메뉴</a> </div> </li> </ul> </div> <div class="spot-menu"></div> </header> </div> <div class="right"> <div class="slide"> <div class="slide-image"></div> <div class="slide-banner"></div> </div> <div class="items"> <div class="shortcut"></div> <div class="news-gallery"></div> </div> </div> </div> <footer> <div class="footer-logo"></div> <div class="footer-content"> <div class="footer-link"></div> <div class="copyright"></div> </div> </footer> </div> <script src="script/jquery-1.12.4.js"></script> <script src="script/custom.js"></script> </body> </html> @charset "utf-8"; body { margin: 0; background: white; color: #333; } a { text-decoration: none; color: inherit; } /* entire layout */ .container {} .main-content { display: flex; } .main-content > div { /* height: 800px; */ border: 1px solid #000; } .left { width: 200px; } .right { flex: 1; } /* header */ header { z-index: 999; position: relative; } header > div { border: 1px solid #f00; } .header-logo { height: 100px; } /* 네비 */ .nav { width: 95%; margin: 20px auto; } .menu { list-style: none; padding: 0; margin: 0; } .menu > li { position: relative; } .menu div { display: inline-block; } .menu > li > a { transition: 0.5s; border: 1px solid #000; display: block; text-align: center; padding: 10px; } .menu > li:hover > a { background: #00000050; color: white; } .sub-menu { border: 1px solid #000; display: none; background: #00000050; width: calc(100vw - 200px); top: 0; left: 100%; position: absolute; padding: 6px; } .sub-menu > a { transition: 0.5s; padding: 5px; cursor: pointer; text-align: center; width: 120px; color: white; display: inline-block; } .sub-menu a:hover { color: white; background: #00000060; } /* 네비 */ .spot-menu { height: 50px; } /* slide */ .slide { position: relative; height: 400px; } .slide > div { border: 1px solid #0f0; } .slide-image { height: inherit; } .slide-banner { top: 0; right: 0; width: 150px; height: 300px; position: absolute; } /* news-gallery */ .items {} .items > div { border: 1px solid #000; } .news-gallery { height: 250px; } /* shortcut */ .shortcut { height: 200px; } /* footer */ footer { display: flex; } footer > div { height: 120px; border: 1px solid #000; } .footer-logo { width: 200px; } .footer-content { flex:1; } .footer-content > div { border: 1px solid #0f0; height: 50%; box-sizing: border-box; } $('menu li').mouseenter(function(){ $('.sub-menu').stop().fadeIn() }) $('menu li').mouseleave(function(){ $('.sub-menu').stop().fadeOut() }) D유형 메가메뉴 제작중 서브메뉴가 display:none으로 없어지지 않는 문제가 생겼습니다. !important 로 적용하면 없어지긴 하는데 제이쿼리가 안먹네요 혹시 어떤 부분이 잘못된걸까요?
Cheon
2025-02-26T12:17:36.951Z
댓글 2
좋아요 1
조회수 993
미해결
핵심만 골라배우는 CSS3
안녕하세요. 강의 잘 보고 있습니다. 심플 배너 해설 영상을 보고 있는데 css class 명이 어떨때는 banner-bg 이런식이고 어떤때 에는 cousre__txt 이런식으로 네이밍을 지으시는 것 같은데 권장되는 규칙같은게 있는 건가요??
rujung1225
2025-02-26T10:01:30.243Z
댓글 2
좋아요 0
조회수 183
미해결
HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
[완성본 미리보기] HTML+CSS 실전 퍼블리싱 제작(Part 1) 계속 새로고침하고 나갔다 다시들어왔는데 우선 파트2는 나오는데 1이 안나옵니다
catcat123df
2025-02-26T06:44:18.575Z
댓글 1
좋아요 1
조회수 112
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
E유형 수강중 궁금한점이 생겨 질문드립니다. <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>index</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <div class="main-content"> <div class="left"> <header> <div class="header-logo"></div> <div class="nav"></div> <div class="spot-menu"></div> </header> </div> <div class="center"> <div class="shortcut"></div> <div class="news"></div> <div class="gallery"></div> <div class="banner"></div> </div> <div class="right"> <div class="slide-image"></div> </div> </div> <footer> <div class="footer-logo"></div> <div class="footer-content"> <div class="footer-link"></div> <div class="copyright"></div> </div> </footer> </div> </body> </html> @charset "utf-8"; body { margin: 0; background: #fff; color: #333; } a { text-decoration: none; color: inherit; } /* entire */ .container {} .main-content { display: flex; } .main-content > div { /* height: 800px; */ border: 1px solid #000; } .left { width: 200px; } .center { width: 400px; } .right { flex: 1; } /* header */ header {} header > div { border: 1px solid #000; } .header-logo { height: 100px; } .nav { height: 400px; } .spot-menu { height: 50px; } /* items */ .center > div { border: 1px solid #000; } .shortcut { height: 150px; } .news { height: 300px; } .gallery { height: 300px; } .banner { height: 150px; } /* slide */ .slide-image { border: 1px solid red; height: calc(100vh - 120px); width: inherit; } /* footer */ footer { display: flex; } footer > div { border: 1px solid #000; height: 120px; } .footer-logo { width: 200px; } .footer-content { flex: 1; } .footer-content > div { height: 50%; border: 1px solid #000; box-sizing: border-box; } 사진과 같이 슬라이드 밑에 120px 여백이 생기는데 혹시 어떤 부분을 수정해야 정상적으로 나올까요?
Cheon
2025-02-25T10:46:25.063Z
댓글 2
좋아요 1
조회수 684
해결됨
[말 한마디로 뚝딱!] AI와 함께 나만의 수익화 웹사이트를 만드는 법
DBeaver 연결과정에서 database를 gnuboard로 하고 연결 성공하였는데 tables에 아무 것도 안 뜨는데 어떻게 어떤 것이 잘못됐는지 알 수 있을까요?
sws6054
2025-02-25T07:02:53.978Z
댓글 2
좋아요 1
조회수 312
해결됨
[말 한마디로 뚝딱!] AI와 함께 나만의 수익화 웹사이트를 만드는 법
설치 과정을 따라가고 있는데, 화면이 너무 끊겨서 강의에서 어떤 버튼을 클릭하는지 또는 어떤 작업을 하는지 확인하기가 어렵습니다. 따라서 하기가 힘드네요. ㅜㅜ
PSH
2025-02-24T17:00:21.520Z
댓글 1
좋아요 1
조회수 149
해결됨
[말 한마디로 뚝딱!] AI와 함께 나만의 수익화 웹사이트를 만드는 법
test.php 저장해서 xampp 폴더에 넣고 아파치 실행후 해당 경로로 localhost/test.php 접속해보니 아래와 같이 뜨는데요. 접속이 안되는 이유가 혹시 그누보드 설치를 아직 못해서 그런가요? 그누보드 설치에서 막혀서, php 작동 방식 및 다른 강의부터 보고 있었는데.. 이것도 안되네요. ㅜㅠ 만약 그누보드 설치와 관계가 없다면 왜 접속이 안되는걸까요? 주소창에 localhost/ 접속시 그누보드 설치페이지는 잘 뜨거든요.ㅠㅠ 그리고 그누보드 설치 막혀서 문의를 남기긴했는데, 이곳에서도 남겨보겠습니다. ㅠㅠ 해결좀 부탁드립니다. 강의 영상보고 계정생성 다 똑같이 해놨거든요. 그런데 어떤 오류가 있어서 진행이 안되는지 잘 모르겠네요. 흑
재진
2025-02-24T14:19:01.439Z
댓글 2
좋아요 1
조회수 216
