퍼블리싱이란 ?
웹/앱의 분야 중에 최종 단말기(예: 브라우저)에서 표현되는 내용을 작성하는 행위를 말합니다.
publish(출판하다) + ing(~을 하는 중)의 합성어로서, 주로 html, css, javascript 와 같은 언어를 이용하여 브라우저에 보여지는 최종적인 형태를 만들어내는 것을 의미합니다.
1. HTML
Hyper Text Markup Language 약어로 HyperText(웹 페이지에서 다른 페이지로 이동할 수 있도록 하는 것) 기능을 가진 문서를 만드는 언어다.
아래는 기본 HTML5 문서타입이다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>HTML 4.01 문서타입</title>
<link rel="stylesheet" type="text/css" href="css/service_name.css">
</head>
<body> </body>
</html>DOCTYPE 종료하는 태그가 없는 것이 특징이며 <!DOCTYPE>은 HTML 문서의 구성 요소는 아니다.
html은 크게 두가지로 나눈다.
- <html lang = "다룰언어" >
- <head>콘텐츠를 표현하기위한 내용</head>
- <meta>태그는 (문서자체를 설명하는정보)는 문서의 정보(웹페이지의 요약)를 브라우저와 검색엔진에게 이 문서가 어떤 정보를 가지고 있는지 알려주는 것을 명시합니다.
- <title> 은 문서의 정보를 브라우저에 표시하는 역할을 합니다.
- <link> 는 외부자원(external file)이라고 합니다.
- <body>본문 내용<,/body>
자세한 HTML 내용정리는 아래의 글을 참고한다.
2020/12/06 - [웹(Web)/프론트엔드(Frontend)] - HTML 정리
HTML 정리
아래 사이트에서 글을 정독하면서 글을 정리해보도록 하겠다. webberstudy.com/html-css/html-1/basic-knowledge/ HTML 기초 지식 HTML 기초 과정을 시작하기 위해 필요한 기본 지식을 다룹니다. 기본적인 태그의
skmouse.tistory.com
출처: https://webclub.tistory.com/608 [Web Club]
2. CSS
CSS란?
- Cascading Style Sheets 는 documents가 사용자에게 어떻게 보여질까를 기술하는 언어이다.
- HTML이 정보를 표현한다면 CSS는 HTML문서를 시작적으로 이쁘게 꾸며주는 역할을 한다.
3-1. 외부 스타일 시트(External Style Sheet)
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>위와 같이 html에서 css 파일을 연결한다.
3-2. 내부 스타일 시트(Internal Style Sheet)
- HTML 문서 내에서 <head>와 </head>사이에 <style> 태그로 지정하는 방법
<head>
<style type="text/css">
Selector {property: value;}
ex) h1 {color:red}
</style>
</head>
3-3. HTML 내에 스타일 지정(Inline Styles)
- 세가지 방법중 가장 범위가 좁아진 스타일 적용 방식이다.
<p style="font-size: 15px;">15픽셀사이즈로 디자인됩니다.</p>
CSS 우선순위
외부스타일 < 내부스타일 < 인라인 스타일 순서로 작용
3. JavaScript
JS의 활용 범위
1. 웹 개발
크롬이나 파이어폭스 등 웹 브라우저들이 나날이 발전하고 있다. 웹 페이지를 개발하는 데 있어서 자바 스크립트 엔진의 성능 향상에 관한 것이다. 특히, jQuery를 비롯하여 knockout, backbone 등의 라이브러리는 웹 개발자에게 이미 중요한 컴포넌트로 자리 잡았다.
2. 서버개발
Node.js의 출현으로 자바스크립트를 활용한 서버 개발도 활발히 이루어지고 있다, express, socket.io 등의 라이브러리는 보다 쉽게 자바스크립트로 서버를 개발할수 있는 환경을 제공해준다
3. 애플리케이션 개발
폰갭(phoneGap)과 같은 크로스 플랫폼 개발 도구를 이용하면 DOM 요소를 핸들링하여 렌더링하는 것에서 부터 더 나아가 디바이스의 동작에 대한 제어도 가능해지고 있다. 향후 완벽한 웹OS가 출현한다면 자바스크립트의 중요성은 더욱 커질 전망이다 이처럼 자바스크립트의 활용 범위는 과거에 비해 상당히 넓어졌다. 웹이 크로스 플랫폼으로서 확고히 자리매김할수록 자바스크립트 역시 많은 개발자에게 사랑받을 수 있다."Van
Vanilla JS란?
자바스크립트의 수 많은 프레임워크, 라이브러리를 사용하지 않고 순수하게 javascript만 사용하는것을 일컫는다.
JQuery같은 라이브러리가 전혀 포함되있지 않아서 훨씬더 빠르다는 말로 받아들이면 될 것 같다.
국내에서는 아직도 많은 개발자들이 JQuery 없이는 개발하기 힘들어 하는 경향이 있는데 ,
요즘 수많은 개발자들이 javascript의 무거운 라이브러리등을 버리고 작고 가볍고 빠른 VanillaJs를 선택하고 있다.
VanillaJS JavaScript를 배운다는 건, 웹에서의 기초가 되는 언어를 배우는 것이다. 이 언어가 예쁘고 우아하지 않고, 답답한 부분이 많지만. 웹상에서 본 모든 것들은 이 언어로 구성이 되어있다. 다시 한번 말하지만, 모든 웹브라우저에는 JavaScript가 설치되어 있다.
[Lecture] 초보자를 위한 바닐라 자바스크립트(By Nomad Coders)
[초급] HTML, CSS, JS" data-og-host="academy.nomadcoders.co" data-og-source-url="https://academy.nomadcoders.co/p/javascript-basics-for-absolute-beginners-kr/" data-og-url="https://academy.nomadcoder..
gbsb.tistory.com
'웹(Web) > 백엔드(Backend)' 카테고리의 다른 글
| 스프링(Spring) 프로젝트의 폴더 구조 (0) | 2021.03.29 |
|---|---|
| <우아한 스프링 부트> 정리 (0) | 2021.03.25 |
| JDBC, JPA/Hibernate, Mybatis의 차이 (0) | 2021.01.27 |
| 1. 인터넷(작동원리,HTTP, 브라우저, DNS, 호스팅) (0) | 2021.01.10 |
| 백엔드 로드맵 (0) | 2021.01.04 |