-
웹페이지를 만드는 언어, HTML과 CSS, Javascript의 기본내용퍼블리싱/공통 2020. 7. 13. 00:44반응형
웹페이지를 만들기 위해 HTML 언어를 이용해야 한다.
웹페이지를 보다 동적이고 전문적인 페이지를 위해 CSS, Javascript, php, jsp 등도 필요하다.
하지만 이를 활용하기 전에 기본적으로 HTML의 이해가 필요하다.
HTML은 HyperText Markup Language의 약자로서,
웹페이지 사이를 이동할 수 있는 링크와 웹페이지를 구성하는 요소들의 배치를 하는 마크업하는 문서다.
여기서 하이퍼텍스트 즉 링크는 A페이지에 있는 버튼을 클릭하면 B페이지로 이동할 수 있는 기능을 한다.
한번의 클릭으로 B페이지의 내용을 확인할 수 있다. 하나의 웹페이지에 모든 내용을 담을 수 없기 때문에 웹페이지 사이의 이동은 필수다.
또한 하나의 페이지에 모든 내용을 담는 원페이지 템플릿에서도 링크의 역할이 필요하다.
마크업은 태그를 이용해서 웹페이지의 구조를 정의하고 보여주는 것이다.
페이지를 구성하는 네비게이션, 본문, 보조문, 푸터 등의 영역을 나누고 구성하는 것이다.<html> <head> <title>제목</title> </head> <body> 본문 </body> </html>위의 소스코드는 제목과 본문만 나타낸 간단한 html 문서다. 태그와 텍스트로 구성하면 웹페이지를 만들 수 있다.
하지만 위의 html문서만 사용하면 웹페이지는 정적으로 표현된다.
웹페이지를 보다 생동감있게 동적으로 표현하기 위해서는 css와 javascript가 필요하다.
HTML : 웹문서의 구조를 설계하는 역할
CSS : 웹페이지의 레이아웃 설계 및 페이지의 디자인을 표현
Javascript : 웹페이지를 동적으로 구현할 수 있는 역할div{ width:100%; height:100px; }위의 소스코드는 CSS의 문서 형식이다.
선택자와 속성, 속성값을 주어서 웹페이지를 디자인하고 때론 생동감있게 동작할 수 있는 역할을 한다.
웹페이지를 PC뿐만 아니라 모바일을 포함하여 여러스크린에서 이용하는 만큼 css의 역할이 필수이다.
하나의 의 웹페이지이지만 css를 활용해서 다양한 스마트기기에서 적합한 레이아웃으로 구성하여 보여줄 수 있다.자바스크립트를 이용해서 웹페이지를 새로고침 없이 동적으로 구현할 수 있다.
웹페이지를 이용하는 사람의 브라우저에서 실행하는 것으로 폼 값의 검증부터 지도api까지 구현할 수 있다.
이는 html5로 갈수록 그 중요도가 높아지고 있다.function btn_click(){ alert('경고창이 생성됩니다.'); }위의 자바스크립트 소스코드는 btn_click()를 호출하면 '경고창이 생성됩니다.' 문구를 가진 경고창이 나타나는 코드이다.
이를 활용하면 이용자와 웹페이지 사이의 상호소통이 되는 동적인 페이지를 만들 수 있다.
이상 html, css, javascript의 간단한 내용을 안내하였다.
웹페이지가 단순한 페이지를 넘어서 반응형웹, 애플리케이션화가 될수록 css와 javascript의 사용빈도와 중요성이 높아지고 있다.728x90반응형'퍼블리싱 > 공통' 카테고리의 다른 글
웹문서와 색상, 색상을 표현하는 방법(rgb color) (0) 2021.03.11 block요소와 inline요소 (0) 2021.03.11 HTML 자식요소와 부모요소 등의 DOM(문서객체모델) (0) 2020.07.29 Hypertext(하이퍼텍스트)와 절대경로 그리고 상대경로 (0) 2020.07.22 HTML5와 태그란? (0) 2020.07.17