HTML8 [HTML/DJANGO 웹개발 기초] GET, POST 방식 차이 예시 HTML GET, POST 방식 차이 GET/POST 방식으로 데이터를 전달하는 것은 웹개발에 있어서 가장 기초적인 부분 중 하나입니다. 이걸 이해하고 있어야 Django 웹 개발을 할 때 훨씬 수월하더라고요! 웹페이지 개발을 할 때 언제 GET 방식을 쓰고, 언제 POST 방식을 써야 할까요? 우선 GET방식과 포스트 방식에 차이점 그리고 장단점에 대해서 간략히 나열해 보겠습니다! 1. GET 방식 GET 방식은 서버로부터 정보를 요청할 때 사용됩니다. 브라우저에서 URL에 데이터를 첨부하여 요청을 보냅니다. 요청한 데이터는 URL의 쿼리 매개변수(query parameters)로 전달됩니다. 그렇기 때문에 주소 값에 전달되는 데이터의 값이 표시됩니다. 데이터가 보이기 때문에 보안에 취약할 수 있겠죠!.. 2023. 7. 5. [Javascript] innerHTML, innerText, textContent 차이점 예제 포함 innerHTML vs innerText vs textContent Javascript에서 Node 또는 Element의 텍스트값을 읽어오거나 설정할 때 innerHTML, innerText, textContent 속성을 사용하게 됩니다. 그런데 여기서 문제는, 어떤 상황에서 어떤 것을 사용하느냐입니다. 왜냐하면 각각이 가져오거나 수정하는 내용에는 차이가 있기 때문입니다. 헷갈리지만 가장 기본적인 내용 중 하나이니 예제로 알아보겠습니다! html body 부분이 아래와 같이 적혀 있다고 했을 때 세 가지를 통해 각각 어떤 값이 가져와지는지 보겠습니다. Hello World innerHTML innerHTML 속성은 'Element'의 속성으로, Element 내부에 있는 HTML 또는 XML 마크업 내용.. 2023. 6. 26. Javascript AJAX 예제, 비동기 데이터 불러오기 (전기자동차 데이터 분석 예제) 이번 예제에서는 자바스크립트 AJAX 예제를 통해 비동기 통신을 활용하기 위한 코드를 알아보겠습니다. 미국 워싱턴 주의 전기차 등록 현황에 대한 데이터 셋 'eleclist.xml'을 다운로드해서 예제에 사용하였습니다! 필요하시면 댓글로 말씀 주세요. (xml 파일 출처 : data.gov) 간단하게 비동기 통신에 대한 개념은 이전 포스트를 참고해 주세요 : Javascript: 비전공자도 쉽게 이해하는 AJAX 개념 정리 AJAX ajax : Asynchronous Javascript and Xml ajax를 사용하면 서버에 요청한 후, 페이지를 다시 로딩하지 않고 일부를 업데이트할 수 있습니다. 비동기 요청으로 새로고침(페이지 로딩)이 다시 되지 않았다 joy-home.tistory.com 그럼 오늘.. 2023. 6. 21. CSS 개념 정리, 문법, 속성 지정하는 방법 css css : Cascading StyleSheets 웹개발에서 HTML은 구조화를 해주는 역할을 한다면 CSS는 문서의 스타일을 지정해주는 언어입니다. 기본 문법, 사용 방법 기본적으로 selector{속성1; 속성2...} 형태라고 생각했을 때 selector 부분이 태그를 가르키고 대괄호 안에 있는 것들이 반영하고 싶은 스타일입니다. html 페이지에 개시할 내용을 구조화한 뒤에 css를 활용해서 스타일링 하는 방법은 크게 3가지가 있습니다. 인라인 스타일시트 내부 스타일시트 : html 내부에서 간단하게 작성 head에 p{}로 스타일을 정의해주면 body에서 했을 때 p의 스타일을 반영할 수 있음 외부 스타일시트 : 별도의 css 파일을 만들어서 스타일 반영 가능굳이 외부 css가 필요한 이.. 2023. 6. 10. HTML: 간단하게 form 폼 만들기, select 속성 예제 form 만들 때 가장 자주 쓰게 되는 요소 중에 하나인 select 요소를 사용해서 사용자가 입력한 데이터를 받아 저장하는 폼을 만들어 보겠습니다. 오늘 먹은 메뉴를 선택하는 드롭다운 리스트를 HTML 사용해서 만들어 보는 간단한 예제로 살펴보겠습니다. 간단한 폼을 만들어서 선택하고 원하는 링크로 데이터를 전송하는 방법까지 정리해보겠습니다. 참고로 해당 예제의 전체 코드는 제 GitHub에 올려 놓았으니 확인 하시면서 복사도 해보시고 연습 해 보세요! select 속성 시작하기에 앞서 알아야 하는 select 속성들이 몇 가지 있습니다. name : option : 드롭다운 리스트에서 사용자가 선택할 수 있는 각 항목들입니다. 사용자에게 표시될 텍스트를 표시하고, 사용자가 선택할 수 있는 선택지입니다... 2023. 6. 10. 비전공자 웹개발: HTML form 만들기, 태그와 속성 하이퍼링크 기초 http://127.0.0.1:5500/web01-html/html10-form-res.html?id=%E3%84%B4%E3%85%87%E3%84%B9&pw=%E3%85%87%E3%84%B9sdf&rdo=n&web=web&etc=%E3%85%81%E3%84%B4%E3%84%B9%E3%84%B4%E3%85%87 클라이언트 서버 request 하는 것을 복귀해봅시다. 하이퍼링크를 보면 '?' 뒤에 있는 것을 query string 이라고 하고, '=' 표시로 입력된 내용이 뜹니다 header : 우리가 링크에서 볼 수 있는 내용 body : 안 보이는 내용 form 태그와 속성 form 태그 : 데이터를 많이 전달할 때 사용 (form tag 안에 있는 것들이 전달됨) 속성: action=".. 2023. 6. 9. 이전 1 2 다음
