본문 바로가기

공부/javascript41

2022.07.05 - javascript 30 [ day5 ] Flex flex 이용하여 위아래 포지션 액션주기 연습! - 추가로 수정해야 할 것 1) 두 번째 클릭시 첫 번째 이미지는 원래대로 돌아가게 하기 2) css 이미지 변경 [ html ] Hey Let's Dance Give Take Receive Experience It Today Give All You can Life In Motion [ css ] html { box-sizing: border-box; background: #ffc600; font-family: "helvetica neue"; font-size: 20px; font-weight: 200; } body { margin: 0; } *, *:before, *:after { box-sizing: inherit; } .panels { min-heig.. 2022. 7. 5.
2022.07.05 - javascript 30 [ day4 ] Array 함수 연습 [ 공통 Array ] const inventors = [ { first: "Albert", last: "Einstein", year: 1879, passed: 1955 }, { first: "Isaac", last: "Newton", year: 1643, passed: 1727 }, { first: "Galileo", last: "Galilei", year: 1564, passed: 1642 }, { first: "Marie", last: "Curie", year: 1867, passed: 1934 }, { first: "Johannes", last: "Kepler", year: 1571, passed: 1630 }, { first: "Nicolaus", last: "Copernicus", year: .. 2022. 7. 5.
2022.06.30 - javascript 30 [ day3 ] CSS Variables with JS CSS 속성값 변수를 사용하여 style을 변경할 수 있도록 만들었다. [ 결과물 ] body의 style 속성을 반환하여 이런것을 만들 수 있다니 좀 싱기했다. input range가 너무 못생겨서 직접 커스텀했다. [ html ] 1. HTML 데이터 속성은 화면에 안보이게 글이나 추가 정보를 담아놓을 수 있는 방법이다. data-* 속성은 표준이 아닌 속성이나 추가적인 DOM 속성, Node.setUserData()과 같은 다른 조작을 하지 않고도, 의미론적 표준 HTML 요소에 추가 정보를 저장할 수 있도록 한다. Update CSS Variables with JS 배경화면 간격 : 흐림 처리 : 배경색 : [ CSS ] 1. CSS 사용자 지정 속성 중복되는 속성값을 작성하는 상황을 다른 프로그.. 2022. 6. 30.
2022.06.28 - javascript 30 [ day2 ] clock [ 결과물 ] day2는 transform을 이용하여 시계를 만들었다. 시계 안에 현재시각도 표현해봤다. [ HTML ] [ CSS ] html { background: linear-gradient(45deg, #e9f58e 0%, #b9d0e4 50%, #006492 100%); background-size: cover; font-family: "helvetica neue"; text-align: center; font-size: 10px; } body { margin: 0; font-size: 2rem; display: flex; flex: 1; min-height: 100vh; flex-direction: column; justify-content: center; align-items: center.. 2022. 6. 28.
2022.06.27 - javascript 타이핑 게임 자바스크립트로 간단한 게임 만들기! 부트스트랩을 이용해서 구성해봤는데 난 부트스트랩 좀 어색하다..ㅎ [ 타이핑 게임 ] 1. start를 입력하면 게임이 시작된다. 2. 제시어는 7자 이내로 filter된 단어가 랜덤으로 제시된다. 3. 시작되는 순간 시간이 카운트된다. 4. 사용자가 입력에 성공하면 score가 올라간다. 5. 7초안에 입력하지 못하면 game over되며, 모든 점수는 초기화된다. [ js ] - 배운 것 1. api를 사용하여 랜덤 단어를 생성했다. 배열값도 랜덤으로 가져올 수 있는 api가 있는것을 처음 알았음.. 저번에 랜덤 아이디값 만들때 너무 대충한 것 같아서 고쳐봐야겠다ㅋㅋ 2. async await async와 await는 자바스크립트의 비동기 처리 패턴 중 가장 최근에.. 2022. 6. 27.
2022.06.23 - (+계속 추가) 노마드 크롬웹앱 내 맘대로 수정하기 1. 날씨 아이콘 추가 나의 크롬웹앱이 너무 심심해보여서 날씨 아이콘을 추가해봤다. 크롬웹앱에 뭔가 하나씩 추가할 예정이다. (추가 계획은 내가 있는 장소 코로나확진자수 보여주기 ) 날씨 아이콘을 어떻게 추가하면 좋을지 좀 고민을 했는데 내가 선택한 방식은 1) 날씨 아이콘 이미지 폴더를 프로젝트 폴더에 넣는다 . 2) weather div 안에 img태그 하나 생성한다. 3) weather js 파일에 날씨 조건에 맞는 아이콘을 이미지로 불러오겠다는 코드를 작성한다. 4) setAttribute 확장자명 꼭 붙이기 (.png ...) 그리고 잊으면 안되는 것. 날씨 이미지명을 openweathermap main의 날씨명으로 맞춰주기!! 짜란 잘 나온다~~ ( 날씨 아이콘 보니까 낮/밤 나뉘어져 있던데,.. 2022. 6. 23.

티스토리툴바