8월 5일 개발일지
1. 학습내용
실습내용
학습 및 상기 내용
css in js
자바스크립트를 기반으로해서 css를 적용시키는 방법
강조 말풍선
중앙정렬 시킬때 absolute에선 margin 0 auto를 사용하지 못한다.
그래서 left와 transform을 활용해 중앙정렬시켜줌
#game-header nav .right .ticket-wrap .bubble-msg {
position: absolute;
width: 165px;
background-color: #697183;
border-radius: 8px;
padding: 10px 12px;
top: 50px;
left: 50%;
transform: translateX(-50%);
font-size: 14px;
color: #ffffff;
font-weight: 600;
z-index: 100;
}
위로 올라가며 강조
hover를 활용하여 마우스를 올리면 대상이 위로 부드럽게 이동
#game-header .game-events-wrap .event-wrap {
position: relative;
width: 407px;
height: 264px;
border-radius: 40px;
top: 0;
transition: top linear 0.45s;
}
#game-header .game-events-wrap .event-wrap:hover {
top: -20px;
}
작업물
2. 어려운점
3. 해결방법
4. 소감
오늘 클릭시 부드럽게 위치가 올라가며 강조효과를 주는 기능을 배웠다. 제일 처음봤을땐 어렵게 보이던 것이 코드 몇줄과 이때까지 배웠던 간단한 기능들이 합쳐서 활용한 사실을 알게되었다.
기능을 활용하는 기초를 배운 것 같아 뿌듯하다
Author And Source
이 문제에 관하여(8월 5일 개발일지), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@woosungkim0123/8월-5일-개발일지
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
4. 소감
오늘 클릭시 부드럽게 위치가 올라가며 강조효과를 주는 기능을 배웠다. 제일 처음봤을땐 어렵게 보이던 것이 코드 몇줄과 이때까지 배웠던 간단한 기능들이 합쳐서 활용한 사실을 알게되었다.
기능을 활용하는 기초를 배운 것 같아 뿌듯하다
Author And Source
이 문제에 관하여(8월 5일 개발일지), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@woosungkim0123/8월-5일-개발일지
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Author And Source
이 문제에 관하여(8월 5일 개발일지), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@woosungkim0123/8월-5일-개발일지저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)