잇뉴얼 (IT_Manual)

[HTML] - 장고 템플릿 태그 기본 사용법 (with 파이썬) 장고 (Django) 템플릿이란? 정적인 HTML에 동적인 Python을 사용할 수 있도록 해주는 기능 ■ HTML에서 장고 (Django) 조건문 사용방법 {% if num == 1 %} one {% elif num == 2 %} two {% elif num == 3 %} three {% else %} four {% endif %} '장고 (Django)'에서는 'HTML'에서 조건문을 바로 만들수 있습니다. 따로 'JavaScript'를 사용하지 않고도 바로 알고리즘을 짤 수 있습니다. 위에서 언급했듯이 '파이썬'문법으로 작성을 해야합니다. '{% if 조건문 %}'으로 시작을해 아래쪽에 'HTML'을 작성한 다음, 조건문이 끝난다면,..

[웹개발] - Jinja2 사용방법 (Feat. Python Flask) ■ app.py 코드 구현 @app.route('/', methods=["GET"]) def function_name(): give_data = "String" return render_template("index.html",use_jinja=give_data) 함수 안에 'give_data'라는 변수를 생성한 다음, 데이터를 넣어준 다음, render_template를 이용하여, 'index.html'을 불러오는것과 동시에, 'use_jinja'에 'give_data'값을 넣어 'index.html'에서 사용할 수 있도록 만들어줍니다. ■ index.html 코드 구현 {{ use_jinja }} 서버에서 받은 값을 HTML에 보..

[Ajax] Ajax 기본 코드 작성 방법 Ajax란 Asynchronous JavaScript and XML의 약자 ★ 참고 ★ Ajax 를 사용하기 위해서는 HTML안에 JQuery 라이브러리가 포함되어있어야합니다. 포함이 되어있지 않을시에는 에러가 발생하게 됩니다. JQuery 라이브러리 코드 : 기본 코드 작성 방법 $.ajax({ type: "GET", // 혹은 POST, PUT, DELETE 작성 가능 url: "URL 작성", data: {}, // type:"GET" 방식일 경우는 비워두기 success: function(response){ console.log(response) // 받아온 데이터 결과 출력 } }) 코드 설명 설명 type 'GET' 혹은 'POST'입력 GET : 데..

[JQuery] 제이쿼리를 이용한 HTML요소 추가 방법 목표 : JQuery를 이용해 HTML을 요소를 추가 사용 코드 : $("#id이름 혹은 .class이름).append(변수명) ▶ HTML 요소 추가 방법 JQuery 작성 Jquery를 이용하기 위해 먼저, JQuery 라이브러리 코드를 추가한 다음, 태그를 이용해서, JS 함수를 하나 생성해줍니다. 함수안에 새로운 변수를 생성하게되는데, 이 변수안에 HTML요소를 작성해주시면 됩니다. 주의할 점은 따옴표(')가 아닌 백틱(`)으로 감싸고 있는 점인데요. 백틱은 숫자 1 왼쪽 키보드를 보면 물결표와 함께 같이 있습니다. 그리고 '$("#id이름 혹은 .클래스 이름").append(변수명)' 을 작성해줍니다. 이 코드가 해당 id 혹은 클래스이름..

[JavaScript] 자바스크립트 경고창 띄우기 ▶ 목표 웹페이지에서 버튼을 눌렀을 경우, 경고창의 띄우기 자바스크립트 코드 (HTML 내부 작성) 태그안에 태그를 작성 후, 자바스크립트 코드를 작성합니다. 자바스크립트안에 'alert_fun()'함수를 선언한 다음 웹페이지에서 '경고창'을 띄우기 위해 'alert(원하는 내용)'을 작성해줍니다. HTML 태그 버튼을 눌러주세요. 태그안에 태그를 생성해줍니다. 코드를 보면, 'onclick'이 보이는데요. 'onclick'은 자바스크립트의 함수를 불러오는 역할을 하게됩니다.

[CSS] CSS 작성방법 (인라인 스타일, 내부 스타일 시트, 외부 스타일 시트) ▶ 인라인 스타일 인라인 스타일 인라인 스타일 '인라인 스타일'은 태그안에 CSS코드를 바로 작성할수 있습니다. 태그안에 style="CSS코드;"를 작성하면되며, CSS 여러코드를 적용하길 원하신다면, 'style = "CSS코드; CSS코드;" 형식으로 코드가 끝나는곳에 세미콜론 ';'을 작성하시고 추가로 작성하시면 됩니다. ▶ 내부 스타일 시트 인라인 스타일 코드 내부에 이라는 태그를 작성해준 다음, 태그안에 CSS를 작성하는 방식입니다. CSS 작성방법은 다음과 같습니다. 코드 작성 방법 설명 태그명 { CSS 코드 } 해당되는 태그 전부 CSS 코드 적용 #id명 { CSS 코드 } id가 작성되어있는 태그에만 ..

[Python] 파이썬 딕셔너리 (Dictionary) 변수는 하나의 데이터를 저장해주는 역할을 합니다. 그러나, 데이터의 양이 많아지면 변수도 많이지게 되어서 코드를 작성하는데 많이 힘들어지게 되는데요. 이러한 불편함을 해결해줄수는것이 바로 리스트(List)와 딕셔너리(Dictionary)입니다. 이번 포스트에서는 딕셔너리(Dictionary)에 대해 다뤄보도록 하겠습니다. ▶ 딕셔너리 (Dictionary) 딕셔너리 구성은 {key:value}로 구성이 되어있습니다. _dict_empty = {} _dict_empty1 = dict() _dict = {"one":1,"two":2} _dict1 = dict(one=1,two=2) _dict2 = dict([('one',1),('two',2)]) pri..

[JavaScript] 자바스크립트 함수 선언과 호출 코드들의 집합을 '함수'라고 합니다. 변수에 값을 할당하는것 처럼, 함수안에도 코드를 작성해놓고, 계속 사용할 수 있게 만드는데요. 함수를 선언하는 방법과 호출하는 방법을 다뤄보겠습니다. ▶ 함수 선언 function 함수명(매개변수들...) { // 이 함수에서 실행할 코드들 작성 return 반환값 } 함수 구성 설명 함수명 사용자가 원하는 이름을 지정할 수 있다. 단, 예약어로 지정된 이름은 사용할 수 없습니다. 매개변수들 함수 밖에서 함수안으로 특정 값을 넣고 싶을때 사용 코드 함수 안에 다양한 코드를 작성해 원하는 결과값을 만들어냄 return 코드가 다 끝나고 함수를 호출한곳에 값을 보내주는 역할 함수를 선언할려면, 'function'으로 ..

[JavaScript] 자바스크립트 조건문 프로그램을 코딩할때 일방통행처럼 하나만 실행하는게 아니라, 여러 조건에 따라 그 조건에 맞는 코드를 실행할 수 있도록 만들경우가 많습니다. 여러 조건에 따라 코드를 실행할 수 있도록 하는 코드가 바로 '조건문'인데요. 이번 포스트에서는 '조건문'에 대해 다뤄보도록 하겠습니다. ▶ if 문 let num = 1 if (num === 1) { console.log(`이 값은 ${num} 값이 맞습니다.`) // 조건이 맞으므로 코드 실행 } if (num === 2) { console.log(`이 값은 ${num} 값이 맞습니다.`) // 조건이 맞지 않으므로 코드 실행 X } ' if ' 말 그래도 '만일'이라는 뜻으로, '()'괄호안의 조건이 맞을 경우, '{}..

[JavaScript] 자바스크립트 데이터 타입 변수를 선언할때, 'let','const'키워드로 선언을 하지만, 할당되는 값에 따라 데이터 타입이 달라지는데요. 데이터 타입중 기본형 또는 원시형 (primitive) 타입이라 불리는 number, string, boolean, null, undefined에 대해 한번 포스팅 해보겠습니다. ▶ number - 숫자 데이터 let num = 7 console.log(num) console.log(typeof(num)) // typeof - 해당 변수의 데이터 타입을 확인할 수 있다. 'let'키워드로 'num'변수를 선언한 다음, 해당 변수에 '7'숫자를 입력했습니다. 그리고 'console.log'로 값을 출력하면 당연히 '7'이라는 숫자가 출력됩니다. ..