본문 바로가기

아래로 스크롤 해주세요!

My Reference Book

-

제가 배웠던것을 한곳에 정리해보았어요!

HTML

HTML 태그 톺아보기

HTML

자세히보기

CSS

CSS 속성 톺아보기

CSS

자세히보기

JAVASCRIPT

JS 실행문 톺아보기

JAVASCRIPT

자세히보기

최신댓글

총 방문자

728x90

분류 전체보기176

#검색결과

총 176개를 찾았어요 ^^b

/

무한으로 뛰어오르는 공 만들어 보자! 무한으로 튀어다니는 공을 만들어보자. 무한정으로 튀어오르는 공을 css를 통해 만들어보도록 하겠습니다. HTML 무한으로 튀어오르는 공의 형태륾 만들어주기 위해 'wrapper'클래스를 가진 div 박스를 만들어줍니다. CSS x축과 y축의 이동을 통해 무한으로 돌아가는 공을 만들어 주기 위해 translatex 와 translatey를 이용한 키프레임을 만들어줍니다!! *{ box-sizing:border-box; } body{ background: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%); width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; ma..
2022. 9. 2.
슬라이드 이펙트_03 : JS를 이용해서 translateX로 이미지 슬라이드를 구현해보자! 슬라이더 이펙트 03 이번 슬라이드 이펙트_03 예제에서는 현재 값이 이미지 총 갯수와 같아졌을때 시간을 0.7초로 설정 해놓은 상태에서 움직이는 영역(.slider__inner)가 0px 위치로 이동해 슬라이드 효과를 보여주는 예제를 만들어 보도록 하겠습니다! HTML : 예제용 코드보기 예제 구현을 위한 이미지가 총 5개로 구성된 구조를 만들어 주도록 하겠습니다~~ Javascript Slider Effect03 슬라이드 이펙트 - 좌로 움직이기 (연속적으로) 1 2 3 4 5 6 7 소스 보기 Javascript HTML CSS CSS : 예제용 코드보기 크게 특이점은 없지만 각 이미지가 몇번째 이미지인지 알 수 있도록 [nth:child]를 사용하여 각 이미지에 content로 이름을 적어줍니다...
2022. 9. 1.
이미지/텍스트 유형 사이트 만들기! 이미지 텍스트 유형 만들기! 피그마를 이용해 그리드를 생성 후 각 규격에 맞게 요소들을 구성합니다. HTML 코드 웹 표준을 준수하기 위해 태그는 시멘틱 태그를 사용해 작성하며 효율적인 코드 작성을 위해 div태그를 여러개 만드는것이 아닌 한 태그안에 클래스를 다중으로 삽입합니다. 코드보기
2022. 9. 1.
헤더 타입 사이트 만들기~ 헤더 영역 만들기! 피그마를 이용해 그리드를 생성 후 각 규격에 맞게 요소들을 구성합니다. HTML 코드 웹 표준을 준수하기 위해 태그는 시멘틱 태그를 사용해 작성하며 효율적인 코드 작성을 위해 div태그를 여러개 만드는것이 아닌 한 태그안에 클래스를 다중으로 삽입합니다. 코드보기 web site 헤더 영역 슬라이드 영역 배너 영역 컨텐츠 영역 푸터 영역 로그인 CSS코드 폰트는 'NexonLv1Gothic'를 이용하고 .card 클래스를 생성해 카드 Ui를 구현합니다. 코드보기 @import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css'); .nexon { font-family: 'NexonLv1Gothic'; font-w..
2022. 9. 1.
728x90
반응형

#HASH_TAGS

-

1

필터선택자 테스트 오늘도 웹표준은.. 오징어 1Kg 당 3000원 숙제가 다양해서 너무 좋아요 scroll-snap-type 이건 또 뭐람 HTML 제이쿼리 오늘 조업 마감했습니다. ImageSlideEffect 멈추지 않는 ' j ' 시리-즈 오늘은 내가바로 오징어! 울적하니 꽃을 달아봤습니다 선택해주세요 공부 오징어 한마리 수확 완료! 테스트테스트 화사한가요? 메서드 다크모드 슬라이드 결과 : 월요일 JQuery 코드 내일은 즐거운 월요일 코딩 Method scroll-snap-align 오징어 두마리 포획 완료

티스토리툴바