2024/08 17

스크롤 시 텍스트에 그라디언트 배경색 채우기 효과 구현

안녕하세요 찐망고입니다. 이전에 그라디언트를 이용하여 마우스 hover할때 밑줄 애니메이션 효과를 적용하는 포스팅을 한적이 있는데요. 마우스 호버 CSS 밑줄 효과, CSS hover 밑줄 애니메이션안녕하세요 찐망고입니다. 오늘은 마우스 hover시 텍스트에 밑줄이 들어가는 작업을 해볼 거예요 https://hobancf.or.kr/ 호반문화재단 Creating culture, connecting hearts. www.hobancf.or.kr https://www.yesan.go.kr/chusa.duiweb.tistory.com 오늘은 텍스트에 배경색이 아래서 위로 채워지는 효과를 포스팅 할 예정입니다. 예시 사이트를 보면 스크롤 이동시 텍스트에 배경색이 채워집니다.     CSS코드h2 { color..

WEB/CSS 2024.08.08

데이터베이스 도메인: 엔티티, 속성, 도메인

안녕하세요 찐망고 입니다.오늘은 데이터베이스 도메인 관련 포스팅을 해볼까 하는데요. 인터넷 주소의 도메인이 아니라, 데이터베이스에서 사용되는 도메인에 대해 설명드릴게요.  데이터베이스 도메인은 주로 다양한 데이터베이스 시스템에서 사용됩니다.회사 내부 시스템: 직원 정보, 급여, 재고 관리 시스템 등에서 사용돼요. 예를 들어, 직원의 나이, 이름, 급여, 입사 날짜 등을 저장할 때 각 속성마다 올바른 형식과 범위를 정해두죠.웹 애플리케이션: 웹사이트나 앱에서 사용자 정보를 관리할 때 사용돼요. 예를 들어, 회원 가입 시 이름, 나이, 이메일 주소 등을 입력받을 때 올바른 형식으로 입력되도록 도와줘요.정부 및 공공기관 데이터베이스: 주민등록 시스템, 세금 신고 시스템 등에서 정확하고 일관된 데이터를 저장하기..

WEB/HTML이론 2024.08.06

자바스크립트 변수의 모든 것: var, let, const의 차이점

안녕하세요 찐망고 입니다. 오늘은 자바스크립트에서 변수에 대해 알아보겠습니다.변수란 무엇이며, 어떻게 사용하는지, 그리고 자바스크립트에서 변수 선언의 다양한 방법에 대해 자세히 설명해 드릴게요.  변수란?변수는 값을 저장하는 선물 상자와 같아요.이 상자에는 한 번에 한 가지 물건만 담을 수 있으며, 다른 물건을 넣으면 기존의 물건은 사라지거나 다른 상자를 준비해야 하죠.프로그래밍에서 변수는 변하는 값을 담는 그릇을 의미하며, 'variable'이라고 불러요.   변수에 값을 할당하기변수에 값을 넣는 것을 **할당(assignment)**이라고 합니다.예를 들어, mood라는 변수에 "행복"이라는 값을 할당하거나, age라는 변수에 40이라는 값을 할당할 수 있습니다.mood = "행복";age = 40;..

WEB/JS이론 2024.08.06

자바스크립트의 역사와 브라우저 전쟁: 넷스케이프부터 파이어폭스까지

안녕하세요 찐망고입니다. 자바스크립트 첫 포스팅은 스크립트의 역사부터 시작하려고 했는데검색해 보니 정리가 잘된 블로그들이 많더라고요..그래서 해보는 링크 공유 자바스크립트의 역사브라우저에서 동작하는 언어였던 자바스크립트는 범용 프로그래밍 언어가 되기까지 ECMAScript, CommonJS 등 표준화를 거쳐왔다. 지금은 이 표준을 기반으로 자바스크립트는 어디에서나 사용할 수roseline.oopy.io 추가로 더 써보자면 자바스크립트의 탄생자바스크립트는 1995년, 브렌던 아이크(Brendan Eich)가 넷스케이프와 썬 마이크로시스템즈와 함께 개발한 언어입니다.자바스크립트는 웹 브라우저에서 좀 더 동적인 기능을 제공하기 위해 만들어졌는데,초기에는 간단한 폼 검증과 같은 작업에 주로 사용되었죠.자바스크립..

WEB/JS이론 2024.08.06

CSS 그라디언트 transition 적용 방법

안녕하세요 찐망고입니다.  CSS에서 그라디언트는 background-image 속성으로 적용됩니다. 그러나 그라디언트는 직접적인 값의 변화가 아니라, 하나의 이미지처럼 렌더링 되기 때문에CSS의 `transition` 속성을 사용해도 그라디언트의 색상이나 위치가 부드럽게 변화하지 않습니다.그래서 그걸 해결하려면!! 가상 요소를 사용하기 가상 요소(::before 또는 ::after)를 사용하여 기존 요소 위에 그라디언트를 덮고, opacity 속성을 이용해 부드럽게 보였다 안보였다 하도록 설정합니다. .element { position: relative; width: 200px; height: 200px;}.element::before { content: ""; position: absolut..

WEB/CSS 2024.08.05

티몬, 마녀공장, 그리고 쿠팡: 한국 이커머스

티몬의 시작은 2010년 5월 10일로, 대한민국 최초의 소셜커머스 플랫폼이었다.그 당시 ' 티켓몬스터 '라는 이름으로 출발해, 공구를 통해 상품과 서비스를 할인된 가격에 제공하는..이때 함께 기억하는 브랜드가 바로 마녀공장이다.티몬의 인기에 힘입어 마녀공장은 출시 초기부터 큰 성공을 거뒀던 기억이 난다.출시한 지 일 년도 안되어 대박 난 마녀공장!!그때 당시 브랜드 화장품 외에 (우리가 흔히 알고있는 대기업 화장품들)듣도 보던 중소기업 화장품 브랜드를 판매할 유통망은 아예 없었다고 해도 무방하다.홈쇼핑, 백화점 모두 마다할 때 손을 내밀었던 건 그때의 티켓몬스터아마 티몬이 없었더라면 지금의 마녀공장은 어떻게 되었을까 궁금하다.  특히, 가성비가 뛰어난 제품으로 주목받았던 마녀공장은,티켓몬스터의 저렴한 ..

나/이것저것 2024.08.02

모바일 앱 개발 유형 총정리: 네이티브 vs 하이브리드 vs 웹앱

안녕하세요 찐망고입니다. 제가 오늘은 네이티브앱, 하이브리드앱, 웹앱을 좀 쉽게 포스팅해보려고 해요.그니까 머랄까 다들 대충은 알고 있잖아요?대충은 아는데 내가 아는 게 맞나 싶을 때 이 포스팅 읽으면 해결됨 자 먼저 1. 네이티브 앱(Native App)네이티브 앱은 특정 플랫폼(iOS, Android)을 위한 전용 언어와 개발 도구로 개발된 애플리케이션인데요.iOS 앱은 Swift나 Objective-C로, Android 앱은 Kotlin이나 Java로 작성됩니다.Kotlin개발자가 전세계에서 작년 연봉 1위라면서요? 부럽다.. 주요 특징: 최적화된 성능: 하드웨어와 직접 상호작용하므로 높은 성능과 속도를 제공네이티브 UI/UX: 플랫폼별 UI 가이드라인을 따라 사용자 경험이 최적화광범위한 API 접..

WEB/HTML이론 2024.08.01