Simple Is Best

이번 포스팅에서는 사용자가 주어진 Select 중에서 어떤 선택지를 눌렀을 때, 해당 option 에 대한 다른 Select 가 띄워지는 일종의 Animation? UI를 구현해 보도록 하겠습니다. HTML 상품선택 모자 셔츠 바지 사이즈 해당 코드는 Select와 Option 으로 구성되어 있습니다. 현재 상품선택 아래에 size-wrap 으로 구성되어 있는 div 영역은 CSS 상에서 숨김 처리 했습니다. 만약 사용자가 상품 품목을 선택하였다면 그 품목에 해당하는 Size를 띄워줘야 하기 때문입니다. CSS .size-wrap{ display : none; } JQuery 하지만 아래 코드는 Option들을 하드 코딩해야 하는 단점이 존재합니다. ▷ User 가 선택하는 값에 따라 다양한 조건문들을 ..

안녕하세요 이번 포스팅에서는 이벤트 버블링을 활용하여 이벤트 리스너를 줄이는 방법에 대해서 알아보도록 하겠습니다. 포스팅 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 에 해당..

.js 파일 내에 해당 코드를 복붙 후 init 함수 내에서 jQuery 문법을 사용하면 된다. function init() { // functin init 내에서 jQuery 사용 } var scriptElement = document.createElement('script'); scriptElement.src = 'http://code.jquery.com/jquery-latest.js'; scriptElement.onloadDone = false; scriptElement.onload = function () { scriptElement.onloadDone = true; init(); } scriptElement.onreadystatechange = function () { if (("loaded" ..

이번 포스팅에서는 웹 상에서 흔히 존재하는 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. 하나의 글자(특수 문자 포함) 뒤에 @(골뱅이) 가 나오..