웹언어 (191) 썸네일형 리스트형 [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속성, 시간, 콜백함수가 있습니.. [jQuery강좌] 12강 시각효과메서드 - 오쌤의 니가스터디 1. 시각효과메서드 - 제이쿼리의 시각효과메서드는 문서 객체를 사라지게 하거나 나타나게 하는 것을 의미합니다. - 사라지게 하거나 나타나게 하는 것은 여러 가지 종류가 있어 정리해보도록 하겠습니다. 1) 시각효과메서드 정리 메서드 설명 show() 좌측상단을 기준으로 요소를 나타나게 하는 메서드 hide() 좌측상단을 기준으로 요소를 사라지게 하는 메서드 toggle() show()와 hide() 메서드를 번갈아 실행하는 메서드 slideDown() 상단을 기준으로 요소를 나타나게 하는 메서드 slideUp 상단을 기준으로 요소를 사라지게 하는 메서드 slideToggle() slideDown()과 slideUp() 메서드를 번갈아 실행하는 메서드 fadeIn() 투명도를 기준으로 요소를 나타나게 하는 .. [jQuery강좌] 11강 제이쿼리 이벤트 관련 메서드 - 오쌤의 니가스터디 1. 이벤트(event) 란? - 이벤트라는 것은 사용자의 모든 작업에 웹페이지가 응답할 수 있는 모든 작업을 이벤트라고 합니다. - 보통 명령이 발생되는 시점을 말합니다. - 우리가 준 명령이 사용자가 원하지도 않는데 계속 실행된다면 어떨까요? 불편하겠죠? - 예를 들어 스마트폰이 켜지는 것이 우리가 뭔가 작업을 하지 않았는데, 계속 켜진다고 생각해보면 됩니다. 너무 무섭거나? 혹은 고장났구나라고 생각되겠죠? - 그래서 명령은 발생 시점이라는 것이 있습니다. 보통 스마트폰이 켜지는 것은 우리가 터치했을 때, 혹은 전화가 올때, 알림이 울릴때 이럴때겠죠? 이런 것을 시점이라고 합니다. - 그리고 DOM(Document Object Model)에 발생되는 이벤트의 종류는 무엇이 있는지 대표적인 것을 보도록.. 이전 1 2 3 4 5 6 7 8 ··· 24 다음
