Appia의 IT세상

[초보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배우기 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 위의 부분을 적용하면 다음과 같은 화면이 ..

[초보HTML배우기 08]HTML - HTML에 리스트(List) 나열하기 앞선 포스팅에서는 HTML에 표를 입력하는 부분에 대해서 살펴봤습니다. 앞선 포스팅에서 이야기 드린 바와 같이 HTML 자체가 문서를 작성하는 것과 그리 크게 차이가 없습니다. 그래서 이번에는 항목에 대한 리스트(List)을 열거하는 방법에 대해서 살펴보겠습니다. 먼저, HTML상에서 총 3가지 형태로 리스트를 제공하고 있습니다. 순서가 있는 리스트 - 순서가 있는 리스트의 경우 각 항목 앞에 번호를 붙여 줍니다. 순서가 없는 리스트 - 순서가 없는 리스트의 경우 도형등을 통해서 앞에 명시를 해줍니다. 사용자 정의 리스트 - 사용자 정의 리스트의 경우 각 항목들을 사용자가 지정한 대로 사용이 가능합니다. 그럼 각 항목들에 대해서 ..

[초보HTML배우기 07]HTML - HTML에 표(Table) 입력하기 앞서 포스팅에서 HTML에 사진/이미지를 입력하는 방법에 대해서 살펴봤습니다. 그러면서 간단한 속성들에 대해서 살펴봤습니다. 이번 포스팅에서는 표(Table)을 입력하는 방법에 대해서 살펴보고자 합니다. 앞선 포스팅까지 아시다시피, HTML또한 문서입니다. 즉, 웹페이지에 표시될 문서를 작성하는 것이라고 생각하시면 좋을듯 합니다. 문서에서는 아시다시피 표(Table)이 매우 많이 사용됩니다. 따라서, 이 부분에 대해서 살펴보겠습니다. 먼저, 간단한 코드를 통해서 살펴보겠습니다. Document 열 1, 행 1 열 1, 행 2 열 2, 행 1 열 2, 행 2 Colored by Color Scriptercs 위의 코드를 실행하면 다음..