웹사이트에 애니메이션 효과를 어떻게 줄까? | css : keyframes 남들과 다른 웹사이트 만들기 첫번째

[@코딩알려주는누나]

안녕하세요! 제 수업을 듣는 학생분들이 좀더 멋진 웹사이트를 만드는데 참고가 되었으면 하는마음에 만든 컨텐츠입니다! 여러분들의 포트폴리오 프로젝트들에 한번 적용시켜보는거 어때요? 스타벅스 배경화면주소 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 - kzbin.info/www/bejne/eaG4npt9mbp7e6M CSS- kzbin.info/www/bejne/qYu7o5Jqm9Kta9E 프로젝트 시작하는법- kzbin.info/www/bejne/fp6VdamBqammndU 코딩알려주는 누나 강의 듣는곳 codingnoona.thinkific.com/ 뇌를 살찌우러 올래?

[@희자몽]

와 ...선생님 margin값 0하는 순간 너무 짜릿했고 ...body의 기본 마진값이 8px라는 새로운사실 알게됐네요....... 뒤에 간지나는 백그라운드 딱 fixed때리고,..... 앱솔루트 ㅋㅋㅋㅋㅋㅋㅋ 저도 술 먼저 생각했네요 안되겠어요 쌤 지금 하는 코딩 프로젝트 끝나고 ...바아로 수강갑니다 ㅠㅠㅠ 전부터 들어야지 들어야지 했는데 더 이상 안미룰게요 누나말고 언니도 해주세요 엉엉 쌤 짱이에여 ...!

[@코딩알려주는누나]

끼아악 빨리와용!😊

[@씌내-o2j]

넘 감사해요❤️ 입사2개월차 비전공자 초보 웹개발자인데 ㅠㅠㅠ 이런 간단한것도 못해서 ... 사수도 없고 혼자해야 되는데 완전 쉽게 설명해주셔서 좋아요❤️ 이 영상으루 구독 입덕합니다

[@heymish3140]

안녕하세요 저도 비전공자로 개발자 취업준비 중에 있는데 혹시 취업하실때 꿀팁 같은거 있으셨나요~?

[@두목-l6d]

알고리즘에 나타나주셔서 감사합니다....... 더 빨리 나와주지 왜 이제야ㅠㅠㅠㅠㅠㅠㅠ css 책 보면서 애니메이션 기능 구현하는데 책은 구현하는 예제가 너무 구리더라구요 ㅎ 그런데 이건!!!! 너무 예뻐요 무엇보다도 선생님 설명이 너무 쉽게 콕콕 박혀요!! 다른 유튜브 선생님들은 야악간 지루해서..ㅠ 재생속도 빨리하거나 넘기면서 보는데 선생님 강의는 처음으로 안 넘겼어요ㅠㅠ 감사합니당!!

[@hongzahonza]

미치겠다 설명을 이렇게 쉽게 잘해준다구요...??? 와 최고에요!!!!!!!!!!!!!!

[@코딩알려주는누나]

고마워용 들어줘서!😆

[@wish7394]

완전 초보입장에서 궁금할수 있는거 다 짚어주시네욤 최고.. 구독합니다

[@user-ki6bz5hb4l]

우와 처음 보는데 강의력이 상당하시네요.. 귀에 쏙쏙 들어옵니다!! 정주행 가보자

[@dayehkim9397]

영상 속 가장 중요한 부분은 영상 썸네일인것 같아요. 아누리 개떡같이 만들어도 얼굴이 개조녜면 세련되보인다, 포인트는.."모델이 중요하다"

[@두소희]

오 애니메이션 영상 너무 좋아요! 애니메이션은 검색해도 영상이 많이 없더라구요 😭😭 더 많이 만들어주세요

[@진조-w8s]

알고리즘 진짜 대박 완전 찾던건데 ㅠㅠㅠ언니 진짜 대박이에요ㅠㅠㅠ정말 감사합니다!!!!!!강의 뽐뿌와요ㅜㅜㅠㅠ

[@orangeyellow8111]

대박이에요 !!! 흥미 뿜뿜입니다 ㅎㅎㅎㅎ

[@KaySIM-oj8gt]

베리굿! 알면간단한 모르면 막막한 이런 컨텐츠 좋아유

[@오종현-u5v]

캬.. 깔끔하고 이해잘되고 너무좋고..

[@soyangriver7901]

아는 사람이 보아도 너무 재미있어요~~~내가 쉬는날 css 강의를 듣다니 ....

[@제페토-f6l]

언니 오 ㅐㅐ케 고급스럽고 이뻐용? 점점 리즈 갱신

[@코딩알려주는누나]

사랑의 눈빛으로 봐서 그런가부다 😍😍

[@chohee_78]

흑흑 언니..진짜 언니같은 영상스탈 너무좋아여 유료강의 많이만들어주세여 다수강할게여ㅜㅜ

[@코딩알려주는누나]

딱기다려요! 열심히 강의만들고온다!

[@디롱2]

코딩 2일째하고있는데 영상보면서하니까 정말재밌고 많은걸배우게되네요! 감사합니다😆😆

[@제말이맞고님말은틀렸]

대박이예요 코딩누나 덕분에 준비하던 포트폴리오가 화려해졌어요

[@코딩알려주는누나]

키아악 짱이다앙! 😍

[@기용그래]

👍 최고!! 어려워보이는데.. 재밌게 알려주셔서 감사해요.

[@러플리-x6e]

진짜진짜진짜 개꿀팁 ㅠㅠㅜㅜㅠㅠㅠ!!!!!!❤️‍🔥❤️‍🔥❤️‍🔥❤️‍🔥❤️‍🔥❤️‍🔥❤️‍🔥

[@oin6885]

언니 너무 예뻐요😊 강의 많이 업로드 해주세요

[@떴다마켓]

구독자 급상승중이네요~ 축하드려요~

[@zed9806]

오늘 배운 내용이다.. 알고리즘 떳길래 복습겸 보는중이에요 ! 저도 언젠간 완벽하게 만들어낼 수 있겠죠 ㅠ

[@saltpie5176]

너무너무너무너무 유익했습니다. 너무너무너무 쉽게 설명해주셨어요 감사합니다~

[@코딩알려주는누나]

유익했다면 너무너무너무 감사드립니다!

[@김주책의은밀한사생활]

누나는 무슨 강의를 해도 그냥 다 잘 하실거같아요

[@코딩알려주는누나]

아그래? 고마워용🥰

[@bl1638]

이쁘시다 ㅇ..ㅇ

[@greed051]

section에 position: relative 가 없어서 불안해요...

[@jy2108]

재밌게 알려주셔서 잘보고있어요!

[@코딩알려주는누나]

댓글감사합니다아앙

[@musasi1313]

성격 넘 호방하시네요ㅋㅋ재밌게 듣고가요 🥳

[@developer_companylife]

워어,,, 천명 넘은지 4달 밖에 안지난거 같은데, 벌써 2만이 넘으셨다니?? 님은 멀리가셨군요,,

[@deeptonemp3]

스타트업 웹 개발자 입니다. 정말 많이 막막했는데 이렇게 쉽게 알려주셔서 정말 고맙습니다 누님!!

[@코딩알려주는누나]

웹개발자 화이팅!!!🥰

[@duddn03]

선생님 강의는 너무 잼있어요~

[@코딩알려주는누나]

고마오고마오!

[@wwlee7247]

진짜 좋은 강의고 귀에 쏙쏙 잘들어오네요 누님 일단 나이는 모르겠지만 누님

[@코딩알려주는누나]

영원한 누님인걸로!🥰

[@KienNguyen-ku1jt]

좋은 머리, 나는 항상 이것에 대해 배우고 싶었습니다. 영상 감사합니다

[@nemosaram]

너누 예쁜 언니ㅋㅋㅋ 고마워요~~ 열공 열공!.

[@nemosaram]

언니꺼 구독 안할수가 없다...

[@코딩알려주는누나]

고마워 구독하면 뇌를 꽉 채워줄겡🥰

[@nemosaram]

@@코딩알려주는누나 제 머리는 든게 없어서 많이 들어가요^^ 😂

[@윤승정박사]

최고예요~ 엄청신기해요. 만세~~~

[@s5d_f82s_d34]

한국 들어가셨군요.(자바 잠깐 배웠던 아자씹니다.) 유튭진짜 대단하네요. 어떻게 알고 추천을 하는거지? 구독박고 갑니다. 영상 몇개 봤는데 완전 재밌네요. 10만 20만 고고씽.. ^^

[@코딩알려주는누나]

오!잘지내셨나요? ㅎㅎ 응원감사합니다

[@kitschgom]

와👏🏼👏🏼

[@하루하루-p6x]

알짜베기 그 자체네요...

[@AstroKorea]

ㅋㅋㅋㅋㅋㅋ 디스 이즈 간지! 와... 진짜... ㅎㅎㅎ

[@kimmachia]

설명이 참 쉽고 깔끔한 강의 감사해요. 부탁이 있는데요. 비주얼 스튜디오 코드 사용하실 때 기본으로 설치하신 확장 인스톨 소개해주실 수 있나요? 웹 사이트 제작할 때 필수 설치 확장 인스톨 알려주심 감사하겠습니다. 비주얼 스튜디오 코드 설치부터 사용 방법까지 영상 올려주실 수도 있나요?

[@코딩알려주는누나]

이미 있습니다! kzbin.info/www/bejne/fp6VdamBqammndU

[@다무러]

퍼블리셔 13년차입니다 요즘 인력자체가 없어서 아주 사람구하기가 별따기네요 ㅋㅋ 이런 강의가 많이 생겨서 초보자들도 잘버티길 바랍니다

[@bewarmin]

시간 가는 줄 모르고 봤네요 ㅋㅋㅋ 앞으로도 이런 컨텐츠 많이 만들어주시면 감사드리겠습니다~!!

[@코딩알려주는누나]

넹네엥☺

[@santicanog_]

안녕~~~ 이 영상은 UI 소개로 훌륭했습니다. 정말 고마워용~~ 삭!!!! ㅋㅋㅋ 😂

[@코딩알려주는누나]

나도 고마워 삭!

[@Harry-y8y]

뇌를 살찌우는일은 즐거운거같네요😊

[@taeyoungkim1903]

재밋다아아아아아아~

[@불뿜는고릴라]

오 넘 이뻐요 제가 수강하고있는 유료강의에도 스타벅스 예제나오는데 ㅋㅋㅋ

[@insikkim883]

앞으로 포폴에 필요한 컨텐츠 많이 만들어 주세요~~ 온라인 수업 등록 했습니다!

[@코딩알려주는누나]

꺄! 환영합니다!!🥰

[@mimiA-s6e]

안녕하세요 혹시 리액트로 쓸 때는 다른 방법으로 사용해야하나요? mainText.style.animation 똑같이 js 파일에서 입력했는데 style을 못 읽는듯 합니다 아래처럼 에러가 나오네요 Cannot read property of null (reading 'style')

[@Amolang991]

저도 리액트 사용중이고 지금 같은 에러를 겪고 있는데 해결 하신 분 있으시면 도와주시면 감사하겠습니다!

[@jasonoh5037]

Two thumbs up!

[@코딩알려주는누나]

Two thumbs up to u too

[@bewarmin]

질문 있습니다! : 스타벅스 웹페이지에서는 창 크기가 변해도 사진과 텍스트 간의 간격이 일정하게 유지되는 것 같은데 css만으로도 구현이 가능한가요? 관련된 영상 만들어주시면 너무 감사할 것 같습니다.. ㅠㅠ

[@김유진-s6w]

해결되셨을런지 모르겠지만 width ,left 등을 px단위가아니라 %로 지정하면됩니다

[@안정빈-m2z]

영상 잘봤습니다. 정말 감사합니다. ^^ 질문이 있는데요~ : h1{ position: absolute; top: 60px; left: 300px; animation: slideText 2s; } @keyframes slideText{ from{ left: 0px; } to { left: 300px;} } : : Test Text : 이렇게 했는데, 글자가 왼쪽에서 오른쪽으로 슬라이드하다가, 중간에 한번 섰다가 다시 슬라이드하는데, 왜 그럴까요 ? (윈도우10, 엣지 브라우저에서 실행)

[@안정빈-m2z]

음~~ 크롬에서는 잘 나오는것 같네요.. ㅠ 엣지 브라우저의 문제일까요~~ ?? ^^;;

[@김정현-v9b7p]

누나 부트캠프나 국비지원 고르는 꿀팁도 알려주세요!

[@snk3641]

HTML에 대해 1도 모르는데 보는내내 재밌네요ㅎㅎ저도 영상 보면서 따라해보고 싶은데 어떤 프로그램을 설치해야하나여?

[@코딩알려주는누나]

kzbin.info/www/bejne/fp6VdamBqammndU 이영상보시면 설치하고 프로젝트 시작하는법까지 나와있습니다!

[@jingulee1894]

"디스 이즈 간지" 👍👍👍

[@코딩알려주는누나]

예아!

[@김안녕-l3n]

애니메이션 같은 경우는 현업이나 보통의 경우에서는 css로 하나요 아니면 js로 하나요? 혹은 둘중에 뭐로 하는게 정석? 올바른? 적당한? 효율적인? 인걸까요?

[@코딩알려주는누나]

둘다!

[@은댕-l3p]

언냐 리액트 강의는 언제 나와요 목빠지게 기달리고 있어유ㅠㅠ

[@코딩알려주는누나]

아악 미안해요 ㅠㅠ 오늘도 열심히찍고있어요!! 다...음달..엔 나오겠지..?😁 기다린만큼 기가막힌 강의 가져올게요!

[@kugong3290]

잘 따라해서 잘되고 있는데 궁금한것이 이런게 반응형에선 value 값이 달라질듯한데 이런경우는 어떻게 대체가될수 있을까요?

[@쏭인턴]

let mainText = document.querySelector("h4"); ^ ReferenceError: document is not defined 이런식으로 에러가 나면 어떻게 해야하나요?

[@뱅세]

저도 항상 스벅을 보면서 하는데 통했네요 눈아 스벅이 무슨 상을 받았다고 했던가…?

[@DON9LY]

아니 애니메이션보다 누나염색머리너무예쁘네

[@kugong3290]

그대로 따라해보는데 자꾸 에러가 뜨고 안되네요ㅠㅠ 콘솔로그값은 잘 나오는데 에러메세지와 같이 계속 나옵니다. 뭔가 문제일까요..ㅠㅠ Uncaught TypeError: Cannot read properties of null (reading 'style')

[@코딩알려주는누나]

어디에 null값이 뜬다는거네요 document.getElementById선택 잘 하싱거 맞는지 확인 해보시기 바랍니다

[@kugong3290]

@더덕버거 아... 일단 저는 해결되었습니다. JS링크나 javascript 부분을 하단으로 이동하시면 될듯합니다.^^

[@soyoon5865]

기간이 꽤 지나긴 했지만 너무 궁금해서 여쭤봅니다 어떻게 해결하셨나요 ㅠㅠ

[@달빛섬]

저두 같은 문제로 안되네요 ㅠㅠ 혹시 어떻게 해결하셨나요? 바디끝에 붙여도 안되네요

[@한민수-s5s]

누나 피치쥬스 마시러 가요!😊

[@코딩알려주는누나]

그래 낼 3시에보자!😉

[@Rainyfeyn]

내가 만들면 촌스러워 ㅠㅠ 뼈때리심

[@crownvicpie]

웹에서 리스트 순서바꾸는 드래그앤드롭은 어떻게하는게 제일쉬울까요? 부트스트랩에도 있나요?

[@코딩알려주는누나]

그건 라이브러리따로 알아보셔야해요! 제 가장최근애니메이션 영상보시면 나와있습니다!

[@NGC4226]

나는 코딩에 코자도 관계없는데 왜 이 영상을 끝까지 보고 있는 것인가?ㅎㄷ

[@코딩알려주는누나]

이렇게 점점 빠지게되는데

[@Suk_122]

제가 가지고 있는 이미지 파일도 배경화면으로 고정시키는게 가능한가요?

[@코딩알려주는누나]

네 컴터에저장되어있는거면 그 저장경로를 넣어주시면 됩니다

[@minsu07311]

에니메이션을 넣어도 촌스러운걸 어떻게 할까요ㅠㅠ

[@혁-s6b]

mainText.style.animation='slide 1s ease=out'; 사용해볼려고 하니 함수가 작동을 안하는데 어떠한 오류일까요 ..ㅠㅠ

[@99sim-v3s]

이콜 문법틀렸어요

[@김지원-g6k6v]

글자가 나타나다가끝까지 도달하면 바로사라지는건 왜그럴까요?ㅠ

[@코딩알려주는누나]

앗..그건 코드를 봐야할거같아용 ㅠㅠ

[@MNBN87]

답은 머티리얼!

[@famej1758]

아~ 글씨가 사악~ 들어오는 애니메이션 하다가 아~ 사악 포기했는데 ㅠㅠ

[@코딩알려주는누나]

이번기회에 한번 해보시는걸로!

[@삐따기-s7y]

와, 정말 쏙쏙 들어오는 강의네요. 근데 간지 용어 쓰시는 건 좀 거슬려요. 그거 빼면 정말 정말 좋은 강의!!

[@HeartSupportStation]

누나 일단 예쁨 ㅋㅋㅋ

[@신난다-o4s]

사실 누나 연기보러와 히히

[@코딩알려주는누나]

앞으로 더 많이 해야겠다 히히