'CSS' 태그의 글 목록 (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+48] Animation 복습 국비지원 D+48 - Animation 복습 - Animation 복습 • 애니메이션 기능 구현 - 지속적으로 CSS갑승ㄹ 바꾸어 적용하는 기법 ex) 지속적으로 opacity 값을 바꿈 → fade-in, fade-out 점점나타남 : fade-out 점점사라짐 : fade-in • 애니메이션의 구현 - CSS의 값의 범위 : 시작값, 종료값 ex) 0, 0.1, 0.2, ~, 1.0 - 기준값의 범위 : 시간, 스크롤값 * CSS값과 기준값은 독립적이기 때문에 기준값을 그대로 CSS값으로 적용할 수는 없다. * 기준값에 따라 CSS값을 적용하기 위해 기준값의 "비율"을 구한 뒤 그 비율에 따라 CSS값을 반영한다. rate = value / totalvalue = 현재값 / 기준 CSS값 = ((va.. 2022. 11. 28.

[D+47] CSS Animation 개념 국비지원 D+47 - CSS Animation 개념 - CSS Animation 개념 • Animation이란? - CSS에서의 애니메이션은 어떤 값을 연속적으로 바꾸는 것을 의미하며, 정해진 범위 내에서 얼마만큼 값이 적용되는지를 나타낸다. - 이때, 애니메이션을 적용할때에는 범위가 필요하는데 범위값을 절대값으로 설정했을 경우에 해상도가 다른 곳에서 애니메이션을 동작했을 때 다른 결과값이 나올 수 있기 때문에 비율로 계산해서 애니메이션을 적용해야 한다. • Animation 구하기 - STEP01 ) 비율을 구하기 비율(rate) = 현재값(value) / 기준(totalValue) 특정영역에 대한 절대값을 구하게 되면 다른 해상도를 가진 모니터에서는 다른 결과값을 가질 수 있기 때문에 우리는 화면에 .. 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.

이전 1 2 3 4 5 ··· 14 다음

티스토리툴바