여행하는 코딩끄적끄적

글 시작에 앞서 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. 코드를 업데이트 할때 마다 브라우져를 껏다 킬 필요 없이 새로고침 해주면 변경된 결과가 반영 된다.

Visual studio, HTML 자동 완성 설정하는 방법 1. Extensions 에서 HTML Snippets 설치 위 그림과 같이 HTML Snippets을 설치한다. 2. View - Command Palette 실행 또는 Ctrl+Shift+P 실행 그림처럼 팔레트를 실행한다. 3. Extension: HTML Snippets 을 아래 그림처럼 실행 4. 아래 그림처럼 오른쪽 하단(파란색에 흰색글)에 값을 HTML로 변경 (만일 HTML이면 변경 필요 없음, 다른 값일 경우 클릭해서 HTML로 변경) 5. 프로그램 종료후 다시 실행 후 html 파일을 만들고 html을 천천히치면 아래 화면처럼 html:5 가 나옴 6. 아래 그림처럼 자동 완성됨

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..

참조 링크 (link)>> flask.palletsprojects.com/en/1.1.x/quickstart/ Python flask에서 HTML과 변수 주고 받기 파이썬에서 HTML을 만들고 변경하는 것은 쉬운 작업이 아니다. application 보안을 위해 동적으로 바뀌는 값을 escape 처리 해서 작성해야하기 때문이다. Flask에서 jinja2 엔진을 공급한다. 간단하게 render_template 함수로 html 에 접근하면서 원하는 변수도 같이 보내 줄 수 있다. html 문서에서는 받은 변수 값을 {% %} {{ }} 괄호 안에서 사용 전자는 문법용이고 후자는 변수를 바로 사용할때 사용한다. 이렇게 사용이 가능하게 해주는 것을 jinja2 엔진이 가능하게 해주는 것이다. 아래 예제 코드를..