묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z
섹션11 예제 링크
섹션11 예제 링크 걸어주신 두가지 중에두번째 '라이브러리 관련 예제' 링크 들어가서duplicate to your drafts 눌러서 새창 열었는데요첫번째 '스타일 및 콤포넌트 예제' 링크 자료가 나와요 ㅠㅠ
-
해결됨피그마 배리어블을 활용한 디자인 시스템 구축하기
강의 자료 스타일 가이드(타이포그래피) 관련 문의
안녕하세요, 강의자료에서 스타일 가이드 > 타이포그래피 관련하여 질문드립니다!! 실무 경험이 부족하다보니 신입, 1인 디자이너로 반응형 웹 리뉴얼 진행 중에 스타일 가이드 제작이 쉽지 않아서요~ 강사님께서 만드신 타이포그래피 가이드를 그대로 실무에 적용해도 괜찮을지 궁금합니다!! 실무에서 많이 쓰는 타이포 그래피 사이즈인지 궁금합니다! 도움 부탁 드립니다!!
-
해결됨피그마 배리어블을 활용한 디자인 시스템 구축하기
피그마 에듀케이션 계정 신청 관련
안녕하세요, 강의 자료에서 알려주신 피그마 에듀케이션 계정 신청이 이제는 안되는 것인지 궁금합니다. 알려주신 가이드 대로 했는데요, 학생 이메일이 아니라서 그런지 신청 버튼을 누르면 계속 초기화돼서 신청이 안 됩니다 ㅠㅠ
-
해결됨피그마 배리어블을 활용한 디자인 시스템 구축하기
베릴어블, 아이콘에 궁금한점이있습니다 ㅎㅎ
안녕하세요 선생님 강의 듣던 중궁금한점이 있어 질문 3가지 작성했습니다. 다음과 같이 참조된 값에 ?표가 생기는 상황이 발생합니다. 제가 잘못 적용한거 같은데 ㅠ혹시 어떤 경우의 수 때 발생할 수 있는 현상인지 궁금합니다~2. 아이콘 컬러적용 세션에서union한뒤 vector로 이름을 변경했는데 아이콘을 불러오면stroke가 0 인상태로 불러와집니다.또 가끔가다가 색도 반영이 안될때가 있는데reset all chagne?이런걸 해줘야하는지 궁금합니다.<아이콘 원본컴포넌트><버튼에서 airplay아이콘 스왑햇을때> 스위치 에러가 쓰이는 실제예시가 궁금합니다어떤 때 쓰일 수 있을까요? 질문이 좀 많은데 강의 재밌게 잘 듣고잇습니다감사합니다!
-
미해결뉴욕 프로덕트 디자이너가 알려주는, 입문자를 위한 UX디자인 개론
UX 디자인 원리 과제 - 좋은/안좋은 UX 사례
좋은 사례)Gmail PC 버전 카테고리별 전체 이메일 선택 기능:왼쪽 상단 전체 이메일 체크 박스 옆에 작은 드롭다운 화살표를 배치함으로써 단순히 전체 이메일이 아닌 카테고리별 (read/unread/starred/unstarred) 전체 이메일을 선택 할 수 있다는 것을 사용자가 직관적으로 이해하게끔 되어있는데, 이는 행동 유도성의 원리에 부합하는 좋은 UX 사례라고 생각합니다. 안 좋은 사례)카카오 웹툰 어플리케이션:일반적인 웹툰 독자들은 요일별로 정리 및 나열된 페이지에 익숙한데, 어느 시점부터 카카오 웹툰 어플은 가장 첫 화면에 장르별 웹툰을 배치했고 하단 메뉴에서 '시간표'를 클릭해야 일반적으로 익숙한 요일별 웹툰을 볼 수 있습니다. 10년 이상된 웹툰 독자로서 저는 해당 UI가 아직도 익숙하지 않아 원하는 웹툰을 찾기 위해 헤매는 경우가 종종 있습니다. 이는 일관성의 원리의 기준에서 안 좋은 UX 사례라고 생각됩니다.
-
해결됨피그마 배리어블을 활용한 디자인 시스템 구축하기
강의자료 공유 어디서 받을수있나요?
안녕하세요,앞의 강의들중에 어떤 리소스 자료나 비슷한것들을 공유해주시겠다고 말씀이 있는데, 어디서 공유받을 수 있는지 궁금합니다~!
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
이미지 사이즈설정
현재 나와잇는영상에서 이미지포샵하는게 a버전인데 d,e유형 유동형슬라이드이미지들은 대략 몇사이즈로 편집하나요? 사이즈 그냥 대충설정해야하나요?
-
해결됨피그마 배리어블을 활용한 디자인 시스템 구축하기
B2C 이러닝 과정이 안 보여요.
B2C 이러닝 과정, B2C 웹 페이지 작성이 궁금해서 강의 등록을 했는데 그 내용이 안 보이는 같아요..그 부분은 아직 안 올라온 건가요? 아님 수업 내용에서 빠진 걸까요?
-
미해결부트스트랩 5(Bootstrap 5) - 기초부터 웹 프로젝트 만들기
프로젝트1 번의 Navigation 강의부에서 질문입니다.
slick.min.js 에서 JQuery is not defined 에러가 발생합니다.개발자 도구를 통해 확인해 보니 나타납니다.slick.min.js 는 1.8.1 CDN 을 링크했습니다.부트스트랩5 에서는 바닐라js 를 쓴다고 하셨었는데.. JQuery 도 사용하나요? - 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
B유형 슬라이드 오류
B유형 세로슬라이드 실습중에 오류가 있어 문의 드립니다.마크업은 다 맞는 것 같은데 아예 움직이지를 않아요...오늘 시험인데 갑자기 안되서 너무 속상합니다ㅠㅠ<!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"></div> <div class="navi"></div> </header> </div> <div class="content-inner"> <div class="slide"> <div class="slide-items"> <a class="slide-item" href="#none"><img src="images/slide-01.jpg" alt="slide-01"></a> <a class="slide-item" href="#none"><img src="images/slide-02.jpg" alt="slide-02"></a> <a class="slide-item" href="#none"><img src="images/slide-03.jpg" alt="slide-03"></a> </div> </div> <div class="items"> <div class="news"></div> <div class="banner"></div> <div class="shortcut"></div> </div> </div> <div class="footer-inner"> <footer> <div class="footer-logo"></div> <div class="copyright"></div> <div class="sns"></div> </footer> </div> </div> </body> </html>@charset "utf-8"; body { margin: 0; } .container {} .header-inner { background-color: #eee; display: flex; justify-content: center; } header { border: 1px solid #000; width: 1200px; display: flex; justify-content: space-between; } header > div { border: 1px solid #000; height: 100px; } .header-logo { width: 200px; } .navi { width: 600px; } .content-inner {} .slide { width: 1200px; margin: auto; } .slide > div { border: 1px solid #000; height: 300px; } .items { width: 1200px; display: flex; margin: auto; } .items > div { border: 1px solid #000; height: 200px; } .news { width: 500px; } .banner { width: 350px; } .shortcut { width: 350px; } .footer-inner { background-color: #ddd; display: flex; justify-content: center; } footer { width: 1200px; display: flex; } footer > div { border: 1px solid #000; height: 100px; } .footer-logo { width: 200px; } .copyright { width: 1000px; } .sns { width: 200px; } /* Slide */ .slide { position: relative; height: 300px; font-size: 0; } .slide-items { position: absolute; top: 0; left: 0; } .slide-item {}/* Slide */ // setInterval(콜백함수, 시간) // animate({속성값}, 콜백함수) setInterval(function(){ $('.slide-items').animate({top: '-300px'}, function(){ $('.slide-items').css({top: 0}) $('.slide-item:first-child').appendTo('.slide-items') }) }, 3000)
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
왼쪽개별 우측고정형 네비게이션 높이조절
안녕하세요.우측고정 네비게이션에서 'Sub-menu' 부분에 높이 200px을 줬는데크기 늘어나지 않아 문의 드립니다. <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>C2_세로슬라이드, 네비(왼쪽개별우측고정)</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <div class="left"> <header> <div class="header-logo"></div> <div class="navi"> <ul class="menu"> <li> <a class="open-modal" href="#none">협회소개</a> <div class="sub-menu"> <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> </div> </li> <li> <a href="#none">홍보마당</a> <div class="sub-menu"> <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">Q&A</a> <a href="#none">사진갤러리</a> <a href="#none">공지사항</a> </div> </li> </ul> </div> </header> </div> <div class="right"> <div class="slide"> <div class="slide-items"> <a class="slide-item" href="#none"><img src="images/slide-01.jpg" alt="slide-01"></a> <a class="slide-item" href="#none"><img src="images/slide-02.jpg" alt="slide-02"></a> <a class="slide-item" href="#none"><img src="images/slide-03.jpg" alt="slide-03"></a> </div> </div> <div class="items"> <div class="news"></div> <div class="gallery"></div> <div class="shortcut"></div> </div> <footer> <div class="copyright"></div> <div class="footer-content"> <div class="sns"></div> <div class="family-site"></div> </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; background-color: #fff; color: #333; font-size: 15px; } a { text-decoration: none; color: inherit; } /* Entire Layout */ .container { display: flex; } .container > div { border: 1px solid #000; } .left { width: 200px; } .right { width: 800px; } header { position: relative; z-index: 1000; } header > div { border: 1px solid red; } .header-logo { height: 100px; } .navi { height: 400px; } /* Slide */ .slide { position: relative; width: 800px; height: 350px; overflow: hidden; } .slide > div { border: 1px solid #000; height: 350px; } .slide-items { font-size: 0; position: absolute; top: 0; left: 0; } .items { display: flex; } .items > div { border: 1px solid #000; height: 200px; } .news { width: 300px; } .gallery { width: 250px; } .shortcut { width: 250px; } footer { display: flex; } footer > div { border: 1px solid #000; height: 100px; } .copyright { width: 600px; } .footer-content { width: 200px; } .footer-content div { border: 1px solid #000; height: 50px; } .sns {} .family-site{} /* Navigation */ .menu { width: 90%; margin: auto; list-style: none; padding: 0; padding-top: 10px; position: relative; } .menu li { text-align: center; border: 1px solid #000; } .menu li > a { padding: 5px; display: block; border: 1px solid #000; transition: 0.5s; } .menu li:hover > a { background-color: #000; color: #fff; } .sub-menu { display: none; width: 100%; height: 200px; position: absolute; top: 0; left: 100%; } .sub-menu a { padding: 6px; display: block; background-color: #000; color: #fff; transition: 0.5s; } .sub-menu a:hover { background-color: #fff; color: #000; }/* Slide */ // setInterval(콜백함수, 시간) // animate({속성값}, 콜백함수) setInterval(function(){ $('.slide-items').animate({top: '-350px'}, function(){ $('.slide-items').css({top: 0}) $('.slide-item:first-child').appendTo('.slide-items') }) }, 3000) /* Navigation */ $('.menu li').mouseenter(function(){ $(this).children('.sub-menu').stop().slideDown() }) $('.menu li').mouseleave(function(){ $(this).children('.sub-menu').stop().slideUp() })
-
해결됨피그마 배리어블을 활용한 디자인 시스템 구축하기
4분 부분에서 궁금한점이있습니다.
앞족에서 베리어블은 스타일과 베리어블을 참조받을수있따고 설명해주셧는데 3분 20초에서는 스타일을 찾을수 없다고 말씀하셔서요. 실제로도 해보니베리어블은, 기존 베리어블을 참조할 수잇고 스타일은 참조못하고스타일은, 라이브러리에서 베리어블만 적용되고 스타일은 안된느데둘이 각각 서로 참조가 안되는 부분으로 실제 적용되는데 제가 잘못 하고 잇는걸까요? 앞에서 하신 설명과 보여주신 설명이 조금 다르게 느껴져서 혼동이오네요 ㅠ
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
슬라이드 appendTo 오류
안녕하세요.B4 실습 중에 안되는 기능이 있어 문의 드립니다.appendTo 기능이 작동하지 않습니다.어떻게든 해결 해보려고 클래스네임, 점 하나까지 다 확인 했는데 도저히 모르겠어서 질문 남겨요.되던게 안되니까 너무 당황스러워요... <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>B4_슬라이드 최종본</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <div class="header-inner"> <header> <div class="header-logo"></div> <div class="navi"></div> </header> </div> <div class="content-inner"> <div class="slide"> <div class="slide-items"> <a class=".slide-item" href="#none"><img src="images/slide-01.jpg" alt="slide-01"></a> <a class=".slide-item" href="#none"><img src="images/slide-02.jpg" alt="slide-02"></a> <a class=".slide-item" href="#none"><img src="images/slide-03.jpg" alt="slide-03"></a> </div> </div> <div class="items"> <div class="news"></div> <div class="gallery"></div> <div class="banner"></div> </div> </div> <div class="footer-inner"> <footer> <div class="footer-content"> <div class="footer-menu"></div> <div class="copyright"></div> </div> <div class="family-site"></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; background-color: #fff; color: #333; font-size: 15px; } a { text-decoration: none; color: inherit; } /* Entire Layout */ .container {} .header-inner { background-color: #eee; display: flex; justify-content: center; } header { border: 1px solid #000; display: flex; justify-content: space-between; width: 1200px; } header > div { border: 1px solid #000; height: 100px; } .header-logo { width: 200px; } .navi { width: 600px; } .content-inner {} /* Slide */ .slide { position: relative; width: 1200px; height: 300px; margin: auto; } .slide > div { border: 1px solid #000; } .slide-items { width: 3600px; font-size: 0; position: absolute; top: 0; left: 0; } .items { width: 1200px; display: flex; margin: auto; } .items > div { border: 1px solid #000; height: 200px; } .news { width: 400px; } .gallery { width: 400px; } .banner { width: 400px; } .footer-inner { background-color: #ddd; display: flex; justify-content: center; } footer { display: flex; } footer > div { border: 1px solid #000; height: 100px; } .footer-content { width: 1000px; } .footer-content > div { border: 1px solid #000; height: 50px; } .footer-menu {} .copyright {} .family-site { width: 200px; }/* slide */ // setInterval(콜백함수, 시간) // animate({속성값}, 콜백함수) setInterval(function(){ $('.slide-items').animate({left: '-1200px'}, function(){ $('.slide-items').css({left: 0}) $('.slide-item:first-child').appendTo('.slide-items') }) }, 3000)
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
애니메이션 효과 속성
애니메이션 효과 animation: slide 10s linear infinite;로 주라고 하셨는데 어떤 강의에선 .animate 속성으로 주라고 하는데 무슨 차이이고 어느 것이 맞습니까?
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
E유형(E1) 실습 중 shortcut-image 사이즈 오류
현재 E1 실습 중에 안되는 부분이 있어 문의 드립니다.CSS에서 'shortcut-01' 이미지 조절 중인데 사이즈가 안줄어들어요.ㅠㅠ왜이럴까요..? <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>E1_최종본_영상시청</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"> <a href="#none"><img src="images/header-logo.png" alt="header-logo"></a> </div> <div class="navi"></div> <div class="spot-menu"> <a href="#non3">로그인</a> <span>l</span> <a href="#non3">회원가입</a> </div> </header> </div> <div class="content"> <div class="shortcut"> <a class="shortcut-image" href="#none"><img src="images/shortcut-01.png" alt="shortcut-01"></a> <h3>얼리버드 선착순 할인 이벤트, 신규강의 최대 30% 할인</h3> <p>12월은 사랑의 달~ 코딩웍스에서 여러분께 사랑을 뿌려요~ 12월 개강반을 12월 06일까지 접수하는 분들께는 15%~ 20% 의 얼리버드 할인을 제공합니다.<br>더불어 소중한 리뷰를 꼼꼼히 남겨주시는 분들을 뽑아 더 큰 적립금을 추가지급해 드릴 예정이오니 리뷰도 놓치지 마시고 작성해주세요~^^<br> <b>기간: 2022년 12월 18일~ 12월 25일</b></p> <a href="#none"><img src="images/shortcut-02.png" alt="shortcut-02"></a> </div> <div class="news"></div> <div class="gallery"></div> <div class="banner"> <a href="#none"><img src="images/banner-01.png" alt="banner-01"></a> <a href="#none"><img src="images/banner-02.png" alt="banner-02"></a> <a href="#none"><img src="images/banner-03.png" alt="banner-03"></a> <a href="#none"><img src="images/banner-04.png" alt="banner-04"></a> </div> </div> <div class="right"> <div class="slide"> <div class="slide-image"> <div class="slide-items"> <a class="slide-item" href="#none"><img src="images/slide-e-01.jpg" alt="slide-e-01"></a> <a class="slide-item" href="#none"><img src="images/slide-e-02.jpg" alt="slide-e-02"></a> <a class="slide-item" href="#none"><img src="images/slide-e-03.jpg" alt="slide-e-03"></a> </div> </div> </div> </div> </div> <footer> <div class="footer-logo"> <a href="#none"><img src="images/footer-logo.png" alt="footer-logo"></a> </div> <div class="footer-content"> <div class="footer-link"> <a href="#none">기업소개 제휴 및 입점 문의</a> <a href="#none">개인정보처리방침</a> <a href="#none">이메일무단수집거부</a> <a href="#none">사이트맵</a> <a href="#none">인재채용</a> </div> <div class="copyright"> <p>상호 : (주)코딩웍스 | 대표자 : 홍길동 | 개인정보관리책임자 : 성춘향 부장 사업장주소 : 경기도 남양주시 별내동 1234 코딩웍스 빌딩 6층 (주)코딩웍스</p> </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-color: #fff; color: #333; font-size: 15px; } a { text-decoration: none; color: inherit; } /* Entire Layout */ .container {} .main-content { display: flex; } .main-content > div { border: 1px solid #000; } .left { width: 200px; } .content { width: 400px; } .right { width: calc(100% - 600px); } header {} header > div { border: 1px solid red; } .header-logo { height: 100px; } .navi { height: 400px; } .spot-menu { height: 50px; text-align: center; } .content {} .content > div { border: 1px solid blue; } /* Shortcut */ .shortcut { height: 150px; display: flex; } .shortcut .shortcut-image { height: 80px; } /* News & gallery */ .news { height: 250px; } .gallery { height: 250px; } .banner { height: 150px; display: flex; } .banner img { width: 100% } /* Slide */ .slide { display: flex; } .slide-image { flex: 1; height: calc(100vh - 120px); position: relative; overflow: hidden; } /* Slide Animation */ .slide-items { width: 300%; height: inherit; font-size: 0; position: absolute; } .slide-items a { display: inline-block; height: inherit; width: calc(100% / 3); } .slide-items a img { width: 100%; height: inherit; object-fit: cover; } footer { display: flex; } footer > div { border: 1px solid green; height: 120px; } .footer-logo { width: 200px; } .footer-content { width: calc(100% - 200px); } .footer-content div { border: 1px solid #000; height: 60px; } .footer-link {} .footer-link a:after { content: 'l'; margin-left: 5px; } .footer-link a:last-child::after { display: none; } .copyright {}
-
해결됨피그마 배리어블을 활용한 디자인 시스템 구축하기
컴포넌트 명칭에 대한 질문
IntroComponent ChecklistunSelected, selected, partialunSelected, selected컴포넌트 명칭에 대해 질문입니다.(워크시트)대문자가 되었다가 소문자가 되었다가 하는데 이부분은 어떤 기준으로 설정하시는지 알려주실수 있을가요?항상 피그마 명칭을 작성할때 고민되는 부분입니다.
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
우측고정 네이게이션 작성 시 오류
안녕하세요.'왼쪽 개별 네비게이션' 완료 후 CSS만 변경해 '우측고정 네이게이션'을 만드는 와중에 잘 안되는게 있어 질문 드립니다. '세로 기본형' 일때는 호버가 잘 되었는데 CSS 변경 후 sub-menu 가 고정이 되지도 않고 호버도 되지 않아요... 영상 보면서 마크업 비교 해봐도(1시간째...ㅠㅠ) 틀린 부분이 없는데 작동되지 않아 답답합니다.뭐가 잘못 되었을까요? <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>D1</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="contaniner"> <div class="main-content"> <div class="left"> <header> <div class="header-logo"></div> <div class="navi"> <!-- Navigation --> <ul class="menu"> <li> <a href="#none">MENU-1</a> <div class="sub-menu"> <a href="#none">SUB-MENU-1</a> <a href="#none">SUB-MENU-2</a> <a href="#none">SUB-MENU-3</a> <a href="#none">SUB-MENU-4</a> </div> </li> <li> <a href="#none">MENU-2</a> <div class="sub-menu"> <a href="#none">SUB-MENU-1</a> <a href="#none">SUB-MENU-2</a> <a href="#none">SUB-MENU-3</a> <a href="#none">SUB-MENU-4</a> </div> </li> <li> <a href="#none">MENU-3</a> <div class="sub-menu"> <a href="#none">SUB-MENU-1</a> <a href="#none">SUB-MENU-2</a> <a href="#none">SUB-MENU-3</a> <a href="#none">SUB-MENU-4</a> </div> </li> <li> <a href="#none">MENU-4</a> <div class="sub-menu"> <a href="#none">SUB-MENU-1</a> <a href="#none">SUB-MENU-2</a> <a href="#none">SUB-MENU-3</a> <a href="#none">SUB-MENU-4</a> </div> </li> </ul> <!-- Navigation --> </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="copyright"></div> <div class="sns"></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-color: #fff; color: #333; } a { text-decoration: none; color: inherit; } /* Entire Layout */ .container {} .main-content { display: flex; } .main-content > div { border: 1px solid #000; } .left { width: 200px; } .right { width: calc(100% - 200px); } /* Header */ header {} header > div { border: 1px solid red; } .header-logo { height: 100px; } .navi { height: 400px; } .spot-menu { height: 50px; } /* Slide */ .slide { height: 400px; position: relative; } .slide-image { border: 1px solid #000; height: 400px; } .slide-banner { width: 150px; height: 300px; position: absolute; top: 0; right: 0; } /* shortcut */ .shortcut { border: 1px solid #000; height: 200px; } /* Nesw & gallery */ .news-gallery { border: 1px solid #000; height: 250px; } /* footer */ footer { display: flex; } footer > div { border: 1px solid #000; height: 100px; } .footer-logo { width: 200px; } .copyright { width: calc(100% - 430px); } .sns { width: 230px; } /* Navi gation */ .menu { padding: 0; list-style: none; width: 90%; margin: auto; margin-top: 15px; position: relative; } .menu li { text-align: center; } .menu li > a { border: 1px solid #000; display: block; padding: 5px; transition: 0.5s; } .menu li:hover > a { background-color: #000; color: #fff; } .sub-menu { border: 1px solid #000; display: none; position: absolute; top: 0; left: 100%; width: 100%; height: 200px; background-color: #000; } .sub-menu a { display: block; padding: 5px; transition: 0.5s; color: #fff; } .sub-menu a:hover { background-color: #fff; color: #000; }/* Navigation */ $('.menu li').mouseenter(function(){ $(this).children('.sub-menu').stop().slideDown() }) $('.menu li').mouseleave(function(){ $(this).children('.sub-menu').stop().slideUp() })
-
미해결피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z
링크
예제 샘플 파일 링크는 어디서 볼수 있는건가요? ㅠㅡㅜ
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
탭메뉴 갤러리클릭하면 갤러리들이안나오고 공지사항이그대로보이는데 뭐가잘못됬을까요 ..
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>a연습</title> <link rel="stylesheet" href="css/a연습.css"> </head> <body> <div class="container"> <header> <div class="header-logo"></div> <div class="navi"> <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> </header> <div class="slide"> <div></div> </div> <div class="items"> <div class="news"> <div class="tab-inner"> <div class="btn"> <span class="active">공지사항</span> <span>갤러리</span> </div> <div class="tabs"> <div class="tab1"> <a class="open-modal" href="#none">운영위원장 후보자 추천을 받고 있습니다. <b>2020.01.09</b> </a> <a href="#none">홈커밍데이 진행위원회 결과를 다운로드 받으세요. <b>2020.01.07</b> </a> <a href="#none">카드결제 무이자 이벤트 한시적 10월 20일까지 <b>2019.12.31</b> </a> <a href="#none">보안강화 시스템 작업 안내 공지 <b>2019.12.20</b> </a> <a href="#none">부여 가을연꽃축제 10주년 콘서트 축제 <b>2019.12.20</b> </a> </div> <div class="tab2"> <a href="#none"><img src="imges/d-1images/gallery-1.jpg" alt="gallery1"></a> <a href="#none"><img src="imges/d-1images/gallery-2.jpg" alt="gallery2"></a> <a href="#none"><img src="imges/d-1images/gallery-3.jpg" alt="gallery3"></a> </div> </div> </div> </div> <div class="banner"></div> <div class="shortcut"></div> </div> <footer> <div class="footer-logo"></div> <div class="copyright"></div> <div class="sns"></div> </footer> </div> <div class="modal"> <div class="modal-content"> <h2>부여 가을연꽃축제 팸투어 모집</h2> <p>예비 청년상인들을 위해 진행하는 부여에서 청춘의 미래를 디자인하다. 청년창업人부여 팸투어가 12월 05일 토요일 충청남도 부여에서 진행됩니다. 팸투어는 전액 무료로 진행되며 참가비 없습니다. 이번 팸투어에서는 부여군상권활성화재단의 청년상인 육성프로젝트를 실제로 견학하며 확인해 보실 수 있는 좋은 기회이니 창업을 희망하는 많은 청년 분들의 관심 부탁드립니다. 온라인 및 전화 또는 메일 등으로 사전 참가신청하실 수 있습니다!</p> <a class="close-modal" href="#none">닫기</a> </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; background-color: #fff; } a{ font-size: 15px; color: #333; list-style: none; text-decoration: none; } .container{ border: 1px solid #000; width: 1200px; } header{ display: flex; justify-content: space-between; } header > div{ border: 1px solid #000; height: 100px; } .header-logo{ width: 200px; } .navi{ width: 600px; } .menu{ padding: 0; list-style: none; margin-top: 30px; } .menu li{ float: left; width: 25%; text-align: center; box-sizing: border-box; } .menu li > a{ border: 1px solid pink; display: block; padding: 5px; transition: 0.5s; } .menu li:hover > a{ background-color: pink; color: #fff; } .sub-menu{ border: 1px solid pink; display: none; } .sub-menu a{ display: block; padding: 5px; transition: 0.5s; } .sub-menu a:hover{ background-color: palevioletred; color: #fff; } .slide{} .slide > div{ border: 1px solid #000; height: 300px; } .items{ display: flex; } .items > div{ border: 1px solid #000; height: 200px; } .news{ width: 500px; } /*tab-inner*/ .tab-inner{ width: 97%; margin: auto; margin-top: 5px; } .btn{} .btn span{ border: 1px solid #000; display: inline-block; width: 100px; margin-right: -6px; padding: 4px; text-align: center; border-radius: 7px 7px 0 0; background-color: #ddd; border-bottom: none; margin-bottom: -1px; cursor: pointer; } .btn span.active{ background-color: #fff; } .tabs{} .tabs > div{ border: 1px solid #000; height: 150px; } .tab1{} .tab1 a{ display: block; border-bottom: 1px dashed #000; padding: 5px; } .tab1 a:last-child{ border-bottom: none; } .tab1 a b{ float: right; font-weight: normal; } .tab2{ display: none; } .banner{ width: 350px; } .shortcut{ width: 350px; } footer{ display: flex; } footer > div{ border: 1px solid #000; height: 100px; } .footer-logo{ width: 200px; } .copyright{ width: 800px; } .sns{ width: 200px; } /*modal*/ .modal{ background-color: rgba(0, 0, 0, 0.5); position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: none; } .modal-content{ background-color: #fff; width: 400px; height: 400px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } .modal-content h2{ background-color: powderblue; text-align: center; } .modal-content p{ line-height: 1.5em; padding: 10px; } .close-modal{ border: 1px solid #000; padding: 5px 5px; margin-right: 30px; float: right; } /*tab-inner*/ $('.btn span:first-child').click(function(){ $('tab1').show() $('tab2').hide() $(this).addClass('active') $(this).siblings().removeClass('active') }) $('.btn span:last-child').click(function(){ $('tab2').show() $('tab1').hide() $(this).addClass('active') $(this).siblings().removeClass('active') })갤러리부분에 이미지도 넣어놨는데 tab2 부분이 안나타나고 tab1 부분만 그대로 나와움직이질않습니다 span부분클릭해도 tab1부분만 나와있어요 어디서부터 잘못된걸까요 전에꺼랑 비교햇을때 똑같은데 어떤게 잘못됫나요 ,,,
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
이미지들이 포지션엡솔루트만하면 옆으로 사진처럼 옮겨지는데 어떤게 잘못된건가요 ?
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>b-2레이아웃</title> <link rel="stylesheet" href="css/b-2.css"> </head> <body> <div class="container"> <div class="header-inner"> <header> <div class="header-logo"></div> <div class="navi"> <ul class="menu"> <li> <a href="#none">menu1</a> <div class="sub-menu"> <a href="#none">sub-menu1</a> <a href="#none">sub-menu2</a> <a href="#none">sub-menu3</a> <a href="#none">sub-menu4</a> </div> </li> <li> <a href="#none">menu1</a> <div class="sub-menu"> <a href="#none">sub-menu1</a> <a href="#none">sub-menu2</a> <a href="#none">sub-menu3</a> <a href="#none">sub-menu4</a> </div> </li> <li> <a href="#none">menu1</a> <div class="sub-menu"> <a href="#none">sub-menu1</a> <a href="#none">sub-menu2</a> <a href="#none">sub-menu3</a> <a href="#none">sub-menu4</a> </div> </li> <li> <a href="#none">menu1</a> <div class="sub-menu"> <a href="#none">sub-menu1</a> <a href="#none">sub-menu2</a> <a href="#none">sub-menu3</a> <a href="#none">sub-menu4</a> </div> </li> <div class="sub-back"></div> </ul> </div> </header> </div> <div class="content-inner"> <div class="slide"> <div> <a href="#none"><img src="imges/d-1images/slider01.jpg" alt="slide1"></a> <a href="#none"><img src="imges/d-1images/slider02.jpg" alt="slide2"></a> <a href="#none"><img src="imges/d-1images/slider03.jpg" alt="slide3"></a> </div> </div> <div class="items"> <div class="news"></div> <div class="gallery"></div> <div class="shortcut"></div> </div> </div> <div class="footer-inner"> <footer> <div class="copyright"></div> <div class="sns"> <div></div> </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{ color: #333; margin: 0; background-color: #fff; } a{ list-style: none; text-decoration: none; color: #333; } .container{} .header-inner{ background-color: #eee; } .content-inner{} .footer-inner{ background-color: #eee; } header{ width: 1200px; margin: auto; display: flex; justify-content: space-between; position: relative; } header > div{ border: 1px solid #000; height: 100px; } .header-logo{ width: 200px; } .navi{ width: 600px; } /*navigation*/ .menu{ padding: 0; list-style: none; margin-top: 70px; } .menu li { float: left; width: 25%; box-sizing: border-box; text-align: center; } .menu li > a{ border: 1px solid #000; display: block; padding: 5px; transition: 0.5s; } .menu li:hover > a{ background-color: #000; color: #fff; } .sub-menu{ display: none; } .sub-menu a{ display: block; padding: 5px; transition: 0.5s; color: #fff; } .sub-menu a:hover{ background-color: #fff; color: #000; } .sub-back{ width: 100%; height: 200px; background-color: #000; position: absolute; right: 0; top: 100%; z-index: -1; display: none; } .slide{ position: relative; height: 300px; } .slide > div{ width: 1200px; height: 300px; margin: auto; border: 5px solid #000; position: absolute; } .items{ width: 1200px; margin: auto; display: flex; } .items > div{ border: 1px solid #000; height: 200px; } .news{ width: 500px; } .gallery{ width: 350px; } .shortcut{ width: 350px; } footer{ width: 1200px; margin: auto; display: flex; } footer > div{ border: 1px solid #000; height: 100px; } .copyright{ width: 1000px; } .sns{ width: 200px; } .sns div{ border: 1px solid #000; height: 50px; } 슬라이드부분에 하다가 포지션 엡솔루트만 주면 사진기준이 이상하게되는데 뭐가잘못된건가요
