-
문제 해결 Visual Studio Code 한글 깨짐 문제 해결 (& Live Server) 다른분이 작업하셨던 파일을 받아서 작업을 하려고 vscode의 플러그인인 live server로 index.html 파일을 실행했다. 그런데 페이지가 열리자마자 아주 당황했다. 한글이 전부 깨져서 나온 것이다😂 이게 왜 그럴까? 정말 멘붕이 많이 왔었다. 내가 뭘 잘못 건드렸나? 그렇게 우왕좌왕 하다가 발견한 것이 바로... 이 코드이다. 하지만 왜일까? 이 코드만 적혀있다고 해서 문제가 생긴건 아니었다. 문제가 된 부분들은 아래와 같다. 이 부분들이 문제였다. 궁금해져서 확인을 해보니 Live Server로 실행했을 때 뿐만 아니라 인코딩 방식을 html 파일과 vscode에서 다르게 설정했을 경우, 그냥 index.html 파일을 열었을 때도 한글이 깨지는 현상을 발견할 수 있었다. html 의 me..
-
Javascript [Javascript] 탭메뉴 만들기 이번엔 탭메뉴 만들기! 이번건 검색했을 때 여러가지 방법들이 많이 나와서 고민했다. 이런 저런 페이지들의 코드들을 보면서 어떤게 좋은 코드일까... 어떤게 나은 코드일까... 해보다가 결국 내 마음대로 섞어서 짜보았다(?) 🥸 내 코드는 forEach와 index를 사용한 코드이다. Javascript 코드 // 1. 탭 버튼과 탭 내용 부분들을 querySelectorAll을 사용해 변수에 담는다. const tabItem = document.querySelectorAll(".tab__item"); const tabContent = document.querySelectorAll(".tab__content"); // 2. 탭 버튼들을 forEach 문을 통해 한번씩 순회한다. // 이때 index도 같이..
-
일상 퍼블리셔 면접을 보며 내가 받았던 질문 리스트 요즘 계속 면접을 보러 다니고 있는데, 그동안 받아왔던 질문을 모아놓으면 좋을 것 같아서 정리해 본다. 질문에 대한 답은 내 개인 노션에 정리해 놓고 보기로... 웹 관련 질문 웹표준이란 뭔지 설명해 주세요. 웹접근성이 뭔지 설명해 주세요. 웹접근성을 고려한 웹 사이트를 만드는 방법은 무엇인가요? 웹접근성 확인은 어떻게 했나요? 크로스 브라우징을 확인하는지와, 확인 시 어떤 브라우징까지 확인하는지 알려주세요. 크로스 브라우징 관련 이슈 중 어려웠던 부분이 있나요? 반응형 웹이란 뭔지 설명해 주세요. 반응형 웹 작업시 어느 단위로 끊어서 작업하나요? HTML 관련 질문 meta 태그가 뭔지 알고있나요? 시멘틱태그는 무엇이며 왜 사용하는지 설명해 주세요. CSS 관련 질문 요즘 flex 를 많이 사용하고 있..
-
Javascript [Javascript] alert창(경고창) 텍스트 줄바꿈 하기 alert창(경고창) 에서 텍스트 줄바꿈 하는 방법 alert창에서도 줄바꿈이 가능하다! 최근까진 잘 모르고 가능하지 않을까~ 라고 어렴풋이 생각하고 있었는데 마침 딱 사용할 일이 와서 알아보았다. 줄바꿈을 하는 방법은 두가지 방법이 있다. \n 을 사용한 줄바꿈 줄바꿈을 할 텍스트 뒤에 \n 를 넣어주면 줄바꿈이 된다. 코드 alert('안녕하세요?\n만나서 반갑습니다.'); 출력물 템플릿 리터럴 ` ` 을 사용한 줄바꿈 템플릿 리터럴 ` ` 을 사용하면 줄바꿈을 한 상태로 입력을 하면 alert 창에서도 줄바꿈이 된다. 주의할 점은 ` 바로 뒤나 앞에서 줄바꿈을 하거나, 가독성을 위해서 탭키를 사용하면 그것 역시 적용이 되므로 주의해야한다! 코드 alert(`안녕하세요? 만나서 반갑습니다.`); 출력..
-
문제 해결 fatal: No configured push destination. 에러 해결 fatal: No configured push destination. 에러 해결 프로젝트를 생성 후 처음으로 git push 를 했는데 해당 에러가 발생했다. fatal: No configured push destination. Either specify the URL from the command-line or configure a remote repository using git remote add and then push using the remote name git push 어떤 에러인가 했더니... 현재 위치의 폴더가 github의 원격 레파지토리와 연결이 되어있지 않다는 듯 하다. 그리고나서 생각해보니 github에서 해당 프로젝트 레파지토리를 생성만 해두고 연결을 해두지 않았었다. ^^; 그..
-
기타 VSCODE 에서 Remote - SSH 사용하여 SSH 연결하기 Remote - SSH 설치 및 사용 방법 vscode 에서 SSH 연결을 할 일이 생겼다. Remote-SSH 를 설치하면 편리하다길래 바로 플러그인을 설치했다. 설치한 후 F1을 눌러 Remote-SSH 를 검색하면 나오는 것들 중 Open SSH Configuration File 을 클릭한다. 클릭하면 자동으로 설정 파일 경로가 있는 곳이 나오는데 그걸 클릭한다. 그리고 나오는 설정 파일에서 설정을 작성해주면 된다. Host : 내가 알아볼 수 있는 이름으로 지으면 된다. 여러개를 사용할 시 구분하기 좋음! HostName : 나같은 경우는 IP 주소를 사용하여 접속해야 했다. 그래서 IP 주소를 넣었다. User : 유저 ID Port : 포트 번호 ... 이렇게 작성하고 나니 생기는 궁금한 점...
-
Javascript [Javascript] 탭메뉴 만들기 (id값을 가져와서 만들기) 예전에 한번 forEach와 index를 사용한 간단한 탭메뉴를 만들었던 적이 있다. https://happy-hee8.tistory.com/3 그때 더 좋은 코드를 짤 수 있게 된다면 수정을 하러 오겠다고 했는데 새로운 방법으로 코드를 짜게되어 이렇게 작성을 해본다. 이 방법도 저 방법도 나쁘지 않은 방식인 것 같아 새로 글을 작성하기로 했다. 개인적으로 장기적으로 내용이 추가되거나 삭제 등등 유지보수를 해야한다면 이 방법이 더 좋을 것 같다. 이 방법은 탭 버튼과 탭 내용 부분에 각각 id값을 주고, id값이 같은 탭 버튼과 탭 내용 부분이 활성화가 되는 방식이다. Javascript 코드 // 탭 버튼과 탭 내용 부분들을 querySelectorAll을 사용해 변수에 담는다. const tabIte..
-
Javascript [Javascript] 스크롤 방향 감지하기 (위/아래 방향 알아내기) ↕️ 내 스크롤이 위로 가는가... 아래로 가는가... 알려주세요 Javascript 님...🙂 요즘 사이트들을 보면 스크롤을 올릴때, 혹은 내릴 때 숨겨지는 네비게이션, 버튼들이 자주 보인다. 그리고 내 포트폴리오에도 그 기능을 넣어야했다. 그래서 공부하게 된 마우스 스크롤 방향 감지하기 Javascript 코드 // 이전 스크롤 위치를 변수에 담는다. let lastScrollY = 0; // 윈도우 스크롤 이벤트 (스크롤을 했을 때 발생) window.addEventListener("scroll", (e) => { // 현재 스크롤 위치(스크롤을 했을 경우 위치)를 변수에 담는다. let currentScrollY = window.scrollY; // 이전 스크롤 위치(Y)가 현재 스크롤 위치(Y)보다 ..
-
Javascript [Javascript] 내 사이트에 구글 지도 사용하기 (Google map API) 🗺️ 일단 구글 지도를 사용하려면 구글 클라우드에서 발급하는 API를 발급받아야 한다. API 발급 방법 1. 아래 링크(구글 지도 플랫폼) 에 접속한 뒤, 시작하기 버튼을 클릭한다. https://developers.google.com/maps/gmp-get-started?hl=ko 2. 이후 나오는 화면에서 가입하여 API 키 받기 버튼을 클릭한다. 3. 결제 사용 설정이 안 되어있다면, 결제 계정 만들기 버튼을 눌러서 사용 설정을 해준다. (결제 계정 만들기 부분은 개인정보와 관련된 부분이므로 화면은 생략한다.) 4. 결제 계정 사용 설정을 한 뒤, 이런 창이 뜨면 선택들을 해준 뒤 제출 버튼을 눌러준다. 5. 그럼 이제 API 키 발급은 완료되었다. 이 키를 script 영역에 넣어야 하기때문에, 잘 ..
-
CSS [CSS] 텍스트에 그라데이션 효과 주기 작업중인 사이트가 뭔가 밋밋한 것 같아 텍스트 부분을 수정하기로 했다. 고민하다가 텍스트에 그라데이션을 주는 방향으로 결정! CSS 코드 background: linear-gradient( 307deg, #ff5252 0%, #7700ff 100% ); background: -webkit-linear-gradient( 307deg, #ff5252 0%, #7700ff 100% ); background: -moz-linear-gradient( 307deg, #ff5252 0%, #7700ff 100% ); background: -o-linear-gradient( 307deg, #ff5252 0%, #7700ff 100% ); -webkit-background-clip: text; background-cli..
-
문제 해결 네트워크 응답 데이터를 로드할 수 없음(status 400 / Network status cancelled) 에러 해결 (개발환경 : React / Javascript / Next.js) 게시판을 만들고 리스트의 제목 부분을 클릭했더니 상세페이지로 이동이 되지 않았다. 근데 계속 그런 건 아니고 이동이 되다가 안 되다가 하는? 현상이었다. 어쩔 땐 페이지로 이동이 안되고, 또 어쩔 땐 이동이 잘만 됐다. 허허 희한하네... 될 거면 되고 안 될거면 안 되지 됐다가 안 됐다가 하는 건 뭐람? 가끔 그러니 상관 없지 않나?라고 순간 생각했지만... 사용자 입장에서 생각해 봤을 땐 이런식으로 이동이 잘 안 되면 빡칠 수 있는 경우이기 때문에, 그리고 또 이런 상황이 다시 발생 할 수 있으니까 원인을 알아내서 너무너무 해결하고 싶었다! 개발자 도구를 열고, 네트워크탭을 살펴보니 이런 부분들이 확인됐다. 대체 뭐가 문제일까... ..
-
문제 해결 body 태그 안, 위쪽에 공백이 생기는 문제 해결 () 작업을 하는데 갑자기 문제가 생겼다. 오잉? 이게 뭐지? 상단에 알 수 없는 여백이 생긴 것이다. 개발자 도구로 확인해보니, 내가 작성하지 않은 알 수 없는 텍스트가 들어있었다. (나같은 경우는 "" 라는 텍스트가 들어있었다.) 작업중인 파일만 계속 살펴보다가 문득 든 생각... 아! 혹시나 저번에 해결했던 것처럼 인코딩 문제일 수도 있지 않을까? 싶어서 그쪽을 살펴보니 UTF-8 이 아닌 UTF-8 with BOM 으로 되어있었다. 그렇다. 이 문제는 인코딩과 관련이 있었다. 해결 방법 해결 방법은 간단하다. 인코딩을 바꿔주면 되는데 (VSCode의 경우) 우측 오른쪽에 있는 인코딩 부분을 클릭하고 뜨는 창에서 'Reopen width Encoding' 을 클릭, UTF-8 을 선택해주면 ..
-
Javascript [Javascript] 메뉴 클릭시 네비게이션 높이만큼 띄우고 섹션으로 이동하기 네비게이션 메뉴를 눌렀을 때, 원하는 섹션으로 단순하게 이동하는 것은 간단하다. a 태그의 link 에 해당 섹션의 id 값을 넣는 것이다. 하지만 이렇게만 해주면 네비게이션을 fixed로 위치시켜준 경우 해당 섹션으로 갔을 때 네비게이션 높이만큼 섹션이 가려진다는 단점이 있다. 그 단점을 해결하기 위해 Javascript 를 이용하여 코드를 짜보았다. Javascript 코드 // 1. 네비게이션 메뉴들을 querySelectorAll을 통해 변수에 담는다. const gnbItems = document.querySelectorAll(".gnb__item"); // 2. 섹션들을 전부 querySelectorAll을 통해 변수에 담는다. const sections = document.querySelec..
-
개발일상 [SPAVEL] 날짜 선택 플러그인은 vanillajs-datepicker 로 결정했다 🗓️ 예약 부분의 날짜를 선택할 datepicker 플러그인은 어떤걸 써볼까 하고 검색하다가 발견한 플러그인 사이트 자체에 설명이 잘 되어있어서 놀랐다. 이런저런 플러그인들 중에 내가 이 플러그인을 선택한 이유는 1. 바닐라JS 로 되어있음 2. 날짜를 선택하면 캘린더가 닫히는 옵션이 있음 3. 원하는 날짜의 이전 날짜는 선택 불가능한 옵션이 있음 이 세가지이다. 이 외에도 좋은 옵션들이 많아서 나중에 다른 부분에서 사용할 때에도 좋을 것 같다!😎 사용 방법도 쉬웠고, 특히나 데모 사이트가 옵션들을 적용해가면서 시각적으로 볼 수 있어서 이 부분이 옵션을 설정 할 때 도움이 많이 되었던 것 같다. 좋은 플러그인을 알아둔 김에 잊지 않도록 개발일기에 기록해본다. 👍 vanillajs-datepicker 사이트 주..
-
Javascript [Javascript] .padStart()를 사용한 숫자 앞에 0 넣기 String.prototype.padStart() 란 .padStart() 메서드는문자열이 지정된 길이에 도달할 때까지 이 문자열을 다른 문자열로 채운다. 다른 문자열은 문자열의 시작 부분부터 적용된다. const str1 = '31'; // 문자열이 4자리 길이에 도달할 때까지 앞을 0으로 채운다. console.log(str1.padStart(4, '0')); // '0003' console.log(str1.padStart(4, '영')); // '영영영3' console.log(str1.padStart(2, '1')); // '31' const str2 = '안녕하세요'; // 채워질 문자열(padString)이 너무 길면 뒷부분이 잘린다. console.log(str2.padStart(8, '반갑..
-
문제 해결 ReferenceError: alert is not defined 에러 해결 (& Nothing was returned from render) React 와 typescript 환경에서 작업을 하던 중에 갑자기 문제가 생겼다. 게시글의 id 값을 가져와서 그 값이 string 값인지 확인한 후, 상세 페이지를 보여주는 화면이었는데 나타난 에러문은 바로 이것... Referenceerror: alert is not defined 그래서 어라? 이게 왜 발생했지? 하고 바로 저 에러를 복사해서 검색을 해보았다. Node.js 와 관련되어 있다는 내용들이 대부분... 근데 왜인지 저것과 관련이 있는 것 같지 않았다. 그래서 혹시나하여 아! alert 부분이 문제라면 저 alert 부분을 다른 걸로 바꿔볼까? 라는 생각에 console.log 로 바꿔보았다. 그랬더니... 이번엔 다른 에러가 나타났다. Nothing was returned from r..
-
Javascript [Javascript] Scroll Spy (스크롤 스파이) 적용하기 예전에 작업을 하면서 스크롤 스파이는 플러그인을 사용했었는데 그때 생각했던게 나중에는 직접 구현을 해봐야지! 라고 생각했어서 이번에는 직접 구현을 해보았다😎 Javascript 코드 // 윈도우 스크롤 이벤트 (스크롤을 했을 때 발생) window.addEventListener("scroll", () => { // 1. 섹션들을 querySelectorAll을 통해 변수에 담는다. const sections = document.querySelectorAll("section"); // 2. Gnb 메뉴들을 querySelectorAll을 통해 변수에 담는다. const gnbItems = document.querySelectorAll(".gnb__item"); // 3. forEach 문을 통해 섹션들을 ..
-
강의 간단 정리(추후 복습하면서 수정) [Section04-02] graphql-mutation (& 에러를 해결하는 방법) graphql 요청방식 const [실행함수] = useMutation() 실행함수() const [실행함수] = useMutation(세팅해놓은 API) 실행함수() import { useMutation, gql } from "@apollo/client"; // 세팅 const 나의그래프큐엘세팅 = gql` mutation { createBoard(writer: "작성자", title: "제목입니다.", contents: "내용입니다.") { _id } } `; export default function GraphqlMutationPage() { // useMutation 를 실행시키고 싶은 함수를 [] 안에 넣는다. // useMutation 초기값으로 세팅을 넣는다. const [나의함수] = us..
-
문제 해결 npm install -g serve 시 permission denied 에러 해결 강의를 듣다가 serve 를 설치하는 부분에서 에러가 났다. 항상 보자마자 긴장부터 되는 빨간색 글자들이지만... 침착하게 구글링을 해보려다가 익숙한(?) 단어에 내가 해결 할 수 있을 것 같은데? 하고 에러에 대한 설명을 쭈루룩 보았다. (경로) % npm install -g serve npm ERR! code EACCES npm ERR! syscall mkdir npm ERR! path /usr/local/lib/node_modules/serve npm ERR! errno -13 npm ERR! Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/serve' npm ERR! [Error: EACCES: permission den..
-
개발일상 [PORTFOLIO] 풀페이지 사이트의 모바일 사이즈를 고려하자(교훈) 작업을 하다보니 갑자기 문득 생각이 났다. 생각해보니 이건 포트폴리오 사이트라 정보가 많고, 모바일 사이즈에서 보면 정보가 너무 많아서 한 섹션 안에 내용이 넘칠 것 같은데 어떻게 해야하지...? 이건 풀 페이지 사이트로 만들기로 했는데...? 어라? 그렇다... PC 사이즈 화면만 생각하고 있었는데, 그걸 모바일로 작업했을 때의 일을 생각하지 않은 것이다. 그래서 일단 해결책으로 생각해 둔 바로는 모바일 사이즈에선 풀페이지가 아닌 기본 스크롤 방식이 되도록 작업을 해보려 한다. 어떻게 할지는... 반응형 작업을 하면서 고민해보자! 덕분에 앞으로 반응형 작업을 할 때는 이런것들도 생각을 해봐야 겠다는 교훈(?)을 얻었다. 🥲 모바일은 풀페이지가 안 되도록 해서 해결... 결국 모바일 사이즈에서는 풀페이지..
-
CSS [CSS] CSS 방법론 - BEM 방식 먼 옛날 퍼블리싱 과외를 받던 시절... 과외 선생님께서 BEM 방식을 추천해 주셔서 그냥 뭐가 뭔지 모르는 상태로 알려주시는대로 썼던 기억이 있다. 최근 다시 포트폴리오를 만들면서 BEM 을 어떤식으로 써야 좋을지 헷갈려서 또, BEM 방식으로 코드를 짜볼 때에도 감이 잘 안 올때가 있어서 내 스스로가 헷갈리지 않기위해 정리를 해보았다! BEM 이란? BEM이란 CSS 방법론 중 하나로, Blcok, Element, Modifier 의 약자이다. Block (블럭) 블럭은 그 자체로 의미가 있는 독립적인 부분이다. ( 예시 : header, container, menu, checkbox, input ) 블럭은 블럭을 감쌀 수 있다. 예를들어 header 라는 블럭 안에 logo 라는 블럭이 들어갈 수 ..
-
Javascript [Javascript] 아코디언 메뉴 만들기 요즘은 참 편리한 시대가 되었다. 다양한 플러그인들은 더 편리한 개발환경을 제공하지만 포트폴리오를 만들며 스스로의 실력을 가늠하고 싶은 내 입장으로서는 직접 코드를 짜서 아코디언 메뉴를 만들어보고 싶었다. (일단 너무 오랜만에 사용해보는 Javascript... 그동안 사용하지 않아 굳었던 머리를 풀고싶기도 했다. 😇) 그래서 이래저래 구글링을 해보고 만든 나의 아코디언 메뉴!(두둥) 사실 간단한 기능이지만 그냥 처음 아무것도 주어진게 없는 코드를 바라봤을 땐 참 막막했던 것 같다. 코드 한줄 한줄을 주석으로 해석해보았다. 작업을 하다보니... 예전에 작성했던 코드보다 더 간결한 코드를 찾아서 수정했다. 😇 (아래는 예전에 작성해봤던 코드) 더보기 Javascript 코드 (예전 코드) // 1. 아코디..
-
CSS [CSS] 사파리에서 기본 input 스타일 제거하기 포트폴리오 작업을 대강 끝내고 크로스 브라우징 확인 중에 모바일 사파리에서 input 스타일이 다른 부분을 발견했다. 데스크탑 사파리로 봤을 땐 분명 괜찮았는데...!! 모바일로 보니까 input 에 border-radius가 들어가 있었다. 분명 input에 border-radius: 0 을 줬는데도.... 그냥은 먹히지가 않았다(😂) 그리고 알아낸 방법! 이렇게 하니까 다행히 잘 먹었다. input[type="text"], input[type="password"], input[type="submit"], input[type="search"], input[type="tel"], input[type="email"], html input[type="button"], input[type="reset"] { ..
-
Javascript [Javascript] .map() map() 이란 map() 메서드는 배열 안의 모든 요소들을 각각 순회하며 그 요소들에게 주어진 함수(callback 함수)를 호출한 결과를 모아 새로운 배열을 반환한다. const arr = [1, 3, 5, 10]; // arr 의 요소들을 각각 순회하며 * 2를 하여 반환한다. const map = arr.map((item) => item * 2); console.log(map); // Array [2, 6, 10, 20] 형태 arr.map(callback(currentValue[, index[, array]])[, thisArg]) callback: 새로운 배열 요소를 생성하는 함수 currentvalue: 처리할 현재 요소 index: 현재 요소 인덱스 [Optional] array: map(..
-
강의 간단 정리(추후 복습하면서 수정) [Section04-03] graphql-mutation-args argu에 state값 넣어주기 mutation 의 createBoard에 바로 값을 입력하면 항상 같은 값으로 등록이 된다는 문제점이 있다. 하지만 이 값은 항상 변하므로, 이 부분을 변수에 담아서 사용하면 여러가지 데이터를 담을 수 있다. // createBoard의 괄호() 안에 변수의 타입을 꼭 입력해주어야 한다. // grayql 에서 변수는 $ 이다. (앞에 $ 를 표시) mutation createBoard($writer: String, $title: String, $contents: String) { createBoard(writer: $writer, title: $title, contents: $contents) { _id number message } } const onClickSubm..
-
입문자를 위한 Javascript 알고리즘 이론+실습 [section-02] operator (연습문제 - 제비뽑기 용지) [인프런x코드캠프] 입문자를 위한 Javascript 알고리즘 이론+실습 강의를 들으며 풀어본 문제들 (출처는 아래 링크) [인프런x코드캠프] 입문자를 위한 Javascript 알고리즘 이론+실습 function solution(a, b) { // 종이는 1cm 정사각형으로 만들어야 함. // 가로 a, 세로 b // 가위질 몇번 해야하는지 계산 // 가로 가위질 횟수 const row = a - 1; // 세로 가위질 횟수 const col = (b - 1) * a; return row + col; } solution(100, 100); //999 solution(20, 50); //999
-
개발일상 [PORTFOLIO] 풀페이지 포트폴리오 사이트를 만들어야겠다. 지금까지 포트폴리오를 노션에 이력서와 함께 넣어놨었는데, 노션 자체가 정보를 너무 많이 넣어놔서인지 로딩이 조금 오래 걸린다는 느낌이 있어서 새로운 포트폴리오용 사이트를 만들기로 했다. 어떻게 만들까 고민하다가 풀페이지로 만들기로 했다. 일반적인 반응형 페이지와 모바일 적응형 페이지는 포트폴리오로 만들어 뒀으니, 조금 다른 느낌의 새로운 사이트를 만들고 싶었기 때문! 기획을 딱히 할 필요는 없을 것 같아서 그냥 느낌 가는대로~ 내 손이 가는대로~ 만들어 봐야겠다. 재밌을 것 같다! 열심히 만들어 봐야지. - 끝 -
-
개발일상 [SPAVEL] 포트폴리오 작업을 마무리하며 회고하기 📝 드디어 포트폴리오 작업을 끝냈다! 예전에 만들었던 사이트 결과물이 아쉬워서 같은 주제로 다시 만들어 본 포트폴리오 사이트. 개인적으로는 어느정도 만족스럽다. 작업을 하다보니 기획했던 것과 달라진 부분들이 있었다. 레이아웃을 조금 더 잘 어울리게 변경했고, 불필요해 보이는 섹션은 다른 섹션의 내용으로 집어넣었다. 검색 부분은 아예 제외를 시켰는데, 원페이지 사이트에서 검색 기능이 굳이 필요할까? 해서 제외시켰다. Javascript 로 직접 만들었던 코드 중 아쉬웠던 부분이 있어서 이 부분은 더 좋은 방법을 위해 점차 수정을 해 나갈 것 같다! 그러면 포트폴리오 작업이 덜 끝난게 아닌가? 싶지만 코드를 짤 때는 다양한 방법이 있고, 생각했던대로 잘 동작을 한다면 그게 틀린 건 아니라고 생각해서 일단 '혼자..
-
개발일상 [SPAVEL] 화면 분기점을 정하기 🖥️ 반응형 작업을 할 거라서 화면 사이즈를 어떻게 잡을지 고민하다가 보편적인 분기점인 768(Tablet) / 1024(Large Tablet) / 1280(Desctop) / 1440(Wide Desctop) 으로 정했다. 원래라면 1280에서 끝내려고 했었는데, 어떤 부분은 일정 사이즈 이상으로 넘어가는 어색해지는 부분이 있어서 고민을 해보다가 와이드 데스크탑 모니터 사이즈도 추가하기로 했다. 자 이제 차근차근 분기점에 맞게 작업해 나가자~! - 끝 -