여행하는 코딩끄적끄적

목차 기본 Templates 구성하기 이번에는 기존에 가져온 무료 Bootstrap(부트스트랩) Templates에 댓글(Comment)창을 추가하려고 합니다. 기본 Templates 구조는 블로그 형태 입니다. 무료 Templates를 가져와서 사용하는 방법은 아래 링크를 참조 하시면 됩니다. https://scribblinganything.tistory.com/404 [Bootstrap] Templates 무료 예제로 Flask와 연동하기 목차 Templates 무료 예제 다운(Download) 받기 우선 Bootstrap으로 만든 HTML 무료 예제를 다운 받습니다. 이번 예제에 사용할 Template는 아래 링크에서 가져 왔습니다. https://startbootstrap.com/template/..

목차 Jquery 기본 구조 Jquery는 Javascript를 기본으로 만들어진 라이브러리로 보시면 됩니다. Javascript의 복잡한 기능을 사용자가 사용하기 편하게 단순하게 만들었다고 보시면 됩니다. 우선 Jquery를 사용하기 위해서는 라이브러리를 불러와야 합니다. 마치 파이썬(Python)에서 라이브러리(Library)를 사용하기 위해 import를 하는 것과 마찬 가지 입니다. Jquery를 사용하고자 하는 HTML 문서의 사이에 아래와 같이 선언해 줍니다. 다음은 Jquery 사용 기본 골격입니다. 2번 라인: DOM 즉, html 문서가 준비 되면 function() 을 시행합니다. 3번 라인: $(selector).action() 으로 selector는 한국말로는 선택자로 HTML 문서..

목차 [Bootstrap]HTML 버튼(button) 오른쪽 정렬 HTML 문서를 작성하면 버튼(Button), 라벨(Label), 입력창(Input)을 마음대로 배치하고 싶은데, 생각한 위치로 가지가 않는 경우가 많습니다. 가령 오른쪽으로 정렬할 경우 버튼을 오른쪽 끝에 붙여서 아래로 하나 둘씩 배치하고 싶은데 일반적인 방법이 css의 float를 사용하는 방법인데 코드>> 로그인 로그인 이 경우 아래 그림 처럼 아래 위가 아닌 오른쪽에 붙어서 배치가 됩니다. 결과>> 코드 라인1 : bootstrap button class 를 사용해서 버튼을 만들고 style을 이용해서 float로 오른쪽에 배치하였습니다. 이방법이 인터넷에 일반적으로 오른쪽 정렬 방법으로 올라와 있습니다. [Bootstrap]HTM..

목차 [Javascript] 자바스크립트에서 CSS 변경 하기 (HTML Style) 자바스크립트를 이용해서 고정된 css 값을 동적으로 변경할 수 있습니다. 변경에 필요한 함수는 아래와 같습니다. Syntax>> document.getElementById(id명).style.property = new style 위에 Syntax와 같이 변경하고자 하는 부분을 getElementById 로 찾은 다음에 style을 넣고 변경하고자 하는 css property를 입력하면 됩니다. 앞서 언급한 내용처럼 대부분 자바스크립트로 css 스타일을 변경하는 이유는 페이지 내에서 어떠한 이벤트(event)에 대한 동적인 반응을 위해 넣습니다. 아래 예제를 통해 쉽게 이해 할 수 있습니다. [Javascript] 자바스..

목차 [Javascript] HTML 이벤트 발생 시 동작 함수 HTML 문서에서 자바스크립트를 이용해서 특정 동작이 발생하면 자바스크립트를 동작시키게 할 수 있습니다. 우선 아래 Syntax를 통해 설명 하겠습니다. HTML "element"에서 특정 "event"가 발생하면 "some JavaScript"가 동작 하는 구조 입니다. element는 div, a, h1, button과 같은 tag가 될 수 있습니다. HTML DOM에서 제공하는 event가 많이 있는데 주요 이벤트만 정리해서 아래와 같이 테이블로 만들었습니다. Event 명 설명 onchange HTML element가 변경될 때 onclick HTML element를 클릭할 때 onmouseover HTML element에 마우스 커..

목차 [Javascript] HTML 태그 사이 element 가져오기 - getElementById() HTML 문서에서 id 값을 이용해서 위치를 파악하고 해당 태그의 정보를 가져 오는 방법입니다. Syntax는 아래와 같습니다. document.getElementById(elementID) 찾은 element는 일반적으로 변수에 넣고 속성을 변경하거나 속성 정보를 가져 올 수 있습니다. 예제 코드>> H1 입니다 두번 째 H1 입니다 1st_li 2nd_li 3rd_li ########출력 결과######### 결과>> [Javascript] HTML 태그 사이 element 가져오기 - getElementsByClassName() HTML 문서에서 class 값을 이용해서 위치를 파악하고 해당 태..

목차 HTML DOM write(), writeln() Method 란? write() 메소드는 괄호안의 입력값을 HTML 문서에 표현해줍니다. 입력값으로 HTML 코드나 자바스크립트 코드를 받습니다. HTML을 바로 쓰기 때문에 실제로 write()를 사용해서 코드를 짜지는 않습니다. write() 는 일반적으로 내 코드가 정상적으로 동작하는지 확인하기 위해 debugging 용으로 사용합니다. writeln() 은 write()와 동일한데 마지막에 줄넘김이 들어가있다는 차이 입니다. HTML DOM write() Syntax document.write(exp1, exp2, exp3, ...) 여러개의 코드를 입력에 넣을 수 있습니다. write() 는 별도의 return 값은 없고 HTML 페이지에 ..

목차 글 시작에 앞서 visual studio에서 bootstrap 코드를 작성하고 확인하는 방법을 괄호 링크에 있으니 참조하길 바랍니다 (https://scribblinganything.tistory.com/298) HTML - Bootstrap 사용해서 공간 배치하기 (Grid) Bootstrap의 Grid를 사용한다는 의미는 웹 화면의 Front end를 엑셀처럼 열과 행으로 나눠서 사용하겠다는 의미 입니다. Bootstrap에서 제공하는 클래스(Class)의 클래스명을 row와 column을 사용해서 정의할 수있습니다. row : 행 지정 column : 열 지정 행의 경우 웹화면에서 스크롤을 내려서 계속 만들 수 있지만 열의 경우 12개의 열로 고정되어 있습니다. 아래 그림은 최대치로 열을 설정..

목차 글 시작에 앞서 visual studio에서 bootstrap 코드를 작성하고 확인하는 방법을 괄호 링크에 있으니 참조하길 바랍니다 (https://scribblinganything.tistory.com/298) HTML - Bootstrap 사용해서 공간 배치하기 (Container) Web에서 Frontend 디자인에서 레이아웃을 설정하는 것은 어려운 일입니다. 사이즈를 고정하면 웹브라우져의 화면에 따라 유연하게 반응하기 어렵습니다. Container 클래스 값을 적용하는 것만으로 쉽게 배치 문제를 해결할 수 있습니다. Container 클래스의 종류는 아래와 같습니다. container container-sm container-md container-md container-xl Bootstra..

목차 참조 글 시작에 앞서 visual studio에서 bootstrap 코드를 작성하고 확인하는 방법을 괄호 링크에 있으니 참조하길 바란다. (https://scribblinganything.tistory.com/298) Bootstrap 팝업창(modal, dialog box) 만들기 (크기 조절) Bootstrap에서 말풍선을 만드는 방법은 크게 두가지가 있다. tooltip modal 툴팁의 경우 마우스를 올려만 놓아도 박스가 생기고 마우스를 옮기면 사라진다. 모달의 경우 클릭과 같은 행동을 통해 새로운 창을 만들고 그 창을 원하는 형태로 꾸며 줄 수 있다. 예제 코드로 이해해보기 코드>> 버튼을 클릭하면 말풍선/팝업창이 생깁니다 클릭 × 헤더 부분 바디 부분 테일부분 닫기 결과>> 주석>> 모달..