웹 사이트 만들기
-
[Findaline] 기록을 찾는 기능
Findaline의 두 번째 릴리즈입니다. 이번 업데이트는 사용자가 자신이 기록한 콘텐츠를 보다 쉽고 빠르게 찾아볼 수 있게 하는 데 중점을 두었습니다. 이를 위해 주요한 두 가지 개선이 이루어졌습니다. - 텍스트 검색 기능 향상: 검색창에서 제공하던 텍스트 기반 검색이 더욱 향상되었습니다. - 사진 관리 시스템 도입: 사진 파일을 쉽게 검색하고 관리할 수 있는 새로운 방법을 제공합니다. 1. 텍스트 검색 기능 텍스트 검색 기능이 향상되어 이제는 메모의 제목뿐만 아니라 본문 내용 전체를 대상으로 검색할 수 있습니다. 검색 결과에서는 사용자가 입력한 검색어와 일치하는 제목이나 본문 내용이 하이라이트 처리되어 한눈에 들어옵니다. 이로써, 필요한 정보를 찾기 위해 메모를 하나하나 열어보는 수고를 덜 수 있게 ..
2024.03.26
-
[Findaline] 소개
Findaline Findaline은 포트폴리오용으로 만든 메모 웹 애플리케이션입니다. PARA 메모법을 기반으로 하여, 사용자가 메모를 기록하고 정리할 수 있도록 디자인되었습니다. 또한, 기록된 메모를 효과적으로 활용할 수 있는 다양한 방안들을 고려하며 개발되었습니다. 2024.01.29 - PARA PARA 뜬구름 잡는 일들이 많아지니 생각 정리가 어렵고 시간이 없다. 잘 알려진 메모법들과 일정 관리법들에 대해 알아봤고, PARA를 적용하기로 했다. https://www.youtube.com/watch?v=lkRQuMIbFYc PARA 시간 관리 codingbroker.tistory.com 개요 메모 애플리케이션은 크게 두 종류로 나눠 볼 수 있습니다. Notion, Evernote, Obsidian..
2024.03.21
-
[Rectify] 에디터 Beta v0.4 - 메뉴바, 반응형
Beta v0.3 업데이트 내용 1. 메뉴바 추가 옵시디언 같은 메뉴바가 없는 깔끔한 에디터를 만들 예정이었지만 사용성이 좋지 않은 것 같아서 결국 메뉴바를 추가했다. 옵시디언에서는 마크다운 에디팅이 지원되기 때문에 메뉴바가 없어도 에디팅이 수월한데, WYSIWYG 에디터에서는 아무래도 키보드만으로는 모든 기능을 수행하기가 어렵다. 위치가 고정된 메뉴바 대신 노션처럼 마우스 커서에 따라 움직이는 버블 메뉴바를 추가했다. 기존에 콘텍스트 메뉴에 몰아두었던 기능들을 메뉴바에 분배하니 사용성이 조금 나아진 듯하다. 이미지, 차트 추가 등 커스텀 요소와 관련 있는 기능들은 콘텍스트 메뉴에 그대로 남겨두었고, 스타일 기능(볼드체, 기울임, 색상 등)들을 메뉴바로 옮겼다. 2. 반응형 기존에 막아두었던 작은 화면의..
2024.02.10
-
[Rectify] 에디터 Beta v0.3 - 콜라보레이션, 웹소켓 서버 배포
Beta v0.3 업데이트 내용 1. Collaboration 협업 에디팅 구현. tiptap extensions와 @hocuspocus/server 모듈을 사용했다. 이 모듈과 함께 y.js, prosemirror를 사용하면 CRDT(Conflict-free Replicated Data Type)의 설정이 굉장히 간편해진다. 2. 서버 배포 heroku의 eco dyno 티어를 사용했다. 가격은 컴퓨팅 시간당 $0.005, 최대 월 $5이다. 30분 동안 작업이 없으면 서버를 자동으로 재운다.
2024.02.08
-
[Rectify] 에디터 Beta v0.2 - 차트, 클립보드 데이터
Beta v0.2 업데이트 내용 1. 차트 노드 추가 recharts 패키지의 bar, line 차트 사용 2. clipboard data 연동 에디터 내에서 생성된 콘텐츠가 아닌 외부의 콘텐츠가 클립보드를 통해 삽입되는 경우가 있다. 단순 문자열인 경우에는 paragraph를 생성해서 내용을 채워주면 되지만, 일반적으로 브라우저에서 클립보드에 데이터를 담을 때(복사)에는 HTMLElement로 담기는 경우가 많다. 이 경우 에디터 내에는 이미 이미지(img), 링크(a), 비디오(video)를 랜더링 하는 커스텀 노드가 존재하기 때문에 클립보드에 있는 img, a, video 태그를 그대로 삽입해 버리면 에디터와 매칭되지 않는 html 요소들이 삽입되어 버린다. 그래서 clipboard에 있는 데이터가..
2024.02.07
-
[Rectify] 에디터 Beta v0.1 - 컨텍스트 메뉴, shortcutkey, 커스텀 노드
Beta v0.1 에디터만 베타 테스트 배포하기. editor, graph view, calendar는 각각 패키지 출시를 꿈꾸며 독립적인 모듈로 제작할 예정이다. 1. top menu bar 노션과 옵시디언에는 티스토리 에디터와는 다르게 상단에 메뉴바가 없다. 내 수준에서는 어떤 이유인지 잘 모르겠지만 세계적인 UI/UX 전문가들의 화면이니 나도 따라 하기로 했다. 메뉴바 없이 버튼들을 어떻게 배치해야 되나 고민이 많았다. 찾기 좋은 곳에 몰아넣으면 그 많은 버튼 안에서 특정 버튼을 또 찾아야 한다는 불편함이 있었고, 적절히 공간을 나누자니 필요에 의한 분류가 아닌 디자인을 위한 분류가 되는 듯한 느낌이 들었다. 명확한 방향성은 아직 정하지 못했지만 우선 볼드체나 밑줄, 링크 등 기본적인 기능들은 콘텍..
2024.02.02
-
[Rectify] 기획
두 번째 프로젝트 Rectify는 PARA를 위한 일정관리 애플리케이션이다. 수익형 웹사이트는 아니고, 포트폴리오용에 가깝다. PARA는 어느 애플리케이션에서도 쓰기 좋지만 PARA만을 위한 애플리케이션은 없어서 기획해 보았다. 기술 스택 react, tailwindcss, firebase 기능 1. WYSIWYG 에디터 prosemirror를 활용한 rich text editor 2. 프로젝트 관리 file system 느낌이 나는 인터페이스로 구현. notion의 좌측 사이드바를 벤치마킹할 예정이다. 3. Graph view P, A, R, A의 관계를 한눈에 파악할 수 있는 화면. obsidian의 graph view를 벤치마킹할 예정이다. 4. Calendar Project에 해당하는 메모들의 일..
2024.01.29
-
[연봉툴즈] 배포 2주일 경과
https://www.yeonbongtools.com/ 연봉툴즈 2024 2024 가장 정확한 연봉 실수령액 계산기. 실수령액 계산기와 연봉별 테이블, 연봉 인상률 계산기 등 급여와 관련된 다양한 툴을 제공합니다. www.yeonbongtools.com 오랜만에 유입수를 확인해 보니 반의 반으로 줄었다. 내가 게을러지니까 어떻게 알고 유입수도 똑같이 줄어든다. 2차 작업 내용을 신나게 적어두었는데, 1주일 동안 손이 가질 않았다. 위기 상황인 것 같다. 일단 중요한 건 기록이니 포스팅은 남기자. 좋은 소식 첫 번째 첫 번째 좋은 소식은 구글 서치콘솔에서 트래픽이 잡히기 시작했다는 것이다. 6일 전 소식이다. 주요 키워드도 예상대로 잘 잡히고 있다. 아직 클릭수는 0이지만! 좋은 소식 두 번째 Light ..
2024.01.26
-
[연봉툴즈] 배포 1주일 경과
배포 후 1주일이 지났다. 위 이미지는 vercel에서 제공하는 무료 티어 애널리틱스 화면이다. 총 41의 유입이 발생했고, 페이지뷰는 381이다. 유입은 동일한 사용자 기준 1일 1회로 계산된다고 한다. 여기서 웹 크롤러와 나의 유입을 제외하면 35 유입에 350 페이지뷰 정도가 된다. 당연하게도 모든 유입은 이 블로그를 통해서 발생했는데, 생각보다 많아서 놀랐다. 아직 검색 유입은 한 개도 없다. 고무적인 건 유입당 페이지뷰가 무려 10회에 육박? 한다는 점이다. 개발에 관심이 있는 독자분들이 구경을 하다가 가신 걸까? 잘 모르겠지만 감사하고 신나는 수치다. 각 검색엔진 사이트 등록은 배포 3일 후에 요청했다. 금일(24년 1월 18일) 확인해 보니 구글, 빙, 네이버, 줌은 등록이 완료되었고 다음은..
2024.01.18
-
[연봉툴즈] 배포
배포 https://www.yeonbongtools.com/ 연봉툴즈 2024 연봉 실수령액 테이블 연봉 별 실수령 금액을 표로 확인해보세요. www.yeonbongtools.com 1차 배포를 완료했다. 풍문이지만 도메인 서버 등록 6개월 미만의 신생 웹사이트는 검색 노출에 매우 불리하다고 한다. 그래서 추가 작업은 틈틈이 업데이트하기로 하고, 일단 웹사이트를 배포했다. 작업 내용은 기획 AI의 기획서를 그대로 따랐다. 여기서는 기술 스택, 기능, 차별화, 개선할 사항을 정리한다. 1. 기술 스택 Frontend & Backend Nextjs Style Tailwindcss(+daisyUI) Hosting Vercel 2. 기능 주요 기능은 3가지이다. 실수령액 계산기 연봉 인상률 계산기 실수령액 테이..
2024.01.10
-
[연봉툴즈] 기획
연봉 계산기 인터넷 건물주 되기 프로젝트. 첫 번째 지을 인터넷 건물은 연봉 계산기이다. 정확히 표현하면 월 실수령액 계산기. 유튜브 영상을 보다가 아이디어를 얻었다. 주요 기능은 사용자가 계약 연봉을 입력하면 세금을 공제한 월 실수령액을 계산해 주는 것이다. 입력할 필드는 5개 정도 되고, 출력은 각종 세금과 월 수령액이다. 주요 기능이 완료되면 연봉과 관련된 다양한 기능을 추가할 예정이다. 주제 선정 과정 구현이 매우 간단하고, 수요가 많다. 네이버 키워드 도구에서 관련 검색어의 월 검색량을 모두 합치면 40만 정도 된다. 특이한 점은 클릭률(특히 pc)이 매우 낮다는 점인데, 이건 검색 결과의 최상단에서 네이버가 자체적으로 연봉 계산기를 제공해 주기 때문인 듯하다. 잡코리아와 사람인에서도 계산기를 ..
2024.01.05
자바스크립트
-
[JAVASCRIPT] this가 가리키는 객체 (메서드, 함수, 화살표 함수에서)
this 1. 전역 컨텍스트에서의 this 전역 컨텍스트에서의 this는 전역 객체를 참조합니다. 전역 객체란 node 환경에서는 global 객체, 브라우저에서는 window 객체입니다. 2. 함수 안에서의 this 여기서도 여전히 전역 객체를 참조합니다. 함수 블록 안이라고 해서 컨텍스트가 좁혀지지 않습니다. function someFunc() { console.log(this) } someFunc(); // Window {0: Window, window: Window, self: Window, document: document, name: "", location: Location, …} 단, 엄격모드(use strict)에서는 함수 안에서의 this가 undefined입니다. 'use strict'..
2024.01.05
-
[JAVASCRIPT] 배열 vs 객체, 배열보다 객체를 써야 하는 경우, 배열을 객체로 바꾸는 방법(array to object)
배열 vs 객체 애플리케이션에서 데이터를 다룰 때에는 데이터의 용도에 맞게 적절한 자료구조를 사용해야 합니다. 배열과 객체는 모두 대량의 데이터를 다룰 때 활용할 수 있는 자료구조이며, (사실 자바스크립트에서는 배열도 객체입니다만) 내장 메서드를 활용하면 간단하게 양쪽 간에 형태를 서로 변환할 수 있습니다. 형태를 변환해주어야 하는 경우의 예로는 외부에서 가져온 데이터의 구조가 애플리케이션과 궁합이 맞지 않는 경우, 자체적으로 구현한 자료구조라고 하더라도 형식을 변환해 줌으로써 순간적인 성능 향상의 이점을 얻을 수 있는 경우 등이 있습니다. 배열을 객체로 바꿔줘야 하는 경우 배열 내의 특정 요소에 접근하기 위해서는 우선 모든 요소들을 순회해야합니다. 이때 배열 내의 각 요소를 특정할 수 있는 수단은 in..
2024.01.03
-
[JAVASCRIPT] 캐싱 함수 만들기 / 데코레이터(decorator)
캐싱 함수(Caching function) 로직이 무겁고 호출이 잦은 함수는 캐싱기능을 활용하면 성능을 높일 수 있습니다. 단, 캐싱기능을 구현하려는 함수는 퓨어(pure) 해야 합니다. = input에 따른 output이 항상 일정함. = side effect가 없음. 예시 함수 someFunc는 비용이 높은 연산을 수행하고, 파라미터(num)에 따른 항상 동일한 값(num+1)을 반환한다고 가정하겠습니다. function someFunc(num) { console.log("Expensive"); // ... expensive code block return num + 1; } 함수를 실행시켜 보면 someFunc(1); // Expensive someFunc(1); // Expensive 첫 번째와 ..
2021.08.30
-
[JAVASCRIPT] 중첩 객체에서 특정 프로퍼티의 합 구하기, 재귀함수 활용
중첩 객체에서 프로퍼티의 합 구하기 코딩 테스트에서 자주 활용되는 개념입니다. 간단해 보이지만 의외로 헤매는 경우가 많습니다. 아래와 같은 타입을 가지는 product 객체가 있다고 가정합니다. name: string; price: number; products 객체에는 product들이 아래와 같이 여러 중첩 객체로 포함되어 있습니다. const products = { fruits: [ { name: "apple", price: 1000, }, { name: "banana", price: 2000, }, ], clothes: { bottom: [ { name: "jean", price: 3000, }, ], top: { shirts: [ { name: "blue shirt", price: 3500, }..
2021.08.19
-
[JAVASCRIPT] 구조 분해를 사용하여 변수값 교환하기
변수값 교환 ES6의 구조 분해 문법(Desctructuring)은 객체의 프로퍼티나 배열의 요소를 변수로 쉽게 추출할 수 있게 해주는 문법입니다. 이 문법을 활용하면 두 개 이상의 변수의 값을 간단하게 교환할 수 있습니다. 구조 분해 없이 변수의 값을 교환할 때에는 주로 아래와 같이 구현합니다. let str1 = "One"; let str2 = "Two"; console.log(str1, str2); // One Two let temp = null; temp = str1; str1 = str2; str2 = temp; console.log(str1, str2); // Two One temp라는 새로운 변수를 활용해서 한쪽의 값을 임시로 저장한 후, 각 변수에 차례대로 값을 초기화해 주는 방식입니다. ..
2021.08.19
-
[JAVASCRIPT] 배열 내의 요소 무작위로 섞기(shuffle)
배열 랜덤 섞기 Shuffle 자바스크립트에서 배열 내의 원소를 무작위로 섞는 예시입니다. Math.random 메서드를 활용하여 배열의 요소들을 순회해야 합니다. shuffle 함수입니다. const shuffleArray = array => { for (let i = 0; i < array.length; i++) { let j = Math.floor(Math.random() * (i + 1)); // j는 0이상 i이하의 수 [array[i], array[j]] = [array[j], array[i]]; // i번째 요소와 j번째 요소의 값을 변경 } return array; }; i번째와 j번째를 바꾸는(swap) 코드는 아래와 같습니다. const temp = array[i]; array[i] =..
2019.11.02
프론트엔드
-
[HTML, JAVASCRIPT] 요소가 화면에 들어왔는지 확인하는 방법, Intersection Observer API
Intersection Observer API Intersection Observer는 보통 스크롤 이벤트에 반응하는 Lazy loading이나 애니메이션 트리거링을 할 때 주로 사용됩니다. 하지만 이것 자체로는 스크롤 이벤트를 직접 처리하는 도구는 아닙니다. 본질적인 기능은 훨씬 더 단순합니다. Intersection Observer API의 기능은 단순히 특정 요소가 사용자의 뷰포트(화면) 혹은 다른 요소 안에 들어왔는지 감지하는 것입니다. lazy loading에서 어느 시점에 데이터를 추가로 요청할 것인지 판단하는 것과 애니메이션 트리거링에서 언제 애니메이션을 시작할지 판단하는 것은, 모두 특정 요소를 적절한 곳에 위치시킨 후 Intersection Observer를 활용하여 그 요소가 화면에 들..
2024.01.23
-
[HTML, CSS] display 속성 차이(block, inline, inline-block)
CSS display 속성 display 속성값은 요소에 적용되는 방식에 따라 display-outside와 display-inside으로 나뉩니다. display-outside 요소를 둘러싼 레이아웃에서 해당요소가 어떻게 위치하는가와 관련됩니다. block, inline, inline-block 등이 있습니다. display-inside 요소 내부의 자식요소들을 정렬하는 방법을 설정합니다. flex, grid, table 등이 있습니다. display-inside는 자식요소를 어떻게 정렬하는지 결정하는 속성입니다. 여기에 flex나 grid등의 값을 설정해서 요소들을 정렬할 수 있습니다. flex, grid 레이아웃 시스템에 관한 내용은 이 글에서는 다루지 않고 여기서는 display-outside 속..
2023.12.31
-
[HTML, CSS] flexbox(display: flex) 총정리
flex는 grid만큼 다양한 기능을 가지고 있지는 않지만, 대부분의 레이아웃은 flexbox의 조합만으로도 충분히 구현이 가능합니다. grid layout에 관해서는 아래 깔끔하게 잘 정리된 글을 링크로 남깁니다. https://studiomeal.com/archives/533 이번에야말로 CSS Grid를 익혀보자 이 포스트에는 실제 코드가 적용된 부분들이 있으므로, 해당 기능을 잘 지원하는 최신 웹 브라우저로 보시는게 좋습니다. (대충 인터넷 익스플로러로만 안보면 된다는 이야기) 이 튜토리얼은 “ studiomeal.com Flex Layout Flex Layout은 css의 Flexbox를 활용한 화면구현 모델입니다. 복잡한 레이아웃을 간단하게 구현하거나 콘텐츠를 자동으로 정렬하는데 초점이 맞춰져..
2023.12.28
-
[HTML, CSS] 요소에 그림자 추가하는 방법(입체감 주는 방법) box-shadow, text-shadow 총정리
HTML 요소에 그림자 추가하는 방법 CSS의 box-shadow와 text-shadow 속성을 사용하여 요소에 그림자 효과를 줄 수 있습니다. 다양한 예시를 통해서 shadow 속성들을 살펴보겠습니다. 1. box-shadow /* | | */ box-shadow: 60px -16px red; /* | | | */ box-shadow: 10px 5px 5px black; /* | | | | */ box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2); /* inset | | | */ box-shadow: inset 5em 1em gold; 값의 개수에 따라 속성값이 적용되는 방식이 다 다릅니다. 길이가 2개 있으면 각각 offsetX, offsetY 길이가 3개 있으면 각각..
2023.12.31
-
[HTML, CSS] transform, transition으로 요소 이동 및 변형시키는 방법 / 동적인 효과(애니메이션)
HTML 삽입 미리보기할 수 없는 소스 transform / transition css 속성 transform과 transition을 사용하면 위에 움직이는 도형처럼 html 요소에 동적인 효과들을 줄 수 있습니다. transform 속성은 요소에 회전, 크기 조정, 이동, 기울임 등의 변형을 주고, transition 속성은 변형의 제어를 담당합니다(동작 시간, timing-function 등). 참고로 transition으로 제어할 수 없는 속성들은 keyframe과 css animation 속성을 활용해야 합니다. 이 글에서는 transition과 transform만 사용해서 간단한 효과를 추가하는 방법을 살펴보겠습니다. 1. transform div가 하나 있습니다. HTML 삽입 미리보기할 수 ..
2023.12.28
-
[HTML, CSS] 기본적인 페이지 레이아웃(layout) 잡기 네이버 클론코딩 (2) - flex, grid 레이아웃
네이버 UI 클론코딩 (2) - flex, grid 레이아웃 이전 글에서 완성한 header, footer에 이어 이 글에서는 main 영역을 만들어보겠습니다. main에서는 모든 요소를 세부적으로 카피하지는 않고 레이아웃을 구현하는 작업을 두 가지 방식으로 살펴보겠습니다. 큰 단위부터 작은 단위로 grid cell로 나눠서 할당 1. 큰 단위부터 작은 단위로 가장 큰 요소부터 시작해서 하위 요소들을 점진적으로 나눠주는 방식입니다. body를 header, main, footer의 영역으로, main을 또다시 각 구역으로, 각 구역을 다시 세부적으로 계속 나눠줍니다. 우선 main영역을 크게 아래와 같이 나눠보겠습니다. 여기서는 flex와 grid 레이아웃을 자유롭게 사용할 수 있습니다. 이전 글에서도 ..
2020.03.28
-
[HTML, CSS] box-sizing 속성 / 테두리도 크기에 포함시키기
CSS box-sizing 속성 box-sizing 속성은 요소의 크기가 계산되는 방법을 결정합니다. content-box(기본값), border-box 두 가지 값이 있습니다. content-box 설정한 크기가 padding, border, margin을 제외한 순수한 요소의 크기가 됩니다. border-box 설정한 크기가 (요소 + padding + border)의 크기가 됩니다. 그림으로 보면 아래와 같습니다. content-box border-box 예시 content-box container 안에 box 두 개가 있습니다. box-sizing 속성은 따로 설정하지 않았으므로 기본값인 content-box입니다. 초록 빨강 container안에 green_box와 red_box가 딱 맞게 들어..
2020.03.22
-
[HTML, CSS] 기본적인 페이지 레이아웃(layout) 잡기 네이버 클론코딩 (1)
네이버 UI 클론코딩 (1) 네이버 사이트를 그대로 카피하면서 레이아웃을 잡는 연습을 해보겠습니다. 웹개발 초기에는 이렇게 잘 만들어진 사이트를 클론코딩하는 게 실력향상에 큰 도움이 됩니다. 레이아웃 설계 간단한 웹사이트라도 항상 설계를 먼저 하고 나서 작업에 들어가시는 게 정신건강에 좋습니다. 설계 시 가장 먼저 할 일은 페이지를 가장 큰 단위로 나누는 일입니다. 여기에는 정해진 규칙은 없고, 사이트의 목적에 따라 다양한 형태가 존재하지만 일반적으로는 header, main, footer의 세 가지 영역으로 나뉩니다. HTML5 요소로는 각각 랜드마크 요소인 네이버를 시작페이지로 쥬니어네이버 해피빈 검색 검색 메일 카페 블로그 지식iN 쇼핑 Pay TV 사전 뉴스 증권 부동산 지도 영화 뮤직 책 웹툰 ..
2020.03.21
-
[HTML, JAVASCRIPT] 웹 게임 만들기 포트리스 (2) - 미사일
이전글 2019.10.28 - [HTML, JAVASCRIPT] 웹 게임 만들기 포트리스 (1) - 탱크, 표적 [HTML, JAVASCRIPT] 웹 게임 만들기 포트리스 (1) - 탱크, 표적 자바스크립트로 게임 만들기 - 포트리스(1) 탱크, 표적 HTML5의 canvas와 자바스크립트를 이용하여 간단한 포트리스 게임을 만들어보겠습니다. 1. 화면 틀 만들기 적당한 크기의 게임판을 만들었습 codingbroker.tistory.com 자바스크립트로 게임 만들기 - 포트리스(2) 미사일 탱크와 표적에 이어서 이번 글에서는 미사일을 구현해 보겠습니다. 다음 순서로 진행합니다. 파워게이지 충전 미사일 발사 판정 먼저 필요한 변수들을 선언합니다.
2019.10.29
-
[HTML, JAVASCRIPT] 웹 게임 만들기 포트리스 (1) - 탱크, 표적
자바스크립트로 게임 만들기 - 포트리스(1) 탱크, 표적 HTML5의 canvas와 자바스크립트를 이용하여 간단한 포트리스 게임을 만들어보겠습니다. 1. 화면 틀 만들기 적당한 크기의 게임판을 만들었습니다. canvas에는 자바스크립트로 로직을 제어하기 위해 id값을 설정했습니다. 이후부터는 HTML 부분은 건드리지 않고 MDN - Canvas API Canvas API - Web API | MDN Canvas API는 JavaScript와 HTML 엘리먼트를 통해 그래픽을 그리기위한 수단을 제공합니다. 무엇보다도 애니메이션, 게임 그래픽, 데이터 시각화, 사진 조작 및 실시간 비디오 처리를 위해 사용 developer.mozilla.org
2019.10.28
-
[HTML, CSS] div 요소를 전체화면으로 설정하기, 끝부분 적용안되는 문제, css reset
HTML에서 최상위 div를 화면 전체로 설정하는 방법 1. % 사용 width와 height를 100%로 설정하면 전체화면이 될 것만 같습니다만, 그렇지 않습니다. %는 부모 요소 길이의 몇%를 차지할 것인지 나타내기 때문에 먼저는 부모 요소의 길이가 설정되어 있어야 합니다. 즉, 다음과 같이 해당 요소만 100%로 설정해서는 전체화면이 되지 않습니다. Hello container의 부모 요소인 body와 html의 width, height를 지정해줘야 합니다. Hello 2. vw(viewport width), vh(viewport height) 사용 %가 부모 요소의 길이를 기준으로 계산된다면, vw, vh는 뷰포트의 길이를 기준으로 계산됩니다. 각각 뷰포트 가로길이의 몇% 인지와 세로길이의 몇% ..
2019.08.12
-
[HTML, CSS] div 태그에 배경화면 지정하는 방법
div 배경화면 지정하는 법 다음과 같이 화면 전체를 차지하는 div가 있습니다. 현재는 div가 비어있는 상태입니다. 이곳에 배경화면을 지정해 보겠습니다. 이미지는 프로젝트 폴더 내부의 파일을 사용합니다. div의 background 속성으로 이미지를 전달합니다. 이미지는 url(이미지 경로) 형식으로 불러올 수 있습니다. 나머지는 동일하므로 실행결과 배경화면이 적용되었지만 shanghai.jpg 원본과 비교해 보면 아래쪽이 잘렸습니다. 원본 background-position 속성과 background-size 속성을 이용해서 고쳐줍니다. 이미지가 div의 가로, 세로를 모두 차지하며 정중앙에 위치하도록 설정하였습니다.
2019.08.09
-
[HTML, CSS] linear-gradient 그라데이션 효과 / 텍스트에 그라데이션 적용하는 법
Linear gradient linear-gradient는 CSS 속성 중 하나로, 웹 페이지의 요소에 선형 그라데이션 배경을 적용할 때 사용됩니다. 그라데이션 배경을 적용하면 두 개 이상의 색상이 서로 부드럽게 전환되면서 매력적인 디자인 효과를 만들 수 있습니다. 참고) 그라데이션, 그라디언트 용어 차이 그라데이션은 인지적 관점에서의 용어로, 색이 점진적으로 변화하는 현상을 의미합니다. 그라디언트는 기술적 관점에서의 용어로, 그라데이션을 구현하는 방법이나 기술을 의미합니다. 기본 사용법 background 속성에 linear-gradient를 사용합니다. .gradient-background { background: linear-gradient(direction, color-stop1, color-st..
2019.07.30
