728x90
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
.fontsizebtn {
display: flex;
flex-direction: row;
position: fixed;
top: 10px;
right: 10px;
padding: 5px;
align-items: flex-end;
}
.fontsizebtn1,
.fontsizebtn2,
.fontsizebtn3 {
border-radius: 4px;
margin-right: 10px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.fontsizebtn1:hover,
.fontsizebtn2:hover,
.fontsizebtn3:hover {
background-color: gray;
}
.fontsizebtn1 {
font-size: 1em;
padding: 0.5em;
width: 5px;
height: 5px;
}
.fontsizebtn2 {
font-size: 1.2em;
padding: 0.625em;
width: 5px;
height: 5px;
}
.fontsizebtn3 {
font-size: 1.3em;
padding: 0.75em;
width: 5px;
height: 5px;
}
</style>
</head>
<body>
<!-- 폰트사이즈 버튼 1em , 1.25배, 1.5배로 늘어나는 페이지 -->
<div class="fontsizebtn">
<div class="fontsizebtn1" data-fontsize="1">가</div>
<div class="fontsizebtn2" data-fontsize="1.2">가</div>
<div class="fontsizebtn3" data-fontsize="1.3">가</div>
</div>
<div class="changeSize">
<h2> 웹 개발자의 분류 </h2>
웹퍼블리셔(ui개발자), 개발자(서버개발자): HTML 중심이거나, 서버사이드가 감싸는 웹 구조의 형태를 지향하는 업무 스타일의 직군으로서 웹퍼블리셔는 사용자에게 보여지는 인터페이스 영역을 작업하고, 개발자는
데이터의 비지니스 로직을 전반으로 담당한다. 웹퍼블리셔는 해외에서는 UI개발자로 불린다.
<br>
<br>
프론트엔드, 백엔드 개발자: 프론트엔드 개발자는 백엔드 API에서 가져온 데이터의 출력, 입력을 통한 비지니스 로직 구성과 사용자와 대화하는 사용자 인터페이스 부분을 작업하는 개발자를 말한다.
분별하기 헷갈리는 직종으로 웹퍼블리셔가 있는데, 웹퍼블리셔는 html 중심이거나, 서버사이드가 감싸는 구조 형태의 웹을 지향하는 웹퍼블리셔와 개발자의 업무 스타일의 직군으로서 웹표준 반응형웹과 UI를 만드는
디자인 쪽에 가깝고, 클라이언드 사이드 영역이기도 하지만,
프론트 엔드 개발자는 프론트엔드, 백엔드의 완전한 분리 구조를 지향하는 업무스타일의 직군으로서 웹퍼블리셔와 같이 인터페이스의 디자인 관점도 있지만, 웹퍼블리셔와 달리 컴포넌트 아키텍쳐를 지향하며, 이벤트나
서버와 API 통신해서 로직을 어떻게 푸는 관점을 중시한다.
백엔드 개발자도 기존 개발자와 스펙이 조금 다르고, 백엔드의 뷰는 화면개발이 아닌 API 개발이고, 백엔드 인증 처리도 따로 알아야 하며, 데이터베이스 분석과 API서버를 개발한다.
프론트엔드에서 전달된 데이터의 포맷이나 데이터베이스 입출력 및 다양한 비즈니스 프로세스를 프로그래밍 코드로 구현하는 역할을 한다.
데이터베이스, 웹서버, 네트워킹 등 웹 서버의 인프라에 대한 이해가 필요하다. 웹퍼블리셔와 개발자로 나뉜 방식은 모든 호출을 서버에서 가져와야 했고, 컴포넌트화가 안되었지만, 프론트엔드와 백엔드로 나뉜
개발방식은
서버의 컴퓨터와 사용자 컴퓨터가 http통신으로 데이터만 교환하고 완전히 분리구조를 지향한다.
<br>
<h2>웹 개발자들이 주로 작업하는 환경</h2>
<ul>
<li>운영 체제: 윈도, 유닉스, 리눅스</li>
<li>클라이언트 측면 언어: HTML, CSS, Javascript, XML ,XHTML</li>
<li>클라이언트 측면 js 프레임워크: jQuery, dojo , prototype, YUI, Jindo</li>
<li>클라이언트 측면 ui 프레임워크: jQuery UI, fontawesome, bootstrap</li>
<li>서버 측면 언어 : JAVA, Node.js, C#(ASP.NET), PHP, JSP, VB 스크립트(ASP), Python 펄, Ruby on Rails, grail</li>
<li>프레임워크 : J2EE, ASP.NET MVC, ASP.NET Webform, Struts, Spring, ibatis , hibernate , gwt ,spring roo, sitemesh , oscache, tiles</li>
<li>데이터베이스 : Oracle, MS SQL, Mysql, Postgres</li>
<li>버전 관리 : WinCVS, TotoiseCVS, Subversion, Rational ClearCase, git</li>
<li>웹 서버 : Nginx, Apache, Tomcat, JBoss, WAS, Bea Logic, IIS , jetty</li>
<li>도구 : 이클립스, WASD, Editplus, Oracle Developer, 메모장, Notepad++, Putty, FTP 클라이언트, Zend Studio, Brackets, 비주얼 스튜디오</li>
</ul>
</div>
<script>
$(document).ready(function() {
$(".fontsizebtn1, .fontsizebtn2, .fontsizebtn3").click(function() {
let fontSize = $(this).data("fontsize");
$(".changeSize").css("font-size", fontSize + "em");
});
});
</script>
</body>
</html>
참고 코드
$('#original').click(function () {
font_size = 1;
$('body').css('font-size', font_size + 'em');
});
728x90
'Library > Jquery' 카테고리의 다른 글
| [Jquery] slideToggle(), slideUp() (0) | 2024.04.16 |
|---|---|
| [Jquery] wrap (0) | 2024.04.16 |
| [Jquery] Scroll-top, header fix / addclass, removeclass (0) | 2024.04.16 |
| [Jquery] Modal 팝업 (0) | 2024.04.16 |
| [Jquery] Upload profile (0) | 2024.04.12 |
