Hjin Blog

javascript 다음과 같은 코드를 jQuery를 이용해 코드를 더 짧게 만들수 있다. jQuery jQuery기능을 이용한다면 '$'기호 하나로 셀렉터 기능을 구현할수 있다. $() 셀렉터는 querySelectorAll()처럼 여러개가 있을경우 전부 찾아준다. '.on' 으로 addEventListener를 대체하여 쓸수있다. 이와같이 코드의 길이가 확 줄어들었다. bye .html 이라는 jquery 기능으로 InnerHTML 기능을 짧게 구현도 가능하다. class 탈부착 안녕 UI 애니메이션 안녕 버튼 .fadeOut 말고도 다양한 효과가 있다. **주의 $(셀렉터)로 찾을시 뒤에는 jQuery함수만 붙일수 있다. querySelector('셀렉터')로 찾을시 자바스크립트 함수만 붙일수 있다.

Navbar An item A second item A third item A fourth item And a fifth one 다음과 같이 navbar를 만들어 보았다, 평소에는 숨기고 우측에 햄버거 아이콘을 클릭했을때 하단 메뉴가 나타나게끔 하고 싶을때 여러가지 방법이 있다. CSS .show{ display: block; } JS 클래스명 추가하기 우선 하단 메뉴를 display : none; 처리를 한뒤 위와 같이 코드를 입력하면 된다. 코드를 읽어보면 1. 버튼을 눌렀을때 다음과 같은 이벤트를 발생시켜라 document.getElementsByClassName('navbar-toggler')[0].addEventListener('click',function(){}); 2.이벤트 발생시 list-..

Bootstrap 동적인 웹 사이트 및 웹 응용 개발을 위한 프론트엔드 프레임워크로, 입력 창, 버튼, 네비게이션 및 기타 구성물, 각종 레이아웃 등을 HTML 및 CSS 기반의 디자인 템플릿으로 제공하며 추가적인 자바스크립트 확장들도 포함한 라이브러리다. 부트스트랩 설치법 1.https://getbootstrap.com/ 홈페이지에 접속 2. 다운로드를 클릭하고 해당 link 태그와 script코드를 복사하여 html코드에 붙혀준다. 3.복사 버튼을 눌러 npm 코드를 복사해 터미널에서 실행시켜 준다. UI디자인 가져오기 설치가 끝났다면 검색을 통해 다양한 요소를 가져올수 있다. Primary 원하는 버튼을 복사해 html코드에 붙혀주기만 하면 아래와 같이 버튼을 가져올수있다.

addEventListener는 이벤트를 부여해주는 기능이다. 알림창 X 알림창 닫기 버튼을 onclick을 이용해 구현하였다. function()을 이용해 함수를 호출하여 깔끔하게 만들수도 있지만, onclick 을 이용하지 않고 addEventListener 를 이용해 깔끔하게 구현해 낼수있다. document.getElementById('close').addEventListener('click',function(){ document.getElementById('alert').style.display = 'none'; }); 다음과 같이 'close'라는 아이디에 이벤트('click')를 발생시키는 것이다, addEventListener('이벤트'.'함수'(){};) 그럼 onclick을 사용하지 않..

function 은 긴 코드를 축약하고 싶을때 쓰인다.(특정 기능을 다음에도 쓰기 위해 모듈화 해놓는 문법) function 함수이름(){ 코드 } 기본적으로 위와 같은 방법으로 작성한다. 작성된 함수는 함수이름()을 쓸 때 마다 해당 자리에 코드가 실행된다. EX) function 을 이용해 closeButton이라는 함수를 생성하였다. 코드는 버튼을 눌렀을때 alert 박스가 닫히는 코드 알림창 X onclick에 긴 코드를 넣는것 보다 훨씬 깔끔해졌다 이렇게 함수 명만 넣어주면 함수 안에 있는 코드가 실행된다. function 파라미터 문법 파라미터는 함수의 소괄호( )내에 파라미터를 생성하게 되면 해당 값을 그 자리에 가져다 준다. closeButton('none'); 함수에 다음과 같이 파라미터..

UI 만들기 위해서 HTML/CSS로 미리 디자인 해놓고 코드를 진행하는것이 좋다. html 알림창 css .alert-box { background-color: skyblue; padding: 20px; color: white; border-radius: 5px; display: none; } UI를 평소에 안보이게 하기위해 display:none 을 주었다. javascript를 이용해 버튼을 눌렀을때 해당 Ul가 보여지는 기능을 구현해 보자 알림창 버튼 'alert'라는 id 값을 주고 버튼에 onclick 속성을 부여해 클릭하는 순간 display가 block으로 바뀌는 이벤트가 발생하게 코드를 넣어주었다. 위와 같은 방법으로 닫기 버튼을 만들수도 있다. 알림창 X 닫기 버튼을 만들어 준뒤 반대로..