TIL LIST (39) 썸네일형 리스트형 [CSS] grid, 반응형 웹페이지 grid의 개념을 이해하는데 꽤 오래 걸렸다. 점점 약어가 많아지고 grid를 통해 반응형 웹페이지를 만들 수 있는 속성을 보자마자 머리 속이 백지가 되고 말았다. 많은 예제를 보고 clone coding 해보며 대충 감을 잡았다. grid 를 이용한 반응형 홈페이지는 크기를 결정하는 속성인 grid-template-columns, rows(grid-area로 줄일 수 있지만 r-s, c-s, r-e, c-e 라는 복잡한 값 때문에 쓰질 않으려 한다) 에서 특별한 값을 부여하고 브라우저에 맞춰 바뀌게 된다. 결과물 https://smthousand.github.io/2022_practice/02_grid-responsive/ 코드 리뷰 .main__container { padding: 0 80px; di.. [CSS] grid, 격자 grid는 그리드 컨테이너 내에서 격자로 나누어 레이아웃을 지정하는 CSS 문법이다. 쉽게 생각하자면 영역에 이런 격자가 있다. 좌측의 4 * 4 방식의 격자를 우측처럼 색칠하듯 영역을 지정해서 레이아웃을 선언할 수 있다. 각 격자의 비율은 1:1 비율이 아니라 자유롭게 변경이 가능하다. flex-box 와 비슷하지만, 좀 더 정교하게 사용할 수 있으니 익혀두고 특이한 레이아웃을 짤 때 쓰도록 해보자. 선언하는 방법은 flex-box 처럼 부모에 선언하고 자식에게 요소를 부여한다. .grid-container {display: grid;} /* dg */ 요소 grid-template-areas grid-template-areas CSS 속성은 명명된 격자 영역을 지정하고 격자에 셀을 설정하고 이름을 할.. [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.. 이전 1 2 3 4 5 다음
