분류 전체보기 (59) 썸네일형 리스트형 [SCSS] 설치 SCSS를 적용할 프로젝트 파일을 열고 cmd 터미널에 다음과 같이 입력한다. npx sass 그리고 packages 이름이 sass 인 것을 확인하고 y를 누른다면 설치가 완료된다. 컴파일 1. 본인이 작업할 scss 파일과 css 파일 두 개를 생성한다. 나는 style.css와 style.scss를 생성했다. 2. html 파일을 생성하고 css 파일을 stylesheet link 한다. hello, wolrd 3. cmd 터미널에 아래와 같이 입력하면 watch 명령어로 인해 scss 파일이 css 파일에 컴파일 되며 자동으로 css 형태로 소스를 업데이트 시켜준다. npx sass --watch 경로/style.scss 경로/style.css 4. scss 파일에 코딩하면 완료! body { b.. 맥북 샀다 [chrome app 코딩 챌린지] 5. 위치 정보 가져오기(API) API는 직접 구현하기 힘든 서비스를 구현할 수 있게 해주는 프로그래밍 인터페이스다. 홈페이지에 카카오맵 또는 구글맵을 넣어 실시간 위치를 보여줄 수 있고, 카카오톡 API를 통해 메세지를 보낼 수도, 페이스북이나 인스타그램 API를 통해 게시글을 공유할 수도 있다. 위치, 소셜 뿐만 아니라 API는 다양한 방면에서 쓰이고 있다. mdn Web API 모음: https://developer.mozilla.org/ko/docs/Web/API 여기에서는 위치 API인 Geolocation API로 사용자의 위치 정보를 받아오고, 그 좌표를 open Weather API 에 입력해 현재 날씨 데이터를 실시간으로 업데이트 해준다. 코드 리뷰 function onGeoSuccess(position) { const.. [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 속성은 명명된 격자 영역을 지정하고 격자에 셀을 설정하고 이름을 할.. 광안대교와 뻘짓 어느 날 한글을 모르는 외국인들은 '홋'을 되게 좋아한대. 모자 쓴 사람이 걸어가는 것 같다나 뭐라나. 🤵 ㅋㅋㅋㅋㅋ 🤵 홋 🤵 솧 어, 그건 되게 노을이 져서 바다에 비추는 해와 광안대교 같다. 광안대교 내 2의 고향 부산엔 여러 명물이 있다. 그 중 하나는 광안리에서 보이는 광안대교인데 해변가를 거닐다보면 광안대교를 배경으로 사진을 찍는 사람과 찍어주는 사람, (불법이지만) 불꽃놀이를 하는 사람, 바다에 앉아 쉬는 사람, 강아지와 산책하는 사람 등등 다양한 사람들이 보기 좋게 어우러져 있다. 광안리는 태헌이와 내가 첫 데이트를 했던 곳이기도 하고 근처에 살 땐 종종 리프레쉬하러 일부러 찾아가기도 했다. 그리고 요즘 제일 꽂힌 가게가 있는 곳도 광안리다! 🤤 그러다보니 애정이 남다른 편인데 태헌이와 말.. [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(.. 이전 1 2 3 4 5 6 7 8 다음
