'javascript' 태그의 글 목록 (2 Page)

본문 바로가기

[D+49] 이미지, 캔버스 국비지원 D+49 - 이미지, 캔버스 - 이미지 우리가 HTML, CSS, javaScript를 사용해서 이미지를 넣어준다고 생각했을 때 기존에 우리가 text-animation을 넣는다고 단순하게 생각하면 안된다. 예를들면, 내가 3개의 section중에서 0번째 섹션창에 이미지를 넣는다고 설정해보자. 이때 화면의 해상도나 내가 설정한 윈도우 창의 크기에 따라서 section0의 크기는 변하게 될 것이고, 이에 따라서 내가 넣은 이미지의 크기와 동작 범위도 변화해야 한다. 그렇기 때문에 이미지를 넣을때, 절대적인 값을 넣어주는 것이 아니라 상대값을 넣어서 window창의 크기에 따라서 이미지 크기나 애니메이션 실행범위가 설정되도록 해주어야 한다는 것을 명심해야 한다. • 이미지 압축 이미지는 작은 픽셀.. 2022. 11. 30.

[D+48] Front-end 미니프로젝트 4일차 : 스크롤 애니메이션 추가 국비지원 D+48 Front-end 미니프로젝트 4일차 - 스크롤 애니메이션 추가 - 오늘 한 일 - 스크롤위치에 따라 현재섹션 위치와 섹션위치에 따른 Y의 상대값을 구하도록 설정 - section0에 대한 스크롤 애니메이션 추가 및 테스트 파일 구성 및 내용 • style.css - 스크롤 애니메이션에서 나타났다 사라졌다를 위해서 초기에 불투명도를 0으로 설정해주었다. .section0-message { opacity: 0;/* 불투명도 : 0 */ font-size: 4.5rem; font-weight: bold; width: 100%; height: 6rem; left: 0; top: 5em; text-align: center; } • index.html - 각메시지마다 이벤트를 걸어주기 위해서 클.. 2022. 11. 28.

[D+47] Front-end 미니프로젝트 3일차 : section 레이아웃 설정 국비지원 D+47 Front-end 미니프로젝트 3일차 - section 레이아웃 설정 - 오늘 한 일 - section 레이아웃 설정 파일 구성 및 내용 • style.css - section에 대한 디자인을 재설정해 주었다. .product-name { font-size: 7.5rem; text-align: center; margin-top: 2em; } .sticky-element { display: none; position: fixed; } .section0-message { font-size: 4.5rem; font-weight: bold; width: 100%; height: 6rem; left : 0; top: 5em; text-align: center; } #show-section0 .s.. 2022. 11. 27.

[D+45] Front-end 미니프로젝트 2일차 : 네비게이터 레이아웃 설정 및 section 크기 설정 국비지원 D+45 Front-end 미니프로젝트 2일차 - 네비게이터 레이아웃 설정 및 section 크기 설정 - 오늘 한 일 - 네비게이터 레이아웃 설정 - section영역을 집합으로 만들어 크기 설정 파일 구성 및 내용 • style.css - 상단 네비게이터에 대한 스타일 재설정 및 display를 flex로 설정해 주었다. - 본문 영역 사이즈를 임시로 설정해 주었다. .global-nav { position: absolute; width: 100%; height: 44px; left: 0; top: 0; } .local-nav { position: absolute; width: 100%; height: 52px; left: 0; top: 45px; } .global-nav-links { d.. 2022. 11. 23.

[D+45] CSS : box-sizing, position, flex 국비지원 D+45 - CSS : box-sizing, position, flex - CSS : box-sizing - Element의 너비와 높이를 계산하는 방법을 지정하는 속성이다. - content-box : 기본값, content 영역이 width, height의 기준이 된다. - border-box : border까지의 영역이 width, height의 기준이 된다. CSS : position - HTML문서에서 element를 배치하는 방법으로 element의 위치를 지정하는 방법을 의미한다. - static(기본값), relative, absolute, fixed, sticky • position : static - element가 문서의 일반적인 흐름에 따라 배치된다. - top, right.. 2022. 11. 23.

[D+44] Front-end 미니프로젝트 1일차 : 웹폰트 설정 및 네비게이터 설정 국비지원 D+44 Front-end 미니프로젝트 1일차 - 웹폰트 설정 및 네비게이터 설정 - 목적 스크롤을 움직일때마다 반응하는 스크롤인터렉션 사이트를 구현하기 오늘 한 일 - 웹폰트 설정 - 네비게이터 설정 파일 구성 및 내용 • index.html - 웹폰트를 설정해 초기 셋팅을 진행해주었다. - 상단에 들어간 메뉴에 대한 정보와 내용들을 넣은 후 nav와 section태그를 사용해 의미를 부여하였다. Home History Store Contact Real Apple Pro Overview Compare Buy Real Apple Pro 온전히 빠져들게 하는 빛깔 나의 건강을 채워주는 향기 깨끗한 자연의 신선함 새롭게 입가를 찾아온 매혹 진짜 사과 이야기 사과를 매일 하나씩 먹으면 의사 볼 일이 .. 2022. 11. 22.

이전 1 2 3 4 다음

티스토리툴바