나의 포트폴리오를 만들면서, 웹으로 포트폴리오 사이트를 만들고 싶다는 생각이 들었고,
SOPT 친구들과 웹 퍼블리싱 스터디를 하게 되었다.
스터디에서 공부하는 것을 토대로 복습 겸 블로그 포스팅을 시작하려고 한다.
그래서, 첫 포스팅으로 웹 퍼블리싱에 대한 기본적인 부분을 정리해본다 :)
웹 퍼블리싱(Web publishing)이란?
웹 퍼블리싱이란, 디자이너로부터 전달 받은 시안을 웹 브라우저에서 볼 수 있도록 웹 문서화하는 코딩 작업을 말한다.
대부분 웹 퍼블리싱을 디자인이냐, 개발이냐 많이들 물어보는데, 디자인과 개발을 연결시켜주는 징검다리, 디자인과 개발의 그 중간이라고 생각하면 좋을 것 같다.
웹 퍼블리싱 작업엔 어떤게 필요한가?
웹 퍼블리싱 코딩 작업에는 HTML 뿐만 아니라 CSS 와 스크립트 (JavaScript, jQuery) 작업이 포함되어 있다.
HTML은 뼈대, CSS는 데코레이션, 일종의 옷과 같은 역할을 해주고, 스크립트는 행동을 부여해주는 작업이다.
1) HTML(HyperText Markup Language)
HTML은 흔히 마크업이라고 많이 불린다. 웹 페이지를 구성하는 뼈대이며, 디자인이 되어 있는 부분을 웹 문서화를 시켜주는
매우 기초적인 단계이다. HTML은 배우기 쉬운 언어이고, 또 바로바로 화면에서 볼 수 있게 아웃풋이 나오기 때문에 처음 웹 퍼블리싱을 공부하는데 진입장벽을 낮춰준다.
<!doctype html> <!-- HTML5 버전이 쓰임. HTML 버전마다 들어가는 마커가 다름 -->
<html>
<head> <!-- head에는 제목, meta, css, js 적용 등 셋팅. 제목, 파비콘, 유니코드에 대한거, css 외부꺼를 뭘 가져올건지에 대해
웹페이지의 전반적인 셋팅 내용을 적어준다. -->
<title>제목을 적어보자</title>
</head>
<body><!--body에는 실질적인 코드가 들어간다 -->
<p>Hello World!</p>
</body>
<footer> <!-- 이용약관, 저작권 등에 대한 부분. 요즘에는 바디에도 많이 넣어놓음 -->
</footer>
</html>
2)CSS(Cascading Style Sheets)
CSS는 웹 페이지의 비주얼을 담당하는 부분이다. 따라서 CSS를 어떻게 사용하느냐에 따라 웹 페이지의 비주얼이 달라진다.
CCSS는 숙련도에 따라서 코딩 난이도도 달라지며, 어떻게 사용하느냐에 따라 모듈화를 시킬 수 있다.
p{
font-size: 110%;
font-family: garamond, sans-serif;
}
h2{
color: red;
background: white;
}
3) JavaScript(자바스크립트)
자바스크립트는 동적 표현을 위한 언어이다. 대부분 웹 페이지에 들어갔을 때 보이는 인터렉션을 자바스크립트가 담당한다.
(물론 자바스크립트를 사용하지 않아도 표현할 수 있는 인터렉션도 많다.)
자바스크립트는 타 프로그래밍 언어에 비해 배우는 장벽이 낮은 편이지만, 배우면 배울수록 어렵다.
웹 뿐만 아니라 서버 등 다른 개발에서도 사용되는 언어이기 때문에, 깊게 공부하고 싶은 분들은 각잡고 공부하기를 추천한다.
<script type="text/javascript">
document.write('<p>Hello world!</p>');
</script>
4)jQuery(제이쿼리)
제이쿼리는 자바스크립트를 활용하는데에 어려움을 느끼는 사람들을 위해 나온 라이브러리이다.
제이쿼리는 자바스크립트 언어를 축약해 사용할 수 있도록 만들어서 굉장히 편리하다.
하지만 자바스크립트가 더 사용성이 넓은 언어이므로, 제이쿼리 공부의 선행보다 자바스크립트 공부 선행을 추천한다.
제이쿼리를 html에 연결하고 시작하는 방법은 다음과 같다.
<!-- 적용방법 1 -->
<script src="js/jquery.js"></script>
<!-- 적용방법 2 : cdn -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- 적용방법 3 -->
<script src="http://code.jquery.com/jquery.js"></script>$(document).ready(function(){
// JQuery 적용
});
웹 퍼블리싱의 언어들은 다른 개발 언어들보다 배우는 장벽이 낮다. 그래서 접근하기 쉽다. 하지만 이 역시 구조화를 잘 시키고 언어로 잘 표현을 해야하므로 그냥 시각적인 부분을 웹으로 띄우는 단순한 작업이 아니다. 그냥 막 시각적으로만 똑같이 보이면 되지, 라는 생각으로 언어를 때려박는다면, 나중에 리팩토링 하거나 확장적인 기능을 붙일 때 어려울 것이다.
다음 포스팅에는 자주 쓰이는 html 태그에 대해서 알아보도록 하겠다!
'Develop > web publishing' 카테고리의 다른 글
| 자주 쓰이는 html 태그 정리 (0) | 2020.02.23 |
|---|
