본문 바로가기
input 태그 속성에 대해 자세히 살펴보기 – HTML5 태그를 이용하여 폼을 만드는 방법에 대해 살펴봤습니다. 사용자들이 폼을 좀 더 사용하기 쉽게 만들기 위해 태그의 여러 속성들에 대해 살펴봅니다. 텍스트 입력창에 힌트를 표시하거나 필수 입력항목 등의 지정을 태그 속성으로 지정할 수 있습니다. autofocus 속성은 웹 페이지가 열리자마자 원하는 요소에 마우스 커서를 표시하며 바로 입력 가능하게 합니다. placeholder 속성은 사용자가 텍스트를 입력할 때 해당 필드에(텍스트 상자)에 힌트 등을 표시하게 되며 입력이 시작되면 힌트는 사라집니다. readonly 속성은 사용자 입력을 받지 않고 해당 필드를 읽기 전용으로 변경합니다. 사용법은 readonly="true", readonly="readonly" 또는 그냥 readonly만 사용해도 해당 기능.. 2021. 12. 14.
폼(form)과 input 태그 살펴보기 – HTML5 웹 페이지에서 자주 사용되는 폼(form)에 대해 살펴봅니다. 사용자가 아이디를 입력하거나 어떠한 정보를 입력할 때 폼을 사용하는 경우가 많습니다. 플라스크 웹 프레임 워크를 다룰 때 자주 사용된 태그에 대해 좀 더 자세히 살펴봅니다. 태그는 기본 사용법과 자주 사용되는 속성에 대해 살펴봅니다. 폼 요소 속성 설명 method 서버에 데이터를 전송하는 방식 설정(GET, POST) name 폼의 이름을 설정 action 태그를 처리할 서버상의 프로그램 설정 targe action 설정에서 지정한 스크립트를 다른 위치에서 열도록 지정 method에서 GET 전송 방식으로 지정하게 되면 주소 표시줄에 입력한 내용이 그대로 노출되며 주로 간단한 데이터가 전송될 때 사용합니다. POST 전송 방식은 사용자 입력.. 2021. 12. 14.
웹 페이지에 하이퍼링크와 이미지 표시하기 – HTML5 HTML에서 빼놓을 수 없는 태그 중 이미지와 하이퍼링크가 있습니다. 예전 WWW(World Wide Web)이 등장하기 전 텍스트로만 인터넷 서비스(telnet, gopher, ftp, netfind 등등)를 이용할 때는 사용자가 직접 문서나 원하는 정보를 찾아야 했으나 검색엔진과 웹페이지의 등장(그리고 웹브라우저의 등장)으로 이미지를 클릭하거나 하이퍼링크를 클릭하는 것만으로도 사용자가 원하는 문서에 접근이 가능해졌습니다. 지금의 웹페이지에서 핵심 기능이라 할 수 있는 하이퍼링크와 이미지 표현 방법에 대해 살펴봅니다. 웹페이지에 표현하고자 하는 이미지 파일은 JPEG/JPG, PNG, GIF 정도로 사용할 수 있습니다. 표시 가능한 색상 수가 256가지뿐이지만 작은 용량으로 움직이는 영상(움짤)을 간단.. 2021. 12. 14.
웹 페이지에 목록과 테이블(표) 표현하기– HTML5 지금까지 텍스트 관련 태그에 대해 살펴봤다면 오늘은 조금 더 심화(?) 된 내용을 다뤄봅니다. 웹 페이지에 목록과 테이블(표)를 만들어 봅니다. 웹 프로그래밍에서 자주 사용되는 표현 방식이오니 기본 구조는 잘 살펴보겠습니다. 목록으로 처리 ~ 순서 없는 목록 ~ 순서 있는 목록 설명 목록 태그는 순서가 없는 목록을 작성할 때 사용하며 세부 목록 리스트 태그로 를 사용합니다. 파이썬 HTML 태그는 순서가 있는 목록을 작성할 때 사용하며 세부 목록 리스트 태그로 를 사용합니다. 태그의 세부 리스트 태그와 동일합니다. C언어 파이썬 HTML 태그는 순서를 type 속성값에 따라 숫자, 영문, 로마자로 표기 가능합니다. (default로 숫자가 지정됩니다.) 그리고 start, reverse 속성을 이용하여 .. 2021. 12. 14.
HTML 기초 문법 중 태그(tag)에 대해 살펴보기 – HTML5 파이썬 웹 프레임워크 플라스크를 살펴본 후 때늦은 후회를 하며 이제서야 HTML에 대해 살펴보고 있습니다. 후회막급이네요. 웹 관련 코딩을 배우기로 작정한 분들은 HTML/CSS 기초부터 살펴보시길 다시 한번 권장합니다. 잘 코딩 된 프로그램도 혼자서 또는 폐쇄적으로 사용할 게 아니라면 배포(deploy) 과정을 거쳐야 하는데 이때 웹을 거치지 않고 배포를 진행하기란 상당한 어려움이 있습니다. 잘 가공된 데이터를 사용자들이 이해하기 쉽게 시각화하는 것이 중요한 만큼 웹 페이지에도 잘 나타내야 사용자들이 쉽게 접근할 수 있겠죠? 그래서 다소 늦은 감이 있지만 HTML의 기초부터 살펴보고 있습니다. HTML을 언어라고 보기엔 너무 가볍지만 그렇다고 전혀 몰라도 되는 건 아닙디다. ^^ HTML에서 사용되는 .. 2021. 12. 14.
웹 프로그래밍은 후회하지 말고 HTML / CSS 기초부터 차근차근 다지기 - HTML5 파이썬 코딩을 시작으로 데이터 분석 라이브러리 판다스(Pandas) 그리고 웹 프레임워크 플라스크(Flask)까지 살펴봤습니다. 제가 생각하고 있는 툴 또는 웹서비스 개발에 필요한 언어와 라이브러리, 프레임워크 순으로 공부하면 되겠다 싶었지만 웹의 기본 중의 기본인 HTML 조차 제대로 이해하지도 못하며 계속 진행하기 어려웠습니다. 파이썬과 판다스를 알아갈 때만 하더라도 상당히 이해하기가 쉬웠다고 생각되나 파이썬 웹 프레임워크인 플라스크를 다루며 제일 답답했던 게 HTML과 자바스크립트였습니다. HTML을 언어라 생각하지도 않고 너무 만만하게 생각했던 것 같습니다. 결국 웹 서비스를 계획하고 있는 분들이라면 HTML/CSS부터 기초를 다지고 자바스크립트(Javascript)로 테크를 타시는 게 옳아 보입.. 2021. 12. 14.
웹 페이지에서 나타나는 스크립트 난독화하기 - 자바스크립트 자바스크립트와 HTML은 파이썬이나 C/C++과 같이 서버에서 실행되는 게 아니라 사용자의 웹브라우저에서 해석되는 언어이다 보니 사용자가 언제든지 소스코드를 들여다볼 수 있습니다. HTML은 어쩔 수 없이 그대로 노출되더라도 자바스크립트 코드만이라도 그대로 노출되는 것을 막고 싶을 때 사용되는 난독화 툴(사이트)을 소개코자 합니다. 로컬에서 자바 스크립트를 실행 후 크롬 브라우저에서 F12 (개발자 도구) – source로 확인되는 소스코드입니다. 이같이 source가 무분별하게 수집되지 않도록 하기 위해 보호가 필요한 스크립트를 난독화합니다. 우선 난독화 전 스크립트입니다. 난독화 후 스크립트입니다. 난독화 전후 스크립트의 실행 결과는 같지만 후자의 경우 그냥 봐서는 전혀 해석할 수 없는 스크립트로 난.. 2021. 12. 13.
구글 차트 라이브러리를 이용하여 그래프 그리기 - 자바스크립트 자바스크립트로 만들어진 사이트에서 간단한 방법으로 데이터를 시각화할 수 있는 구글 차트를 사용해 봤습니다. 자바스크립트로 데이터를 시각화할 수 있도록 도와주는 라이브러리가 많이 있지만 저는 구글 차트를 이용하여 차트를 그려 봅니다. 단조롭게 보이긴 하지만 기능에 충실한 차트들이 많더군요. 구글 차트에 들어가 자신의 데이터와 적합한 차트를 골라봅니다. 그래프별 사용법, 옵션 등이 타 사이트들 보다 상세하게 문서화되어 있어 스크립트에 바로 적용할 수 있습니다. 저는 candlestick chart를 사이트에 적용했습니다. 차트 모양과 스크립트 예문, 데이터 세팅 구조 등도 상세하게 설명되어 있습니다. 캔들차트 형식에 맞게끔 다중 배열에 데이터를 입력하였으며 y 축의 상한과 하한을 정의하고, y 축 기준선을 .. 2021. 12. 13.
수능 점수 분석 사이트 만들기 (with AWS Lightsail & Netlify.com) 그동안 살펴본 파이썬과 자바스크립트를 이용하여 수능 점수 분석 사이트를 만들었습니다. 2~3년 전 아들내미 진학 과정에서 필요하다 싶었던 사이트를 이제서야 만들게 됩니다. (유료사이트는 많이 있지만 그래도 한 번쯤 만들어 보고 싶었답니다.) 대부분의 사용자 정보는 HTML로 입력받아 자바스크립트로 과거 입결 자료를 바탕으로 예상 합격선 자료를 만들고 비교하여 결과를 뿌리게 되며, 게시판 페이지는 파이썬 플라스크를 배우며 만든 사이트를 연결하였습니다. 이번 수능 점수 분석 사이트를 만들며 많은 우여곡절을 겪었습니다. 특히 과거 대학 입결 자료를 수집하고 해석하는 과정이라던가 종전과 많이 달라진 입시환경에서 대학별 예상 합격 데이터를 가공하는 부분, 그리고 기술적으로는 메인 사이트와 게시판 사이트를 연결하는.. 2021. 12. 13.

티스토리툴바