Giter Club home page Giter Club logo

hogwarts-school's Introduction

Hogwarts-School

ํ•ด๋ฆฌํฌํ„ฐ ์„ธ๊ณ„๊ด€ ์† ํ˜ธ๊ทธ์™€ํŠธ ๋งˆ๋ฒ•ํ•™๊ต - ๋ฐ˜์‘ํ˜• ์›น์‚ฌ์ดํŠธ
๋ฐฐํฌ์ฃผ์†Œ : https://bucolic-squirrel-37fca3.netlify.app/

poster

๐Ÿ’ผ ์ž‘์—…๊ธฐ๊ฐ„

4์ธ ์ œ์ž‘
2023.01.05 ~ 02.10

๐Ÿค ๋ฉค๋ฒ„๊ตฌ์„ฑ

์ด๋ฆ„ ๋‹ด๋‹น ๋น„๊ณ 
๊ณตํ†ต ๋ฐ˜์‘ํ˜• ๊ตฌํ˜„
์œ ์ •์› ๋ฉ”์ธํŽ˜์ด์ง€, ์†Œ์Šค ์ œ์ž‘, PPT ์ œ์ž‘ ๋””์ž์ธ ์ด๊ด„ Front-End
๊น€ํ˜œ๋ฆฐ ๊ณต๋™ ํ—ค๋” ๋ฐ ํ‘ธํ„ฐ, ๊ธฐ์ˆ™์‚ฌ ๋ฆฌ์ŠคํŠธ ๋ฐ ์ƒ์„ธ์†Œ๊ฐœ, ๋งˆ์ดํŽ˜์ด์ง€ Front-End
์ด์„œํ•˜ ํšŒ์›๊ฐ€์ž…, ๋กœ๊ทธ์ธ, ๊ธฐ์ˆ™์‚ฌ ํ…Œ์ŠคํŠธ ๊ธฐํš ์ด๊ด„ Front-End Back-End
ํ™ฉ์ง€์› ๋„์ž…๋ถ€, ๊ต์ˆ˜์ง„ ์†Œ๊ฐœ, ํ•™๊ต์—ฐํ˜ ์„œ๊ธฐ Front-End

โš™ ๊ฐœ๋ฐœํ™˜๊ฒฝ

JavaScript(ES6)
HTML5
CSS3

โœ” ์ฃผ์š” ๋‹ด๋‹น๊ธฐ๋Šฅ

Header

  • ์Šคํฌ๋กค ๋ฐฉํ–ฅ์— ๋”ฐ๋ฅธ ํ—ค๋” ์ˆจ๊ธฐ๊ธฐ ๋ฐ ํ‘œ์‹œ
  • ๋กœ๊ทธ์ธ ์•„์ด์ฝ˜ ์ œ์ž‘
  • ๋ชจ๋ฐ”์ผํ˜• - ๋ฒ„ํ‹ฐ์ปฌ ํƒญ ๊ตฌ์กฐ๋กœ ์ „ํ™˜

๋‹ฌ๋ ฅ ๋ฐ ์†Œ๊ฐœ

  • ๋ฐฐ์—ด๊ณผ for๋ฌธ์„ ์ด์šฉํ•œ ๋‹ฌ๋ ฅ ๊ตฌํ˜„
  • Split() ํ•จ์ˆ˜๋ฅผ ์ด์šฉํ•ด ๋ฌธ์ž์—ด์„ ๋ถ„ํ• ํ•˜๋Š” Hover ์ด๋ฒคํŠธ

๊ธฐ์ˆ™์‚ฌ ์ ์ˆ˜

  • ์Šคํฌ๋กค ๊ฑฐ๋ฆฌ๊ฐ’๊ณผ ๊ตฌ์—ญ ๋†’์ด๊ฐ’์„ ์ด์šฉํ•œ ์ ์ˆ˜ ์นด์šดํŒ… ์• ๋‹ˆ๋ฉ”์ด์…˜

๊ต๋‚ด ์†Œ์‹์ง€

  • scroll-snap-type ์†์„ฑ์„ ์‚ฌ์šฉํ•ด ์ž๋™์œผ๋กœ ์ตœ์ƒ๋‹จ ๋ถ€๋ถ„์ด ์Šค๋ƒ…
  • ๊ธฐ์‚ฌ ์˜์—ญ ์Šคํฌ๋กค ๊ฑฐ๋ฆฌ๊ฐ’์„ ์ด์šฉํ•˜์—ฌ ๊ธฐ์‚ฌ๋ฅผ ๋„˜๊ธธ ๋•Œ๋งˆ๋‹ค ์ˆซ์ž ์ „ํ™˜

๊ต์ˆ˜ ๋ฐ ๊ต๊ณผ๋ชฉ ์†Œ๊ฐœ

  • Ajaxํ†ต์‹ ์„ ์ด์šฉํ•˜์—ฌ JSON ๋ฐ์ดํ„ฐ ์ถœ๋ ฅ
  • Preserve3d ์†์„ฑ์„ ์‚ฌ์šฉํ•ด mouseover์‹œ ์นด๋“œ flip ํšจ๊ณผ
    • ์•ž๋ฉด | ๊ณผ๋ชฉ
    • ๋’ท๋ฉด | ํ•ด๋‹น ๊ณผ๋ชฉ ๋‹ด๋‹น๊ต์ˆ˜

Footer

  • ๋กค๋ง ํ…์ŠคํŠธ : ๋กค๋ง๋ฐฐ๋„ˆ ๋ณต์ œ๋ณธ ์ƒ์„ฑ ํ›„, ์›๋ณธ ๋„ˆ๋น„๊ฐ’์„ ์ด์šฉํ•ด ๋ณต์ œ๋ณธ ์œ„์น˜ ์ƒ์„ฑ

์ด์Šคํ„ฐ์—๊ทธ

  • ๋ฃจ๋ชจ์Šค & ๋…น์Šค : ๊ฒ€์ƒ‰์ฐฝ์— ์ฃผ๋ฌธ ์ž…๋ ฅ ์‹œ, ์ง€ํŒก์ด(์ปค์„œ) ์ฃผ๋ณ€๋งŒ ๋ฐ์•„์ง€๊ฒŒ ๊ตฌํ˜„
  • ๋ณผ๋“œ๋ชจํŠธ : mask ์†์„ฑ๊ณผ keyframe๋ฅผ ์ด์šฉํ•œ Click ์ด๋ฒคํŠธ
  • ์šธํ†  ๋จธํ‹€ : ํ…์ŠคํŠธ ๋ถ„ํ•  ํ›„, blur๊ฐ’์„ ์ด์šฉํ•œ Hover ์ด๋ฒคํŠธ

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.