본문 바로가기

아래로 스크롤 해주세요!

My Reference Book

-

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

HTML

HTML 태그 톺아보기

HTML

자세히보기

CSS

CSS 속성 톺아보기

CSS

자세히보기

JAVASCRIPT

JS 실행문 톺아보기

JAVASCRIPT

자세히보기

최신댓글

총 방문자

728x90

SITE 제작19

#검색결과

총 19개를 찾았어요 ^^b

/

스크롤시 패럴렉스 효과의 2번째 예시를 구현해보자! 패럴렉스 이펙트_02 구현하기 스크롤을 내릴때 각 요소의 위치마다 번호에 show를 붙여 해당 속성의 스타일을 불어넣는 에제를 구현해보도록 하겠습니다! 동작원리 말로만 설명해드리면 이해가 어려울 수 있기에 하단의 사진을 통해 설명해드리겠습니다. HTML 작성 스크롤을 내릴때마다 선택되는 메뉴를 구현하기 위해 하단의 구조를 HTML에 추가시켜줍니다.. 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 CSS 작성 간단한 CSS 를 통한 살을 붙여줍니다. /* parallax__nav */ #parallax__nav { position: fixed; right: 20px; top: 20px; z-index: 2000; background-color: rgba(0, 0, 0, 0.4); padd..
2022. 9. 8.
배너 유형 01 한번 만들어 봅시다! 배너 유형_01 배너가 될 구간을 한번 같이 작업해보아요~~~~~! Figma 우선 피그마를 통해 기초적인 틀을 잡습니다! HTML html을 통해 간단한 구조의 뼈대를 작성해봅시다!! 배너 영역 오늘의 도시는 여기다! 다양하고 다채로운 도시의 모습은 이곳을 참조하세요! https://www.youtube.com/channel/UCqVDpXKLmKeBU_yyt_QkItQ/ 도시 속 모습_01 CSS 생각보다 구현 요소가 적으므로 붙여줄 살(css코드)도 적습니다. .banner__inner { background-image: url(../img/BANNER-TYPE01.jpg); background-repeat: no-repeat; background-position: center; background-..
2022. 9. 5.
슬라이드 타입_01 : 기초 슬라이드 배너_01 슬라이드가 될 배너를 구현해보겠습니다! Figma 우선 피그마를 통해 기초적인 틀을 잡습니다! HTML html을 통해 기본적인 예제를 만들 뼈대를 구성합니다! 슬라이드 영역 CITY SIGHTSEEING 각각의 도시는 고유의 모습이 있습니다 한국은 과연 어떤 모습일까요? 자세히 보기 사이트 보기 이전 이미지 다음 이미지 1 2 3 플레이 정지 CSS 이제 완성된 뼈대에 살을 붙여주어 슬라이드를 완성하기 위해 CSS를 작성해줍시다! .slider__inner { margin-top: 70px; } .slider { position: relative; } .slider__img { background: url(../img/slider_bg01.jpg) no-repeat center / ..
2022. 9. 5.
CSS를 통해 '다크모드'를 구현해보자! 다크모드? 다크모드는 평소 밝은 디자인이 위주였던 근래(?)의 디자인을 기기의 수명과 사용자의 눈 건강을 위하여 어두운 디자인으로 고려된 모드를 의미하는데요 오늘은 간단한 방법을 통해 각자의 사이트에 손쉽게 적용 할 수 있는 방법을 가져와봤어요! CSS : 적용법 사용자의 모바일/컴퓨터의 시스템 테마에 맞춰 각 css 스타일이 적용될 수 있도록 prefers-color-scheme를 사용합니다. @media(prefers-color-scheme: dark){ background-color: #12121a; /* !important는 사용자 개개인의 적용 가능 여부에 따라 사용하세요 ^^b! */ } CODEPEN : 적용예시 벌써 끝이네요! 생각보다 어려운것이 없습니다. 상단의 css만 적용해준다면 그 ..
2022. 9. 4.
728x90
반응형

#HASH_TAGS

-

1

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

티스토리툴바