묻고 답해요
160만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
E-1 레이아웃 제작 중 궁금점
강의 내용중에는슬라이드 아이템에 height: calc(100vh - 100px);을 주셨는데,.main-content > div에 똑같은 값을 주고 슬라이드 아이템에 height: inherit;을 주는건 안될까요?
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
뷰티파이 대체
■ 질문 남기실 때 꼭! 참고해주세요.안녕하세요 비쥬얼 스튜디오 코드에서 뷰티파이가 더이상 업데이트 하지 않는다고 하는데요, 자동 인덴트 조절은 어떤 어플 대체품이 있을까요? 또한 선생님 설명에는 블라켓 사용법이 pdf 앞장에 되어있는데, 현재는 비쥬얼만 된다는 강의를 봤습니다.이론 강의를 듣기 시작하려고 하는데 블라켓베이스 기준 설명이신데 그거 상관없이 코드로 그냥 하면 될까요? 헷갈려서 여쭤봅니다 - 먼저 유사한 질문이 있었는지 검색해주세요.- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다.질문 하실 때 어떤 유형인지 말씀해주세요. ex) A1 작업하는데 ???이 안됩니다.
-
미해결구글 애드센스 수익형 워드프레스 블로그 만들기
Footer를 영상에 나오는대로 변경했는데
강의에 대한 질문은 인프런 질문하기나, 1:1 커뮤니티 페이지에서 문의하시면 빠르게 답변 드리고 있습니다.(커뮤니티 주소 https://itconnect.dev/커뮤니티/) 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요테마 파일과 CSS, PHP 파일은 아래 링크를 통해 받아보실 수 있습니다.https://drive.google.com/drive/folders/1KtkfsZe2uy5jNMps0F6gnqlEvZnq0mRN?usp=sharin푸터를 영상에 나온것처럼 변경했는데 새로고침하면 배경색 글자색 지정한거 없어지고 위에 같이 보이네요 ㅜh1글자색으로 보여지는 것같아요 해결방법있을까요?
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
D, E 유형 수험자 제공파일 어디서 받을 수 있을까요?
D,E 최종본 제작 전 영상에서 말씀주신 파일모음을 받고싶은데 수업자료에 첨부된 파일들 확인해봐도 찾을수가 없습니다. 참고PSD. 텍스트, 사진이 포함된 수험자제공파일은 어디서 받을 수 있을까요?
-
해결됨[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
상태칩 강의에서의 질문
볼드님 상태칩을 만들때아이콘을 끄고 켤 때 텍스트와 버튼의 앞 뒤 간격이 달라지는데 이건 어떻게 해결해야하나요?
-
해결됨[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
Print variables 대체 플러그인 없을까요?
플러그인이 강의에 나온 버전보다 업데이트 되었는지 아래 사진처럼 출력이 됩니다.갠적으로 컬러 크기가 Description 폰트에 비해 너무 크고 세로로 1자 형태로 배열되니까 보기 불편하다고 느낍니다!혹시 또 다른 플러그인은 없을까요? 이번 미션은 Print variables로 하겠지만, 추후에는 더 유용한 플러그인을 사용해보고 싶습니다ㅎㅎㅎ
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
브라우저 비율 확대시 header-inner,footer-inner 잘림 문제
<!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%)
-
해결됨[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
알림/경고 메세지 만들기 강의에서의 질문
폰트사이즈와 간격 등 모든 사이즈를 다 일정하게 따라했는데 (선생님은 높이값이 72, 저는 80으로 됩니다)아이콘을 추가할때 선생님과 다르게 위치가 지정되는 이유가 무엇일까요?알려주신대로 패딩값을 위아래 16으로 주면서도앞의 아이콘은 타이틀 상단 기준으로 위치하게하고Close icon은 중앙에 위치하게 지정하려면 어떻게 해야하나요?이럴땐 앱솔루트 포지션으로 원하는 위치를 지정하면 되나요?
-
해결됨[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
셀렉트-파트1 강의에서의 질문
안녕하세요 볼드님강의를 다시한번 재수강 중인데강의대로 실행되지 않는 부분이 있어 질문드립니다.(셀렉트-파트1 강의 6분 31초 부분 입니다)1) 아이콘을 24에서 16으로 줄이는 과정에서 변화가 없는 이유가 무엇일까요?2) 페이지 패널에서 저렇게 체크한 표시처럼 디바이더로 나눌수 있는 방법이 뭔가요?
-
해결됨[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
폰트 사이즈에 홀수 (13pt, 11pt, 21pt)는 잘 안쓰나요?
폰트 사이즈 예시에는 모두 짝수 폰트만 있는걸로 보여서 질문드립니다!웹 UI 레퍼런스 찾아보거나(Linear) 디자인 시스템 예시(https://www.remain.co.kr/page/designsystem/font-size.php애플 / https://developer.apple.com/design/human-interface-guidelines/typography) 찾아봤을 때 종종 홀수 폰트들도 봤어서 이게 예외적인 사례인지 아니면 필요하다면 홀수 폰트도 사용해도 되는건지 궁금합니다. 제가 만드는 서비스에선 13pt를 사용하고 있어서.. 자주 사용되는 패턴이 아니라면 짝수로 다 바꿀까 싶어서요!
-
해결됨[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
문의드립니다.
안녕하세요!혹시 타이포그래피 베리어블 스타일을 지정했을때 line height를 1.4로 계산해서 지정했는데, 작업하다보니 1.2로 더 줄여야 하는 상황이 생긴다면 디자인 시스템 자체를 바꿔서 1.2로 적용해야하나요? 아니면 해당 작업물만 로컬로 별도 타이포그래피 지정해서 해야할까요?다른 속성값들보다 Line height는 프로젝트 스타일에 따라 스타일로 정해놨어도 값이 조정이 되어야 할때가 발생해서 이런 경우의수는 어떤식으로 대응하는게 좋을지 의견 여쭤보고싶습니다. 베리어블값이 weight나 line height 와 같은 값들을 primitive에 지정해놓고, semantic에서 다양하게 참조해서 쓸 수 있다고 생각해서 확장성이 있는것 같은데, 만약에 로컬 타이포그래피에 베리어블을 참조해놓았고 (heading 4xl는 line height 56이라면) 이 값으로 개발팀에 공유가 됐다면 이후에 line height베리어블 참조값을 50 이렇게 바꿀때 개발팀에 공유를 매번 별도로 해야하는거죠? 마지막으로, color는 로컬 스타일을 지워주셨는데 타이포그래피는 로컬에 베리어블을 다 적용하고 로컬 스타일을 지우지 않는 이유가 무엇인가요?
-
해결됨[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
문의드립니다.
안녕하세요!혹시 타이포그래피 베리어블 스타일을 지정했을때 line height를 1.4로 계산해서 지정했는데, 작업하다보니 1.2로 더 줄여야 하는 상황이 생긴다면 디자인 시스템 자체를 바꿔서 1.2로 적용해야하나요? 아니면 해당 작업물만 로컬로 별도 타이포그래피 지정해서 해야할까요?다른 속성값들보다 Line height는 프로젝트 스타일에 따라 스타일로 정해놨어도 값이 조정이 되어야 할때가 발생해서 이런 경우의수는 어떤식으로 대응하는게 좋을지 의견 여쭤보고싶습니다. 베리어블값이 weight나 line height 와 같은 값들을 primitive에 지정해놓고, semantic에서 다양하게 참조해서 쓸 수 있다고 생각해서 확장성이 있는것 같은데, 만약에 로컬 타이포그래피에 베리어블을 참조해놓았고 (heading 4xl는 line height 56이라면) 이 값으로 개발팀에 공유가 됐다면 이후에 line height베리어블 참조값을 50 이렇게 바꿀때 개발팀에 공유를 매번 별도로 해야하는거죠?
-
해결됨[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
A3 내비게이션이 슬라이드 이미지에 가려져 앞으로 오지 않습니다.
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); });
-
해결됨[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
완강 이벤트
볼드님 안녕하세요! 설문조사 및 수강평 작성했습니다.제공해주시는 자료는 이메일로 전달해주시는걸까요??
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
A3 크로스페이드 슬라이드가 이상합니다.
저만 그런건지는 모르겠으나, 세번째 슬라이드 이미지가 고정된 상태에서 첫번째, 두번째 슬라이드 이미지가 빠르게 점멸한 뒤 크로스페이드 슬라이드가 시작합니다. 혹시 뭐가 문제일까요?(제일 아래쪽에 코드 텍스트 있습니다.) @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년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
웹디자인기능사 슬라이드를 이미지로 처리해도 문제없나요?
슬라이드 영역의 텍스트 부분도 주는 것으로 알고 있습니다.그래서 코딩으로 텍스트를 띄우지 않고 포토샵에서 슬라이드의 텍스트와 슬라이드 이미지 합쳐서 저장한 뒤 코딩하는 방식으로 처리해도 감점은 없겠죠?
-
해결됨[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
타이포그래피 scope관련 문의드립니다.
안녕하세요! 혹시 타이포그래피에서 scope을 지정할 때 비슷해보이는 속성들이 목록에 있어 헷갈려서요. string scope의 font family, font weight or style, text content와 상단의 typography 항목들, 그리고 number scope에 있는 text content의 차이가 무엇일까요~?
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
display:none 적용 안됨 문제
<!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 로 적용하면 없어지긴 하는데 제이쿼리가 안먹네요 혹시 어떤 부분이 잘못된걸까요?
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
E유형 slide 높이 질문
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 여백이 생기는데 혹시 어떤 부분을 수정해야 정상적으로 나올까요?
-
미해결구글 애드센스 수익형 워드프레스 블로그 만들기
GP 테마 LOOP 템플릿 관련
GP 테마에서 메인 페이지 직접 제작하는 방법 강의를 수강중인데 현재 강의에서 나오는 QUERY LOOP나 POST TEMPLATE 이 제 테마에서는 나오질 않습니다. 이에 따라 강의에서 진행되는 내용을 이어갈수가 없는데 어떤 차이인지요? 아무리해도 POST TEMPLATE을 찾을수가 없습니다.[제 화면 캡쳐]
