묻고 답해요
129만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
p태그가 계속 보여요
쌤이 해주신대로 따라했는데 라이브서버로 켰을 때 p태그가 계속 보여요 ㅠㅠ 무슨 문제일까요?그리고 원래 쓰던 제이쿼리를 들어가보니 이렇게 나오는데 이것때문에 제이쿼리가 실행이 안되는걸까요?
-
미해결면접과 취업을 부르는 '퍼블리셔 개인 포트폴리오 홈페이지' 제작
feather light
feather light개인포트폴리오에 feather light 를 사용해서 프로젝트 모달창을 띄웠는데프로젝트에서 사용된 incloude위치를 찾을 수 없다고 뜹니다프로젝트자체에서 라이브서버 켜서 확인을 하면 incloude가 작동되어서 위치를 찾아가는데이런 경우에는 어떠헥 하나요?
-
미해결반응형 웹사이트 포트폴리오(Architecture Agency)
섹션 17 하드코딩으로 이미지맵 만들기 부분 연습파일이 없어요..
하드코딩으로 이미지맵(image map) 만들기코딩웍스 유튜트 채널에 있는 [이미지맵(image map) 만들기]에 상세히 강좌가 있습니다.실무에서 꼭! 사용하게 되니까 한번쯤 만들어보세요.하드코딩으로 이미지맵(image map) 만들기 강좌보기https://youtu.be/21WRDP06O4s※ 연습파일 다운로드는 유튜브 영상의 [더보기]를 누르시면 다운로드 링크가 있습니다.====================================이렇게 되어 있는데 유튜브 링크 내에다운로드 링크가 없고,인프런 강의 18섹션 다운로드 부분에도 이미지맵 관련 파일은 안보이네요연습파일을 얻을 수 있을까요?
-
미해결모바일 웹 퍼블리싱 포트폴리오 with Figma
안녕하세요 강의들은 후 개인포폴용으로 모바일앱 만들고있는데요..!
와이어프레임 만들 때 구조를 어떻게짜야하는지 .. (박스를 어떻게 쳐야하는지 ) 감이 영안와서요 ㅠ.ㅠ 박스친거처럼 묶어서 구조짜도되는지 여쭤보고싶은데, 혹시 메일로도 질문 받으실까용 ?ㅠ
-
미해결스프링 프레임워크는 내 손에 [스프2탄]
안녕하세요. spring boot 에서 하는중인데 질문 드립니다.!
spring boot 로 프로젝트 만들고 하는중이라서 부트에서 테스트 하고 있는데요. 구글링 해서 테스트 세팅하고 modelAndView 까지 했는데 view 값은 가져오는데 model 값이 안가져와지네요.... @MockBean 으로 Service 를 bean 등록 시키고 Service 에서 getList 할때 뭔가 잘안되는거 같은데 혹시 어떤게 잘못됬는지 확인 가능하신가요 ?? ControllerService testController testConstroller test 결과
-
해결됨SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 with Figma
slick slide 클레스 네임 관련
PC 레이아웃 상세 퍼블리싱 - 프론트 페이지(Focus Class) 02강의에서 /*section : focus-class*/ .focus-class { background-color: $cloudy-gray; .focus-class-inner { .focus-class-content { margin-bottom: 30px; .focus-class-items { /* Custom Css : Slick - 아이템 간격 조정 */ // 실제로 찾아가는것은 F12 개발자도구로 찾아가서 조절하는것 이다. .slide-list{ margin: 0 -5px; } .slick-slide{ margin: 0 5px; }포커스 클래스 부분의 슬릭슬라이더 부분에서,마진 조절하는 부분에 개발자도구로 찾아보니 .slide-list 가 아니라 .slick-list 인거 같습니다. 감사합니다.
-
미해결반응형 웹사이트 포트폴리오(Architecture Agency)
line-hieght를 em 단위로 쓰는 것에 대하여 질문 드립니다
jump up 이론 파트 em단위와 rem 단위 이해하기 부분 강의를 듣는 중입니다. em 단위가 부모요소에 대해 상대적으로 지정하는 단위이고line-height에 주로 쓰인다고 하셨는데그렇다면 주로 p의 폰트사이즈는 주로 p를 감싸고 있는 부모요소에 지정하고줄간격은 p 그 자체에 지정하는 것인가요?
-
해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
오늘 F3 오픈뱅킹 (23번) 유형 시험을 보고 왔습니다!
학습 질문은 아니지만 선생님께서 주변에 F유형 시험 보신 분이 없어서정보가 정확하지 않다는 것이 기억이 나서 오지랖 같아 보이지만 다른 수험생 분들과선생님께 도움이 좀 되고자 시험 끝나고 달려와 게시글을 작성합니다!이번 주 내내 이상하게 F유형이 마음에 걸렸었는데 오늘 딱 시험 보는 걸 직감했었나봅니다ㅠㅠ 강의대로.slide 안에 slide-image 와 slide-banner 로 묶어서 공부를 했는데, 시험지에서는 저희가 slide-banner 라고 칭한 부분을 지시 사항에서는 <바로 가기> 라 했고,content-inner 안에 있는 shortcut 부분을 시험지에서는 <배너> 라고 지시하고 있었습니다.그저 코드 묶는 이름만 달랐지만 F유형 준비하시는 분들은 덜 헷갈리셨으면 하는 맘에코드 명을 바꿔서 공부하는 게 어떨까 하는 생각이 들었어요!저도 중간에 '바로 가기' 지시 사항 읽으면서 평소처럼 slide-banner 로 작성하다가헷갈려서 그냥 지시 사항 요구한 이름으로 코드 이름도 통일을 시켰어요! 핑크색 박스 부분을 색칠한 부분에 대해서 말씀드릴 게 있는데요~ 기억하실지 모르겠지만..ㅠㅠ 제가 24.03.27에 F유형 slide-banner link 부분에 글자 입력하는 지시 사항이 있을 까봐 질문을 올린 적이 있습니다..! 불행하게도ㅠㅠ 제 예상처럼 시험 지시 사항에 각 엥커 마다 텍스트를 넣으라는 부분이 있었습니다.제공되는 텍스트 메모장에 삽입 하라는 텍스트가 있더라고요ㅠㅠ 그리고 총 들어가는 이미지는 레이아웃과 동일하게 5개였습니다.다만, 텍스트를 이미지 어디에 넣으라는 특정 지시는 없어서, 그래서 저는span 으로 텍스트를 입력해서 갤러리 이미지에 span을 넣은 것과 똑같이 display:block 처리를 해서 위아래로 넣고 배열하는 방식으로 만들었습니다.일러스트나 포토샵으로 이미지를 만드는 것이 아니라, 제공 된 이미지를 삽입 했어야 됐습니다..!배치를 하고 나니까 슬라이드 이미지 위에 뜬금없는 사진들을 붙여 놓은 것 같아서,저는 백그라운드 컬러를 주고 투명도 조절을 해서 슬라이드 이미지와 별개 부분인 아이콘처럼 보이게 만들었습니다. 그리고 공지사항 부분이요! 오른쪽에 선생님께서 ???ㅠㅠ 라고 하늘색으로 쓰신 부분 정말 공백이었어요!! 다만, 공지사항 부분에 엥? 하고 놀랬던 부분은, tab-inner 너비가 넓지 않을 수 있으니 공지 사항 부분에 em / b 태그를 이용해서 배치와 말 줄임을 공부하고 갔는데, 날짜 입력이 없었습니다! 그래서 편히 앵커만 넣고 블록 처리해서 중앙 배치해서 꾸몄습니다. 제가 실수한 부분은 푸터 메뉴에 보더 버텀을 안준 것과 메뉴 서브 백 width 크기를 해더 크기로 줬다는 것 두 가지인데, (A유형 sub-back처럼 만들어버렸어요ㅠ)다른 건 다 작동 잘 되고 스스로도 아 이 정도면 됐다하는 맘으로 잘 풀고 왔습니다!! ㅠㅠ 이러다 저 두 가지 문제로 떨어지면 너무 너무 창피하고 부끄러울 것 같습니다만..ㅠㅠㅠㅠ 그래도 스스로 많은 구조를 파악하고 만들 수 있다는 게 너무 뿌듯합니다.그리고 F유형이 아무래도 본 적 없는 유형이라 그런지..오늘 제가 간 시험 장에 12명이 시험 봤는데 6명이 중도 포기하고 나가셨어요..저는 모든 확인을 끝내고 제출하는 데까지 2시간 20분 정도 걸렸는데, 그 시간까지 저 포함 제출한 사람들은 3명이었고, 제가 교실 나올 때까지 3명이 남아있었습니다.4월 9일에 합격발표일인데 제발 붙었으면 좋겠습니다ㅠㅠ선생님 대면 수업이 아닌 온라인 수업이었지만 정말 많은 걸 배웠습니다ㅠㅠ감사합니다ㅠㅠ!
-
미해결SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 with Figma
live server는 적용되는데 index.html을 더블클릭하면 아무것도 안되어 있어요..
featherlight 하다가 다 깨져있어서 featherlight 문제인가 했는데html파일 자체가 scss로 작업한 게 적용이 안되어있더라구요...라이브서버로 보면 잘 되어있어서 미처 몰랐는데 index.html 더블클릭하니스타일이 하나도 안되어있습니다ㅠㅠ 뭐가 문제일까요...?? **SCSS로 디자인한 걸 featherlight로 어떻게 해야하는 지 알려주세요...!
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
시험장에선 인터넷이 사용 되지 않는데 작업 중 확인을 위한 Open with Live Server 어떻게 확인합니까?
시험장에선 인터넷이 사용 되지 않는데 작업 중 확인을 위한 Open with Live Server 어떻게 합니까? 확인해 보고 수정해야 하는데 완성한 후가 아닌 작업 중에 확인하고자 할 때는 어떻게 합니까?
-
해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
F3번 오픈뱅킹 modal 창 질문있습니다.
F 유형에 대해 자꾸 질문 드려서 죄송합니다..ㅠㅠF1하고 F3번 modal 창을 만들면푸터 부분에 modal background-color 가 검정색으로 덮혀 지지 않은데 정상일까요?제가 잘못 만든 줄 알고 선생님께서 올려주신 최종본도 확인해봤는데쌤 최종본에서도 푸터 부분에 검정색이 적용 안되는 걸 확인해서요..!!쌤 코드랑 제 코드가 똑같아서 따로 코드는 올리지 않았습니다..이 부분이 문제가 되지 않는다면 이제 문제가 되는 유형이 없는 것 같아요..!!시험 하루 남아서 최종 점검 겸 질문 남깁니다ㅠㅠ 추가 ) Ai 답변을 보고 제 질문이 디자인 쪽으로 보여지는 것 같아서요..!의문점인 부분이 .modal 의 크기 값을 width:100 % , height: 100% 로 줘서창의 전체를 어둡게 덮게 만드는 건데,그 크기 값이 왜 height 100% 임에도 불구하고 footer에는 적용이 안되는 것 질문이었습니다..!
-
해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
d,e유형 네비게이션 제작시 서브메뉴가 고정이 안됩니다
강의 de유형 네비게이션 7:55분초를 보면 선생님 서브메뉴는 고정되어서 잘 나오는데 제꺼는 고정이 안되고 자꾸 슬라이드 업 되어서 서브메뉴에 호버를 할수가 없습니다 제생각에는 엡솔루트 준 뒤로 이러는것 같은데..ㅠ코드올려드립니다 왜이러는걸까요 ㅠㅜhtml <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8" /> <title>D-1</title> </head> <link rel="stylesheet" href="./css/style.css" /> <body> <div class="container"> <div class="main-content"> <div class="left"> <div class="header"> <div class="header-logo"></div> <div class="menu"> <ul class="menu1"> <li> <a href="#none"> meun-1</a> <div class="sub-menu"> <a href="#none">meun-2</a> <a href="#none">meun-2</a> <a href="#none">meun-2</a> <a href="#none">meun-2</a> </div> </li> <li> <a href="#none"> meun-1</a> <div class="sub-menu"> <a href="#none">meun-2</a> <a href="#none">meun-2</a> <a href="#none">meun-2</a> <a href="#none">meun-2</a> </div> </li> <li> <a href="#none"> meun-1</a> <div class="sub-menu"> <a href="#none">meun-2</a> <a href="#none">meun-2</a> <a href="#none">meun-2</a> <a href="#none">meun-2</a> </div> </li> <li> <a href="#none"> meun-1</a> <div class="sub-menu"> <a href="#none">meun-2</a> <a href="#none">meun-2</a> <a href="#none">meun-2</a> <a href="#none">meun-2</a> </div> </li> </ul> </div> <div class="spot-menu"></div> </div> </div> <div class="right"> <div class="slide"> <div class="slide-img"></div> <div class="slide-banner"> <a href="#none"><img src="./images/banner-01.png" alt=""></a> <a href="#none"><img src="./images/banner-02.png" alt=""></a> <a href="#none"><img src="./images/banner-03.png" alt=""></a> </div> </div> <div class="items"> <div class="shortcut"> <a href="#none" ><img src="./images/shortcut-01.png" alt="shortcut-01" /></a> <div class="shortcut-content"> <h3>얼리버드 선착순 할인 이벤트, 신규강의 최대 30% 할인</h3> <p> 12월은 사랑의 달~ 코딩웍스에서 여러분께 사랑을 뿌려요~ 12월 개강반을 12월 06일까지 접수하는 분들께는 15%~ 20% 의 얼리버드 할인을 제공합니다. 더불어 소중한 리뷰를 꼼꼼히 남겨주시는 분들을 뽑아 더 큰 적립금을 추가지급해 드릴 예정이오니 리뷰도 놓치지 마시고 작성해주세요~^^<br /> <b>기간:2022년 12월 18일~ 12월 25일</b> </p> </div> <a href="#none" ><img src="./images/shortcut-02.png" alt="shortcut-02" /></a> </div> <div class="news-gallery"></div> </div> </div> </div> <div class="footer"> <div class="footer-logo"> <a href="#none" ><img src="./images/footer-logo.png" alt="footer-logo" /></a> </div> <div class="copyright"> 상호 : (주)코딩웍스 | 대표자 : 홍길동 | 개인정보관리책임자 : 성춘향 부장 사업장주소 : 경기도 남양주시 별내동 1234 코딩웍스 빌딩 6층 (주)코딩웍스 </div> <div class="sns"> <a href="#none"><img src="./images/sns-01.png" alt="sns1" /></a> <a href="#none"><img src="./images/sns-02.png" alt="sns2" /></a> <a href="#none"><img src="./images/sns-03.png" alt="sns3" /></a> </div> </div> </div> <script src="./script/jquery-3.7.1.js"></script> <script src="./script/custom.js"></script> </body> </html> css @charset "UTF-8"; body { margin: 0; background-color: #fff; color: #333; } a { text-decoration: none; color: inherit; } /* 전체레이아웃 */ .container { border: 1px solid red; } .main-content { border: 1px solid black; display: flex; } .main-content > div { border: 1px solid black; } .left { width: 200px; } .header { } .header > div { border: 1px solid red; } .header-logo { height: 100px; } .menu { height: 400px; } .menu1 { padding: 0; } .menu1 > li { position: relative; } .menu1 > li > a { background-color: #333; display: block; color: #fff; height: 40px; line-height: 40px; text-align: center; transition: 0.5s; } .menu1 > li:hover > a { border: 1px solid#333; background-color: #333; color: #fff; } .sub-menu { position: absolute; top: 0; left: 100%; width: 100%; display: none; } .sub-menu > a { display: block; text-align: center; height: 35px; line-height: 35px; background-color: #333; color: #fff; transition: 0.5s; } .sub-menu a:hover { background-color: #ffffff; color: #333; } .spot-menu { height: 50px; } .right { width: calc(100% - 200px); } .slide { height: 400px; position: relative; } .slide-img { border: 1px solid blue; height: 400px; } .slide-banner { border: 1px solid green; position: absolute; top: 0; right: 0; } .slide-banner > a > img { width: 180px; display: block; } .shortcut { border: 1px solid black; height: 200px; display: flex; align-items: center; } .shortcut-content { display: block; } .shortcut-content > b { font-weight: bold; } .news-gallery { border: 1px solid red; height: 250px; } .footer { display: flex; align-items: center; height: 100px; } .footer > div { text-align: center; } .footer-logo { width: 200px; } .copyright { width: calc(100% - 430px); } .sns { width: 250px; } .sns > a > img { width: 50px; border-radius: 5px; } js$(".menu1 li").mouseover(function () { $(this).children(".sub-menu").stop().slideDown(); }); $(".menu1 li").mouseleave(function () { $(this).children(".sub-menu").stop().slideUp(); });
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
플렉스 질문드려요
slide-banner에 플랙스를 주고slide-banner a img 에 width:100%;를 주면 왜 일렬로 배치될 수 있나요? ■ 질문 남기실 때 꼭! 참고해주세요.- 먼저 유사한 질문이 있었는지 검색해주세요.- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다.질문 하실 때 어떤 유형인지 말씀해주세요. ex) A1 작업하는데 ???이 안됩니다.
-
해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
F 유형 slide-banner 질문있습니다
돌아오는 토요일에 시험을 보는데, 모든 유형 다 만들 수 있어도 혹시 라도 실수할까 복습을 계속 하고 있거든요!그러다 문득 F 유형 slide-banner 각 이미지 옆에link 1,2,3,4 라고 적혀있는 글자 입력을 해야 할 경우 어떻게 넣는 게 좋을지 고민하다가 조언 듣고 싶어서 질문 남깁니다.갤러리에서 사진 밑에 span으로 글자를 입력 해야 하는데, 혹시 배너도 갤러리처럼 링크 설명 글자를 넣으라는 지시가 있을까봐 대비해서 가고 싶습니다!
-
미해결퍼블리싱 핵심이론 PDF 교재 및 예제파일(HTML+CSS+FLEX+JQUERY)
임시이미지 사이트 close
HTML 교재 19 페이지 http://placehold.it 열리지 않아요, 없어진것 같음 다른 사이트 알려주세요 그리고 13페이지 한글입숨 사이트 열리지 않아요, 일시적인지 는 몰라도 찾아보니http://guny.kr/stuff/klorem/여기 지원되네요
-
미해결스프링 프레임워크는 내 손에 [스프2탄]
spring Legacy Project에서 MVC 프로젝트가 없습니다. 어떻게 해야하나요?
안녕하세요. 24.03.24일 날 스프2탄을 구매하였습니다. 시작부터 문제가 발생되어서 글 남깁니다. 강사님의 영상을 따라 eGovFrame-4.0.0을 다운로드 하였고 1. 프로젝트를 생성하기위해 Spring Legacy Project 클릭 ---문제 발생 ---- 2.Simple Projects만 보이고 MVC프로젝트가 보이질 않습니다. 구글링을 해보고 시도 하였지만 해결되지 못했습니다. 초보의 입장에서 난감해하고 있습니다. 해결방법과 그따른 영상을 업데이트를 해주실수 있을까요?
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
전체적으로 창을 줄이면 거기에 대한 반응을 안합니다
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</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/D image/header-logo.png" alt="header-logo"></a> </div> <div class="navi"> <ul class="menu"> <li> <a href="#none">menu-01</a> <div class="sub-menu"> <a href="#none">sub-menu1</a> <a href="#none">sub-menu1</a> <a href="#none">sub-menu1</a> <a href="#none">sub-menu1</a> </div> </li> <li> <a href="#none">menu-01</a> <div class="sub-menu"> <a href="#none">sub-menu1</a> <a href="#none">sub-menu1</a> <a href="#none">sub-menu1</a> <a href="#none">sub-menu1</a> </div> </li> <li> <a href="#none">menu-01</a> <div class="sub-menu"> <a href="#none">sub-menu1</a> <a href="#none">sub-menu1</a> <a href="#none">sub-menu1</a> <a href="#none">sub-menu1</a> </div> </li> <li> <a href="#none">menu-01</a> <div class="sub-menu"> <a href="#none">sub-menu1</a> <a href="#none">sub-menu1</a> <a href="#none">sub-menu1</a> <a href="#none">sub-menu1</a> </div> </li> </ul> </div> <div class="spot-menu"> <a href="#none">로그인</a> <span>|</span> <a href="#none">회원가입</a> </div> </header> </div> <div class="right"> <div class="slide"> <div class="slide-image"> <div class="slide-image-inner slide-items"> <a href="#none" class="slide-item"><img src="images/D image/slide-d-01.jpg" alt=""></a> <a href="#none" class="slide-item"><img src="images/D image/slide-d-02.jpg" alt=""></a> <a href="#none" class="slide-item"><img src="images/D image/slide-d-03.jpg" alt=""></a> </div> </div> <div class="slide-banner"> <a href="#none"><img src="images/D image/banner-01.png" alt="banner-01"></a> <a href="#none"><img src="images/D image/banner-02.png" alt="banner-01"></a> <a href="#none"><img src="images/D image/banner-03.png" alt="banner-01"></a> </div> </div> <div class="items"> <div class="shortcut"> <a href="#none"><img src="images/D image/shortcut-01.png" alt="shortcut -1"></a> <div class="shortcut-content"> <h3>fkldmsklmclkmdclmd</h3> <p> fdjdoijfijiowejfdnfndsjfndsncncnfdkljfodsjlkcnkndksjhbfkjdshfkdjsnklcmdslkcjndksjhckdsbcjhdsbfihnuwhfeiuhfnjkdnkfjbdsdkjskldjiojeoidjklcndslkchndsicjhdosicjewmfewfewfwedk <br> <b>202039202</b> </p> </div> <a href="#none"><img src="images/D image/shortcut-02.png" alt="shortcut-02"></a> </div> <div class="news-gallery"> <div class="tab-inner"> <div class="btn"> <a class="active" href="#none">공지사항</a> <a href="#none">갤러리</a> </div> <div class="tabs"> <div class="tab1"> <a class="open-modal" href="#none">안녕하세요 <b>2020</b></a> <a href="#none">안녕하세요 <b>2020</b></a> <a href="#none">안녕하세요 <b>2020</b></a> <a href="#none">안녕하세요 <b>2020</b></a> </div> <div class="tab2"> <a href="#none"><img src="images/D image/gallery-01.png" alt=""><span>안녕</span></a> <a href="#none"><img src="images/D image/gallery-02.png" alt=""><span>안녕</span></a> <a href="#none"><img src="images/D image/gallery-03.png" alt=""><span>안녕</span></a> <a href="#none"><img src="images/D image/gallery-04.png" alt=""><span>안녕</span></a> <a href="#none"><img src="images/D image/gallery-05.png" alt=""><span>안녕</span></a> <a href="#none"><img src="images/D image/gallery-06.png" alt=""><span>안녕</span></a> <a href="#none"><img src="images/D image/gallery-07.png" alt=""><span>안녕</span></a> </div> </div> </div> </div> </div> </div> </div> <footer> <div class="footer-logo"> <a href="#none"><img src="images/D image/footer-logo.png" alt="footer-logo"></a> </div> <div class="footer-content"> <div class="footer-link"> <a href="#none">djfjdsfjfs</a> <span>|</span> <a href="#none">djfjdsfjfs</a> <span>|</span> <a href="#none">djfjdsfjfs</a> <span>|</span> <a href="#none">djfjdsfjfs</a> <span>|</span> <a href="#none">djfjdsfjfs</a> <span>|</span> <a href="#none">djfjdsfjfs</a> </div> <div class="copyright"> dfjdsfijdiofjodsfodsmnckljdsicjdiosfjodsnflkndkfjgdsfdsfds </div> </div> </footer> </div> <div class="modal"> <div class="modal-content"> <h2>안녕ㅎ라새요 여러분</h2> <p> dfjdsfijdiofjodsfodsmnckljdsicjdiosfjodsnflkndkfjgdsfdsfds </p> <a href="#none" class="close-modal">X 닫기</a> </div> </div> <script src="script/jquery-1.12.4.js"></script> <script src="script/custom.js"></script> </body> </html> 슬라이드에 object-fit도 안먹고 숏컷, 탭 부분도 창에 따라 줄어들어야 하는데 짤리는데 뭐가 문제일까요?
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
D 유형할 때 마다 우측에 스크롤바가 생깁니다
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</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="navi"> <ul class="menu"> <li> <a href="#none">menu-01</a> <div class="sub-menu"> <a href="#none">sub-menu1</a> <a href="#none">sub-menu1</a> <a href="#none">sub-menu1</a> <a href="#none">sub-menu1</a> </div> </li> <li> <a href="#none">menu-01</a> <div class="sub-menu"> <a href="#none">sub-menu1</a> <a href="#none">sub-menu1</a> <a href="#none">sub-menu1</a> <a href="#none">sub-menu1</a> </div> </li> <li> <a href="#none">menu-01</a> <div class="sub-menu"> <a href="#none">sub-menu1</a> <a href="#none">sub-menu1</a> <a href="#none">sub-menu1</a> <a href="#none">sub-menu1</a> </div> </li> <li> <a href="#none">menu-01</a> <div class="sub-menu"> <a href="#none">sub-menu1</a> <a href="#none">sub-menu1</a> <a href="#none">sub-menu1</a> <a href="#none">sub-menu1</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"> <a href="#none"><img src="images/D image/banner-01.png" alt="banner-01"></a> <a href="#none"><img src="images/D image/banner-02.png" alt="banner-01"></a> <a href="#none"><img src="images/D image/banner-03.png" alt="banner-01"></a> </div> </div> <div class="items"> <div class="shortcut"> <a href="#none"><img src="images/D image/shortcut-01.png" alt="shortcut -1"></a> <div class="shortcut-content"> <h3>fkldmsklmclkmdclmd</h3> <p> fdjdoijfijiowejfdnfndsjfndsncncnfdkljfodsjlkcnkndksjhbfkjdshfkdjsnklcmdslkcjndksjhckdsbcjhdsbfihnuwhfeiuhfnjkdnkfjbds <br> <b>202039202</b> </p> </div> <a href="#none"><img src="images/D image/shortcut-02.png" alt="shortcut-02"></a> </div> <div class="news-gallery"></div> </div> </div> </div> <footer> <div class="footer-logo"> <a href="#none"><img src="images/D image/footer-logo.png" alt="footer-logo"></a> </div> <div class="footer-content"> <div class="footer-link"> <a href="#none">djfjdsfjfs</a> <span>|</span> <a href="#none">djfjdsfjfs</a> <span>|</span> <a href="#none">djfjdsfjfs</a> <span>|</span> <a href="#none">djfjdsfjfs</a> <span>|</span> <a href="#none">djfjdsfjfs</a> <span>|</span> <a href="#none">djfjdsfjfs</a> </div> <div class="copyright"> dfjdsfijdiofjodsfodsmnckljdsicjdiosfjodsnflkndkfjgdsfdsfds </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: #000; } a { text-decoration: none; color: #000; } .main-content { display: flex; } .main-content > div { border: 1px solid #000; } .left { width: 200px; } .right { flex: 1; } /* header */ header {} header > div { border: 1px solid #000; } .header-logo { height: 100px; } .navi { height: 400px; } .spot-menu { height: 50px; } /* slide */ .slide { position: relative; } .slide > div { border: 1px solid #000; } .slide-image { height: 400px; } .slide-banner { width: 150px; height: 300px; position: absolute; top: 0; right: 10px; } .slide-banner a {} .slide-banner a img { width: 150px; display: block; } /* shortcut */ .shortcut { height: 200px; display: flex; align-items: center; margin: 0 30px; gap: 50px; } /* news - gallery */ .news-gallery { border: 1px solid #000; height: 250px; } /* footer */ footer { display: flex; } footer > div { height: 120px; box-sizing: border-box; } .footer-logo { width: 200px; padding-top: 15px; box-sizing: border-box; } .footer-content { flex: 1; } .footer-content div { height: 60px; } .footer-link { padding-top: 20px; box-sizing: border-box; } .footer-link a, .footer-link span { color: royalblue; } .footer-link a:hover { text-decoration: underline; } .copyright { padding: 10px 0px; box-sizing: border-box; } 뭐가 문젠질 도저히 모르겠습니다..
-
미해결반응형 웹사이트 포트폴리오(Architecture Agency)
슬릭 슬라이더 dots 보이게 하는 방법 질문 드립니다
오른쪽 사진 밑에 슬릭 dots 보이게 하고 싶은데 어떻게하면 될까요?같은 질문과 답변을 보았지만 해결이 안되어서 다시 질문드려요~위에 history는 dots 보이는데밑에 project photo 부분은 dots가 안보여요 히스토리에서 했던 것 처럼.history-slider .slick-arrow{ display: none !important; } .history-slider .slick-dots li button:before{ color: #fff; font-size: 40px; } .history-slider .slick-dots li { margin: 0; }이런 것 해줘야하나요? 강의 중 섹션 9 - PC 레이아웃 섹션 상세 퍼블리싱(Project Section) - #06(Slick.js 이미지 슬라이더) 마지막 파트입니다
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
D E 유형 슬라이드 구현 방식
css 말고 제이쿼리로는 어떻게 못하나요..? abc 슬라이드 유형을 제이쿼리로 해서 제이쿼리로 연습했는데 영상엔 css 방식으로 나와 있어서 어떻게 해야할 지 모르겠습니다..