기본 콘텐츠로 건너뛰기

라벨이 HTML인 게시물 표시

HTML의 기초 강좌 1. HTML 파일을 만들어보자!

HTML의 기초 HTML을 업무용으로 사용하기 위한 기초부터 시작을 하려고 합니다. HTML이란 Hyper Text Markup Language의 약자로 WWW의 초기부터 인터넷 상에 정보를 보다 간단하게 표시하기 위한 규약으로 자리 잡았습니다. 참고문헌(위키페디아) :  https://ko.wikipedia.org/wiki/HTML 시작하기 전에 HTML 편집 툴은 다양하게 있고 심지어는 윈도우의 메모장 등 기초적인 텍스트 편집기만 있으면 편집이 가능합니다. 하지만 여기서는 프로젝트로서 서버와의 연동까지 생각해서 만들고 있으므로 github 프로젝트와 같이 하는 것으로 하겠습니다. 아래 사이트에서 편집기인 Visual Studio Code(무료) 및 Git for windows(무료)를 다운 받으시기 바랍니다. Visual Studio Code :  https://code.visualstudio.com/download Git for windows :  https://gitforwindows.org/ Git for Windows는 설치시에 물어보는게 많은데 그냥 디폴트로 다음다음 넘어가도 문제가 없습니다. 상세 선택은 고급 사용자가 하는 걸로 ... 편집기의 기초 vscode를 설치하면 아래와 같은 화면이 뜹니다. 일반적으로 프로젝트 단위로 열곤 하는데 저의 경우는 다양한 프로젝트를 일괄 관리를 하다보니 project라는 폴더를 만들고 하위에 각각 git에서 다운 받은 레포지터리가 있고 vscode에서는 상위 폴더인 project 폴더를 열어서 크로스 프로젝트로 관리하고 있습니다. 이건 얼마나 프로젝트끼리 연동해서 사용하느냐에 따라 다르기 때문에 좋아하는 형태로 열어서 사용하시기 바랍니다. github에서 프로젝트를 만들자 Github( https://github.com ) 에 가입하는 것은 생략하겠습니다. github에 로그인을 한 뒤에 오른쪽 위의 자기 프로필 사진 아이콘 옆에  +  를 눌러 나오는 메뉴에서 Create Repository를 선택하여 레포

다른 사이트의 HTML소스를 불러오기 . (XMLHTTP 를 활용한 VB, ASP)

프로그램을 만들다보면.. php에는 있지만 asp에는 없는 다른 서버의 데이터를 긁어오는 기능이 필요할 때가 많을 겁니다. MS에서는 XML기반의 데이터 처리 콤포넌트인 MSXML에서 지원을 해주고 있습니다. 사실 그런 목적보단 XML데이터를 가져와서 처리하는 것을 목적으로 하고 있습니다만.. 암튼.. 이것을 이용해서 아래 소스를 그대로 사용하면 원하는 홈페이지의 내용을 그대로 출력하게 됩니다. 예를 들어 a = LWGetHTTP(" http://www.littleworld.net ")이라고 입력하면 해당 홈페이지의소스가 a란 변수에 들어가게 됩니다. 소스안에는 50kb로 제한을 두었는데 이것은 임의로 조정하시면 됩니다. MSXML을 설치하려면 MSDN홈페이지에서 MSXML설치 파일을 받아서 설치하시면 됩니다. 요즘은 기본으로 지원되는 경우도 있으니 우선 해보시고 안되면 설치하시면 됩니다. form값에 데이터를 넣어서 던지는 경우 Function lwGetHTTP(url, meth, fv)  Dim xmlHttp  Set xmlHttp = CreateObject("MSXML2.serverXMLHTTP")  xmlHttp.Open meth, url, False  xmlHttp.setRequestHeader "Content-Type", " text/html; charset=utf-8"  'xmlHttp.setRequestHeader "Content-Type", " text/html"  'xmlHttp.setRequestHeader "Content-Length", "length"  if fv = empty then    xmlHttp.Send  else    xmlHttp.Send fv  end if  xmlData = xmlHttp.responseText  '

HTML - META Tag - Refreshm, charset

페이지 리프레시 <META HTTP-EQUIV="refresh" CONTENT="5;URL=/msg/msg_list.asp"> content에 있는 숫자의 단위는 초 입니다. /msg/msg_list.asp을 5초후에 이동시키는 것입니다. 자신의 페이지를 넣으면 매 5초마다 자신의 페이지가 리프레시됩니다. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> characterset을 utf-8로 설정 합니다. 한글의 경우 euc-kr 로 설정합니다. 일본어의 경우 shift-jis 또는 euc-jp로 설정합니다. euc-jp의 경우 코드 페이지가 전혀 다르기 때문에 불편하게 되는 경우가 많습니다. 이런 설정을 할 때 프로그램이 들어가는 페이지라면 프로그램에서도 같은 코드페이지로 설정해 놓는 것이 좋습니다.

HTML 자주 사용하는 CSS

// 자동줄바꿈은 word-break를 이용함. td {font-size: 12px;word-break:break-all;} body {font-size: 12px;word-break:break-all;} a:link {color:black; text-decoration:none} a:visited {color:black; text-decoration:none} a:hover {color:ff9999; text-decoration:underline} .whitelink {  color: #FFFFFF} .login_txt {color:#77AA66} .login_box {border:solid 1; font-size:11px; height:14; border-color:#99CC99;background-color:white; color:#557744;} .login_btn {border:solid 1; font-size:11px; height:14; border-color:#557744;background-color:#779966;color:#FFFFFF;font-weight:bold;} .solid {border:1px solid; height:18; padding-top:2; border-color:#999999} .solid_button {border:1px solid; height:18; padding-top:2;border-color:#999999;background-color:#DDCCAA; color:#CCAABB;} .space {padding-top:20; padding-left:30; padding-bottom:20; padding-right:20} .inner_box {       background-color:#EEFFEE;       border-top-width: 1px;       border-right-width: 1px;       border-bottom-width: 1px;       border-left-width: 1px;