안녕하세요
이제는 프로그램 언어라는 것이 더이상 일부의 개발자가 사용하는 언어가 아닌
누가나 할줄 알아야 하는 시대에 살고 있네요
웹상의 언어를 다루다 모바일 시대에 들어서고 현재 프로그램 언어중 가장 많이 접하는 언어는 제가 생각하기로 JAVA가 아닐까 합니다.
JAVA라는 언어는 꼭 한번 다루어 봐야할 언어라고 생각합니다.
한편 일상생활에서 자주 접하는 웹페이지를 구성하는 언어는 어떤 것일까요?
가장 기초적이면서도 누구나 알아야 하는 언더 HTML, CSS, 자바스크립트 정도가 아닐까 합니다.
물론 더 나아가 PHP, MySQL, 서버 등 배울것이 너무나 많습니다.
전문적으로 프로그래밍 언어를 공부하고 더 나아가 자신의 웹페이지와 서버를 구축하는 것도 좋지만 거기까지는 못하더라도 다른 사람이 만들어놓은 홈페이지를 둘러보거나 제공하는 opensource등을 이해하고 사용하는 것도 그 못지 않게 중요하다고 봅니다.
그래서 제가 공부하고 있는 앞으로 공부할 것을 복습겸 적어 가볼까 합니다.
먼저 html, css 다른 메뉴로 선택한 자바스크립트 다 언어로 구성되어 있습니다.
언어는 나와 상대방이 의사소통을 할수 있게 기본 규칙이 정해져 있고 HTML 과 CSS도 마찬가지로 기본 규칙이 정해져 있습니다.
앞으로 제가 공부하고 정리할 내용이기도 합니다.
. HTML (하이퍼 텍스트 마크업 언어)
글 그대로 풀이하면 태그(문법)를 이용하여 텍스트형식의 문서나 데이터를 하이퍼링크를 통해 연결한다.
즉 A와 B라는 문서를 웹을 통해서 연결하게 만들어진 언어입니다.
하이퍼 링크의 대표적으로 구글 네이버 다음 같은 검색엔진이 있고, 또한 웹페이지의 기본 언어로서 본문을 위한 구조를 당당합니다.
HTML의 시초는 영국 물리학자인 팀 버너스리가 연구원들의 문서를
공유하기 위하여 만들어 졌습니다.
팀 버너스리는 WWW(월드 와일드 웹)의 창시자로 유명합니다.
HTML이란 언어도 1991년 말에 인터넷 문서를 HTML태그로 부르면서 시작되었습니다.
웹의 역사를 잠시 소개하면 1991년 웹을 발표, 1993년 소스가 공개되고,
1994년 웹의 표준을 재정하는 기구인 W3C재단을 창성하게 됩니다.
현재 팀 버너스리는 웹 표준 기구인 W3C재단의 이사입니다.
HTML언어는 계속 발전을 거듭하지만 계속 등장하는 브라우저 종류와 버전에 따라 동일한 웹사이트가 다르게 보이는 현상을 발견 HTML의 표준의 필요성이 대두됩니다.
이에 웹표준을 따르는 HTML5의 초안을 발표후 2014년 정식 권고안을 발표합니다.
HTML5의 등장은 웹표준의 규격화와 웹브라우저 플러그인 없이도 멀티미디어 컨텐츠를 실행함과 동시에 플래시 프로그램의 제거에 목적이 있습니다.
HTML의 구조
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,user-scalable=yes">
<title> 제목</title>
<link type="text/css" rel="stylesheet" href="./common/myhome.css">
</head>
<body>
<header>
<h1>페이지 타이틀</h1>
</header>
<nav> 네이게이션 요소
</nav>
<section> 컨텐트 내용
</section>
<aside> 사이드바내용
</aside>
<footer> 하단 내용
</footer>
<script src ="./common/jquery-3.1.1.min.js"></script>
<script src ="./common/myhome.js"></script>
</body>
</html>
위 구조가 기본구조로 되어있습니다
1. <!DOCTYPE html> : html의 타입형식입니다.
2. <html>로 시작해서 </html> 마칩니다. 모든형식이 태그로 시작하면 태그로 마치게 됩니다.
3. <html> 태그 안에는 <head>와 <body>로 구성되며 <head> 안에는 <meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximun-scale=2,user-scalable=yes">,
<title> 과 css 가 위치합니다.
3-1. meta name="viewport" : 화면 크기를 픽셀이 아닌 scale(scale이 1일때 width가 320px)로 봅니다.
3-2 initial-scale=1 는 처음 scale이 1이며 user-scalable 는 화면축소, 확대를 가능하게 할 것인가 등을 나타냅니다.
3-3. <title> : 상단의 웹페이지 제목글을 표시합니다.
(현광펜으로 표시된 TISTORY)
3-4 <link type="text/css" rel="stylesheet" href="./common/myhome.css"> 로 따로 만든 CSS를 연결하거나 <style type="text/css"> </style> 안에 직접 css 구문을 작성하기도 합니다.
4. <body> 태그 안에는 웹페이지의 제목과 전달할 내용이 들어갑니다.
4-1. <header>는 문서 내 머리말 부분을 표시할 때 사용합니다.
4-2. <nav>는 문서 내의 네비게이션 요소들을 표시하기 위한 영역입니다.
4-3. <section>은 태그는 일반적인 문서 및 어플리케이션 영역을 표시할 때 사용합니다.
4-4. <aside>는 문서의 주요 부분을 표시하고 남은 부분의 컨텐츠를 표시할 때 사용합니다.
4-5. <footer>는 문서 내 꼬리말 부분을 표시할 때 사용하며 문서 저자, 저작권 정보 같은 것을 표시할 수 있습니다.
4-1~5 범위는 필수는 아니며 단순히 div 태그만 이용하여 제작하기도 합니다.
이번장은 여기까지 작성하고 다음장에서는 html의 기본적 언어 구조와 css 언어구조에 대하여 정리하겠습니다. 길글 읽어주셔서 감사합니다.
'프로그램언어 > HTML | CSS' 카테고리의 다른 글
| HTML 기본 태그 (0) | 2017.02.01 |
|---|---|
| CSS 의 text 속성값 (0) | 2017.02.01 |
| CSS의 font 속성 값 (0) | 2017.01.31 |
| CSS 선택자 소스와 같이 (0) | 2017.01.25 |
| CSS 선택자 (0) | 2017.01.25 |
