피그마란 무엇인가?
모르면 구글에 검색해보자 나도 몰라서 검색했다.
정리를 잠간 해보면?
피그마는 디자인 클라우드다
디자인을 빠르게 확인하면서 작업할수있다.
웹 브라우저 기반이다.
피그마는 디자너가 협업하기 정말 좋은 디자인 툴이다!
결론
피그마는 웹 디자인을 하는 협업 툴이다!
그럼 피그마를 공부해보자!
1. Javascript / jQuery
버튼을 만드는 HTML을 만들어서 자바스크립트와 제이쿼리를 비교해보자!
Javascript
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<button id="btn" type="button">버튼</button>
<script>
// id 가 btn 인 요소에 alert 을 표시하는 클릭 이벤트 부여하기
document.getElementById('btn').addEventListener('click', function() {
alert('버튼 클릭 이벤트');
})
</script>
</body>
</html>특정 요소에 역할(기능)을 부여할때 사용되는 언어이고 script 안에 작성된다
jQuery
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<button id="btn" type="button">버튼</button>
<script>
// id 가 btn 인 요소에 alert 을 표시하는 클릭 이벤트 부여하기
$('#btn').on('click', function() {
alert('버튼 클릭 이벤트');
})
</script>
</body>
</html>이것은 jQuery써서 만든 코드이다. 훨신 깔끔하고 간결하네요.
-
CSS 트랜지션
-
CSS 미디어 쿼리
https://dirt-shoe-59d.notion.site/QA-Engineer-a021ababa8b44cb780000fc01eca2a8e
제이쿼리가 진짜 깔끔하긴 해요 ㅎㅎ