개발자147 마우스 이펙트 01 마우스 이펙트01 마우스의 위치값 표시 , 특정 글자에 갖대 대면 애니메이션? 이 나온다. 원본 소스 보기 원본 페이지 보기 HTML <section id="mouseType"> <div class="mouse__cursor"></div> <div class="mouse__wrap"> <p>The <span class="style1">future</span> <span class="style2">depends</span> on What we do in the<span class="style3"> present.</span> </p> <p><span class="style4">미래</span>는 현재.. 2022. 9. 5. 슬라이드 유형 01 슬라이드 유형 html ir 효과를 써서 화면에는 보이지 않도록 숨김 처리 했습니다. 코드 보기 <section id="sliderType" class="slder__wrap"> <h2>슬라이드 영역</h2> <div class="slider__inner"> <div class="slider"> <div class="silder__img"> <div class="desc"> <span>DEVELOPER</span> <h3>NEW PROJECT</h3> <p>너무 무리하지 말아요! 이미 당신은 잘하고 있고!<br> 앞으로도 잘 할 수 있어요! </p> <div class="btn"> <a href.. 2022. 9. 5. 배너 유형 01 배너 유형 html 코드 보기 <section id="bannerType" class="banner__wrap"> <h2 class="blind">배너 영역</h2> <div class="banner__inner"> <h3 class="title">유튜버 웹보이</h3> <p class="desc"> 더 다양한 강의는 유튜브를 통해 제공하고 있습니다. <a href="#" title="유튜브 페이지로 이동"></a> </p> <span class="small">배너 유형01</span> </div> </section> <!--bannerType--> <section id="imgTextType".. 2022. 9. 5. 푸터 유형 01 푸터 유형 html 코드 보기 <footer id="footerType" class="footer__wrap nexon section gray"> <h2 class="blind">푸터 영역</h2> <div class="footer__inner container"> <div class="footer__menu"> <div> <h3>사이트</h3> <ul> <li><a href="#">웹 표준 사이트</a></li> <li><a href="#">웹 표준 사이트</a></li> <li><a href="#">웹 표준 사이트</a></li> <li><a.. 2022. 9. 5. mouseenter / movesover 차이점 mouseenter / movesover 차이점 mouseenter 자바스크립트 이벤트 Explorer전용 이벤트 입니다. mouseenter mouseenter는 직접 이벤트를 걸지않은 자식요소에 마우스 포인터가 와도 발생한다. See the Pen Untitled by 이유나 (@fkdldhs8484) on CodePen. movesover mouseenter는 오로지 자기 자신에게 마우스 포인터가 와야만 발생한다. See the Pen Untitled by 이유나 (@fkdldhs8484) on CodePen. 2022. 9. 5. prettier 설정하는 방법 prettier 설정하는 방법 prettier 는 VSCode에서 코드를 자동으로 이쁘게 정렬해준다. 먼저 VSCode에서 탭에서 검색한후 설치해준다. 설정에 들어간후 'editor format on save'를 검색한후, Editor: format On Save 에 있는 박스에 체크 표기를 해준다. 만약 체크를 해주었는데도 자동 정렬이 안되면 '단축키 f1'를 눌러 검색창에 'json' 를 검색하면 이 창이 뜹니다. 이렇게 코드가 뜨는데(설정 많이 건드신 분은 더 많이 나올수도 있음.)... 그 밑에 추가해주시면 됩니다. 2022. 9. 5. 애니메이션03 애니메이션 03 회전하면서 도는 애니메이션을 만들어 보자! See the Pen Untitled by 이유나 (@fkdldhs8484) on CodePen. HTML <div class="wrapper"> <div></div> </div> <div class="wrapper"> <div></div> </div> <div class="wrapper"> <div></div> </div> <div class="wrapper"> <div></div> </div> <div class="wrapper"> <div></div> </div> CSS * { box-sizing: .. 2022. 9. 3. 스타일 관련 메서드 스타일 관련 메서드 css() 메서드 실행 분류 형식 취득 &("div").attr("width"); 생성, 변경 &("div").css("background-color", "red").css("padding", "10px"); &("div").css({"background-color", "red", padding: "10px" }); 콜백 함수 &("div").css("width", function(index, w) { // index는 각 div 요소의 index 0, 1, 2 // w는 각 div요소의 width 값 return css 속성 // 각 div 요소의 css 속성을 변경합니다. }); ... <div>내용</div> <div>내용</div> <div>내용</div>.. 2022. 9. 3. 속성 관련 메서드 속성 관련 메서드 attr() 메서드 선택한 요소의 attribute(속성)를 선택, 생성, 변경할 수 있습니다. 실행 분류 형식 취득 &("a").attr("href"); 생성, 변경 &("a").attr("href", "http://icoxpublih.com").attr("target", "_blank"); &("a").attr({href: "http://icoxpublih.com", target: "_blank"}); 콜백 함수 &("a").attr("href", function(index, h) { // index는 각 a 요소의 index 0, 1, 2 // h는 각a요소의 href 속성 return attribute(속성) // 각 a 요소의 속성을 생성 및 변경합니다. }); ... <a.. 2022. 9. 3. 클래스 관련 메서드 addClass() 메서드 요소에 class 속성을 추가합니다. 실행 분류 형식 추가 $("div").addClass("클래스명"); 콜백 함수 $("div").addClass(function(index, className){ // index는 각 div 요소의 index 0, 1, 2 // className 은 각 div에 class속성 return class 속성 // 각 div에 class속성을 추가합니다. }); .... <div>내용1</div> <div>내용2</div> <div>내용3</div> See the Pen Untitled by 이유나 (@fkdldhs8484) on CodePen. removeClass() 메서드 요소에 class 속성을 제거합니다. 실행 분류.. 2022. 9. 3. 슬라이드 이펙트 03 슬라이드 이펙트03 원본 소스 보기 원본 페이지 보기 HTML <section id="sliderType01"> <div class="slider__wrap"> <div class="slider__img"> <div class="slider__inner"> <div class="slider"><img src="../assets/img3/effect_bg11-min.jpg" alt="이미지"></div> <div class="slider"><img src="../assets/img3/effect_bg12-min.jpg" alt="이미지"></div> <div class="slider"><img src="../assets/im.. 2022. 9. 1. 헤더 유형 헤더 유형 <header> 태그는 문서나 특정 섹션의 헤더를 정의할때 사용합니다. 원본 소스 보기 원본 사이트 보기 HTML 코드 보기 <header id="headerType" class="header__wrap score"> <div class="header__inner"> <div class="header__logo"> <a href="#">webem <em>site</em></a> </div> <div class="header__menu"> <ul> <li><a href="#">헤더 영역</a></li> <li><a href="#">슬라이드 영역</a></li> &l.. 2022. 9. 1. 이미지 텍스트 유형 이미지 텍스트 유형 원본 소스 보기 원본 사이트 보기 HTML 코드 보기 <section id="imgTextType" class="imgText__wrap section NexonLv1Gothic gray"> <h2 class="blind">유용한 사이트 살펴보기</h2> <div class="imgText__inner container"> <div class="imgText__txt"> <span>이미지 텍스트 유형 01</span> <h3>유용한 사이트 살펴보기</h3> <p>웹디자이너, 웹 퍼블리셔, 프론트앤드 개발자를 위한 유용한 사이트입니다.</p> <ul> <li><a href="/">튜토리얼.. 2022. 9. 1. 요소 크기 매서드 정리 위치 및 크기를 표현하는 속성 및 메서드 요소 속성 크기 및 위치 element.clientWidth() 인라인 요소나 CSS 상에 존재하지 않는 요소에 대해서는 0을 나타내고, 그렇지 않다면 엘리먼트의 내부 너비를 픽셀로 나타냅니다. (마진/보더 미포함) element.clientHeight() 엘리먼트의 내부 높이를 픽셀로 반환합니다. 여백O 스크롤바 높이, 경계선, 외부 여백X element.clientTop() 요소의 Y축값 너비(픽셀)입니다.(부모기준) element.clientLeft() 엘리먼트의 X축값 너비 (픽셀 단위)입니다. (부모기준) element.offsetWidth() 요소의 레이아웃 너비를 정수로 반환합니다. (보더/패딩 포함) element.offsetHeight() 요소의 .. 2022. 9. 1. 텍스트 유형 03 텍스트 유형 03 원본 소스 보기 원본 사이트 보기 html 코드 보기 <section id="textType03" class="text__wrap NexonLv2Gothic section"> <h2>애견카페 후기</h2> <p>애견카페에 있는 멤버를 소개합니다.</p> <div class="text__inner container"> <article class="text"> <div class="text__header"> <p class="desc">애견카페 가고 싶다.애견카페 가고 싶다.애견카페 가고 싶다.애견카페 가고 싶다.애견카페 가고 싶다.애견카페 가고 싶다.애견카페 가고 싶다.애견카페 가고 싶다.애견카페 가고 싶다.애견카페 가고 싶.. 2022. 9. 1. 텍스트 유형 02 텍스트 유형 02 원본 소스 보기 원본 사이트 보기 html 코드 보기 <section id="textType02" class="text__wrap section gmarket"> <div class="text1"> <p class="icon1">FRONTEND</p> <h2>강아지에 <br>대하여...</h2> <p>시대가 지나도 늘 함께 하는 반려동물!<br> 반려동물에 대하여 알아보자! 여러분도 함께! </p> </div> <div class="text__inner"> <article class="text__box"> <p class="icon2"></p> <h3 class="tit">.. 2022. 9. 1. 텍스트 유형 01 텍스트 유형 01 원본 소스 보기 원본 사이트 보기 html 코드 보기 <section id="textType01" class="text__wrap NexonLv1GothicLow section"> <p>텍스트 유형01</p> <h2>귀여운 우리집 강아지</h2> <div class="text__inner container"> <article class="text"> <div class="icon"></div> <h3 class="tit">귀여운 강아지</h3> <p class="desc">강아지 귀여워, 강아지 귀여워, 강아지 귀여워, 강아지 귀여워, 강아지 귀여워, 강아지 귀여워, 강아지 귀여워, 강아지 귀여워 &l.. 2022. 8. 31. 탐색 선택자 jQuery 탐색 선택자 탐색 선택자를 사용하면 기본 선택자로 선택한 요소 중 원하는 요소를 좀 더 정확하게 선택할 수 있습니다. 선택자 종류 설명 children() $("div").children() div 요소의 자식 요소를 선택합니다. parent() $("p").parent() p 요소의 부모 요소를 선택합니다. parents() $("p").parents() p 요소의 부모가 되는 모든 div 요소를 선택합니다. closest() $("p").closest(div) p 요소의 부모가 되는 첫 번째 div 요소를 next() $("div.m").next() div.m 요소의 다음 요소를 선택합니다. nextAll() $("div.m").nextAll() div.m 요소의 다음 요소들을 모두 선택.. 2022. 8. 30. 필터 선택자 jQuery 필터 선택자 선택자에 ':'이 붙은 선택자를 필터 선택자라고 합니다. 선택자 종류 설명 :even $("tr:even") tr 요소 중 짝수 행만 선택합니다. :odd $("tr:odd"]) tr 요소 중 홀수 행만 선택합니다. :first $("td:first"]) 첫 번째 td 요소를 선택합니다. :last $("td:last") 마지막 td 요소를 선택합니다. :header $(":header") 헤딩(h1~h6) 요소를 선택합니다. :eq() $("li:eq(0)") index가 0인 li 요소를 선택합니다. index는 0번이 첫 번째 요소입니다. :gt() $("li:gt(0)") index가 0보다 큰 li 요소들을 선택합니다. .lt() $("li:lt(2)"]) index가 .. 2022. 8. 30. 속성 선택자 jQuery 속성 선택자 선택자 종류 설명 요소[속성] $("span[class]") span 요소 중 class 속성을 가지고 있는 요소를 선택합니다. 요소[속성='값'] $("span[class='abc']) span 요소 중 class가 'abc'인 요소를 선택합니다. 요소[속성!='값'] $("span[class!='abc']) span 요소 중 class가 'abc'가 아닌 요소를 선택합니다. 요소[속성~='값'] $("span[class~='abc']) span 요소 중 class가 'abc'를 포함하는 요소를 선택합니다. 'abc' 앞뒤로 연결된 문자가 없어야 합니다. 'bg abc'는 선택되나 'bg_abc'는 선택되지 않습니다. 요소[속성*='값'] $("span[class*='abc'].. 2022. 8. 30. 기본선택자 jQuery 기본 선택자 jQuery는 html 요소와 관련된 기능구현이 많아 그만큼 CSS와 매우 밀접한 관계가 있습니다. 선택자 종류 설명 태그 선택자 $("p") p요소를 선택합니다. id 선택자 $("#gnb") #gnb 요소를 선택합니다. class 선택자 $(".logo") .logo인 요소를 선택합니다. 자식 선택자 $("#gnb > ul > li") #gnb의 자식 요소의 자식 요소 li를 선택합니다. 하위 선택자 $("#gnb ul") #gnb의 하위에 있는 모든 ul요소를 선택합니다. 인접 선택자 $("#visual + #content") #visual 다음에 오는 #content 요소를 선택합니다. 형제 선택자 $("#visual ~ #footer") #visual의 형제요소 #foo.. 2022. 8. 30. 애니메이션 02 애니메이션 02 돌고 도는 애니메이션을 만들어 보자! See the Pen Untitled by 이유나 (@fkdldhs8484) on CodePen. HTML <div class="loading"> <span class="circle1"></span> <span class="circle2"></span> </div> CSS body { height: 100vh; background-image: linear-gradient(-60deg, #ff5858 0%, #f09819 100%) } .loading { position: absolute; left: 50%; top: 50%; width: 20px; height: 150px; animation: loading 0.5s ease 10.. 2022. 8. 29. 애니메이션 01 애니메이션 01 퉁퉁 튀는 애니메이션을 만들어 보자! See the Pen Untitled by 이유나 (@fkdldhs8484) on CodePen. HTML <div class="box"></div> CSS body { height: 100vh; background-image: linear-gradient(to top, purple, purple) } .box { width: 50px; height: 50px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } .box::before { content: ''; width: 50px; height: 5px; background: #000; position: abso.. 2022. 8. 29. 슬라이드 이펙트 02 슬라이드 이펙트02 5개의 이미지가 가로로 정렬되어 있다. 1 2 3 4 0 1 2 3 4 0 ... 반복 원본 소스 보기 원본 페이지 보기 HTML <main id="main"> <section id="sliderType01"> <div class="slider__wrap"> <div class="slider__img"> <div class="slider"><img src="../assets/img3/effect_bg11-min.jpg" alt="이미지"></div> <div class="slider"><img src="../assets/img3/effect_bg12-min.jpg" alt="이미지"></div> <div cla.. 2022. 8. 29. 슬라이드 이펙트01 슬라이드 이펙트01 트랜지션 효과 원본 소스 보기 원본 페이지 보기 HTML <main id="main"> <section id="sliderType01"> <div class="slider__wrap"> <div class="slider__img"> <div class="slider"><img src="../assets/img3/effect_bg11-min.jpg" alt="이미지"></div> <div class="slider"><img src="../assets/img3/effect_bg12-min.jpg" alt="이미지"></div> <div class="slider"><img src="../assets/img3/.. 2022. 8. 29. jQuery jQuery jQuery란? 오픈 소스 기반의 자바스크립트 라이브러리입니다. 제이쿼리를 사용하면 짧고 단순한 코드로도 웹 페이지에 다양한 효과나 연출을 적용할 수 있습니다. 달러($) 기호는 제이쿼리를 의미하고, 제이쿼리에 접근할 수 있게 해주는 식별자입니다. Download 방식 01. JQuery 를 사용하려면 인터넷 익스플로러에서 https://jquery.com/download 에 접속하여 다운받으시기 바랍니다. <script type="#" src="https://code.jquery.com/jquery-3.2.0.min.js" ></script> CDN 방식 02. JQuery 를 사용하려면 경로를 head 태그 내에 명시해주어야 합니다. <script type="#" src="ht.. 2022. 8. 29. GSAP GSAP GSAP란? 프론트엔드 개발자와 디자이너들이 쉽게 사용할 수 있는 아주 강력한 타임라인기반의 애니메이션 자바스크립트 라이브러리 입니다. 또한 GSAP은 세밀한 움직임과 동작의 연속성을 훨씬 간편하게 설정할 수 있습니다. GSAP를 사용하기에 앞서 HTML파일에 GSAP 라이브러리를 추가해야 합니다. <script src=“https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script> Tween 바로 실행되어야하는 간단한 모션을 만들때 유용하다. Timeline 다양한 메서드를 사용해 모션을 컨트롤할 수 있다. pause (),play (),progress (),reverse (),timeScale ()등등 2022. 8. 29. 요소 숨기기 요소를 안보이게 하는 방법 1. display 2. opacity 3. visibility 4. width, height 5.transform display 👉요소를 어떤 형태로 나타나게 할 것인지를 말하는 속성 입니다. (애니메이션x, 영역x) display : none opacity 👉opacity는 요소의 투명도를 지정하는 속성입니다. (애니메이션o, 영역o) opacity: 0; visibility 👉문서의 레이아웃을 변경하지 않고 요소를 보이거나 숨깁니다. (애니메이션x, 영역x) visibility: hidden; width , height 👉특정 요소의 너비와 높이를 0으로 설정하여 숨기는 방식 입니다. (애니메이션x, 영역x) width: 0; height: 0; transform 👉시각적.. 2022. 8. 25. Quiz 06 quiz06 답을 누르면 설명과 함께 다음 문제 보기 박스? 가 나오는 구조이다. 누르면 다음 문제로 넘어간다. 마지막 문제에서는 총 갯수가 나온다. 선택자 // 선택자 const quizType = document.querySelector(".quiz__type"); //퀴즈 타입 const quizQuestion = document.querySelector(".quiz__question"); //문제번호, const quizSelects = document.querySelector(".quiz__selects"); //객관식 보기 const quizResult = document.querySelector(".quiz__answer .result") //해설 const quizConfirm = docu.. 2022. 8. 24. Quiz 05 quiz05 문제를 맞추면 갯수가 나오는 구조이다. const quizWrap = document.querySelector(".quiz__wrap"); let quizScore = ""; const updateQuiz = () => { const exam = []; quizInfo.forEach((question, number) => { exam.push(` <div class="quiz"> <pan class="quiz__type">${question.answerType}</span> <h2 class="quiz__question"> <span class="number">${question.ansWerNum}</span> <div class="ask">${question.ans.. 2022. 8. 24. 이전 1 2 3 4 5 다음
