Appia의 IT세상

Sublime Text 기본 템플릿 사용하기 HTML에 대해서 작성을 할 경우에 다양한 에디터 툴을 사용합니다. 저의 경우에는 이전 포스팅에서 이야기 드린바와 같이 최근에 Sublime Text를 사용합니다. 그래서 이것저것 해보던 중에 몇가지 부분들에 대해서 살펴보던 중에 자동으로 템플릿을 생성하는 방법을 확인하였습니다. 그래서 그 부분에 대해서 공유를 드리고자 합니다. 다음 포스팅은 Sublime Text가 설치되었다는 전제로 진행이됩니다. 만약 설치를 진행하시지 않았거나, 설치가 되지 않은 분들은 다음 링크을 참조하여 Sublime Text를 설치하시길 바랍니다. [윈도우10 Windows10] HTML 에디터 Sublime Text 다운로드 및 설치하기 [윈도우10 Windows10] HTML 에..

[초보HTML배우기 17]HTML - 버튼(button)만들기(input) html에서는 단순히 정보만 표시하는 데에 그치지 않습니다. 실제 문서적인 출력하는 부분과 프로그래밍 부분이 섞여 있는 부분이 html이라고 생각합니다. 이 html에 버튼을 생성해보도록 하겠습니다. 물론, 이런 부분들은 향후 다른 언어와 결합되어 사용이 됩니다. 즉, 예를 들면, 자바 스크립트와 함꼐 사용되고, 버튼을 눌렀을 경우 이 부분들에 동작을 할 수 있게 코딩할 수 있습니다. 그래서 오늘은 이 버튼을 생성하는 방법에 대해서 살펴보겠습니다. 위와 같은 버튼을 생성하는 부분에 대해서 다음 한번 살펴보겠습니다. Document Colored by Color Scripter cs 위의 버튼을 지원하는 타입(type)을 다음과 같..

[초보HTML배우기 16]HTML - 파일 업로드 박스(upload box)만들기(input) 웹에서 종종 파일을 업로드 하는 경우가 많습니다. 그럴 경우, 프로그래밍에서 사용하는 파일 다이어로그(file dialog)와 같은 부분들이 요구 됩니다. 실제, 파이썬등에서는 관련해서 관련 모듈을 바탕으로 사용됩니다. 물론 HTML에서도 관련하여 방법들을 제공하고 있습니다. 따라서, 이번 포스팅은 파일을 업로드 할 수 있는 파일 업로드 박스를 만들기로 해보겠습니다. 파일 업로드 박스(upload box)도 앞선 포스팅들과 유사하게 input 태그에서 type을 변경함으로 사용합니다. 그럼 다음 코드를 한번 살펴보겠습니다. Document Colored by Color Scriptercs 위의 코드의 html을..

[초보HTML배우기 15]HTML - Form, 콤보 박스(Select box)만들기(select) 이번 포스팅에서는 GUI 프로그래밍에서 많이들 사용하는, 리스트 박스라고도 하고, 또는 콤보 박스(Control)박스라고도 하는 부분에 대해서 포스팅을 해보겠습니다. 먼저, 대략적인 형태를 보면 다음과 같은 형태입니다. 위의 상자 부분을 클릭하면, 그 밑에 선택할 수 있는 리스트들이 존재합니다. 그런 부분들을 콤보 박스(Select box)라고 합니다. 위와 같은 화면을 HTML로 작성하는 부분에 대해서 한번 살펴보겠습니다. Document 파이썬 매트랩 HTML Colored by Color Scriptercs 위와 같은 코드로 작성하면 콤보 박스(Select box)를 클릭하여 리스트를 확인하면 다음과..

[초보HTML배우기 14]HTML - Form, 라디오 버튼(radio button)만들기(input) 이번 포스팅에서는 여러개의 버튼중을 하나를 선택할 수 있는 라디오 버튼(radio button)을 만드는 방법에 대해서 이야기 해보고자 합니다. 먼저 라디오 버튼(radio button)은 여러개의 메뉴중에 하나만 선택할 수 있게 해주는 버튼입니다. 간단히 예를 들면 다음과 같은 버튼이라고 할 수 있습니다. 위의 부분과 같은 부분에 대한 코드를 한번 작성해보도록 하겠습니다. Document 앱피아1 앱피아2 앱피아3 앱피아4 Colored by Color Scriptercs 위의 HTML로 작성한 부분을 저장하여 html을 브라우저로 보면 다음과 같습니다. 그럼 간단히 위의 부분에 대한 속성에 대해서 ..

[초보HTML배우기 13]HTML - Form, Checkbox만들기(input) 앞서 포스팅에서는 텍스트를 입력 받는 공간을 만들어봤습니다. 이전 포스팅에서는 일반 적인 한줄 텍스트 박스, Password를 입력할 수 있는 텍스트 박스, 그리고 여러줄을 입력할 수 있는 텍스트 박스를 생성해봤습니다. 이번 포스팅에서는 체크 박스를 생성을 해보도록 하겠습니다. 그럼 간단하게 다음 코드를 한번 살펴보겠습니다. Document 브라우저를 선택하세요 구글 네이버 Colored by Color Scriptercs 위의 코드를 바탕으로 생성된 html파일을 브라우저에서 읽으면 다음과 같은 형태로 나타납니다. 위의 바탕으로 생성하는 부분들을 살펴봤는데, 앞선 포스팅에서 봤던 input을 재사용합니다. 단, type ..

[초보HTML배우기 12]HTML - Form - Text Input 생성하기 (input, textarea) 이번 포스팅은 HTML에서 특정 Form에 대해서 이야기를 해보고자 합니다. HTML에서는 많은 형태의 Form을 제공하고 있습니다. 이 중에서 이번 포스팅에서는 Text Input에 대해서 생성해보도록 하겠습니다. Text Input에 관련된 부분은 텍스트를 입력할 수 있게 해주는 부분입니다. 여기에선 크게 셋 가지로 나누어서 볼 수 있습니다. 한줄 테스트 박스 - 오직 한줄에 텍스트를 입력할 수 있는 텍스트 박스 생성 Password 테스트 박스 - 입력된 글자가 노출되지 않는 텍스트 박스 생성 다중라인 테스트 박스 - 여러줄을 입력할 수 있는 텍스트 박스 생성 그럼 위의 부분을 바탕으로 각..

[초보HTML배우기 11]HTML - 이미지를 배경 설정하기 이번 포스팅에서는 HTML에 배경을 설정하는 방법에 대해서 한번 살펴보고자 합니다. HTML도 문서이다 보니, 배경을 설정할 수가 있습니다. 2가지 형태로 살펴보고자 합니다. 1. 전체 배경에 대해서 설정하기 2. 특정 Tag의 속성으로 배경 설정하기 위의 2가지 형태에서는 background속성을 입력하시면 됩니다. background 속성은 다음과 같은 형태로 입력하시면 됩니다. background = "이미지path/file 경로" 그럼 다음과 같이 먼저 진행해보겠습니다. 먼저 HTML의 전체 배경에 대해서 설정하는 해보도록 하겠습니다. 먼저, 다음과 같이, HTML의 body의 background 의 설정을 해주시면 됩니다. 위와 같은 ..

[초보HTML배우기 10]HTML - 태그 항목 그룹화 하기(span, div) 이번 포스팅에서는 태그 항목을 그룹화 하는 방법에 대해서 살펴보고자 합니다. 먼저 그전에 각 태그 항목들을 크게 2가지 형태로 알아보도록 하겠습니다. Block level 화면에는 전후 줄 바꿈이 있는 것처럼 보이는 블록 요소 , , , , , , , , , , Inline level 문장내에서 표현 가능한 요소 , , , , , , , , , , , , , , , 이와 더불어 각 태그들을 기반으로 그룹화 하는 방법에 대해서 함꼐 살펴보겠습니다. 그룹화를 사용하는 목적은 크게 각 스타일들을 동일하게 적용하기 위함입니다. 즉, 그룹으로 설정된 부분들에 대해서 글자색들은 한번만 설정해도 작동으로 적용되게 할 수 있습니다. 그룹화..

[초보HTML배우기 09]HTML - HTML에 하이퍼 링크(hyper-link)연결하기 이번 포스팅에서는 HTML에 하이퍼 링크(hyper-link)을 연결하는 방법에 대해서 살펴보고자 합니다. 흔히 웹페이지에서 특정 부분을 클릭하면, 다른 사이트등에 바로 연결되게 하는 것을 하이퍼 링크(hyper-link)라고 합니다. 먼저 하이퍼링크를 연결하기 위해서는 앵커태그라고 하는 - 을 사용해야합니다. 앵커 태그 내부에서는 어떤것도 링크의 일부가 되고, 해당 부분에 대해서 클릭을 할 수가 있습니다. Text 상기 부분이 적용된 간단한 예시를 한번 살펴보겠습니다. Document 링크 연결 테스트 앱피아 홈페이지 이동 Colored by Color Scriptercs 위의 부분을 적용하면 다음과 같은 화면이 ..