46,200원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 해결됨HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
p태그가 계속 보여요
쌤이 해주신대로 따라했는데 라이브서버로 켰을 때 p태그가 계속 보여요 ㅠㅠ 무슨 문제일까요?그리고 원래 쓰던 제이쿼리를 들어가보니 이렇게 나오는데 이것때문에 제이쿼리가 실행이 안되는걸까요?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
다시 질문 드립니다 ㅠㅠ CSS 키프레임 애니메이션 활용한 실전 예제 제작 01(원형 크기 변경 로딩 애니메이션)
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>도형 로딩 애니메이션</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="loading"> <span></span> <span></span> <span></span> </div> </body> </html> /* Google Web Font */ @import url('http://fonts.googleapis.com/css?family=Raleway&display=swap'); body { font-family: 'Raleway', sans-serif; line-height: 1.5em; margin: 0; font-weight: 300; display: inline; justify-content: center; align-items: center; height: 100vh; } a { text-decoration: none; } .loading {} .loading span { display: inline-block; width: 20px; height: 20px; background-color: gray; border-radius: 50%; animation: loading 1s linear infinite; } .loading span:nth-child(1) { animation-duration: 0s; background-color:crimson; } .loading span:nth-child(2) { animation-duration: 0.2s; background-color:dodgerblue; } .loading span:nth-child(3) { animation-duration: 0.4s; background-color:royalblue; } @keyframes loading { 0% { opacity: 0; transform: scale(0.5); } 50% { opacity: 1; transform: scale(0.5); } 100% { opacity: 0; transform: scale(0.5); } }이렇게 작성했는데 go live 화면에선 이렇게 뜨고 애니메이션이 안나와요.. ㅠㅠ 뭐가 문제일까요??? 몇주동안 안되요..
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
도형 로딩 애니메이션 질문입니다
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>도형 로딩 애니메이션</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="loading"> <span></span> <span></span> <span></span> </div> </body> </html>/* Google Web Font */ @import url('http://fonts.googleapis.com/css?family=Raleway&display=swap'); body { font-family: 'Raleway', sans-serif; line-height: 1.5em; margin: 0; font-weight: 300; display: flex; justify-content: center; align-items: center; height: 100vh; } a { text-decoration: none; } .loading {} .loading span { display: inline-block; width: 20px; height: 20px; background-color: gray; } .loading span:nth-child(1) {} .loading span:nth-child(2) {} .loading span:nth-child(3) {} 지금 이 상태인데 화면에 아무것도 나타나지 않습니다. 이렇게 뜨는데 뭐가 문제일까요?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
도형 로딩 애니메이션 질문입니다
이렇게 뜨는데 뭐가 문제일까요.. go live 화면에서도 안보이고 문제가 뭔지 모르겠어요 ㅠ
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
박스모델할때 크롬에서 계속 오류가 나오네요
border로 박스를 만들고난 후 크롬에서 확인하면 밑에 빨간줄이나오는데 어떻게 처리해야 하나요박스모델에서 계속 저오류가 나오고 있네요...
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
logo와 video의 html 순서 문제
안녕하세요, 강의 영상에서 페이지의 요소들을 모두 position 속성을 이용해 배치할거라 html 태그의 순서는 상관없다고 하셔서 시험삼아 logo 요소를 video 요소의 앞에 배치시켜봤습니다. 그랬더니 아래 화면처럼 logo 요소가 video의 위에 위치하고 z-index를 주거나 배경색을 transparent로 설정해도 바뀌지 않더라고요.로고가 비디오 위에 오는건 html 태그의 순서의 영향이 있는거 같은데, 그러면 실제 웹사이트를 만들때도 html 태그들의 순서를 고려해서 배치해야 하나요? 사용한 html와 css 스크립트는 댓글에 첨부했습니다
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
수업 이미지 파일
안녕하세요 선생님 강의에서 나오는 이미지 파일은 어디서 다운 받을수 있는지요??????
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
input 요소 높이값 부여 관련 질문
실전 퍼블리싱 제작 part2의 배경이미지 풀스크린 검색창 강의를 듣고 있습니다.input 요소에 높이값을 부여했더니 첨부한 스샷과 같이 text input과 submit input의 위치가 어긋나는데요, 어떤 이유에서 이러는건지 잘 모르겠습니다.CSS의 다른 속성들은 모두 강의 내용과 동일하게 했고, 두 input 요소에 공통으로 높이값만 추가한 상태입니다. 감사합니다
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
CSS 포지셔닝(clear) 관련 질문입니다.
float속성을 상속받아서 마지막 div는 제일 위로 올라가서 확인이 안된다고 하셨는데질문1) 제일 위로 올라간 이유가있나요?질문2) float속성을 상속받는다고 하셨는데 left , right둘다 상속받는건가요 아니면 마지막에 설정된 right만 상속받는건가요?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
인라인 요소 관련 질문입니다.
퍼블리싱의 모든것 인라인 요소 , 블록요소 , 인라인 블록 요소편에서인라인 요소는 크기값을 갖을수 없다고 했는데CSS로 HTML가로배치편에서 실습하실때 span태그에 width와 height값이 적용되는데 이유를 알수 있을까요?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
넷플릭스 예제 제이쿼리 동작 안먹는데 뭐가 문제일까요?
저렇게 두줄 이상 동작 넣을 시에 아예 안먹히네용 ㅠㅠ$(function(){ $('.accordion .title').click(function(){ $(this).next().stop().slideToggle() })})만 작성했을 때는 정상동작되구요 .. 뭐가 문제일까요 ??
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
질문 드립니다..
스크립트에fade: true를 하면 그림처럼 뒤에 있는 요소들은 안 나오는데 어디가 틀렸을까요? .. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <!-- slick.js --> <link rel="stylesheet" href="slick/slick-theme.css"> <link rel="stylesheet" href="slick/slick.css"> <script src="slick/slick.js"></script> <!-- <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/> <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> --> <link rel="stylesheet" href="01.slickslider-contents-slider.css"> </head> <body> <div class="myslider"> <div>your content1</div> <div>your content2</div> <div>your content3</div> <div>your content4</div> <div>your content5</div> <div>your content6</div> <div>your content7</div> <div>your content8</div> </div> <script> $('.myslider').slick({ infinite: true, slidesToShow: 4, slidesToScroll: 4, autoplay: true, autoplaySpeed: 2000, speed: 2000, fade: true, cssEase: 'linear', dots: true, responsive: [ { breakpoint: 1024, settings: { slidesToShow: 3, slidesToScroll: 3, infinite: true, dots: true } }, { breakpoint: 600, settings: { slidesToShow: 2, slidesToScroll: 2 } }, { breakpoint: 480, settings: { slidesToShow: 1, slidesToScroll: 1 } } // You can unslick at a given breakpoint now by adding: // settings: "unslick" // instead of a settings object ] }); </script> </body> </html>body { margin: 0; box-sizing: border-box; background-color: pink; } .myslider { width: 800px; margin: auto; } .myslider .slick-arrow { border: 1px solid #000; display: none !important; } .myslider .slick-dots { border: 1px solid #000; /* display: none !important; */ bottom : 5px; } .myslider .slick-dots li button:before{ font-size: 15px; } .myslider div { border: 1px solid #000; height: 300px; background-color: #ddd; } @media (max-width: 768px){ .myslider { width: 100%; } }
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
관련 영상은 어디있나요~?
더블 보더 다음인 막대 그래프에 대한 영상이 없는데어디서 확인할 수 있나요?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
연습 파일은 어디에 있나요?
안녕하세요 연습파일을 다운로드 받고 싶은데요..유튜브 영상에서 연습파일 다운로드를 못찾았습니다.. 어디에 있을까요?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
강의자료 텍스트 파일 마지막 줄에 있는 문장 질문드립니다
안녕하세요.. <button onclick="javascript:location.href='http://www.daum.net', '_blank'">다음사이트 바로가기</button> 여기서 _blank 는 무엇을 의미하나요? 그리고 쌍따옴표 안에 맨 앞에 javascript: 는 붙여도 되고 안 붙여도 되는걸까요??
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
질문 드립니다..
안녕하세요.. 궁금한점이 있어서 질문드립니다..밀리의 서재 홈페이지에서 검사를 눌러봤는데div 다음 data-v-003e81a0 이 부분은 어떤 걸 의미하는지요? 속성명="값" 이렇게 안쓰고 저렇게 쓸 수도 있나요?그리고 p태그 아래에 글자들에 쌍 따옴표로 묶어준 것도 왜 인지 궁금합니다.. 검사 화면에는 쌍따옴표가 있는데 실제 화면에는 쌍따옴표가 안뜨는건 왜 그럴까요..?https://www.millie.co.kr/v3/brand/update?utm_source=google&utm_medium=cpc&utm_campaign=pc&utm_content=brand&utm_term=%2B%EB%B0%80%EB%A6%AC%EC%9D%98%2B%EC%84%9C%EC%9E%AC%2B&gad_source=1&gclid=Cj0KCQiA-62tBhDSARIsAO7twbb3uOaPxtCl7MI2dexTMHLKLnXTEK9kaIQLua7WRA7sAHVtG_zOt70aAqWJEALw_wcB 그리고 여기서 쓰신 확장 프로그램 이름도 알려주실수 있으실까요..?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
질문입니다..
선생님.. 텍스트 복사하러 넷플릭스 사이트에 갔는데..궁금한 것이 생겨서 여쭤봅니다..https://www.netflix.com/kr/ newletter div 부분에원래 클릭 하지않으면 아래 화면이 뜨고이메일을 입력하려면고 클릭하면 아래 화면처럼placeholder가 사라지고 background 텍스트가 되는것 같은데.. 이렇게 만들려면 어떻게 하면 되나요..?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
제이쿼리 연결을 어떻게 하라는건지 이해를 전혀 못했습니다.
제이 쿼리 연결, 제일 처음 강의에서 파일을 왜 새로 만들고, 왜 첫번째 파일 이름은 3.2어쩌구고 Custom파일에 왜 쓰는건지,연결은 아래 바디 맨 마지막에 3.어쩌고를 먼저 쓰고그 다음에 custom 쓰라는 부분만 이해하고인터넷 찾아보니 무슨 링크를 찾아서 넣고 뭐 방법이 여러가지인데 무슨 말인지 당췌 이해가 안갑니다…설명이 좀 필요할 것 같아요…도와주세요
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
영상이 반복되면서 다시 시작할 때 검정화면이 잠깐 나오는 것 같은데 혹시 없애는 방법이 있을까요?
안녕하세요.. MP4 영상 소스에는 검정화면이 없는 것 같은데,소스에 넣으면 검정 화면이 나타나는 것 같습니다,..인터넷이 느려서 그런걸까요..?영상이 반복되면서 다시 시작할 때 검정화면이 잠깐 나오는 것을혹시 없애는 방법이 있을까요?
- 해결됨HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
disabled 디자인 이렇게 하면 될까요?
안녕하세요... 강의 3분 8초에 나오는 체크된 부분 퍼블리싱에 대해 질문드립니다.. 라이브 서버로는 되는 것 같기는 한데혹시 더 낫게 하는 방법이나 실무에서 더 선호되는 방법이 있다면 알려주시면 감사하겠습니다... <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://kit.fontawesome.com/c0fe093804.js" crossorigin="anonymous"></script> <link rel="stylesheet" href="02.fontawesome-active.css"> </head> <body> <form> <input type="checkbox" id="chk1" checked> <label for="chk1">HTML</label> <input type="checkbox" id="chk2"> <label for="chk2">CSS</label> <input type="checkbox" id="chk3"> <label for="chk3">Javascript</label> <input type="checkbox" id="chk4" disabled> <label for="chk4">UIKit</label> </form> </body> </html> /* Google Web Fonts CDN Raleway */ @import url('https://fonts.googleapis.com/css?family=Raleway&display=swap'); /* Google Web Fonts CDN Noto Sans KR */ @import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:300,400,500,700,900&display=swap'); @import url('https://kit.fontawesome.com/c0fe093804.js" crossorigin="anonymous'); body{ font-family: 'Raleway', sans-serif; /* font-family: 'Noto Sans KR', sans-serif; */ color: #222; line-height: 1.5em; font-weight: 300; margin: 0; font-size: 30px; display: flex; justify-content: center; align-items: center; height: 100vh; } a{ color: #222; text-decoration: none; font-size: 12px; } form input[type=checkbox]{ display: none; } form label{ display: block; margin-bottom: 3px; } form label:before{ content: '\f00c'; text-align: center; line-height: 30px; font-family: fontawesome; margin-right: 8px; border: 1px solid #292929; color: transparent; display: inline-block; width: 30px; height: 30px; vertical-align: middle; padding: 2px; border-radius: 3px; font-size: 30px; transition: 0.2s; } form input[type=checkbox]:checked + label:before{ background-color: crimson; color: #fff; border: 1px solid crimson; /* border-color: transparent; */ } /* 눌리는 효과 */ form input[type=checkbox] + label:active:before{ transform: scale(0); } form input[type=checkbox]:disabled + label:before{ border: 1px solid rgba(220, 20, 60, 0.233); background-color: rgba(220, 20, 60, 0.233); color: #fff; } form input[type=checkbox]:disabled + label:active:before{ transform: scale(100%); }