본문 바로가기

WEB44

[CSS] background 속성 : 이미지 어둡게 하는 3가지 방법 이미지 어둡게 하기는 아래와 같이 3가지 방법으로 해결 할 수 있습니다.1. filter : brightness()2. opacity, backgroud-color3. linear-gradient()1. filter: brightness()CSS의 Filter에 적용되는 brightness 함수는 주어진 이미지의 밝기를 조절한다.허용값  숫자1은 100%입니다.퍼센트100% 미만은 이미지를 어둡게 합니다.100% 초과는 이미지를 밝게 합니다.0%는 이미지를 검은색으로 만듭니다.brightness(100%); /* 원본 이미지 */brightness(0%); /* 검은색 */brightness(200%); /* 밝기 2배 */brightness(0.4); /* 40% */2. opacity, back.. 2025. 2. 16.
[Vue] 라우터 ( Router ) [Vue] 컴포넌트의 통신 방식 ( Props, Emit )[Vue] 템플릿 문법과 컴포넌트(component)[Vue] Vue & 인스턴스Vuevue는 웹 애플리케이션의 사용자 인터페이스를 만들기 위해 사용하는 오픈 소스 프로그레시브 JS 프레임워크이다.  Vue.jsVue.js - The Progreshong-study.tistory.com뷰 라우터뷰 라우터는 뷰 라이브러리를 이용하여 싱글 페이지 애플리케이션을 구현할 때 사용하는 라이브러리이다.뷰 라우터의 설치 방법은 CDN 방식과 NPM 방식으로 총 2가지가 있다.CDN 방식별도의 설치 없이 아래 링크를 통해 라우터 라이브러리에 대한 정보를 불러올 수 있다.NPM 방식Vue CLI로 프로젝트를 생성하거나 NPM 기반으로 프로젝트를 생성한다면 아래 .. 2024. 6. 25.
[Vue] 컴포넌트의 통신 방식 ( Props, Emit ) [Vue] 템플릿 문법과 컴포넌트(component)[Vue] Vue & 인스턴스Vuevue는 웹 애플리케이션의 사용자 인터페이스를 만들기 위해 사용하는 오픈 소스 프로그레시브 JS 프레임워크이다.  Vue.jsVue.js - The Progressive JavaScript Frameworkvuejs.orgVue의 핵심hong-study.tistory.com컴포넌트의 통신 방식뷰 컴포넌트는 각 각 고유한 데이터 유효 범위를 갖는다. 따라서, 컴포넌트 간에 데이터를 주고 받기 위해선 아래와 같은 규칙을 따라야 한다.상위에서 하위로 데이터 전달 : Props 속성하위에서 상위로 이벤트 전달 : 이벤트 발생Props 속성프롭스 속성은 컴포넌트 간에 데이터를 전달할 수 있는 컴포넌트 통신 방법 중 하나이다. 속.. 2024. 6. 25.
[Vue] 템플릿 문법과 컴포넌트(component) [Vue] Vue & 인스턴스Vuevue는 웹 애플리케이션의 사용자 인터페이스를 만들기 위해 사용하는 오픈 소스 프로그레시브 JS 프레임워크이다.  Vue.jsVue.js - The Progressive JavaScript Frameworkvuejs.orgVue의 핵심 기능으로는 선언적hong-study.tistory.com이전에는 Vue와 인스턴스에 대해 공부를 했다. 이번에는 Vue의 템플릿 문법은 무엇이 있는지와 Component란 무엇인가에 대해 공부해보려고 한다.뷰의 템플릿 문법뷰의 템플릿 문법은 뷰로 화면을 조작하는 방법을 의미한다. 템플릿 문법은 크게 데이터 바인딩과 디렉티브로 나뉜다.데이터 바인딩데이터 바인딩은 뷰 인스턴스에서 정의한 속성들을 화면에 표시하는 방법이다. 아마 Spring B.. 2024. 6. 25.
[Vue] Vue & 인스턴스 Vuevue는 웹 애플리케이션의 사용자 인터페이스를 만들기 위해 사용하는 오픈 소스 프로그레시브 JS 프레임워크이다.  Vue.jsVue.js - The Progressive JavaScript Frameworkvuejs.orgVue의 핵심 기능으로는 선언적 랜더링과 반응성 두 가지가 있다.선언적 랜더링(Declarative Rendering)Vue는 표준 HTML을 템플릿 문법으로 확장하여 JS 상태를 기반으로 화면에 출력될 HTML을 선언적으로 작성할 수 있다.반응성(Reactivity)Vue는 JS 상태(State) 변경을 추적하고, 변경이 발생하면 DOM을 효율적으로 업데이트하는 것을 자동으로 수행한다.뷰 인스턴스인스턴스는 뷰로 개발할 때 필수로 생성해야 하는 코드이다.MVVM 패턴과는 관련이 없.. 2024. 6. 25.
[JS] HTTP 란 무엇일까 이번 포스팅은 HTTP 프로토콜에 대해서만 알아보려고 한다. 이전에는 HTTP란 Hyper Text Transfer Protocol 로 웹 간의 데이터를 주고 받기 위한 통신 규약으로만 간단히 이해하고 포트번호는 80을 사용한다고만 이해하고 있었다.오늘은 HTTP에 대해서 너무 깊진 않지만 약간 알아보려고 한다.HTTP ( Hyper Text Transfer Protocol )API와 같이 다른 서버와 통신을 할 때는 특정한 규칙에 맞춰 그 통신이 이루어져야 한다.현재 웹에서 통신을 할 때 가장 흔하게 HTTP를 사용한다.HTTP는 Hyper Text Transfer Protocol의 약자로, 간단하게 이야기하면 서로 다른 서버 간에 문자 형식으로 데이터를 주고 받을 때 지켜야 하는 규약이다.우리가 HT.. 2024. 6. 14.
[JS] 호이스팅 이전 포스팅에서는 스코프에 대한 원리와 이해를 해보기 위해 공부를 진행하였다.이번에는 호이스팅이란 무엇이고, 이것의 원리는 어떻게 되는 지 공부를 해보려고 한다. [JS] Scope(스코프)오늘은 JS 구문에서 스코프와 호이스팅의 개념에 대해서 공부를 해보려고 한다.평소에 프론트엔드 부분에 대한 개발을 하다보면, 우리는 아래와 같은 장애를 확인할 수 있다.Uncaught ReferenceError :hong-study.tistory.com먼저 호이스팅에 대한 개념을 알아보기 전에 아래와 같은 두 예시를 드며 호이스팅이란 무엇인가에 접근을 할 수 있다.console.log(item)let item = 1;console.log(item);var item = 1;위는 각 각 let 키워드와 var 키워드로 i.. 2024. 6. 14.
[JS] Scope(스코프) 오늘은 JS 구문에서 스코프와 호이스팅의 개념에 대해서 공부를 해보려고 한다.평소에 프론트엔드 부분에 대한 개발을 하다보면, 우리는 아래와 같은 장애를 확인할 수 있다.Uncaught ReferenceError : confined is not defined at :4:13이러한 에러가 발생하는 가장 큰 이유를 그저 박수 내부에 변수가 갇혀있다고로만 이해하고, 수정을 진행하였는데 오늘은 이러한 에러가 왜 발생하는 지 원인에 대해서 공부를 해보려고 한다.JavaScript에는 scope라는 개념이 존재한다.스코프는 크게 전역 스코프, 지역 스코프가 있는데 이해하기 쉬운 예로는 전역 변수, 지역 변수가 있다.전역 변수의 경우는 특정 함수에 갇히지 않고, 참조가 가능하지만 지역 변수의 경우는 해당 함수 내에서만.. 2024. 6. 14.
[JS] To do List 구현 이전에 여러 포스팅을 이용해, D-day 카운팅하는 프로그램을 간단하게 만들고, 로컬스토리지에 저장하여 유지하는 거 까지 공부를 진행하였다. D-Day 카운팅과 관련된 것은 아래 주소를 이용해 다시 확인해볼 수 있다.그리고 오늘은 To do List를 구현해보려고 한다. [JavaScript] 날짜를 생성하는 New DateDate 생성자는 시간의 특정 지점을 나타내는 Date 객체를 플랫폼에 종속되지 않는 형태로 생성한다.Date 객체는 1970년 1월 1일 UTC(국제표준시) 자정으로부터 지난 시간을 밀리초로 나타내는 UNIXhong-study.tistory.com  [JS] D-DAY 카운트 구현[JavaScript] 날짜를 생성하는 New DateDate 생성자는 시간의 특정 지점을 나타내는 Da.. 2024. 6. 13.
[JS] Local Storage [JS] D-DAY 카운트 구현[JavaScript] 날짜를 생성하는 New DateDate 생성자는 시간의 특정 지점을 나타내는 Date 객체를 플랫폼에 종속되지 않는 형태로 생성한다.Date 객체는 1970년 1월 1일 UTC(국제표준시) 자정으로부터 지난hong-study.tistory.com이전 포스팅에서는 JS를 이용해 D-day 카운터를 구현을 해보았다. 하지만 입력한 D-Day 화면을 새로 고침할 때마다 내가 입력한 모든 값과 카운팅되는 값들이 사라지는 현상이 있는데, 이 문제를 Local Storage로 해결해보고자, 오늘은 Local Storage는 무엇이고 언제 사용하는 지에 대해 공부하려고 한다.웹 브라우저에서 어떠한 로직에 활용되는 데이터를 유지시키고자 한다면, 해당 데이터를 저장할.. 2024. 6. 13.
반응형

티스토리툴바