묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
header_logo 부분 질문
header_logo 부분에 "로고의 크기 변경 시, 가로세로 비율(종횡비, aspect ratio)을 유지하여야 한다." 부분이 있습니다. 그냥 포토샵 할 때는 200 x 40 비율로해서 그대로 작성하는지 궁금합니다.
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
넷플릭스 어코디언 예제 질문
클릭했을 때 content가 나오도록 구현하는 과정에서,jQuery를 이용하지 않고 css의 focus 클래스로클릭했을 때 display:none 에서 display:block 으로 바뀌도록 하였는데 눌렀을 때 적용이 되지 않는 이유를 모르겠습니다.
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
제이쿼리 슬라이드제작(2) left : 0 이 왜 들어가는지 모르겠습니다.
slide-items를 애니메이트해서 -1200픽셀만큼 이동시킨후 다시 left 0 은 무슨소린지 모르겠습니다 그러면 첫번째 이미지가 보여야하는게아닌가요 ? 첫번째 이미지가 보여진후 appendTo로 인해서 마지막 요소로 이동해야하는게 정상아닌가요..?
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
4:30초경에 질문이있습니다.
setInterval(function () { $('.slide-item').animate({ left: '-1200px' }, function () { $('.slide-item').css({ left: 0 }); $('.slide-item a:first-child').appendTo('.slide-item'); }); }, 3500); 기존에 자바 개발자라서 코드의 흐름을 파악하는데 약간 어려움이 있습니다. 코드 순서로 따져봤을때, left로 -1200픽셀만큼 이동후 다시 left0으로 돌아오는데,, 이게 약간 이해가 안가는데 이런식이면 제자리 걸음이 아닌가 헷갈리네요. -1200픽셀만큼 이동후 다시 left 0..? left 0에대한 설명이 없어서 뭔지 모르겠네요.
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
sub-menu에 백그라운드 색상을 화이트로 넣어도 뒤에 보더가 보여요.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="/레이아웃css/11_상단드롭다운1.css" /> </head> <body> <div class="container"> <div class="header-container"> <header> <div class="header-logo"></div> <div class="header-navi"> <ul class="menu"> <li> <a href="#none">Menu1</a> <div class="subMenu"> <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">Menu2</a> <div class="subMenu"> <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">Menu3</a> <div class="subMenu"> <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">Menu4</a> <div class="subMenu"> <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> </div> </header> </div> <div class="content-container"> <div class="slide"> <div></div> </div> <div class="items"> <div class="gallery"></div> <div class="banner"></div> <div class="barogo"></div> </div> </div> <div class="footer-container"> <footer> <div class="footer-logo"></div> <div class="footer-navi-copyright"></div> </footer> </div> </div> </body> </html> body { margin: 0; } .header-container { border: 1px solid black; display: flex; justify-content: center; } header { border: 1px solid black; width: 1200px; display: flex; justify-content: space-between; } header > div { border: 1px solid black; height: 100px; } .header-logo { width: 200px; } .header-navi { width: 600px; } .content-container { display: flex; flex-direction: column; align-items: center; } .slide { width: 1200px; border: 1px solid black; } .slide > div { height: 300px; } .items { width: 1200px; display: flex; border: 1px solid black; } .items > div { border: 1px solid black; height: 200px; flex: 1; } .footer-container { border: 1px solid black; display: flex; justify-content: center; } footer { width: 1200px; display: flex; } footer > div { border: 1px solid black; height: 100px; } .footer-logo { width: 200px; } a { text-decoration: none; color: black; } .footer-navi-copyright { width: 1000px; } /* Navigation */ .menu { list-style: none; padding: 0; } .menu > li { text-align: center; width: 150px; float: left; box-sizing: border-box; } .menu > li > a { border: 1px solid black; display: block; } .menu > li > .subMenu > a { display: block; padding: 5px; } .subMenu { border: 1px solid black; background-color: white; }코드 상황은 이러한데 네비게이션 뒤로 자꾸 보더가 보이는데 이걸 어떻게 해결할 수 있을까요 ..?
-
미해결웹디자인기능사 [2024년 합격 99%] 실기전체 A - F
공지사항과 갤러리 html 폴더 및 파일 문의
안녕하세요공지사항과 갤러리 html 강의를 시청하다가 실습을 하고 싶은데 어떤 폴더와 파일을 사용해야할지 몰라서 문의드립니다.
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
화면이 많이 짤리는데 이유가 뭘까요 ?
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="/레이아웃css/08_공자사항갤러리탭구성.css" /> </head> <body> <div class="container"> <div class="header-inner"> <header> <div class="header-logo"></div> <div class="header-navi"></div> </header> </div> <div class="content-inner"> <div class="slide"> <div></div> </div> <section class="items"> <article class="news-gallery"> <div class="tab-inner"> <div class="btn"> <a href="#none" class="active">공지사항</a> <a href="#none">갤러리</a> </div> <div class="tabs"> <div class="tab1"> <a href="#none" >SMS 발송 서비스 개선작업 <span>2020.01.09</span> </a> <a href="#none" >휴대폰 인증 서비스 개선 작업 <span>2020.01.07</span> </a> <a href="#none" >카드사 부분 무이자 할부 이벤트 <span>2019.12.31</span> </a> <a href="#none" >올앳 시스템 작업 안내 <span>2019.12.20</span> </a> <a href="#none" >휴대폰 결제 시스템 작업 안내 <span>2019.12.20</span> </a> </div> <div class="tab2"> <a href="#none"> <img src="/IMAGES/gallery-01.jpg" alt="" /> </a> <a href="#none"> <img src="/IMAGES/gallery-02.jpg" alt="" /> </a> <a href="#none"> <img src="/IMAGES/gallery-03.jpg" alt="" /> </a> </div> </div> </div> </article> <article class="banner"></article> <article class="barogo"></article> </section> </div> <div class="footer-inner"> <footer> <div class="copyright"></div> <div class="sns-family"> <div></div> <div></div> </div> </footer> </div> </div> <script src="https://code.jquery.com/jquery-1.12.4.js" integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU=" crossorigin="anonymous" ></script> <script src="/script/08_공지사항갤러리탭구성.js"></script> </body> </html> body { margin: 0; } .container { } .header-inner { background-color: #ddd; display: flex; justify-content: center; } header { border: 1px solid black; width: 1200px; display: flex; justify-content: space-between; box-sizing: border-box; } .header-logo { width: 200px; height: 100px; border: 1px solid black; box-sizing: border-box; } .header-navi { width: 600px; height: 100px; border: 1px solid black; box-sizing: border-box; } .content-inner { display: flex; flex-direction: column; align-items: center; } .slide { border: 1px solid black; width: 1200px; box-sizing: border-box; } .slide div { height: 300px; box-sizing: border-box; } .items { display: flex; } .items > article { border: 1px solid black; height: 200px; box-sizing: border-box; } .news-gallery { width: 500px; } .banner { width: 350px; } .barogo { width: 350px; } .footer-inner { background-color: #ddd; display: flex; justify-content: center; } footer { width: 1200px; display: flex; } footer > div { height: 100px; border: 1px solid black; box-sizing: border-box; } .copyright { width: 1000px; } .sns-family { width: 200px; } .sns-family > div { height: 50px; border: 1px solid black; box-sizing: border-box; } .tab-inner { width: 97%; margin: auto; } .btn { font-size: 0; } .btn a { font-size: 16px; border: 1px solid black; display: inline-block; width: 100px; text-align: center; padding: 3px; border-radius: 5px 5px 0 0; background-color: #ddd; cursor: pointer; border-bottom: none; margin-bottom: -1px; text-decoration: none; color: #000; } .btn a.active { background-color: #fff; } .tabs { } .tabs > div { border: 1px solid #000; height: 155px; padding: 0 10px; } .tab1 { } .tab1 a { display: block; text-decoration: none; color: #000; border-bottom: 1px solid black; padding: 5px; } .tab1 a:last-child { border-bottom: none; } .tab1 a span { float: right; } .tab2 { display: none; justify-content: center; align-items: center; } .tab2 img { width: 110px; padding: 10px; } // tap Content $('.btn a:first-child').click(function () { $('.tab1').show(); $('.tab2').hide(); $('.btn a:first-child').addClass('active'); $('.btn a:last-child').removeClass('active'); }); $('.btn a:last-child').click(function () { $('.tab1').hide(); $('.tab2').show().css('display', 'flex'); $('.btn a:last-child').addClass('active'); $('.btn a:first-child').removeClass('active'); }); 코드 사항은 이러합니다. 근데 화면 축소를 하면 다보이는데 100%로 해놓고 브라우저 크기를 줄이면 옆으로 움직이는 스크롤바가없이 짤리는데 이유가 뭘가요 ?
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
2. 공지사항, 갤러리 별도로 구성하기(HTML+CSS) html 파일은 어딨나요 ?
■ 질문 남기실 때 꼭! 참고해주세요.- 먼저 유사한 질문이 있었는지 검색해주세요.- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다.질문 하실 때 어떤 유형인지 말씀해주세요. ex) 완성본만 있구 와이어프레임만있는 html파일은 어딨나요 ?
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
각 타입별 이미지 크기 제작 / 주조색&보조색
각 타입별 이미지 크기 제작할 때 가. A,B타입 (width: 1200px, height: 300px) 나. C타입 (width: 800px, height: 350px)로 제작하면 되는데 D,E,F유형에는 100%로 구성되어있는데 전체 몇 px로 구성해서 만들면되는지 궁금합니다. 주조색&보조색의 의미가 궁금합니다...
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
레이아웃을 혼자 플렉스로 하고있는데 레이아웃이 좀 보더를 벗어난거같은데 상관없나요?
■ 질문 남기실 때 꼭! 참고해주세요.- 먼저 유사한 질문이 있었는지 검색해주세요.- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다.질문 하실 때 어떤 유형인지 말씀해주세요. ex) A1 작업하는데 ???이 안됩니다감점사항인가요 ? 이런것두 ?
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
제 느낌대로 레이아웃을 짜봤는데 이렇게 해도 되는건가요 ?
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="/레이아웃css/02_레이아웃가로100.css" /> </head> <body> <div class="container"> <div class="header-container"> <header> <div class="header-logo"></div> <div class="navi"></div> </header> </div> <div class="slide-container"> <div class="slide"> <div></div> </div> </div> <div class="items-container"> <div class="items"> <div class="item1"></div> <div class="item2"></div> <div class="item3"></div> </div> </div> <div class="footer-container"> <footer> <div class="footer-logo"></div> <div class="footer-box"> <div class="footer-navi"></div> <div class="copyright"></div> </div> </footer> </div> </div> </body> </html> -------------------------------------------- .container { } .header-container { border: 1px solid red; } header { margin: auto; border: 1px solid black; height: 100px; width: 1200px; } header > div { border: 1px solid black; height: 100px; box-sizing: border-box; } .header-logo { width: 200px; float: left; } .navi { width: 1000px; float: right; } .slide-container { } .slide { border: 1px solid black; margin: auto; width: 1200px; height: 300px; } .items-container { overflow: hidden; } .items { border: 1px solid black; width: 1200px; margin: auto; } .items > div { border: 1px solid black; width: 400px; height: 200px; float: left; box-sizing: border-box; } .footer-container { border: 1px solid red; } footer { overflow: hidden; border: 1px solid black; width: 1200px; margin: auto; } footer > div { border: 1px solid black; height: 100px; box-sizing: border-box; } .footer-logo { width: 200px; float: left; } .footer-box { width: 1000px; float: right; } .footer-box > div { height: 50px; border: 1px solid black; } 이런식으로 짜도 상관없는건지 물어보고싶습니당.
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
content-inner는 왜필요한건가요 ??
감이 좀 잘 안잡히는데.. contentinner를 없애고 해도 레이아웃이 잘 나와서,,,,
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
이번 강의에선 display flex가 무조건 적으로 필요한건가요 ?
square에다가 포지션 absolute를 주고 수직중앙 수평중앙으로하려고했더니 span이 중앙이아닌 우측하단으로 취우쳐져있고 transform으로 수직중앙 시키고 키프레임 애니메이션으로 돌릴려고하니,, transform이 중첩되어있어서 또 걸리네요. flex를 꼭 사용해야할까요 ?
-
미해결반응형 웹사이트 포트폴리오(Architecture Agency)
안녕하세요. 질문있어서 조심스레 글을 올려봅니다.
page-scroll-effect를 맨 상단 비주얼부분에만 적용하고나머지 section 들은 높이값을 갖도록 하고싶은대요.혹시 알수 있을까요? 말주변이 없어서 아래 이미지를 그렸습니다. ㅠㅠ
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
active 관련 질문
폰트어썸으로 라디오버튼과 체크박스를 커스텀 하는 강의에서, checked 가상클래스는 input[type=checkbox] 에 적용하였으나 (체크박스를 누르는 것이므로 active 또한 input[type=checkbox]에 적용하면 자연스럽다고 생각하여서)active는 label에 적용한 이유를 모르겠습니다.
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
다운로드한 교재랑 강의 교재가 달라서 너무 불편하네요.
다운로드한 교재 순서대로 진도 나가는 것도 아니라서 매번 교재 어디인지 찾는 것도 불편하고 막상 없는 자료를 찾다 보니 짜증 납니다. 강의 중에 사용 중인 PPT도 올려주시면 좋겠습니다.
-
해결됨자바스크립트+jQuery 기초부터 실무까지 : 기초 Part.2
clearInterval() 일반함수 풀이
setInterval() 으로 1초가 계속 증가하는건 입력했는데 stop 버튼을 누르면 증가하는 숫자가 멈추게 하는 부분이 도저히 해결이 되지 않습니다. 익명함수로 풀이 하는건 해결을 했는데 이걸 전부 일반함수로 풀이 하는 법을 모르겠어요
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
checked 가상클래스에서 transform 속성을 사용할 때 관련 질문입니다.
'확장선택자 실전 퍼블리싱 5' 강의에서 .heading .text1 을 translateY 로 위치를 이동시켰을 때의 경우 다른 라디오 버튼을 눌렀을 때 이동했던 .text1 이 원래 위치로 돌아가는 모션이 보였는데, 이 강의에서 h1을 이동시켰을 경우에는 이동했던 h1이 이동한 위치에 그대로 머물러 있는 이유를 모르겠습니다.
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
부모요소에 자식요소가 겹쳐지는데 이유가 뭔가요?
<!DOCTYPE html><html lang="ko"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, inital-scale=1.0"> <script src="jquery-3.7.1.min.js"></script> <title></title><style> <!-- .parent{ position:relative; width:800px; height:800px; border: 1px solid #ddd; } .child{ position:absolute; /*수직수평중앙 시작*/ left:50%; top:50%; transform:translate(-50%,-50%); /*수직수평중앙 끝*/ background-color:skyblue; width:100px; height:100px; } --> .parent{ position:relative; width:600px; height:300px; border: 5px solid red; } .child{ position:absolute; top:100%; left:100%; background-color:skyblue; width:150px; height:100px; } </style></head><body> <!-- <div class="parent"> <div class="child"></div> </div> --> <div class="parent"> <div class="child"></div> </div></body></html>
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
강의 내용 pdf가 제공되나요?
강의 내용 pdf가 제공되나요?
