Simple Is Best

안녕하세요 이번 포스팅에서는 이벤트 버블링을 활용하여 이벤트 리스너를 줄이는 방법에 대해서 알아보도록 하겠습니다. 포스팅 14에서는 Tab 기능을 구현하는 방법 포스팅 15에서는 이벤트 버블링을 참고하면 좋을 것 같습니다. 포스팅 14에서 Tab 기능을 구현 할 때에는 .tab-button 에 3개의 이벤트 리스너를 달았었습니다. 하지만 이렇게 이벤트 리스너를 달게 될 경우에는 메모리를 많이 잡아먹기 때문에 좋은 방법은 아닙니다. 따라서, 이번 포스팅에서는 지난 포스팅 15포스팅에서 배운 이벤트 버블링을 활용하여 1개의 이벤트 리스너를 달아서 동일하게 기능을 구현하는 방법에 대해서 알아보도록 하겠습니다. 총 2가지 방법이 존재하는데 [tab 열기] 함수는 이전 포스팅을 참고해주시면 감사하겠습니다. HTM..

안녕하세요 이번 포스팅에서는 이벤트 버블링 및 여러가지 이벤트 메소드에 대해서 학습해보도록 하겠습니다. 이벤트 메소드 이벤트 리스너를 달았을 때 파라미터로 e 혹은 event를 주어서 할 수 있는 동작들 입니다. 예시를 위해서 폼 HTML 을 가져왔습니다. HTML Sign in Email Address Password Submit Cancel ▷ e.target : user 가 실제로 클릭한 요소를 알려주는 메소드 $('.black-background').click(function(e){ console.log(e.target); // 실제 user가 클릭한 요소를 html 태그로 알려준다. }) User가 white-background를 클릭하면 e.target은 white-background 에 해당..

이번 포스팅에서는 웹 상에서 흔히 존재하는 Tab 기능을 제작하는 방법에 대해서 학습해보도록 하겠습니다. 오늘의 Target : tab1 버튼을 누르면 tab1에 대한 내용이 등장하고 tab2 버튼을 누르면 tab2 에 대한 내용이 등장 하는 tab 기능에 대해서 제작해 보도록 하겠습니다. 본 기능을 제작하는 데에 있어서 중점을 제이쿼리 이므로 HTML/CSS에 대한 내용은 생략하도록 하겠습니다. HTML 초기 HTML 상에서 각기 첫 요소에 .tab-btn-active 와 .tab-content-show 클래스를 붙인 이유는 tab1에 대한 메뉴와 내용을 초기화면에 보여주기 위함입니다. tab1 tab2 tab3 tab4 tab1에 대한 설명 블라블라~ tab2에 대한 설명 블라블라~ tab3에 대한 ..

이번 포스팅에서는 스크롤 애니메이션에 대해서 배워보도록 하겠습니다. 오늘의 Target 스크롤 이전에는 최상단의 navbar 를 웹사이트의 대문과 색을 동일하게 유지한다. 스크롤 이후에는 최상단의 navbar 를 회색의 배경에 글씨를 검은색으로 만들어주고 오른쪽에 위치한 Our Products의 font-size 를 줄여준다. [스크롤 이전] [스크롤 이후] 애니메이션 제작 방법 1. CSS로 애니메이션 동작 이전의 화면을 미리 제작한다. 2. CSS로 애니메이션 동작 이후의 화면을 미리 제작한다. 3. CSS로 transition : all 1s; 로 변경할 때 몇 초에 걸려서 변경할 지 설정한다. 4. 자바스크립트 혹은 제이쿼리로 언제 변경할 지 변경point(Trigger) 를 설정한다. HTML ..

안녕하세요~ 이번 포스팅에서는 Carousel 에 대해서 알아보도록 하겠습니다. Carousel 이란? : '회전목마' 라는 뜻으로 이미지 슬라이더 (버튼을 누르면 다음 사진으로 슬그머니 넘어가는) 를 칭합니다. 오늘의 Target 1. 초기화면 shirts1 img를 띄우고 right버튼을 누르면 다음 이미지로 슬그머니 넘어간다. 2. Right 버튼 눌렀을 때 1초동안 다음 사진으로 슬그머니 넘겨준다. 3. Left 버튼 눌렀을 때 다시 이전 사진으로 돌아온다. Carousel 동작 원리 HTML ▷ overflow : hidden : viewport 내에 들어 오지 않는 영역들을 스크롤이 생성되는 것을 방지하여 아예 시야에서 사라지게 끔 해주는 역할 ▷ container : img-box 3개를 포..

정규식을 활용하면 내가 원하는 문자가 문장 안에 존재하는지 확인 해 볼 수 있습니다. 정규식 사용 방법 결과를 true 혹은 false 로 받을 수 있다. / 내가 원하는 문자 작성 /.test( 내가 검사할 문장 ) 정규식 문법 ▷ [ ] : 검사하고 싶은 문자의 범위를 검색하는 기호 ex) [A-z], [ㄱ-ㅎ] /[A-z]/.test('dsadsaf') ▷ \S (역슬래쉬 S): 특수문자 포함한 모든 문자에 대해 탐색하는 기호 (문자 하나만 탐색) 만약, 여러 개의 문자를 탐색하고 싶다면 \S+ 로 접근해야 한다. /\S/.test('2esdas') ▷ \. (역슬래쉬 .) : .이 존재하는지 검사 /\./.test('.') 정규식 응용 1. 하나의 글자(특수 문자 포함) 뒤에 @(골뱅이) 가 나오..

안녕하세요! 이번 포스팅에서는 지난 포스팅에서 다루었던 animation 에 대해서 몇 가지 알고 넘어 가면 좋은 점들을 알아보도록 하겠습니다. HTML/CSS 를 공부하면서 한창 애니메이션에 대해서 학습하였으니 아래 링크를 참고하고 오시면 본 포스팅을 더욱 잘 이해할 수 있으실 겁니다 ^^ https://daterminal.tistory.com/32 17. [CSS] CSS Animation - 1 이번 포스팅에서는 CSS를 활용한 동적인 애니메이션 효과를 주는 방법을 알아보도록 하겠습니다. 구글링을 해보니 CSS를 활용하여 애니메이션 효과를 주려면 @keyframe from ~ to ~를 활용한 애니메이 daterminal.tistory.com Animation 제작 원칙 애니메이션의 기본 제작 방식..

안녕하세요! 오늘은 제이쿼리를 활용한 애니메이션 구현에 대해서 공부해보도록 하겠습니다. 어제 갑자기 잔여백신을 맞게 되어서 오늘 오른팔이 너무 뻐근해서 제 컨디션이 아니지만 여느 때와 마찬가지로 오늘도 공부 해 보겠습니다!! 오늘의 Target - 우리에게 익숙한 Web UI 일 것 같습니다. 특정 버튼을 클릭하면 왼쪽에서 새로운 메뉴 창이 뜨는 것을 자주 볼 수 있죠? 오늘 우리는 이것을 구현해보도록 하겠습니다. 1. 클릭 이전 2. 클릭 이후 animate( {원하는 CSS 속성: '속성 값' },밀리초 ); animate 메소드를 활용하면 원하는 애니메이션을 쉽게 구현 할 수 있습니다. 첫번 째 인자로는 원하는 CSS 속성과 CSS 속성 값을 넣어줍니다. [주의 할 점] 1. CSS 속성을 작성할 ..