여행하는 코딩끄적끄적

글 시작에 앞서 visual studio에서 bootstrap 코드를 작성하고 확인하는 방법을 괄호 링크에 있으니 참조하길 바란다. (https://scribblinganything.tistory.com/298) Bootstrap - 말풍선(Tooltip) 만들기 부트스트랩에서 제공하는 "tooltip.js"를 이용하면 간단한 구문으로 툴팁(말풍선)을 만들 수 있다. 바로 코드로 설명하겠다. 코드>> 버튼에 마우스를 올리면 말풍선이 생깁니다 오른쪽 왼쪽 결과>> 주석>> 위 결과와 같이 말풍선 박스가 생겼다. 툴팁 위치(배치) 지정하는 법 아래를 참조해서 코드에 값을 넣도록 하자 오른쪽 오른쪽 오른쪽 오른쪽

목차 글 시작에 앞서 visual studio에서 jquery 코드를 작성하고 확인하는 방법을 괄호 링크에 있으니 참조하길 바란다. (https://scribblinganything.tistory.com/298) jquery callback 함수 : 정의 앞서 게시판에서 fadeIn으로 selector가 천천히 나타나게 하는 함수를 배웠다. (jquery - fade 기능, 천천히 사라지거나 나타내게 하기(예제로 이해하기) (tistory.com)) $(selector).fadeIn(speed,callback); $(selector).fadeOut(speed,callback); $(selector).fadeToggle(speed,callback); $(selector).fadeTo(speed,opacit..

목차 글 시작에 앞서 visual studio에서 jquery 코드를 작성하고 확인하는 방법을 괄호 링크에 있으니 참조하길 바란다. (https://scribblinganything.tistory.com/298) jquery-animate() 애니매이션 기능 animate 기능을 사용하면 웹 브라우져의 요소들을 애니매이션처럼 움직일 수 있다. 다만 애니매이션을 움직일 때 주의 해야 할 점은 css 설정에서 position 정보를 아래와 같이 설정하여야 한다. position 설정값 absolute fixed relative 애니매이션 함수는 아래와 같다. $(selector).animate({params},speed,callback); selector는 웹에서 요소들이고 params는 css의 인자 값들..

목차 글 시작에 앞서 visual studio에서 jquery 코드를 작성하고 확인하는 방법을 괄호 링크에 있으니 참조하길 바란다. (https://scribblinganything.tistory.com/298) jquery - slide 효과로 화면이 나오거나 사라지게 하기 : 정의 jquery slide 관련 함수는 슬라이드처럼 화면이 내려오거나 올라가면서 나오거나 사라지게 만들 수 있다. 관련 함수는 아래와 같다. $(selector).slideDown(speed,callback); $(selector).slideUp(speed,callback); $(selector).slideToggle(speed,callback); slideDown 은 말 그대로 글이 슬라이방식으로 아래로 나오게 만든다. sl..

목차 글 시작에 앞서 visual studio에서 jquery 코드를 작성하고 확인하는 방법을 괄호 링크에 있으니 참조하길 바란다. (https://scribblinganything.tistory.com/298) jquery - fade 기능, 천천히 사라지거나 나타내게 하기 fade 라는 의미 그대로 천천히 진행되는 것이다. jquery에서 제공하는 fade 기능은 아래와 같다. $(selector).fadeIn(speed,callback); $(selector).fadeOut(speed,callback); $(selector).fadeToggle(speed,callback); $(selector).fadeTo(speed,opacity,callback); fadeIn은 천천히 나타나게 하고, fadeO..

목차 글 시작에 앞서 visual studio에서 코드를 작성하고 확인하는 방법을 괄호 링크에 있으니 참조하길 바란다. (https://scribblinganything.tistory.com/298) jquery - 버튼 클릭 해서 글짜 지우고 나타나게 하기 : hide, show $(selector).hide(speed,callback); $(selector).show(speed,callback); selector 를 선정하여 사라지게 하고 싶은 부분이나 나타나게 할 부분을 정한다. 입력인자로 speed와 callback 이 있다. speed는 반응속도를 조절하는 것이고 callback은 hide와 show 이후 실행될 함수를 정의한다. 코드>> 버튼을 누르면 글짜가 사라집니다. 숨기기 결과>> 주석>..

Visual Studio Code에서 Javascript, HTML 결과 확인하기 (실행) 1. 아래 그림과 같이 비쥬얼 스튜디오를 실행하고 html 파일 하나를 만들어서 html 코드와 javascript 코드를 작성한다. 2. 아래 그림과 같이 "확장" 탭을 누르고 "live server"를 검색한 후 설치 한다. 3. 다시 코드로 돌아가서 오른쪽 하단에 "Go Live" 를 클릭한다. 4. 아래 그림처럼 결과화면을 볼 수 있다. 6. 코드를 업데이트 할때 마다 브라우져를 껏다 킬 필요 없이 새로고침 해주면 변경된 결과가 반영 된다.

사용방법에 대해 간략한 소개 Bootstrap 에서는 많은 무료 예제 Front end (Html + CSS)를 제공한다. 예제를 비쥬얼 스튜디어에서 실행해서 HTML을 즉각적으로 확인하면서 변경할 필요가 있다. 이를 위해 필요한 확장 툴 "Live Server"가 필요 하다. 다음은 설치 부터 사용에 대한 방법을 알려주겠다. 설치 순서 및 확인 1. 그림1과 같이 Visual Studio를 실행하고 왼쪽에 조각난 네모그림(확장)을 클릭하면 필요한 확장 툴을 찾을 수 있는 검색창이 나온다. 검색창에 "live server" 라고 검색한다. 2. 그림1처럼 설치가 완료 되면 오른쪽 하단과 같이 "Go Live"라는 텍스트가 생긴다. 3. 그림2와 같이 Bootstrap 예제 화면에 접속한다. (https:..

HTML에서 Bootstrap의 margin, padding 사용방법 Padding 이나 Margin을 넣고 싶은 태그에 Class 를 선언하고 클래스 값을 입력한다. 값의 첫번째 문장은 margin이냐 padding이냐를 결정한다. 아래와 같이 m은 margin을 의미하고 p는 padding을 의미한다. m - for classes that set margin p - for classes that set padding 다음으로 위치를 정하는 letter를 넣는다. 위,아래,왼쪽,오른쪽을 여기서 정할 수 있다. 아래 letter를 보고 결정하면 된다. t - for classes that set margin-top or padding-top b - for classes that set margin-bot..

코드 >> 결과>> ​ 코드>> 결과>> ​ 주석>> bootstrap container 클래스는 두번째 결과처럼 양 옆에 여분을 주고 container-fluid 는 옆에 여분없이 가져간다. 해당 성질은 bootstrap.css에서 가져 온것이다.