'시도/국비지원' 카테고리의 글 목록 (6 Page)

본문 바로가기

[D+54] 화면 설계 국비지원 D+54 - 화면 설계 - 화면설계 • 소프트웨어 아키텍처 - 아기텍처는 개발하고자 하는 소프트웨어의 사전 작업을 통하여 소프트웨어 개발을 쉽게 하도록 기본 틀을 만드는 것이다. - 비교적 간단한 소프트웨어 개발에는 소프트웨어 아키텍처를 하지 않아도 큰문제가 되지는 않는다. - 개발하고자 하는 소프트웨어 시스템을 다양한 시각에서 모형화하고 문제의 특성과 본질을 파악하고 필요에 따라 활용할 방안이 요구되면서 아키텍처가 필요로 해졌다. • UI - 사용자와 컴퓨터 상호 간의 소통을 원활히 하게 도와주는 연계작업이다. - 현재에 작업 수행 내역을 구체적으로 작성하는 기능 위주에서 단순한 기능 전달이 아닌 정보의 내용과 그 안에 포함된 뜻을 전달하는 표현 방법으로 변화하였다. UI 설계 원칙 (목적 -.. 2022. 12. 7.

[D+53] Front-end 미니프로젝트 9일차 : 리코딩 완성 국비지원 D+53 Front-end 미니프로젝트 9일차 - 리코딩 완성 - 오늘 한 일 - 리코딩 완성 파일 구성 및 내용 • style.css video { width: 100%; margin: 0 auto; z-index: -5; opacity: 0.8; } .show-section0 .section0-message{ display: block; } .section2-message { position: fixed; top: 5em; left: 0; width: 100%; display: none; text-align: center; font-size: 5rem; font-weight: bold; opacity: 0; } .show-section2 .section2-message { display: b.. 2022. 12. 6.

[D+52] Front-end 미니프로젝트 8일차 : 섹션 완성 국비지원 D+52 Front-end 미니프로젝트 8일차 - 섹션 완성 - 오늘 한 일 - section2 추가 및 전반적인 section 완성 - section2 동영상 추가 파일 구성 및 내용 • style.css footer { /* flex - footer안에 있는 내용을 가운데로 정렬해줄 것이다. */ display: flex; justify-content: center; align-items: center; width: 100%; height: 5em; background-color: gray; color: black; font-weight: bold; } video { margin: 0 auto; border: 3px solid palegoldenrod; } • index.html 맛있는 사과.. 2022. 12. 5.

[D+51] Front-end 미니프로젝트 7일차 : 리코딩 시작 및 섹션0 애니메이션 설정 국비지원 D+51 Front-end 미니프로젝트 7일차 - 리코딩 시작 및 섹션0 애니메이션 설정 - 오늘 한 일 - global nav, local nav 제작 - section 레이아웃 설정 - section0 애니메이션 설정 파일 구성 및 내용 • style.css @charset 'utf-8'; html { font-family: 'Noto Sans KR', sans-serif; font-size: 14px; } body { word-spacing: -0.08rem; letter-spacing: -0.03rem; overflow-x: hidden; } a { text-decoration: none; font-size: 0.9rem; color: white; } .global { /* absolut.. 2022. 12. 5.

[D+50] Front-end 미니프로젝트 6일차 : 섹션 애니메이션 추가 및 가이드코드 완성 국비지원 D+50 Front-end 미니프로젝트 6일차 - 섹션 애니메이션 추가 및 가이드코드 완성 - 오늘 한 일 - section0에 대한 canvas 애니메이션 추가 - section1에 대한 스타일 적용 - 가이드 코드 완성 파일 구성 및 내용 • style.css - canvas에 대한 스타일을 설정해 주었다. - section1에 대한 스타일을 설정해 주었다. - footer에 대한 스타일을 수정해 주었다. footer { position: relative; display: flex; justify-content: center; align-items: center; height: 4em; width: 100%; background-color: darkgray; font-size: 2rem; f.. 2022. 12. 5.

[D+50] canvas를 사용해 스크롤에 반응하는 이미지 애니메이션 적용하기 국비지원 D+50 - canvas를 사용해 스크롤에 반응하는 이미지 애니메이션 적용하기 - canvas를 사용해 스크롤에 반응하는 이미지 애니메이션 적용하기 canvas를 사용해서 스크롤에 따라서 이미지가 움직이는 효과를 적용해 보려고 한다. 일단 3가지 단계별로 순차적으로 진행해 보도록 하자. 0 > 이미지 파일 준비하기 1 > html에 canvas 태그 추가 2 > canvas 태그에 대한 CSS 설정 3 > canvas 컨트롤 기능들을 추가 0 > 이미지 파일 준비하기 나는 스크롤을 할때마다 사과가 돌아가는 것같은 효과를 보이기위해 동영상을 프레임별로 쪼개서 이미지로 저장해 image폴더안에 넣어주었다. 1 > html에 canvas 태그 추가 먼저 body안에 canvas태그를 넣어주었으며 id.. 2022. 12. 1.

이전 1 ··· 3 4 5 6 7 8 9 ··· 16 다음

티스토리툴바