til (15) 썸네일형 리스트형 [HTML, CSS] border 속성을 사용하지 않은 border 만들기 border 속성을 이용해 테두리를 만들면 컨테이너마다 동일한 값이 적용된다. 그런데 컨테이너가 서로 인접한 경우 border 굵기가 달라지는 불상사가 생긴다. DIV1 DIV2 그럼 border-left, right, top, bottom 속성을 이용해 일일히 값을 줄 수 있지 않을까? DIV1 DIV2 물론 간단한 구조라면 이 방법이 편하겠지만 복잡한 구조를 지닌 레이아웃이라면? 인접한 선의 위치를 하나하나 계산해서 border를 삭제하는 작업이 상당히 비효율적이라는 생각이 들것이다. 결과물 위 결과물에서 border 속성은 일절 사용하지 않았다. 그렇다면 저 주황색 테두리는 뭘까? header의 구조는 아래와 같다. Best Curry in Seoul and Great Value! If you a.. [chrome app 코딩 챌린지] 4. 시스템 시간 가져오기 JavaScipt에선 Date 라는 객체가 있다. 해당 객체는 UNIX 타임스탬프를 담는데, 1970년 1월 1일 자정부터 지난 시간을 밀리초로 나타내는 값이다. Date.now()를 호출하면 어떤 식으로 출력되는 지 알 수 있다. new Date() 생성자로 호출할 경우 현재 날짜와 시간을 나타내는 문자열 형태로 새로운 Date 객체를 반환한다. 내가 표현하고 싶은 것은 저 중 18:47 부분, 즉 분과 초다. 위 처럼 해당 date를 변수로 설정해 값을 저장해준 뒤 getHours()와 getMinutes() 메서드를 이용하면 값을 반환한다. 그 값을 string 형태로 출력해주는 함수를 작성해보도록 하겠다. 코드 리뷰 00:00 const clock = document.querySelector("... [chrome app 코딩 챌린지] 3. 로그인 값 기억하기 localStorage는 web storage 중 하나로 서버에 데이터를 저장하는 방식이 아닌 웹 브라우저 상에서 데이터를 저장할 수 있는 방식이다. 키와 값으로 데이터가 이루어져 있으며 이런 형식으로 이루어져 있다. localStorage.setItem("key", value); // > setItem // > getItem, removeItem("key"); // > clear(); 클리어 로그인 화면에서 이름 데이터 값을 localStorage에 저장하고, 그 저장한 값을 불러들여 화면에 출력하는 방식을 사용하면 매커니즘 자체는 어렵지 않으나 후술할 문제 때문에 꽤 오랜 시간이 걸렸다. 코드 리뷰 - Weather 00:00 const loginName = document.querySelector(.. [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.. [기초 이론] if ... else if ... else JavaScript 는 위에서 아래로 한줄씩 순차적으로 코드의 흐름을 읽어나가는 데, 특정 조건을 걸고 조건을 충족하면 실행하거나 실행하지 않는 것을 조건문이라고 한다. 그 중 하나인 if ... else 는 만약 ... 이라면 ... 한다. 라고 생각하면 편하다. 즉 if ... else 문은 지정한 조건이 참(true)인 경우 명령문(Statement)을 실행한다. 조건이 거짓(false)인 경우 또 다른 명령문이 실행 될 수 있다. if(condition) { statement; } else { last statement; } 먼저 if 문을 작성해주는데 쉽게 구문으로 풀면 만약(라면) { 중괄호 안의 명령문을 시행한다 } 와 같다. 최종적으로 소괄호 안의 표현식이 true 일.. 이전 1 2 다음
