목록풀스택 (143)

비전공자 개발일기

Javascript - Progress Steps

1 2 3 4 prev next @import url('https://fonts.googleapis.com/css?family=Muli&display=swap'); :root { --line-border-fill: #3498db; --line-border-empty: #e0e0e0; } * { box-sizing: border-box; } body { background-color: #f6f7fb; font-family: 'Muli', sans-serif; display: flex; align-items: center; justify-content: center; height: 100vh; overflow: hidden; margin: 0; } .container { text-align: center; ..
Javascript 2021. 9. 26. 00:25
Javascript - Expanding Cards

Explore the Space Explore the Space Explore the Space Explore the Space Explore the Space @import url('https://fonts.googleapis.com/css2?family=Muli&display=swap'); * { box-sizing: border-box; } body { font-family: 'Muli', sans-serif; display: flex; align-items: center; justify-content: center; height: 100vh; overflow: hidden; margin: 0; } .container { display: flex; width: 90vw; } .panel { back..
Javascript 2021. 9. 25. 02:28
Javascript - Vertical Slider

SPRING warm SUMMER hot AUTUMN cool WINTER cold @import url('https://fonts.googleapis.com/css?family=Open+Sans'); * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Open Sans', sans-serif; height: 100vh; } .slider-container { position: relative; overflow: hidden; width: 100vw; height: 100vh; } .left-slide { height: 100%; width: 35%; position: absolute; top: 0; left: 0; tran..
Javascript 2021. 9. 24. 00:20
Javascript - Blurry Loading

0% @import url('https://fonts.googleapis.com/css?family=Ubuntu'); * { box-sizing: border-box; } body { font-family: 'Ubuntu', sans-serif; display: flex; align-items: center; justify-content: center; height: 100vh; overflow: hidden; margin: 0; } .bg { background: url('./1.jpg') no-repeat center center/cover; position: absolute; top: -30; left: -30; width: calc(100vw + 60px); height: calc(100vh + ..
Javascript 2021. 9. 23. 01:16
Javascript - Dynamic Banner

배너 닫기 const banner = document.getElementById("banner"); const img = banner.getElementsByTagName("img"); const toggle = document.getElementById("toggle"); const sound_btn = document.getElementById("sound_btn"); // 배너의 높이 값 변수 let banner_height = getComputedStyle(banner).height; let cast = [] // 풍선 객체 // 풍선 객체 생성 함수 function set_balloon(num) { // 풍선의 속성 값을 랜덤으로 생성 let x = Math.floor(Math.random() ..
Javascript 2021. 9. 22. 00:21
Javascript - 3D Page

Desktop Style 3D Page page1 page2 page3 page4 const wrapper = document.querySelector(".wrapper"); const page = document.querySelectorAll(".page"); const indicator = document.getElementById("indicator"); let indicator_li = indicator.querySelectorAll("li"); let yDeg = 0; let indicator_num = 1; let indicator_length = page.length; let w = page[0].offsetWidth; let page_angle = 0; let page_vector = 0;..
Javascript 2021. 9. 21. 13:26
React - Basic

class Codelab extends React.Component { render() { let text = "I'm IRONMAN" let style = { backgroundColor: "aqua" } return( {text} ); } } class App extends React.Component { render() { return( ) } } ReactDOM.render(,document.querySelector("#root")) ------------------------------------------------------------------- class Codelab extends React.Component { render() { return( Hello {this.props.name..
React & React Native 2021. 9. 20. 11:50
Javascript - Calculator

계산기 caption { font-size: 32px; margin: 20px; } table { width: 320px; text-align: center; margin: 10px auto; } table, th { background: #333; } th { padding-right: 10px; height: 80px; } td { height: 75px; text-align: center; } th > input { width: 100%; border: none; background: #333; color: #fff; text-align: right; font-size: 48px; } td > input[type = "button"] { width: 100%; height: inherit; colo..
Javascript 2021. 9. 19. 22:19
이전 Prev 1 ··· 8 9 10 11 12 13 14 ··· 18 Next 다음