Figma(피그마, 프로타타이핑 툴)
💡 Sketch + Zeplin 과 더불어 많이 사용되는 디자인/프로토타이핑 툴
Figma는 하나의 툴로 기획, 와이어프레임, 디자인, 프로토타이핑까지 수행할수 있는 장점이 있다고 한다.
--> 인호오빠가 pm 공부중인데, 피그마 이야기를 해줬었는데 웹퍼블리셔 강의에서 이렇게 만나보게 되는구나!! 신기했다.
<!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>이건 자바스크립트로 작성한 버튼 실행
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<button id="btn" type="button">버튼</button>
<script>
// id 가 btn 인 요소에 alert 을 표시하는 클릭 이벤트 부여하기
$('#btn').on('click', function() {
alert('버튼 클릭 이벤트');
})
</script>
</body>
</html>이건 제이쿼리를 사용하여 버튼 기능 구현하기
> css트랜지션 (애니메이션)
css트랜지션은 주로 이전 스타일과 다음 스타일을 부드럽게 연결시켜주는 애니메이션을 구현할 때 사용된다.
.button {
padding: 5px 20px;
font-size: 16px;
font-weight: bold;
cursor: pointer;
color: #e8344e;
background-color: white;
border: solid 2px #e8344e;
border-radius: 20px;
transition: all 0.3s ease-in-out;
}
>> transition : 시작점과 끝점을 연결해주는 css 코드
all 0.3s ease-in-out;
all 이라고 되잇는건 전체가 부드럽게 연결되는거고, color 만 하고싶으면 all 대신 color라고 써도 된다.
0.3s는 애니메이션 속도 1s= 1초
ease-in-out : 어떤 알고리즘이라면 어떤 방식으로 시작점과 끝점을 연결해주는지
/* button use-css */
.button.use-css:hover {
background-color: #e8344e;
color: white;
}
>> .button과 .use-css를 동시에 갖고 있는 엘리먼트를 선택할 때!! 의 의미
/* button use-class */
.button.use-class.on {
background-color: #e8344e;
color: white;
}
$(".button.use-class")
.mouseenter(function () {
$(this).addClass("on");
})
.mouseleave(function () {
$(this).removeClass("on");
});
>> mouseenter : 마우스가 계속 올라간 상태
on이라는 css 클래스는 css 파일에 잇음
**toggle
$(“.dropbtn”).on(‘click’,function (evt) {
const ulElement = $(‘ul’);
ulElement.toggle();
} );
* toggle : 안보이는 상태 -> 보이는 상태 -> 안보이는 상태 로 만드는 것
$('.dropbtn').on('click', function (evt) {
const ulElement = $('ul');
// 단순 보이기 구현
// ulElement.show();
// 토글 기능 구현
ulElement.toggle();
});
// Click Outside : 버튼 외부 요소 클릭시 드롭다운이 다시 닫히도록 할 경우 사용합니다.
// $(document).on('click', function (evt) {
// if ($(evt.target).parents('.dorpdown').length === 0) {
// $('ul').hide();
// }
// });
미디어쿼리
반응형 웹을 구현하기 위해서 가장 많이 사용된다.
/* 768px 이하일때 */
/* button width 조정 */
@media (max-width: 768px) {
.button {
width: 100%;
}
}
>> max-width 가 768px 보다 작을 경우에는 .button 의 가로크기를 100%로 바꿔줘라 라는 의미!!
'✍ 따뜻한 개발 공부' 카테고리의 다른 글
| [스파르타-웹퍼블리셔] 웹퍼블리셔 2주차 강의 정리 (0) | 2022.11.15 |
|---|---|
| [스파르타-알고리즘] 2-6 링크드 리스트 sum / 이진 탐색 (0) | 2022.11.15 |
| [깃허브] 소스트리 이용하여 깃허브에 푸쉬/풀 해보기 (0) | 2022.11.14 |
| [스프링] 스프링 빈이란 ? / web.xml이란? (주말공부) (0) | 2022.11.13 |
| [알고리즘] 링크드 리스트 원소 찾기 (주말공부) (0) | 2022.11.12 |
댓글