WEB 113

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

안녕하세요 찐망고입니다. 이전에 그라디언트를 이용하여 마우스 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

모바일 앱 개발 유형 총정리: 네이티브 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

HTML과 CSS: 인라인 스타일, 내부 스타일, 외부 스타일로 배우는 적용 방법

안녕하세요 찐망고입니다.CSS의 너무 기초적인 부분을 포스팅하려고 합니다. CSS(Cascading Style Sheet)란 웹 페이지의 겉모습을 정의하고 꾸미는 데 사용되는 스타일 시트 언어인데요. 주요 기능은 다음과 같습니다:  레이아웃 정의: 페이지의 구조와 배치를 지정합니다.스타일 설정: 텍스트의 글꼴, 색상, 크기 등을 지정합니다.디자인: 배경, 테두리, 여백 등을 설정하여 페이지의 시각적 디자인을 조정합니다.반응형 디자인: 다양한 장치(데스크톱, 태블릿, 스마트폰 등)에 맞게 레이아웃과 스타일을 조정합니다.   CSS는 기본적으로 선택자(Selector)와 선언(Declaration)으로 구성되며, 선언은 속성(Property)과 값(Value)으로 이루어집니다. h1 { color: ..

WEB/CSS 2024.07.25

웹사이트 Copyright 표시의 중요성과 작성 방법

안녕하세요 찐망고입니다.작년 여름에 개인정보취급방침에 대해서 포스팅했는데요. 개인정보처리방침안녕하세요 찐망고 입니다. 웹사이트에서 푸터에 해당하는 부분을 보면 꼭 들어가는 내용이 있죠?카피라이트, 사업자정보, 그리구 개인정보처리방침!!!!   개인정보처리방침이란?개인정보보uiweb.tistory.com 오늘은 웹사이트 저작권 표시 관련 포스팅을 해볼까해요네 맞아요 그친구 © ㅎㅎ  웹사이트 저작권표시란? 웹사이트 저작권 표시는 웹사이트의 콘텐츠가 저작권법에 의해 보호받고 있음을 알리는 역할을 합니다. 이는 법적 보호뿐만 아니라, 사용자들에게 콘텐츠를 무단으로 복제하거나 배포하지 않도록 경고하는 역할도 합니다.   저작권 표시의 중요성  법적 보호: 저작권 표시는 저작권 소유자가 콘텐츠에 대한 권리를 주장..

WEB/HTML이론 2024.07.19

웹사이트의 Apple Touch Icon 설정 가이드

안녕하세요. 찐망고입니다. 오늘은 Apple Touch Icon 관련 포스팅을 해볼까 하는데요. Apple Touch Icon은 iOS기기에서 웹 사이트를 홈 화면에 추가할 대 사용하는 아이콘 입니다.이 아이콘을 설정하면 사용자가 웹 사이트를 홈 화면에 추가했을 때 표시되는 아이콘 이미지를 지정할 수 있습니다. 물론 Apple Touch Icon을 웹 사이트에 추가하는 것이 필수는 아니지만,홈화면 추가시 iOS 기기의 홈화면에 아이콘이 깔끔하게 표시됩니다.만약 이 아이콘이 없다면 기본 웹 브라우저 아이콘이나 웹사이트의 축소된 화면이 표시될 수 있는데 그거 정말 너무나 별로겠죠?또한 Apple Touch Icon을 설정하는 것은 최신 웹표준을 따르는 좋은 관행 중 하나입니다.   Apple Touch Ic..

WEB/HTML기초 2024.07.17

파비콘의 중요성 및 설정 방법

안녕하세요 찐망고입니다.오늘은 favicon에 대해 포스팅 할겁니다.  파비콘이란?  모든 브라우저의 탭엔 제목이 있고 그옆엔 저렇게 파비콘이 붙어요.물론 없어도 큰일 나지는 않지만, 있으면 이뻐! 파비콘은 브라우저 탭, 북마크, 즐켜찾기 목록에서 웹사이트를 대표하는 작은 아이콘입니다.이를 통해 사용자는 쉽게 웹사이트를 인식하고 찾을 수 있어요.일관된 브랜드 이미지 구축에도 도움이 되구요. 파비콘의 중요성사용자가 여려개의 탭을 열어놓았을때, 탭이 아주 작아지는 경험들 다들 있으시잖아요?파비콘이 있으면 제목이 뭔지 몰라도 웹사이트를 빠르게 식별할 수 있습니다. 또한, 일부 검색 엔진은 파비콘을 검색결과에 표시하기도 합니다.당연히 사용자의 클릭률(CTR)을 높이는데 기여할 수 있죠 제일 중요한건 파비콘이 없..

WEB/HTML기초 2024.07.16