1.HTML
1.1.HTML : Hypertext Markup Language의 약자로서 인터넷 웹사이트 등 하이퍼텍스트를 편집하기 위한 코딩 언어이다. ‘T’를 강조하여, HyperText Markup Language라고 쓰기도 한다. 1991년 팀 버너스 리(Tim Berners-Lee)가 처음 만들었다. 파일 확장자는. html 또는 .htm이다.
1.2.HTML5 : Hypertext Markup Language version 5의 약자이다. 기존의 HTML이 텍스트 및 하이퍼링크 위주로 표시하던 것과 달리 HTML5는 Active-X를 사용하지 않고, 오디오, 비디오, 그래픽, 기타 다양한 응용 프로그램을 웹 자체에서 구현할 수 있다. 2014년 W3C에서 표준안을 확정했다.
1.3.Hypertext : 하이퍼텍스트란 일반 텍스트와 달리 문장이나 단어 등이 서로 연결된 네트워크처럼 구성된 문서를 말한다. 1960년대 Theodore Nelson이 만든 용어이다. 일반 텍스트 문서는 정보를 순차적으로 인식하도록 나열되어 있지만, 하이퍼텍스트 문서는 사용자가 원하는 대로 쉽게 이동할 수 있도록 하이퍼링크(hyperlink)가 걸려 있다. 대표적인 hypertext에는 HTML 문서가 있다.
1.4.Hyperlink : 하이퍼링크란 하나의 개체를 다른 개체로 연결하는 것을 말한다. 간략히 링크(link)라고 한다. 하이퍼링크가 포함된 텍스트 문서를 하이퍼텍스트(hypertext)라고 한다. 하이퍼링크를 따라 하이퍼텍스트를 읽도록 해 주는 응용 프로그램을 브라우저(browser)라고 한다.
1.5.Link : 링크는 하나의 개체를 다른 개체로 연결하는 것을 말한다. 정식 용어는 하이퍼링크(hyperlink)이지만, 간략히 링크라고 한다.
1.6.Markup : 마크업이란 텍스트에 시각적으로 구별되는 주석을 다는 행위를 말한다. 예전에는 작가가 손으로 작성한 원고에 파란색 펜으로 마크업을 표시하다가 디지털 시대를 맞아 텍스트 앞뒤에 태그(tag)를 붙이는 방법이 도입되었다. 마크업 언어에는 HTML, XML, DHTML, XHTML, UDDI 등이 있다.
1.7.Tag : 태그란 어떤 표시를 하기 위해 붙인 꼬리표를 말한다. 예를 들어, HTML tag는 HTML 문서에서 텍스트 앞뒤에 마크업을 붙이기 위해 사용하는 태그이다. 해시태그(Hashtag)는 해시 문자(#) 뒤에 키워드를 넣어 사용자들이 특정 주제나 내용에 대한 검색을 쉽게 할 수 있도록 도와주는 태그이다.
1.8.CSS : Cascading Style Sheets의 줄임말로, 웹 문서의 색상, 폰트, 레이아웃 등을 표현하기 위해 사용하는 스타일 시트 언어이다. 1996년 CSS1, 1998년 CSS2, 2005년 CSS3가 발표되었다.
2.HTML Tag
2.1. <html> : HTML 문서임을 알려주는 태그이다. 모든 HTML 문서는 <html>로 시작하여 </html>로 끝난다.
2.2. <head> : HTML 문서의 머리말임을 알려주는 태그이다. 머리말 부분에서 <meta> 태그를 사용하여 인코딩 방식 등 기본 설정 값을 정의하고, 웹 페이지에 타이틀(<title>)을 붙일 수 있다.
2.3. <meta> : 메타 태그는 HTML 문서의 기본 환경설정 값을 정의하는 태그이다. 예를 들어, <meta charset=“utf-8”>과 같이 써서 UTF-8로 인코딩한다는 것을 정의할 수 있다.
2.4. <title> : 타이틀은 HTML 문서의 제목을 설정하는 태그이다. 웹 브라우저에서 해당 페이지를 즐겨찾기 하면<title> 태그에서 설정한 내용이 기본값으로 표시된다.
2.5. <body> : HTML 문서의 본문임을 알려주는 태그이다. 웹 브라우저를 통해 실제로 출력되는 부분이다.
2.6. <br> : line break의 약자로서, HTML 코딩 시 아래로 한 줄 바꾸라는 태그이다.
2.7. <p> : 문단을 의미하는 paragraph의 약자로서, HTML 코딩 시 문단을 바꾸라는 태그이다. <p>안녕하세요</p><p> 안녕하세요 </p>처럼 사용한다. <p> 태그를 1회 사용하면, <br><br>처럼 2회 사용한 것과 동일한 효과가 있어서, 아래로 두 줄 바꾸게 된다.
2.8. <font> : 폰트의 글꼴, 색상, 크기를 조정할 수 있는 HTML 태그이다. 예를 들어, <font face=“맑은 고딕”맑은고딕 color=“red” size=“3”>이라고 쓰면, 글꼴을 맑은 고딕으로 하고, 색상은 빨간색으로 하고, 사이즈는 3으로 설정한다.
2.9. <span> : 스팬은 텍스트의 스타일을 지정할 때 사용하는 HTML 태그이다. 예를 들어, <span style=“color:red “> 안녕하세요 </span>라고안녕하세요</span> 코딩하면, 해당 텍스트를 빨간색으로 표시한다.
2.10. <ul> : Unordered List의 약자로서, 순서 없는 목록을 나타내기 위해 사용하는 HTML 태그이다. 예를 들어, “<ul><li> 시스템<ul><li> <li><li> 홈페이지 <li>전산장비 </ul>”라고 쓰면, 한 줄에 하나씩 목록을 출력해 준다.
2.11. <ol> : Ordered List의 약자로서, 번호를 붙여서 순서를 표시한 목록을 나타내기 위해 사용하는 HTML 태그이다. 예를 들어, “<ol><li> 시스템<ol><li> <li><li> 홈페이지 <li>전산장비 </ol>”고 쓰면, 순서대로 번호를 붙여서 한 줄에 하나씩 목록을 출력해 준다.
2.12. <a> : Ahchor의 약자로서, HTML 문서에서 링크(link)를 걸기 위해 사용하는 태그이다. 예를 들어, <a href=“index.htm”>메인 페이지 </a>와</a> 같이 코딩한 경우에 “메인 페이지”를 클릭하면 index.htm 페이지로 이동한다. URL을 링크하고 싶다면, http://www.mydomain.com/index.htm”>처럼 URL을 사용할 수 있다. 링크 페이지를 새창으로 열고 싶으면, <a href=“index.htm” target=“_blank”>와 같이 사용한다.
2.13. <img> : Image의 약자로서, HTML 페이지에 이미지(Image)를 삽입하기 위해 사용하는 태그이다. 예를 들어, <img scr=“icon.png” width=“200 “ height=”30 “>이라고 쓰면, icon.png 파일을 가로폭 200 픽셀, 세로 높이 30 픽셀 크기로 조정한 후 보여준다.
2.14. <table> : HTML 페이지에 테이블을 삽입하기 위해 사용하는 태그이다. <table>로 시작하여 </table>로 끝난다. 표의 가로줄은 <tr></tr>로 둘러싸고, 한 칸은 <td></td>로 둘러싼다. 예를 들어, <table><tr><td>번호</td><td>성명<table><tr><td> 번호 </td><td> 성명 </td></tr> <tr><td>1 </td><td> 홍길동 </td></tr></table>과홍길동</td></tr></table> 같이 사용하면, 다음 표를 그릴 수 있다. <table> 태그는 <div> 태그에 비해 효율성이 떨어지기 때문에, <div> 태그로 대체되고 있다
2.15. <div>의 약자로서, HTML 문서에서 하나의 영역을 다른 영역과 구분하기 위해 사용하는 태그이다. style 옵션을 사용해 영역의 위치와 가로, 세로 크기, 테두리와 배경색 등을 지정할 수 있다. 예를 들어, <div style=“position:relative; left:10px; top:15px; width:200px; height:100px; background-color:yellow; border:1px solid black “> 내용 </div>와내용</div> 같이 사용하여, 왼쪽에서 10픽셀, 위에서 15픽셀 띄운 상대 위치에 가로 200픽셀, 세로 100픽셀 크기로 사각형을 그리고, 배경색은 노란색,, 테두리는 1픽셀 굵기의 검은색 라인을 그릴 수 있다. <div> 안에 다시 <div> 태그를 사용하여 공간을 효율적으로 분할할 수 있다.
2.16. <style> : 스타일 태그는 HTML 문서에서 폰트, 배경, 영역 등의 색상과 크기 등 스타일을 지정하기 위해 사용한다. 주로 HTML 문서의 머리말(<head>) 부분에서 사용한다. 예를 들어, <style> p {color:red} </style>라고 쓰면, <p> 태그로 둘러싼 모든 부분의 폰트 색상이 빨간색으로 표시된다. HTML 문서의 스타일을 개별 페이지마다 일일이 반복하여 설정하기보다는 별도의 CSS 파일을 만든 후 해당 파일을 불러와서 사용하는 것이 더 편리하다.
2.17. <form> : 폼이란 웹 페이지에서 사용자가 입력하는 값을 전달받아 처리하기 위해 사용하는 HTML 태그이다. <input>, <textarea>, <select> 등의 태그와 함께 사용한다.
2.18. <input> : 인풋이란 웹 페이지에서 사용자가 짧은 문자열을 입력할 수 있도록 해 주는 HTML 태그이다. 예를 들어, <input> 태그를 사용하여 HTML 문서에서 회원 로그인 아이디와 암호 등을 입력받을 수 있다. <form><input type=“text” name=“ID” size=“30”></form>이라고 써서 30글자 이내의 회원 아이디를 입력받을 수 있다. 인풋 type에는 텍스트를 입력받는text, 암호 또는 비밀번호를 입력 받는 password, 전송 버튼인 submit, 취소 버튼인 reset, 라디오 버튼을 표시하는 radio, 체크박스를 표시하는 checkbox 등이 있다.
2.19. <textarea> : 텍스트 에리어는 웹 페이지에서 사용자가 여러 줄의 긴 텍스트를 입력할 수 있도록 해 주는 HTML 태그이다. <input>이 한 줄만 입력받을 수 있는데 반해, <textarea>는 여러 줄의 긴 내용을 입력 받을 수 있다. 게시판 등에 사용한다.
2.20. <select> : 셀렉트, 실렉트 또는 선택상자란 웹 페이지에서 사용자가 여러 개의 항목 중에서 원하는 것을 선택할 수 있도록 아래로 펼쳐서 보여주는 메뉴를 구현하기 위해 사용하는 HTML 태그이다. 예를 들어, <form><select name=“국가”><option> 한국 </option><option> 미국 </option><option> 중국 </option><option> 일본 </option></select>국가”><option>한국</option><option>미국</option><option>중국</option><option>일본 </form>과 같이 사용한다.
2.21. <frame> : 프레임이란 웹 페이지가 출력되는 화면을 분할하기 위해 사용하는 HTML 태그이다. 화면을 가로로 나눌 때는 rows를 사용하고, 세로로 나눌 때는 cols를 사용한다. 예를 들어, <frameset cols=“300, *”><frame src=“left.htm”><frame src=“right.htm”></frameset>과 같이 사용하여 화면을 좌우로 분할할 수 있다. 프레임을 사용할 경우 웹 페이지의 로딩 속도가 느려지기 때문에 특별한 경우를 제외하고는 사용하지 않는다.
2.22. <iframe> : inline frame의 약자로서, HTML 문서 안에 프레임(frame)을 만들고 그 안에 또 다른 HTML 문서를 보여주는 태그이다. ‘아이프레임’이라고 읽는다. 예를 들어, 회원가입 시 이용약관을 별도의 아이프레임 영역 안에서만 표시되도록 할 수 있다. 아이프레임은 인클루드(include) 방식에 비해 속도가 느리고 불편하여 특별한 경우 이외에는 사용하지 않는다.
: Non-breaking Space 또는 No-break Space의 약자로서 한 칸 띄어서 쓰는 공백을 표시하기 위한 특수문자이다. ‘엔비에스피’라고 읽는다. HTML 코딩 시 두 칸 이상 연속으로 띄어서 쓰고 싶을 경우, 스페이스 바를 여러 번 누르더라도 한 칸만 띄어서 쓰지만, 를 여러 번 반복하여 사용하면 여러 칸을 띄어서 쓸 수 있다.
Comment : 코멘트 또는 주석(注釋)이란 HTML 문서나 프로그램 소스 코드에서 간단한 설명을 덧붙인 메모를 말한다. HTML 문서에서는 <!-- … --> 안에 주석 내용을 삽입한다.
3.XML
3.1.XML : Extensible Markup Language의 약자로서 홈페이지 제작에 사용되는 “확장된 HTML 언어”이다. HTML 언어는 미리 정의된 태그만 사용할 수 있지만, XML 언어는 필요한 태그(tag)를 개발자가 새로 정의하여 사용할 수 있다. 다양한 시스템을 연계하여 데이터를 주고받기 위해 XML 기반의 SOAP 또는 REST 방식을 사용한다.
3.2.XSL : Extensible Stylesheet Language의 약자로서 XML 문서의 스타일 시트를 만들 때 사용하는 언어이다. 기존 CSS 언어를 기반으로 만들었다.
3.3.XSLT : Extensible Stylesheet Language Transformation의 약자로서 하나의 XML 문서를 다른 XML 문서로 변환하기 위해 사용하는 언어이다. W3C에서 정한 표준 언어이다.
3.4.DHTML : Dynamic HTML의 약자로서, 정적인 HTML 문서에 JavaScript와 CSS 등을 사용하여 동적인 웹 페이지로 만들어주는 기술을 말한다. 1997년 Microsoft에 의해 도입되었다.
3.5.XHTML : Extensible Hypertext Markup Language의 약자로서 기존 HTML보다 엄격한 문법을 가진 웹사이트 코딩 언어이다. 기존 HTML은 다소 부정확한 코딩이 있어도 PC 브라우저에서 잘 처리해 주었으나, 인터넷 접속 기기가 PC뿐 아니라 스마트폰, 태블릿 PC 등 다양한 기기로 확대됨에 따라 부정확한 코딩을 처리하기 위해 불필요한 자원을 낭비하게 되었다. 이를 막기 위해 “모든 태그는 반드시 닫혀야 한다.”는 등 엄격한 문법을 지키는 XHTML을 사용할 수 있다. 2014년 HTML5가 배포되어 XHTML의 모든 기능을 포함하게 되었다.
4. 퍼블리싱
4.1.Publishing : 퍼블리싱이란 HTML과 CSS 언어를 사용하여 웹사이트를 제작하는 행위를 말한다. 정식 명칭은 Web Publishing이다. 예전에는 HTML 코딩이라고 했다.
4.2.Publisher : 퍼블리셔란 HTML과 CSS 언어를 사용하여 웹사이트를 제작하는 사람을 말한다. 정식 명칭은 Web Publisher이다. 예전에는 코더(Coder)라고 불렀다.
4.3.Coding : 코딩이란 HTML, Java, Oracle 등의 프로그래밍 언어를 사용하여 컴퓨터가 실행할 수 있는 프로그램을 짜는 행위를 말한다. 이 중에서 HTML Coding을 퍼블리싱(Publishing)이라고도 한다. 소셜 네트워크를 이용하여 여러 개발자들이 공동으로 코딩하는 것을 소셜 코딩(Social Coding)이라고 한다.
4.4.Coder : 코더란 HTML, Java, Oracle 등의 프로그래밍 언어를 사용하여 컴퓨터가 실행할 수 있는 프로그램을 짜는 사람을 말한다. 이 중에서 HTML Coder를 퍼블리셔(Publisher)라고도 한다.
4.5.Social Coding : 소셜 코딩이란 소셜 네트워크를 이용하여 여러 개발자들이 공동으로 코딩하는 것을 말한다. 소셜 코딩을 위한 사이트로는 깃허브(GitHub)가 있다.
5. 편집기
5.1.Editor : 에디터란 텍스트 문서를 편집할 수 있는 툴을 말한다. 텍스트 에디터(Text Editor), 편집기, 텍스트 편집기 등이라고도 한다. PC용 텍스트 에디터에는 Windows 메모장(Notepad), 워드패드(Wordpad), 에디트플러스(EditPlus), 울트라에디트(UltraEdit), 드림위버(Dreamweaver) 등이 있다. 서버용 텍스트 에디터에는 vi 에디터가 있다. 게시판이나 CMS 등에 사용되는 웹 에디터에는 나모 웹 에디터, 네이버 스마트 에디터 등이 있다. 응용 프로그램 개발을 위해 사용하는 에디터에는 Eclipse 등이 있다.
5.2.Notepad : 노트패드는 Windows 운영체제에서 기본 제공하는 텍스트 문서 편집기(editor)이다. ‘메모장’이라고 한다. 영어 및 한글 등 간단한 텍스트 문서를 편집할 수 있고 글꼴과 글자 크기를 정할 수 있으나, 색상, 자간, 줄 간격 등의 서식을 적용할 수 없다. 파일 확장자는. txt이다..txt이다.
5.3.Wordpad : 워드패드는 Windows 운영체제에서 기본 제공하는 텍스트 문서 편집기(editor)이다. 간단한 텍스트 문서를 편집할 수 있고, 글꼴, 글자 크기, 색상, 자간, 줄 간격 등의 서식을 적용할 수 있다. 하지만 표 그리기, 맞춤법 검사기 등 워드프로세서에서 제공하는 고급 기능을 사용할 수 없다.
5.4.EditPlus : 에디트 플러스는 1998년 김상일이 개발한 텍스트 기반 문서 편집기(editor)이다. HTML, PHP, C/C++, C#, Java, JSP, Perl, CSS 등으로 작성된 파일을 편집할 수 있다. 30일 체험판을 무료로 사용한 후 유료로 전환할 수 있는 셰어웨어 라이선스로 배포되고 있다.
5.5.UltraEdit : 울트라 에디트는 1994년 IDM Computer Solutions 회사의 설립자인 Ian D. Mead가 개발한 텍스트 기반의 문서 편집기(editor)이다. HTML 등 텍스트 기반의 문서를 편집하기 위해 사용한다. Windows, Linux, OS X 등 다양한 운영체제(OS)에서 작동한다. 15일 또는 30일 체험판을 무료로 사용한 후 유료로 전환할 수 있는 셰어웨어 라이선스로 배포되고 있다.
5.6.Dreamweaver : 드림위버는 HTML 코딩을 위해 사용하는 웹 개발 편집기(Editor)이다. 미국 매크로미디어사가 개발하였고 2006년 어도비 시스템즈에 인수되었다. Adobe Dreamweaver라고 한다.
5.7.vi : Visual Editor의 약자로서, Linux와 UNIX 운영체제에서 사용되는 스크린 에디터이다. vi editor라고 부른다. SUN Microsystems 회사를 설립한 빌 조이(Bill Joy)가 대학원 시절에 개발했다.
5.8.Namo Web Editor : 나모 웹 에디터는 ㈜나모인터랙티브가 개발한 웹 에디터이다. 나모 웹 에디터 이외에도 나모 크로스 에디터(Namo Cross Editor), 나모 액티브 스퀘어(Namo Active Square) 등의 편집기 제품이 있다.
5.9.Smart Editor : 스마트 에디터는 2007년 네이버㈜가 개발한 웹 에디터이다. 네이버 메일, 카페, 블로그, 지식인 등에 적용되어 있다. 스마트 에디터는 기본 모듈이 공개되어 있어서 다른 웹사이트에도 무료로 설치하여 사용할 수 있다.
5.10.Bootstrap : 부트스트랩이란 동적 웹사이트를 제작하기 위한 HTML 및 CSS 기반의 라이브러리이다. 서버 측이 아니라 클라이언트 측에서 작동하는 프런트 엔드(front end) 웹 프레임워크이다. 오픈 소스 기반으로 누구나 자유롭게 수정 및 재배포할 수 있다. 2011년 트위터 개발자인 마크 오토(Mark Otto)와 제이콥 쏜튼(Jacob Thornton)이 처음 개발했다.
6. 웹 접근성
6.1.Web Standards : 웹 표준이란 특정한 웹 브라우저에 종속되지 않고 어떤 웹 브라우저에서도 정상적으로 웹사이트를 이용할 수 있도록 하는 기술을 말한다. 웹 호환성이라고도 한다. 미국 마이크로소프트의 인터넷 익스플로러(IE)에서만 사용할 수 있는 Active-X 기술과 별도의 플러그인을 설치해야 하는 Flash, Silverlight 등을 제거하고, HTML5 등 W3C가 제시한 표준 기술을 사용함으로써 웹 표준을 준수할 수 있다.
6.2.WA : Web Accessibility의 약자로서 웹 접근성을 말한다.
6.3.Web Accessibility : 웹 접근성이란 장애인, 노약자 등 어떠한 사용자가 어떠한 기술 환경에서도 전문적인 능력 없이 웹사이트에서 제공하는 모든 정보에 접근할 수 있도록 보장하는 것을 말한다. 간략히 WA라고도 쓴다. 특히 시각장애인을 위해 TTS 기능을 사용하여 웹 페이지의 내용을 소리로 변환하여 읽어줄 수 있어야 한다. 웹 접근성을 준수한 웹사이트에 대해서 웹 접근성 인증마크(WACM)를 부여한다.
6.4.WACM : Web Accessibility Certification Mark의 약자로서 웹 접근성을 준수한 웹사이트에 대해서 부여하는 웹 접근성 인증마크이다. 예전에는 한국정보화진흥원(NIA)과 여러 사설 단체들이 웹 접근성 인증마크를 발급했으나, 2014년부터 미래창조과학부가 지정한 공식 인증기관 3개(한국웹접근성인증평가원, ㈜웹와치, (사)한국시각장애인연합회)에 의해 새로운 웹 접근성 인증마크가 발급되고 있다.
6.5.WCAG : Web Content Accessiblility Guidelines의 약자로서 1999년 W3C가 만든 웹 콘텐츠 접근성 지침을 말한다. 장애인, 노약자 등 누구나 쉽게 웹사이트에 접근할 수 있도록 코딩 기준을 제시했다. 한국형 WCAG를 KWCAG라고 한다.
6.6.KWCAG : Korean Web Content Accessiblility Guidelines의 약자로서 한국형 웹 콘텐츠 접근성 지침을 말한다. W3C에서 만든 WCAG를 한국 실정에 맞게 적용한 것이다. 웹 접근성의 4대 원칙으로 인식의 용이성, 운용의 용이성, 이해의 용이성, 견고성을 제시하였다.
6.7.K-WAH : 한국형 웹 콘텐츠 접근성 지침(KWCAG) 2.0에 따라 웹사이트가 웹 접근성 지침의 세부 지침을 준수하는지를 자동 점검하도록 지원해 주는 소프트웨어이다. ‘케이와’라고 읽는다. KADO-WAH라고 쓰고 ‘카도와’라고도 읽는다. 카도(KADO)란 웹접근성 자동점검 소프트웨어를 개발하여 무료로 배포한 예전 한국정보문화진흥원(Korea Agency for Digital Opportunity and Promotion)의 영문 약자이다.
6.8.Validator : 밸리데이터는 HTML 문서의 타당성이나 문법적 정확성을 체크하기 위해 사용하는 컴퓨터 프로그램이다. W3C에서 제공하는 W3C Markup Validation Service가 있다.
'인터넷' 카테고리의 다른 글
| 개발방법론, 아키텍쳐, 아키텍트, 시스템 연계 개념 정리 (0) | 2023.02.22 |
|---|---|
| 취약점 및 성능 테스트, 보안, 취약점 용어정리 (0) | 2023.02.21 |
| 컴퓨터 네트워크의 역사, 종류 및 개념 정리 (0) | 2023.02.19 |
| 자료구조의 개념, 알고리즘, 성능분석, 배열, 스택과 큐 정리 (0) | 2023.02.18 |
| 미세먼지 경보제, 운영내용, 경보기준, 발령시 시민행동 요령 안내 (0) | 2023.02.17 |
