묻고 답해요
148만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결웹디자인개발기능사 [2025년] 실기전체 A - F (카톡질문가능)
공지사항과 갤러리 html 폴더 및 파일 문의
안녕하세요공지사항과 갤러리 html 강의를 시청하다가 실습을 하고 싶은데 어떤 폴더와 파일을 사용해야할지 몰라서 문의드립니다.
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
화면이 많이 짤리는데 이유가 뭘까요 ?
<!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%로 해놓고 브라우저 크기를 줄이면 옆으로 움직이는 스크롤바가없이 짤리는데 이유가 뭘가요 ?
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
2. 공지사항, 갤러리 별도로 구성하기(HTML+CSS) html 파일은 어딨나요 ?
■ 질문 남기실 때 꼭! 참고해주세요.- 먼저 유사한 질문이 있었는지 검색해주세요.- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다.질문 하실 때 어떤 유형인지 말씀해주세요. ex) 완성본만 있구 와이어프레임만있는 html파일은 어딨나요 ?
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
각 타입별 이미지 크기 제작 / 주조색&보조색
각 타입별 이미지 크기 제작할 때 가. A,B타입 (width: 1200px, height: 300px) 나. C타입 (width: 800px, height: 350px)로 제작하면 되는데 D,E,F유형에는 100%로 구성되어있는데 전체 몇 px로 구성해서 만들면되는지 궁금합니다. 주조색&보조색의 의미가 궁금합니다...
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
레이아웃을 혼자 플렉스로 하고있는데 레이아웃이 좀 보더를 벗어난거같은데 상관없나요?
■ 질문 남기실 때 꼭! 참고해주세요.- 먼저 유사한 질문이 있었는지 검색해주세요.- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다.질문 하실 때 어떤 유형인지 말씀해주세요. ex) A1 작업하는데 ???이 안됩니다감점사항인가요 ? 이런것두 ?
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
제 느낌대로 레이아웃을 짜봤는데 이렇게 해도 되는건가요 ?
<!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; } 이런식으로 짜도 상관없는건지 물어보고싶습니당.
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
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에 적용한 이유를 모르겠습니다.
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
다운로드한 교재랑 강의 교재가 달라서 너무 불편하네요.
다운로드한 교재 순서대로 진도 나가는 것도 아니라서 매번 교재 어디인지 찾는 것도 불편하고 막상 없는 자료를 찾다 보니 짜증 납니다. 강의 중에 사용 중인 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가 제공되나요?
-
미해결SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 with Figma
활성화 중인 scss 하나만 css 로 컴파일 가능할까요?
동일한 폴더 내에 있는 파일 중 style.scss만 css로 컴파일 하고 싶습니다하단의 Watch Sass 클릭하여 컴파일 진행시 style.scss 뿐 아니라 common.scss도 동시에 css로 컴파일 되어 방법을 찾다 문의 남깁니다 하나의 파일만 컴파일 가능한지 궁금합니다
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
slick slider 이미지 개수
slick slider 로 slideToShow: 4로 해도 화면에는 이미지가 하나 밖에 안떠요 ㅠㅠ 전체 코드 복사해서 올리겠습니다..!
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
calc가아니라 transform : transition을 사용해도 상관없는건가요?
보더 안으로 넣을때 top : calc가아니라 transform : transition을 사용해도 상관없는건가요?
-
해결됨[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
시험시 HTML 작성과 포토샾 작업 중 어느 것을 먼저합니까?
로고, 슬라이드, 갤러리, 배너, 바로가기 이미지 작업 HTML 작성 후에 해야 합니까? 시험지 보고 먼저 제작 해 두어야 합니까?HTML 작성 하다가 중간 중간 제작해야 합니까?
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
이미지는 어디서 구하나요 ?
■ 질문 남기실 때 꼭! 참고해주세요.- 먼저 유사한 질문이 있었는지 검색해주세요.- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다.
