본문 바로가기
반응형

전체 글

 (21)
html, css 툴 Markup Manager MM 만든 후기 프론트엔드로써 일을 하면서, 화면설계서, 디자인, 퍼블리싱을 봐야된다는게 굉장히 비효율적인 생각이 문득 들었음.그래서, Markup 부분만 뜯어갈 수 잇는 툴을 만듬ㅋ      인증이나 저장소같은 프로젝트를 만들어서, iframe으로 embedding하면 굉장히 배포든 뭐든 편할 것 같은 느낌이 들었음. 요즘엔 이런 방식을 "런타임 통합 Micro Frontend 구조"라고 말하는듯. 그리고 최근에는 iframe 통합보다는 "Module Federation" 이라고 하는데, 이건 다음에 뭐 만들때 적용해봐야지.    이런 웹 툴을 만들면서 드는 생각이, 알맹이만 잘 만든다고 서비스가 성공하는건 아닌듯. 어떻게 전달할지가 알맹이 잘 만드는거보다 어쩌면 더 중요할 수 있겠다는 생각이 듬. 그래서 디자인 공부..
메모, 리마인더, 할일 웹앱 MEMOKU 만든 후기 이직하고 얼마 지나지 않았을 때, 히스토리가 파악이 안되었는데 여러 일을 진행해야 되었을 때가 있었음.헤매면서 여러 일을 처리하려니, 정리가 안되어서 메모장에 할일을 적어가면서 했는데,갑자기 이 메모장을 내가 만들고 싶어짐. 그래서 만듬ㅋ      MEMOKU 사용자가 많아지면 SaaS(서비스형 소프트웨어, Software as a Service)로 만들 망상함.API도 만들어야 될거고, 첫로드도 빨라보이게 하고 싶고, SEO도 중요해질테니 SSR 지원하는 Nuxt3 선택(정확히는 Universal Rendering 이라고 함)   1. Nuxt 공식홈페이지에서 알려주는 방법대로 프로젝트 시작다른 개인 프로젝트에서도 Nuxt3를 쓰고있는게 몇개 있어서, 용량아낄 요량으로 pnpm으로 설치.pnpm dlx..
랜덤채팅 웹 앱 RANDOMMY 만들어본 후기 갑자기 나만의 서버를 만들고 싶다는 생각에, 핸드폰으로 리눅스를 실행할 수 있는 UserLAnd라는 앱을 열심히 가지고 놀아봤음. 인터넷으로 포트포워딩 하고, ssh 접속하고, 열심히 가지고 놀았지만... 결국 https 접속을 하기 위해 SSL 인증서를 설치해야되는데, 루트권한 문제로 잘 안됐음. 그래서 그냥, ec2나 클라우드 컴퓨터를 빌릴까 생각했지만, 실물로 가지고 싶은 마음에, 라즈베리파이를 샀음 그래서 라즈베리파이에 git깔고, nvm깔고, ssh접속 설정하고, nginx 설정하고, nodejs 설정하고 하니, 서버를 타는걸 만들어 보고 싶어짐. 예전, 동시편집을 고민할 때, webRTC에 알게 되었었고, 중계서버가 필요하다는게 떠올라, 일단 중계 서버 만들고, 간단한 UI로 채팅할 수 있는 ..
Css 단위 알아보기(px, %, vw, vh, etc) 현실에서 우리는 사물의 크기를 잴 때, mm(밀리미터)나 cm(센치미터)의 단위를 사용하곤합니다. Css에서 또한 마찬가지로, element(요소)의 크기를 정할 때, 사용되는 여러 단위가 있습니다. 오늘은 Css에서 사용되는 단위를 알아봅시다. 1. px(픽셀) 가장 기본이 되는 단위입니다. 현실에서의 mm(밀리미터), cm(센치미터)라고 생각합시다. 18px 크기의 텍스트 14px 크기의 텍스트 .size-18px { font-size: 18px; } .size-14px { font-size: 14px; } 2. %(퍼센트) 크기를 퍼센트로 줍니다. 주로 width/height를 정할 때 씁니다. parent Child .parent { width: 300px; background: red; } .c..
주요 Css 속성(Property) 알아보기 어느 언어든지, 사실 생각해보면 사용하는 단어만 사용합니다. CSS도 마찬가지로, 자주 사용하는 속성만 사용하게 될거에요. 이번에는 자주 사용하는 속성을 알아봅시다. 크기: 가로, 세로, 비율 배경: 색상, 이미지 서체(폰트)와 텍스트: 정렬, 폰트 여백: margin(바깥여백), padding(안쪽여백) 레이아웃: positon(위치), display(렌더링 방식) 이 다섯개만 잘써도, 어디가서 전문가라 할수있을거에요. 웹사이트를 편리하게 만들 수 있는 웹프로그램을 만들었습니다. 한번 구경해보세요. https://zabefofoon.github.io/mm-guide/ 로또 번호 생성기도 만들었습니다. 한번 구경해보세요. https://zabefofoon.github.io/simple-lotto/?lot..
Css Selector(선택자)알아보기 with id(이름), class(별명) Css로 웹을 스타일링을 하기 위해서는, 어떠한 요소를 스타일링 할건지 지칭해야합니다. 그 어떠한 요소를 선택하는 방법을 알아봅시다. 0. 먼저 태그에 이름(id)과 별명(class)을 지어봅시다. id: 한 .html 파일에 하나만 지정할 수 있음(like 이름) class: 여러태그에 여러개를 지을 수 있음(link 별명) 예를 들어, 저는 "사람"입니다. 그리고, 저의 이름은 "금복례" 입니다.하지만, 저의 친구들은 저를 "금붕어"라고 별명 지었습니다. 이를 Html/Css에서 같은 관점으로 보자면, Html에 "p태그"가 여러개 있습니다. 첫번째 p태그의 id는 "unique-name"입니다. 세번째 p태그의 class는 "third-paragraph"입니다. "unique-name" 이라는 이름..
Css 파일 만들기(with Visual Studio Code) 웹코딩은 기본 메모장으로도 할 수 있지만, 요새 가장 많이 쓰는 Vscode로 .css 파일을 만들어 봅시다. 1. Vscode 다운로드 사이트로 이동해서 다운받습니다. https://code.visualstudio.com/download Download Visual Studio Code - Mac, Linux, Windows Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual Studio Code to experience a redefined code editor, optimized for building and debugging modern web and..
Css 란? 웹사이트를 만들기 위해서는 Html, Css, Javascript가 필수입니다. 그 중에서, 웹의 스타일링을 할 수 있게하는 Css를 알아봅시다. 1. CSS: Cascading Style Sheets 앞글자만 따온 약어입니다. 마크업 언어이며, 프로그래밍 언어라고 안합니다. 2. style.css .css 확장자명을 가진 파일입니다. .css 파일 혼자서는 아무것도 할 수 없지만, .html에 링크를 걸어줄 때 그 가치를 발휘합니다. 3. 문서(Document)입니다. 책을 쓴다고 생각하면, 크게 생각할건 아래 2가지 같습니다 . 내용(Html) 디자인(Css) Html은 웹의 내용을 작성할 때 쓰는것으로, 원고지에 책의 내용을 쓰는것이라 생각하고, Css는 웹을 스타일링할 때 쓰는것으로, 책의 디자인..
반응형

티스토리툴바