전체 글 (59) 썸네일형 리스트형 [chrome app 코딩 챌린지] 2. 버튼 클릭 시 랜덤 이미지 출력 Math.random() 메서드를 이용해 Remind Your Memories Button을 클릭하면 로그인 화면의 이미지 경로가 바뀌어 각기 다른 이미지를 출력하도록 한다. 코드 리뷰 Remind Your Memories const imagesArray = ["welcome.gif", "sign-visual.png", "sign-visual.gif"]; const randomButton = document.querySelector(".login__random-btn"); const loginImg = document.querySelector(".login__img"); function changeImagesHandler() { const mainVisual = imagesArray[Math.floor(.. 심각한 수준의 챌린지 중독증입니다 못 먹어도 고 또 한 번 더 가보자고 [chrome app 코딩 챌린지] 1. 로그인 화면 노마드 코더의 바닐라 JS 수업을 들으며 챌린지를 하고 있는데 Window 95 컨셉으로 잡고 작업 중이다. (덕분에 디자인 할 일이 거의 없다. 챌린지는 굉장히 촉박한데 시간은 아끼면서 퀄리티는 챙기는 방법이라 좋은 선택이라 생각하고 있다) 개중 로그인 화면 로직을 짜고 있다. Login 버튼을 Submit 하면 로그인 화면이 사라지고 유저 화면이 뜨는 방식인데 submit 이벤트와 display: none css를 사용하였다. 코드 리뷰 Name: Password: .hidden { display: none; } const greeting = document.querySelector(".main__greeting"); const userInterface = document.querySelector(".. [CSS] 좌측 정렬에서 마지막만 우측 정렬하는 법 div 내에서 정렬이 필요할 때, 보통 flex 를 이용해 정렬하곤 한다. 하지만 일부는 좌측 정렬, 일부는 우측 정렬이 필요할 때가 있다면? 위 내가 작업한 페이지에서 음악 리스트는 이미지와 설명은 왼쪽에, 생략 아이콘은 오른쪽에 붙어있는 것처럼. 코드 리뷰 Muse Plug In Baby .playlist__items { padding: 15px; border-radius: 20px; display: flex; justify-content: flex-start; align-items: center; } 처음엔 단순히 flex 를 이용해 좌측 정렬을 한 뒤 items__desc 부분 width에 고정값을 줄까 생각했었다. 하지만 요즘처럼 다양한 디바이스가 나오는 세상에 고정값은 있을 수 없는 일이다. .. [HTML] 이름 짓기 힘드시죠? 코드를 만지다 보면 쉽게 가로막히는 게 이름이다, 이름! 이름만 잘지어도 코드가 있어보이는데 😣 특히 HTML 은 뼈대를 작성하는 작업이기 때문에 더욱이 신중할 수 밖에 없다. CSS 에도 쓰이고 JavaScript 에서도 쓰이니 다시 html 파일을 열지 않게 이름을 지어야 한다. 그래서 이번에 진행한 마크업 챌린지는 최대한 시멘틱 태그, B.E.M, 그리고 약어 중심으로 작성하기로 했다. 참고 자료 MDN 시멘틱 태그: https://developer.mozilla.org/ko/docs/Glossary/Semantics B.E.M 공식 홈페이지: http://getbem.com/ 단어별 자주 쓰이는 약어: https://www.allacronyms.com/ 첫번째 섹션 The Greatest Albu.. 바닐라JS 강의 완강 챌린지와 동시 진행하고 있어서 그런지 정신이 없고 어디서부터 회고해야 할 지 감이 잡히지 않는다. 예습은 진짜 필수구나. 새로 배운 개념인 event, random, date, api 등등... 졸업 작품을 진행하면서 하나하나 천천히 TIL로 올려야 겠다. 나당!!!! 나!! [기초 이론] if ... else if ... else JavaScript 는 위에서 아래로 한줄씩 순차적으로 코드의 흐름을 읽어나가는 데, 특정 조건을 걸고 조건을 충족하면 실행하거나 실행하지 않는 것을 조건문이라고 한다. 그 중 하나인 if ... else 는 만약 ... 이라면 ... 한다. 라고 생각하면 편하다. 즉 if ... else 문은 지정한 조건이 참(true)인 경우 명령문(Statement)을 실행한다. 조건이 거짓(false)인 경우 또 다른 명령문이 실행 될 수 있다. if(condition) { statement; } else { last statement; } 먼저 if 문을 작성해주는데 쉽게 구문으로 풀면 만약(라면) { 중괄호 안의 명령문을 시행한다 } 와 같다. 최종적으로 소괄호 안의 표현식이 true 일.. 이전 1 2 3 4 5 6 7 8 다음
