본문 바로가기
반응형

전체 글34

웹디자인 기능사 제이쿼리 필수핵심이론 - 함수 웹디자인 기능사 시험에서 제이쿼리로 할 수 있는 것들 모달창 띄우기, 네비게이션 만들기 이때 필요한 함수에 대하여 알아보자. $('선택자').함수('function'(){ $('선택요소').메서드() }) 오늘은 제이쿼리 필수핵심 이론 함수에 대해... 알아본다.. 기본 구조 잡기는 기존에 했던 마우스 클릭했을때 보이기와 숨기기로 만들어둔다. 이작업 끝나면 스크립트 작성 $('.show-btn').click(function(){ $('div').show() }) $('.hide-btn').click(function(){ $('div').hide() }); $('선택자').함수(function(){ $('div').show() }); 클릭함수와 마우스 오버 함수 $('.btn').mouseenter(fun.. 2022. 8. 4.
코딩웍스 jquery 인강 : 기본 구문 만들기, 선택자 기본 구문 만들기 $('선택자'), 함수(function(){ 실행구문; }); 기본구문 작성할때 괄호 체크, 중괄호 체크 DOCTYPE html> 제이쿼리 기본구문 보이기 감추기 태그선택자 a를 클릭했습니다. 세미콜론은 넣으나 안넣으나 작동됨 $('p').css({'display':'none'}); $('.show-btn').click(function(){ $('p').css({'display':'block'}); }); $('.hide-btn').click(function(){ $('p').css({'display':'none'}); }); 기본 구문 만들기 $('선택자').함수(function(){ $('선택자').메서드(); }); $('.btn').click(function(){ $('.moda.. 2022. 8. 2.
코딩웍스 제이쿼리 jQuery : 시작하기(폴더구조, 링크방법) 기능사 시험에 필요한 상호작용을 위주로 공부하기 제이쿼리 링크하는 방식 1. 안 하단에 넣기 2. 안에 넣기 script 폴더안에 수업자료 jquery-1.12.4.js 들어가있어야함. 오픈 소스파일임 ++ 오픈소스는 먼저 와있어야함 순서 중요 순서가 오픈소스가 먼저와야함 custom은 우리가 만들 파일 작업 폴더구조 index.html css > style.css images > script > jquery-1.12.4.js custom.js 적절한 위치에 JS 파일 링크하기 스크립트는 바디 하단에 넣기 2022. 8. 2.
코딩웍스 인강 : 가상클래스 만들기 nth-child, nth-of-type 순서를 만드는 CSS 클래스 (nth-child, nth-of-type) 순서가 필요할때 클래스 이름을 정하지않고 순서를 정해서 적용 .box div:first-child { backgroud-color: 000; } .box div:last-child { backgroud-color: 000; } .box div:nth-child(2) { backgroud-color: 000; } 순서 만드는 클래스 실습 div 속성 display : inline-block; 주고나서 중앙정렬은 부모요소 위로 가서 text-align:center; 적용 nth-child() 는 순서에 적용됨 추가된 태그순서 태그 뒤에 다른 태그가 들어가면 nth-child() 숫자도 자동으로 밀려나서 적용됨 nth-of-type ty.. 2022. 8. 1.
코딩웍스 인강 : 마우스 오버 이펙트 hover, transition 이팩트 가상클래스(hover) & 트랜지션 (transition) 마우스 오버했을때 애니메이션 효과로 전환이 되는 방법 ++ a 태그 사용 시 href="" 링크 비워두면 제이쿼리가 작동X 감점처리됨 트랜지션은 hover 효과와 동일한 위치에 적용하면 안됨 transition 효과는 0.5s 초 정도 주는데 hover 속성값안에 넣으면 마우스 나갈때는 적용안됨 hover말고 a 태그 속성안에 넣어줘야 자연스럽게 적용됨 transition은 필수는 아님. 그러나 넣으면 완성도가 더 높아보임 hover영역에 태그 겹치게 넣지않기 강의 따로 들으니까 쉽고 재밌네! 2022. 8. 1.
퍼블리싱의 모든 것, 인라인요소, 블록 요소, 인라인블록요소 CSS 필수 이론 개념 인라인 요소, 블록 요소, 인라인블록 요소 CSS 기본 무조건 암기.. 인라인블록 요소는 인라인과 블록요소의 두가지 성격을 가지고 있음 인라인(inline) 요소 블록(block) 요소 인라인블록(inline-block) 요소 한줄에 여러개 배치 한줄에 한개만 배치 한줄에 여러개 배치 기본 너비값은 컨텐츠의 너비값 기본 너비값은 100% 기본 너비값은 컨텐츠의 너비값 크기값을 가질 수 없음 크기값을 가질 수 있음 크기값을 가질 수 있음 상하 마진은 가질 수 없음 상하좌우 마진 가질 수 있음 상하 마진은 가질 수 있음 인라인(inline) 요소 span, a, small, big, em, u, s, del, br, q, b, strong, mark, sub, sup, video, a.. 2022. 8. 1.
2022 웹디자인 기능사 시험 일정, 인프런 코딩웍스 실기시험 강의 국가 자격시험 : 웹디자인기능사 프론트엔드 공부 좀 했다면 딸수 있는 자격증 찾다가 웹디자인 기능사 자격증 응시해보기로 결심. 이 시험은 퍼블리싱 프론트엔드 개발 실기 자격증으로 국가에서 인정해주는 기능사 시험이다. 정기 기능사 3회 실기 시험 등록해뒀고 이번에 합격을 목표로 인강으로 독할하려고함. 실기시험 일자는 8월 22일이고... 이제는 더이상 미룰 수 없는 3회차 시험이라서 합격 목표로 준비....... 코딩 개발자 쪽으로 취업하려는 응시자가 많아져서 합격률이 오르고있음ㅋ 그래도 필기보다 실기가 합격률이 어려움.......... 우대현황 교육관련되서 활용가능 자세한 자격증 정보는 큐넷 홈페이지에서 확인! https://www.q-net.or.kr/isr001.do?id=isr00101&gSite=.. 2022. 8. 1.
인프런 코딩웍스 인강 : float 속성, overflow, clear, inline-block 실기시험 22일 남았는데 인강으로 독학하기 강의는 작년에 결제하고 딱 3주 남음 필자의 레벨 상태 html 코딩 학습 경험 유, 퍼블리싱 이해도 중, 필기 합격 :: 목표 :: 3주 공부하고 실기시험 합격하기 집중해서 공부해야하는데..... 티스토리에 공부기록 남겨보겠음 1. 맥북에 비주얼 스튜디오 설치하기 한글패치 설치하고 나니까 코딩웍스 선생님이 시험장에서는 라이브서버, 한글 지원안되니까 초반에 없이 공부하라고함.... 레이아웃 만들기 CSS 에서 헷갈리는 부분 요약정리 가로 나열할때 사용하는 태그 13. CSS로 HTML 요소 가로배치하기 (float, overflow, clear, inline-block) css 포지셔닝 - 엘리먼트 수평 정렬, 속성 float float 속성은 요소가 부모요소 .. 2022. 8. 1.
반응형