웹사이트에 애니메이션 효과를 어떻게 줄까? | css : keyframes 남들과 다른 웹사이트 만들기 첫번째
Vložit
- čas přidán 15. 01. 2022
- 안녕하세요! 제 수업을 듣는 학생분들이 좀더 멋진 웹사이트를 만드는데 참고가 되었으면 하는마음에 만든 컨텐츠입니다!
여러분들의 포트폴리오 프로젝트들에 한번 적용시켜보는거 어때요?
스타벅스 배경화면주소
www.starbucks.co.kr/common/im...
스타벅스 사진이미지 주소
image.istarbucks.co.kr/upload...
선행학습필수!
HTML - • (부트캠프 강사의 유료강의)코딩, 뭐부터...
CSS- • 초보자를 위한 완벽정리, 프론트엔드 개발...
프로젝트 시작하는법- • 다른데서 헤메지말고 그냥 이거 보면 한큐...
코딩알려주는 누나 강의 듣는곳
codingnoona.thinkific.com/
뇌를 살찌우러 올래?
누나 인스타 뭐야? 1008_shine
#코딩독학 #css #animation
안녕하세요! 제 수업을 듣는 학생분들이 좀더 멋진 웹사이트를 만드는데 참고가 되었으면 하는마음에 만든 컨텐츠입니다!
여러분들의 포트폴리오 프로젝트들에 한번 적용시켜보는거 어때요?
스타벅스 배경화면주소
www.starbucks.co.kr/common/img/main/fav_prod_bg_new.jpg
스타벅스 사진이미지 주소
image.istarbucks.co.kr/upload/common/img/main/2022/2022_NewYear_pick_img.png
선행학습필수!
HTML - czcams.com/video/CpUmhGdUHEA/video.html
CSS- czcams.com/video/sZXr_4fmz5o/video.html
프로젝트 시작하는법- czcams.com/video/Hm2DvKtDsgs/video.html
코딩알려주는 누나 강의 듣는곳
codingnoona.thinkific.com/
뇌를 살찌우러 올래?
알고리즘에 나타나주셔서 감사합니다....... 더 빨리 나와주지 왜 이제야ㅠㅠㅠㅠㅠㅠㅠ css 책 보면서 애니메이션 기능 구현하는데 책은 구현하는 예제가 너무 구리더라구요 ㅎ 그런데 이건!!!! 너무 예뻐요 무엇보다도 선생님 설명이 너무 쉽게 콕콕 박혀요!! 다른 유튜브 선생님들은 야악간 지루해서..ㅠ 재생속도 빨리하거나 넘기면서 보는데 선생님 강의는 처음으로 안 넘겼어요ㅠㅠ 감사합니당!!
코딩 2일째하고있는데 영상보면서하니까 정말재밌고 많은걸배우게되네요! 감사합니다😆😆
우와 처음 보는데 강의력이 상당하시네요.. 귀에 쏙쏙 들어옵니다!! 정주행 가보자
알고리즘 진짜 대박 완전 찾던건데 ㅠㅠㅠ언니 진짜 대박이에요ㅠㅠㅠ정말 감사합니다!!!!!!강의 뽐뿌와요ㅜㅜㅠㅠ
베리굿! 알면간단한 모르면 막막한 이런 컨텐츠 좋아유
넘 감사해요❤️ 입사2개월차 비전공자 초보 웹개발자인데 ㅠㅠㅠ 이런 간단한것도 못해서 ... 사수도 없고 혼자해야 되는데 완전 쉽게 설명해주셔서 좋아요❤️ 이 영상으루 구독 입덕합니다
안녕하세요 저도 비전공자로 개발자 취업준비 중에 있는데 혹시 취업하실때 꿀팁 같은거 있으셨나요~?
👍 최고!!
어려워보이는데..
재밌게 알려주셔서 감사해요.
대박이에요 !!!
흥미 뿜뿜입니다 ㅎㅎㅎㅎ
오늘 배운 내용이다.. 알고리즘 떳길래 복습겸 보는중이에요 ! 저도 언젠간 완벽하게 만들어낼 수 있겠죠 ㅠ
아는 사람이 보아도 너무 재미있어요~~~내가 쉬는날 css 강의를 듣다니 ....
캬.. 깔끔하고 이해잘되고 너무좋고..
오 애니메이션 영상 너무 좋아요! 애니메이션은 검색해도 영상이 많이 없더라구요 😭😭 더 많이 만들어주세요
너무너무너무너무 유익했습니다. 너무너무너무 쉽게 설명해주셨어요 감사합니다~
유익했다면 너무너무너무 감사드립니다!
진짜진짜진짜 개꿀팁 ㅠㅠㅜㅜㅠㅠㅠ!!!!!!❤️🔥❤️🔥❤️🔥❤️🔥❤️🔥❤️🔥❤️🔥
흑흑 언니..진짜 언니같은 영상스탈 너무좋아여 유료강의 많이만들어주세여 다수강할게여ㅜㅜ
딱기다려요! 열심히 강의만들고온다!
좋은 머리, 나는 항상 이것에 대해 배우고 싶었습니다. 영상 감사합니다
대박이예요 코딩누나 덕분에 준비하던 포트폴리오가 화려해졌어요
키아악 짱이다앙! 😍
구독자 급상승중이네요~ 축하드려요~
언니
오 ㅐㅐ케 고급스럽고 이뻐용?
점점 리즈 갱신
사랑의 눈빛으로 봐서 그런가부다 😍😍
미치겠다 설명을 이렇게 쉽게 잘해준다구요...??? 와 최고에요!!!!!!!!!!!!!!
고마워용 들어줘서!😆
와 ...선생님 margin값 0하는 순간 너무 짜릿했고 ...body의 기본 마진값이 8px라는 새로운사실 알게됐네요....... 뒤에 간지나는 백그라운드 딱 fixed때리고,..... 앱솔루트 ㅋㅋㅋㅋㅋㅋㅋ 저도 술 먼저 생각했네요 안되겠어요 쌤 지금 하는 코딩 프로젝트 끝나고 ...바아로 수강갑니다 ㅠㅠㅠ 전부터 들어야지 들어야지 했는데 더 이상 안미룰게요 누나말고 언니도 해주세요 엉엉 쌤 짱이에여 ...!
끼아악 빨리와용!😊
스타트업 웹 개발자 입니다. 정말 많이 막막했는데 이렇게 쉽게 알려주셔서 정말 고맙습니다 누님!!
웹개발자 화이팅!!!🥰
언니 너무 예뻐요😊
강의 많이 업로드 해주세요
너누 예쁜 언니ㅋㅋㅋ 고마워요~~ 열공 열공!.
재밌게 알려주셔서 잘보고있어요!
댓글감사합니다아앙
진짜 좋은 강의고 귀에 쏙쏙 잘들어오네요 누님 일단 나이는 모르겠지만 누님
영원한 누님인걸로!🥰
한국 들어가셨군요.(자바 잠깐 배웠던 아자씹니다.) 유튭진짜 대단하네요. 어떻게 알고 추천을 하는거지?
구독박고 갑니다. 영상 몇개 봤는데 완전 재밌네요. 10만 20만 고고씽.. ^^
오!잘지내셨나요? ㅎㅎ 응원감사합니다
시간 가는 줄 모르고 봤네요 ㅋㅋㅋ
앞으로도 이런 컨텐츠 많이 만들어주시면 감사드리겠습니다~!!
넹네엥☺
워어,,, 천명 넘은지 4달 밖에 안지난거 같은데, 벌써 2만이 넘으셨다니??
님은 멀리가셨군요,,
선생님 강의는 너무 잼있어요~
고마오고마오!
최고예요~ 엄청신기해요. 만세~~~
영상 속 가장 중요한 부분은 영상 썸네일인것 같아요. 아누리 개떡같이 만들어도 얼굴이 개조녜면 세련되보인다, 포인트는.."모델이 중요하다"
ㅋㅋㅋㅋㅋㅋ 디스 이즈 간지! 와... 진짜... ㅎㅎㅎ
HTML에 대해 1도 모르는데 보는내내 재밌네요ㅎㅎ저도 영상 보면서 따라해보고 싶은데 어떤 프로그램을 설치해야하나여?
czcams.com/video/Hm2DvKtDsgs/video.html 이영상보시면 설치하고 프로젝트 시작하는법까지 나와있습니다!
이쁘시다 ㅇ..ㅇ
애니메이션 같은 경우는
현업이나 보통의 경우에서는 css로 하나요 아니면 js로 하나요?
혹은 둘중에 뭐로 하는게 정석? 올바른? 적당한? 효율적인? 인걸까요?
둘다!
누나는 무슨 강의를 해도 그냥 다 잘 하실거같아요
아그래? 고마워용🥰
성격 넘 호방하시네요ㅋㅋ재밌게 듣고가요 🥳
오 넘 이뻐요 제가 수강하고있는 유료강의에도 스타벅스 예제나오는데 ㅋㅋㅋ
알짜베기 그 자체네요...
앞으로 포폴에 필요한 컨텐츠 많이 만들어 주세요~~ 온라인 수업 등록 했습니다!
꺄! 환영합니다!!🥰
언니꺼 구독 안할수가 없다...
고마워 구독하면 뇌를 꽉 채워줄겡🥰
@@user-yu8so2ck1z 제 머리는 든게 없어서 많이 들어가요^^ 😂
설명이 참 쉽고 깔끔한 강의 감사해요.
부탁이 있는데요.
비주얼 스튜디오 코드 사용하실 때 기본으로 설치하신 확장 인스톨 소개해주실 수 있나요?
웹 사이트 제작할 때 필수 설치 확장 인스톨 알려주심 감사하겠습니다.
비주얼 스튜디오 코드 설치부터 사용 방법까지 영상 올려주실 수도 있나요?
이미 있습니다!
czcams.com/video/Hm2DvKtDsgs/video.html
안녕~~~ 이 영상은 UI 소개로 훌륭했습니다. 정말 고마워용~~ 삭!!!! ㅋㅋㅋ 😂
나도 고마워 삭!
퍼블리셔 13년차입니다 요즘 인력자체가 없어서 아주 사람구하기가 별따기네요 ㅋㅋ 이런 강의가 많이 생겨서 초보자들도 잘버티길 바랍니다
와👏🏼👏🏼
질문 있습니다! : 스타벅스 웹페이지에서는 창 크기가 변해도 사진과 텍스트 간의 간격이 일정하게 유지되는 것 같은데 css만으로도 구현이 가능한가요? 관련된 영상 만들어주시면 너무 감사할 것 같습니다.. ㅠㅠ
해결되셨을런지 모르겠지만 width ,left 등을 px단위가아니라 %로 지정하면됩니다
영상 잘봤습니다. 정말 감사합니다. ^^
질문이 있는데요~
:
h1{
position: absolute; top: 60px; left: 300px;
animation: slideText 2s;
}
@keyframes slideText{
from{ left: 0px; } to { left: 300px;}
}
:
:
Test Text
:
이렇게 했는데, 글자가 왼쪽에서 오른쪽으로 슬라이드하다가, 중간에 한번 섰다가 다시 슬라이드하는데, 왜 그럴까요 ?
(윈도우10, 엣지 브라우저에서 실행)
음~~ 크롬에서는 잘 나오는것 같네요.. ㅠ
엣지 브라우저의 문제일까요~~ ?? ^^;;
잘 따라해서 잘되고 있는데 궁금한것이 이런게 반응형에선 value 값이 달라질듯한데 이런경우는 어떻게 대체가될수 있을까요?
뇌를 살찌우는일은 즐거운거같네요😊
재밋다아아아아아아~
안녕하세요
혹시 리액트로 쓸 때는 다른 방법으로 사용해야하나요?
mainText.style.animation 똑같이 js 파일에서 입력했는데 style을 못 읽는듯 합니다
아래처럼 에러가 나오네요
Cannot read property of null (reading 'style')
저도 리액트 사용중이고 지금 같은 에러를 겪고 있는데 해결 하신 분 있으시면 도와주시면 감사하겠습니다!
section에 position: relative 가 없어서 불안해요...
Two thumbs up!
Two thumbs up to u too
누나 부트캠프나 국비지원 고르는 꿀팁도 알려주세요!
let mainText = document.querySelector("h4");
^
ReferenceError: document is not defined
이런식으로 에러가 나면 어떻게 해야하나요?
"디스 이즈 간지" 👍👍👍
예아!
그대로 따라해보는데 자꾸 에러가 뜨고 안되네요ㅠㅠ 콘솔로그값은 잘 나오는데 에러메세지와 같이 계속 나옵니다. 뭔가 문제일까요..ㅠㅠ
Uncaught TypeError: Cannot read properties of null (reading 'style')
어디에 null값이 뜬다는거네요 document.getElementById선택 잘 하싱거 맞는지 확인 해보시기 바랍니다
@더덕버거 아... 일단 저는 해결되었습니다. JS링크나 javascript 부분을 하단으로 이동하시면 될듯합니다.^^
기간이 꽤 지나긴 했지만 너무 궁금해서 여쭤봅니다 어떻게 해결하셨나요 ㅠㅠ
저두 같은 문제로 안되네요 ㅠㅠ 혹시 어떻게 해결하셨나요? 바디끝에 붙여도 안되네요
mainText.style.animation='slide 1s ease=out'; 사용해볼려고 하니 함수가 작동을 안하는데 어떠한 오류일까요 ..ㅠㅠ
이콜 문법틀렸어요
언냐 리액트 강의는 언제 나와요 목빠지게 기달리고 있어유ㅠㅠ
아악 미안해요 ㅠㅠ 오늘도 열심히찍고있어요!! 다...음달..엔 나오겠지..?😁 기다린만큼 기가막힌 강의 가져올게요!
웹에서 리스트 순서바꾸는 드래그앤드롭은 어떻게하는게 제일쉬울까요?
부트스트랩에도 있나요?
그건 라이브러리따로 알아보셔야해요! 제 가장최근애니메이션 영상보시면 나와있습니다!
저도 항상 스벅을 보면서 하는데 통했네요 눈아
스벅이 무슨 상을 받았다고 했던가…?
누나 피치쥬스 마시러 가요!😊
그래 낼 3시에보자!😉
아니 애니메이션보다 누나염색머리너무예쁘네
나는 코딩에 코자도 관계없는데 왜 이 영상을 끝까지 보고 있는 것인가?ㅎㄷ
이렇게 점점 빠지게되는데
제가 가지고 있는 이미지 파일도 배경화면으로 고정시키는게 가능한가요?
네 컴터에저장되어있는거면 그 저장경로를 넣어주시면 됩니다
내가 만들면 촌스러워 ㅠㅠ 뼈때리심
에니메이션을 넣어도 촌스러운걸 어떻게 할까요ㅠㅠ
답은 머티리얼!
와, 정말 쏙쏙 들어오는 강의네요. 근데 간지 용어 쓰시는 건 좀 거슬려요. 그거 빼면 정말 정말 좋은 강의!!
글자가 나타나다가끝까지 도달하면 바로사라지는건 왜그럴까요?ㅠ
앗..그건 코드를 봐야할거같아용 ㅠㅠ
아~ 글씨가 사악~ 들어오는 애니메이션 하다가 아~ 사악 포기했는데 ㅠㅠ
이번기회에 한번 해보시는걸로!
누나 일단 예쁨 ㅋㅋㅋ
사실 누나 연기보러와 히히
앞으로 더 많이 해야겠다 히히
기기별마다 높이 다르지 않나요??
그럼 기기별마다 스크롤 위치값 구해와서 하나하나 조건을 걸어야하나요?