웹언어 (193) 썸네일형 리스트형 [Svelte강좌] 1강 스벨트 개발환경 구축(설치) - 오쌤의 니가스터디 ** 영상으로 보실 분은 아래 주소를 눌러 클릭하세요! https://youtu.be/kxGsmwVGoO0 1. REPL(Read-Eval-Print-Loop) - Svelte는 공식 사이트에서 REPL을 통해, 별도의 설치 과정이나 컴파일 없이 코딩하고 바로 결과를 확인할 수 있는 서비스를 제공하고 있습니다. - 이 기능은 코딩은 좀 해봤다면 들어 본, CodeSandbox같이 코드만 입력해도 바로 결과가 보입니다. 1) Svelte사이트 접속 - 우선 아래 주소를 클릭해서 Svelte사이트에 접속해주세요. https://svelte.dev/ Svelte • Cybernetically enhanced web apps Svelte is a radical new approach to building use.. [Svelte강좌] 인트로- 스벨트는 무엇인가? - 오쌤의 니가스터디 ** 영상으로 보고 싶은 분은 아래 주소를 클릭해주세요. https://youtu.be/9Pzvu1IKmDc 1. Svelte의 현 위치 - 아직까지 웹프론트엔드 프레임워크의 대세는 react입니다. - 위의 트렌드 그래프에서도 보다시피 주황색 라인인 react조회수가 월등한 것을 확인할 수 있습니다. - 그 다음이 vue, 그리고 angular, svelte 순서로 볼 수 있습니다. - 그럼에도 불구하고 제가 Svelte강의를 열게 된 것은 easy, easy, easy하기 때문입니다. - 웹프론트엔드를 처음 배우거나, 웹퍼블리셔에서 프런트엔드 개발자로 넘어갈 때 React부터 한다면 매우 어렵게 느껴질 것입니다. - 좀 쉬운 Svelte로 웹프론트엔드 프레임워크들을 이런 것이구나를 익히도 다른 언어를.. [CSS3강좌] 38강 CSS의 변수 - var() 함수 1. CSS 변수 - var() - 변수라는 것은 컴퓨터 언어에서 값을 한 개 저장하는 공간을 의미합니다. - CSS의 변수도 값을 저장하는 공간입니다. 변수를 사용하는 이유는 동일한 값을 매번 기억해서 작성하면 어렵기 때문입니다. 특히, 색상 코드처럼 좀처럼 외우기 힘든 것을 문자 화한다면 쉽게 사용 가능하겠죠? - 이때 CSS에서는 var()라는 함수를 사용합니다. - CSS변수는 DOM에 액세스 할 수 있고, 전역/지역으로 선언할 수 있습니다. - 자바스크립트에서도 미디어 쿼리에서도 변수를 변경할 수 있습니다. 1) 변수를 사용하지 않은 경우 ## 코드 예시 쇼핑몰 무료쇼핑몰만들기 도메인등록 쇼핑몰 디자인 창업 공간 창업 교육 쇼핑몰 만들기 - CSS 코드를 보면 색상 중 #146af0 이 매우 많.. [웹컨텐츠제작꿀팁] 8강 Image Sprite와 CSS움짤 ** 영상으로 보고 싶은 분은 아래 주소를 클릭하세요. https://www.youtube.com/watch?v=31Hvgosnwgg&list=PLdwQP35_Nz9drJnPT6_u1ZicS2msRLrUN&index=9 1. Image Sprite를 사용하는 이유 - Sprite(스프라이트)라는 용어는 컴퓨터 그래픽스에서 2차원의 비트맵 이미지나 애니메이션을 합성하는 기술을 의미합니다. 웹, 즉 CSS에서는 여러 개의 이미지를 하나의 이미지로 합쳐서 만들어 놓은 것을 의미합니다. - Image Sprite를 쓰는 이유는 크게 2가지입니다. 렌더링시간줄이기, 용량줄이기입니다. 1) 렌더링시간 줄이기 - 브라우저는 화면에 구현하는 모든 자원을 서버에 요청하고 불러와서 구현(렌더링)합니다. - 그래서 코드를 .. [웹컨텐츠제작꿀팁] 7강 TabBar와 SwitchButton제작 ** 영상으로 보고 싶은 분은 아래 주소를 클릭하세요! https://www.youtube.com/watch?v=JmNXShXYKAA&list=PLdwQP35_Nz9drJnPT6_u1ZicS2msRLrUN&index=8 ** 이번 강의는 HTML과 CSS로만 제작하는 탭바컨텐츠와 스위치버튼을 해보도록 하겠습니다. - 이 두개를 같이 묶은 이유는 체크박스/라디오버튼의 체크를 통한 컨텐츠이기 때문입니다. - 여기서 알아야 할 것은 두가지 포인트인데, 첫번째는 label태그를 클릭해도 체크/미체크가 된다는 점이고, 두번째는 입력양식 선택자 중 체크되었을 때가 있다는 점입니다. ## 문법 입력양식요소:checked{ } - 위에 보이는 이 선택자를 통해 다양한 작업을 할 수 있습니다. 1. TabBar 제작 *.. [jQuery강좌] 15강 폼관련 change와 submit이벤트 ** 이번 강좌에서는 제이쿼리에서 폼요소에 사용되는 이벤트들을 보도록 하겠습니다. - 대표적으로 change이벤트가 있습니다. 요소에 변화가 있을때라는 뜻입니다. - submit이벤트는 폼데이터를 전송할 때라는 뜻입니다. - 이 두가지 이벤트를 보도록 하겠습니다. 1. change이벤트 - change이벤트는 요소가 변화가 있을때라는 이벤트입니다. 보통 폼요소가 변화가 있을때 사용됩니다. - 그럼 폼요소가 변화가 있다는 것을 무슨 의미일까요? - 체크박스가 체크되거나 미체크되었을때, 선택상자의 옵션이 변경되었을때 등을 볼 수 있습니다. ## 문법 //이벤트타입메서드 $('문서객체선택').change(function(){ }); //on메서드 - 이벤트연결메서드 $('문서객체선택').on('change',.. [jQuery강좌] 14강 $(window)객체 이벤트와 메서드 ** 이번 강좌에서는 제이쿼리에서 $(window) 객체를 사용하는 방법을 알아보도록 하겠습니다. - window객체가 갖고 있는 대표적인 이벤트인 resize와 scroll을 보도록 하겠습니다. - 그리고 자바스크립트에는 없었지만, 제이쿼리에서 window객체를 위해 만든 메서드도 보도록 하겠습니다. 1. window객체 - window객체는 BOM객체입니다. BOM객체 중 최상위객체인 브라우저 전체 창을 의미합니다. ## JS에서의 window문법 window.속성명; window.메서드명(); ## jQuery에서의 window문법 $(window).메서드명(); - 위에서 보다시피 제이쿼리는 $()안에다 쓴다는 점이 다릅니다. - 하지만 자바스크립트에서 썼던 속성이나 메서드를 $(window) 에.. [jQuery강좌] 13강 animate()메서드 - 오쌤의 니가스터디 ** 이번 강좌에서는 제이쿼리의 animate() 메서드에 대해서 알아보도록 하겠습니다. - 우선 animate() 메서드는 사용자 지정 애니메이션을 만들 수 있습니다. - 하지만 위와 같이만 설명하며 [ 아~ 움직이는 명령을 주는구나? ]라고 받아들일 수 있습니다. - 실제 animate() 메서드는 CSS의 변화에 시간차를 주는 메서드입니다. - CSS속성의 transition 과 비슷한 느낌을 받죠? 비슷해도 명령을 디테일하게 줄 수 있다는 점이 조금 다릅니다. - 그럼 자세한 내용들은 아래에서 정리하면서 보도록 하겠습니다. 1. animate()의 기본문법 ## 기본문법 animate({CSS속성정의},시간,콜백함수); - 기본적인 매개변수는 위에 보이는 대로 CSS속성, 시간, 콜백함수가 있습니.. 이전 1 2 3 4 5 6 7 8 ··· 25 다음
