피그마 (돼지아님)

QA - Test - Errer·2022년 11월 15일
0

TIL

목록 보기
15/52
post-thumbnail

피그마란 무엇인가?

모르면 구글에 검색해보자 나도 몰라서 검색했다.

정리를 잠간 해보면?

피그마는 디자인 클라우드다

디자인을 빠르게 확인하면서 작업할수있다.

웹 브라우저 기반이다.

피그마는 디자너가 협업하기 정말 좋은 디자인 툴이다!

결론

피그마는 웹 디자인을 하는 협업 툴이다!

그럼 피그마를 공부해보자!

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써서 만든 코드이다. 훨신 깔끔하고 간결하네요.

  1. CSS 트랜지션

  2. CSS 미디어 쿼리

profile
https://dirt-shoe-59d.notion.site/QA-Engineer-a021ababa8b44cb780000fc01eca2a8e

1개의 댓글

comment-user-thumbnail
2022년 11월 16일

제이쿼리가 진짜 깔끔하긴 해요 ㅎㅎ

답글 달기