본문 바로가기

분류 전체보기

 (45)
Next.js 스타일링 팁 (classnames, postCSS, Sass) 튜토리얼 잘 따라오고 있어? 오늘은 쉬어가는 페이지! 알아두면 좋은 몇가지 라이브러리들을 소개할께! 지금당장은 중요하지 않으니 이번 튜토리얼은 스킵해도 좋아! 깔끔하게 classname 초이스! - classnames 리액트 하다보면 조건에 따라서 클래스이름을 바꿔야 할때가 자주 있을꺼야. 조건문이 하나두개정도면 뭐 그냥 하면 되겠지만, 설정페이지 같이 조건이 많이 들어가야 하는 페이지는 코드가 복잡해 지겠지? 요걸 심플하게 작성할수 있도록 도와주는 라이브러리가 있어! "classnames" 사용하는 코드 먼저 볼까? import styles from './resultPopup.module.css' import cn from 'classnames' export default function ResultP..
Next.js 스타일링하기 3 - 레이아웃 스타일링 https://ppsu.tistory.com/59 Next.js 스타일링하기2 이전시간의 스타일링 기본은 잘 익혔어? https://ppsu.tistory.com/58 Next.js 스타일링 하기 내 웹사이트에 페이지는 추가했고... 오늘은 이쁘게 스타일링 해볼꺼야! Next.js 페이지 추가하기 앱 처음으로 �� ppsu.tistory.com 이번엔 첫 페이지도 좀 이쁘게 만들고 정리해 보려구해. 나만의 자기소개 페이지를 추가하자! 일단 components/layout.module.css를 아래 내용으로 업데이트 하자 .container { max-width: 36rem; padding: 0 1rem; margin: 3rem auto 6rem; } .header { display: flex; flex-..
육아필수템 - 모션데스크 커스텀 1 - 이케아 상판구매 - 칼뷔(Karlby) 로 책상만들기 맘에드는 높이 조절 책상이 없어서 직접 커스텀으로 조합해보기로 결정했습니다. 가격은 국내에서 20만원대의 싱글 모터로 된것들이 많은데 상판이 무거우면 소음이 심하게 들린다고 해서 걱정이 되더라구요. 키워드는 "모션데스크" "높이조절책상"으로 검색하면 많이 나옵니다. 완전 심플하게 딱 컴퓨터 하나만 놓고 쓴다고 하면 가성비 있는 제품을 고르면 될것 같은데, 저처럼 넓직한 책상을 사용하고 싶은 분들은 소음을 어느정도 각오해야 합니다. 문제는 상판. MDF는 이제 10년 넘게 사용해서 뭔가 이번엔 원목으로 고급지게 사용하고 싶더라구요. 원목을 옵션을 제공하는 모션데스크들이 있었지만, 제가 원하는 고급짐에는 조금 못미치는 결과가 나왔네요. 그래서 이리 저리 알아본 결과 저의 선택은!? 이케아 주방용 상판 구매!..
Next.js 스타일링하기2 - 전역 스타일링/Global Styling 이전시간의 스타일링 기본은 잘 익혔어? https://ppsu.tistory.com/58 Next.js 스타일링 하기 내 웹사이트에 페이지는 추가했고... 오늘은 이쁘게 스타일링 해볼꺼야! Next.js 페이지 추가하기 앱 처음으로 수정은 잘 했지? Next.js 앱 처음으로 수정해보기 첫번째 Next.js 앱만들기는 잘 했어? 첫 ppsu.tistory.com 이번엔 전체 페이지에 한꺼번에 스타일링을 넣는 방법을 알려줄께! 전역 스타일! CSS Module이 컴포넌트 레벨에서는 유용하긴 한데, 어떤 CSS는 사이트의 모든 페이지에서 불러오고 싶을꺼야. Next.js는 요것도 지원해 줘! 먼저 pages디렉토리 아래에 _app.js파일을 만들어줘! export default function App({ C..
Next.js 스타일링 하기 내 웹사이트에 페이지는 추가했고... 오늘은 이쁘게 스타일링 해볼꺼야! Next.js 페이지 추가하기 앱 처음으로 수정은 잘 했지? Next.js 앱 처음으로 수정해보기 첫번째 Next.js 앱만들기는 잘 했어? 첫번째 Next.js 앱 만들기 자 오늘 첫번째 Next.js앱을 만들꺼야. 먼저 환경설정부터 해야겠지? 환경설 ppsu.tistory.com 오늘의 목표! 이미지와 같은 정적 asset들이랑 title태그같은 메타데이터를 Next.js가 어떻게 다루는지 알아보고 CSS를 통해 스타일리을 어떻게 하는지 알려줄께! 주목! 웹페이지 만들때 이미지는 필수! Asset asset(애쎗)이 뭘까? 사전적인 의미로는 유용하거나 가치있는 사람이나 물건을 말해! 여기서는 주로 이미지들을 asset이라고 부를꺼..
Next.js 페이지 추가하기 앱 처음으로 수정은 잘 했지? Next.js 앱 처음으로 수정해보기 첫번째 Next.js 앱만들기는 잘 했어? 첫번째 Next.js 앱 만들기 자 오늘 첫번째 Next.js앱을 만들꺼야. 먼저 환경설정부터 해야겠지? 환경설정 Node.js설치는 필수 노드 홈페이지에 가서 설치해 https://node ppsu.tistory.com 지금까지 우리가 만든건 한페이지 짜리 웹서버였는데, 보통 우리가 봐왔던 웹사이트들은 여러 페이지를 왔다갔다 했을꺼야. 그래서 이번엔 나만의 페이지를 추가해 보고 페이지별로 이동해 볼꺼야. 덤으로 Next.js가 가진 꿀기능 하나 알려줄께! Next.js 페이지 추가하는 법 먼저 Next.js에서의 페이지 개념에 대해서 먼저 이야기 해볼께. 간단히 말해서, Next.js에서 페이..
Next.js 앱 처음으로 수정해보기 첫번째 Next.js 앱만들기는 잘 했어? 첫번째 Next.js 앱 만들기 자 오늘 첫번째 Next.js앱을 만들꺼야. 먼저 환경설정부터 해야겠지? 환경설정 Node.js설치는 필수 노드 홈페이지에 가서 설치해 https://nodejs.org/ 버전은 10.13 이후 버전이면 돼! 자 시작 해볼까? 일단 ppsu.tistory.com 이번엔 요걸 수정해볼꺼야! pages 디렉토리에 index.js파일이 있을꺼야. 13번째 줄에 태그 사이에 "Welcome to" 보여? 요걸 지우고 "안녕하세요"로 한번 바꿔봐! 저장한 다음에 아까 열어뒀던 브라우저 창을 다시 볼까? 오잉?!? 뭐지? 새로고침도 안했는데 메시지가 변했네? 한번 파일을 수정하고 저장만 해봐! 역시나 브라우저가 잘 바뀌네. 왜그럴까? Nex..
강동구립 성내도서관 방문기 (어린이를 위한, 비가오면 더 오고 싶은 도서관) 자주 가던 도서관인데 작년부터 리뉴얼에 들어가서 오랜만에 오픈했다기에 너무 가고 싶더라고요. 오전에 비가 와서 갈까 말까 고민했는데, 비가 점점 잦아들어서 나가기로 다짐! 사실 강동구립 도서관들이 모두 오픈한 건 아니에요. 아시다시피 요즘 코로나 때문에 난리라, 대부분 도서관에서 대출만 가능하고 자리에서 열람은 불가능하게 되어있습니다. 가는 도중에 비는 완전히 그치고 ㅎ 집에 돌아갈 때는 가벼운 마음으로 다녀오면 될 것 같네요. 재개관 현수막이 +_+ 외관은 이전과 동일! 강동구립 성내도서관은 2009년에도 우수도서관으로 선정되었었네요. 이전에도 깨끗해서 가끔 오던 곳입니다. 이번에 재개관한 강동구립 성내도서관은 건물 이 두개인데, 오른쪽이 본관 왼쪽이 별관이에요. 본관은 이번에 리뉴얼하면서, 유아 자료..

티스토리툴바