본문 바로가기

Dev130

[SCSS] &:hover의 의미와 input label에 hover했을 때 효과 [SCSS] &:hover의 의미와 input label에 hover했을 때 효과 서론 CSS는 웹 페이지의 디자인과 레이아웃을 제어하기 위한 중요한 언어입니다. 특히 SCSS는 CSS의 확장으로, 보다 효율적이고 유지보수가 용이한 스타일 시트 작성을 가능하게 합니다. 이번 포스팅에서는 SCSS에서 자주 사용되는 &:hover의 의미와 input label에 hover했을 때 적용되는 효과에 대해 알아보겠습니다. &:hover의 의미 SCSS에서 &는 부모 선택자를 나타내며, &:hover는 부모 선택자에 hover 상태가 적용되었을 때를 나타냅니다. 이를 통해 해당 요소의 hover 상태에 따라 스타일을 지정할 수 있습니다. 예를 들어, .button { &:hover { background-color.. 2023. 9. 2.
vscode에서 PHP와 SCSS 함께 사용하기: SASS 컴파일러 설치 ✈ Visual Studio Code에서 PHP와 SCSS 함께 사용하기: SASS 컴파일러 설치 안녕하세요, 여러분! 오늘은 Visual Studio Code를 이용하여 PHP 프로젝트에서 SCSS를 사용하고 SASS 컴파일러를 설치하는 방법에 대해 알아보려고 합니다. 이 포스팅을 통해 웹 개발 과정에서 SCSS의 활용과 함께 SASS 컴파일러를 효율적으로 활용하는 방법에 대해 배워보세요. 준비물 확인하기 우선, 우리가 할 작업에 필요한 준비물을 확인해봅시다. Visual Studio Code 설치: VS Code가 설치되어 있지 않다면, 공식 웹사이트에서 다운로드하여 설치해주세요. SCSS 지식: SCSS는 웹 개발에서 스타일을 효과적으로 작성할 수 있도록 도와주는 언어입니다. 이미 기본적인 SCSS.. 2023. 9. 1.
자바스크립트로 RGB 색상표 만들기 자바스크립트로 RGB 색상표 만들기 서문 RGB색상 코드는 주로 rgb(255, 255, 255)나 #FFFFFF와 같이 사용되며, 이는 컴퓨터가 이해하는 2진수로 변환되어 처리됩니다. 이러한 코드는 색상의 빛의 정도를 나타내는 옥텟(Octet) 단위로 표현되며, 이를 이용하여 다양한 색상을 표현할 수 있습니다. 옥텟과 컬러 표현 각각의 옥텟은 8비트로 구성되어 있으며, 첫 번째 옥텟은 빨간색(R), 두 번째 옥텟은 초록색(G), 세 번째 옥텟은 파란색(B)을 나타냅니다. 이 세 가지 색상의 빛의 정도를 0부터 255까지의 숫자로 표현합니다. 0은 해당 색상의 빛이 꺼진 상태를 나타내며, 255는 최대한 밝은 상태를 의미합니다. 따라서, 예를 들어 #000000은 검은색, #FFFFFF는 흰색을 나타냅니.. 2023. 8. 31.
vscode scss compiler sass 사용하는법 .map파일이 생성되지 않게 설정 vscode에서 SCSS 컴파일하여 .map 파일 생성 방지하기 소개 SCSS를 CSS로 컴파일하는 방법은 여러 가지가 있습니다. 이번 글에서는 Visual Studio Code에서 간편하게 SCSS를 컴파일하는 방법에 대해 알아보겠습니다. 필요한 확장 기능들과 함께 Live Sass Compiler를 이용하여 .map 파일 생성을 방지하는 방법을 소개하겠습니다. 필요한 확장 기능 설치 아래의 확장 기능들을 설치해야 합니다: sass sass Lint live sass compiler live server 설치가 완료되면 페이지 하단에 Live Sass Compiler와 유사한 아이콘이 표시됩니다. SCSS 파일 컴파일 Live Sass Compiler를 사용하여 SCSS 파일을 컴파일할 수 있습니다. .. 2023. 8. 30.
linux killall node command use in windows taskkill /f /im node.exe Starting inspector on 127.0.0.1:9229 failed: address already in use 에러 해결방법 VScode 사용 중 'address already in use' 에러 해결 방법 이제는 개발 환경을 구성하고 코드를 작성하는 것이 어렵지 않습니다. 그러나 때로는 예상치 못한 문제가 발생할 수 있습니다. 그 중 하나가 'address already in use' 에러일 것입니다. 이 글에서는 VSCode를 사용하면서 이러한 에러가 발생한 경우 해결 방법을 안내해 드리겠습니다. linux killall node command use in windows taskkill /f /im node.exe Starting inspector on 127.0.0.1:9229 failed: address already in use 안녕하세요, 여러분! 오늘은 개발 과정에서 종종 마주치는 문제 중 하나인 'address .. 2023. 8. 29.
리액트 초기 세팅 환경 구축하기: Windows에서의 React 설치 가이드 리액트 환경 구축하기: Windows에서의 React 설치 가이드 안녕하세요! 이번에는 리액트(React)를 Windows 환경에서 설치하는 방법에 대해 알아보겠습니다. 리액트는 페이스북에서 개발한 프론트엔드 라이브러리로, 주로 컴포넌트 기반의 개발에 중점을 두고 있습니다. 이제부터 순차적으로 진행해보겠습니다. 리액트 초기 세팅 전 준비 사항 리액트를 설치하기 전에 몇 가지 준비 사항이 필요합니다. 아래와 같이 진행해보세요. Node.js 설치: 리액트를 사용하기 위해서는 Node.js가 필요합니다. Node.js는 Webpack과 Babel과 같은 도구를 사용하기 위해 필요한 기반 환경을 제공합니다. Node.js 공식 웹사이트에서 설치하세요. Yarn 설치: Node.js와 함께 설치되는 패키지 매니.. 2023. 8. 22.
Button scss hover not working 원인과 예제 SASS SCSS :hover 예제와 동작하지 않는 사례 - 원인과 해법 서론 SASS(SCSS)는 CSS의 확장 버전으로, 변수, 중첩 규칙, 함수 등을 사용하여 스타일시트 작성을 간편하고 효율적으로 만들어줍니다. 그리고 :hover는 웹 개발에서 자주 사용되는 유용한 CSS 의사 클래스 중 하나입니다. 하지만 때때로, SASS(SCSS)를 사용할 때 :hover가 원하는 대로 동작하지 않는 사례들이 있습니다. 이러한 문제들을 해결하는 방법과 함께, :hover를 SASS(SCSS)에서 사용하는 예제들을 살펴보겠습니다. :hover 사용 예제 먼저, 간단한 예제를 통해 :hover를 SASS(SCSS)에서 어떻게 사용하는지 살펴보겠습니다. // SCSS .button { background-color:.. 2023. 8. 9.
jQuery Javascript navigator.useragent 모바일 크롬 pc android os ios ipad check 방법과 예제 jQuery Javascript navigator.useragent 모바일 크롬 PC Android OS iOS iPad 체크 방법과 예제 서론 웹 개발을 하다 보면 사용자의 기기와 운영체제에 따라 다르게 동작해야 할 때가 있습니다. 특히 모바일 기기와 PC 간에는 화면 크기와 기능의 차이로 인해 웹 페이지를 다르게 제공해야 할 때가 많습니다. 이러한 상황에서 사용자의 기기 정보를 알아내는 것은 매우 중요합니다. 이번 블로그 포스트에서는 jQuery와 JavaScript를 사용하여 사용자의 기기 정보를 어떻게 확인할 수 있는지 알아보겠습니다. jQuery와 JavaScript로 navigator.useragent 확인하기 navigator.useragent는 사용자의 브라우저와 운영체제 정보를 담고 있는.. 2023. 8. 7.
Git 사용법: 원격 저장소, 복제, 커밋, 푸시, 풀, 머지 충돌 해결, remote Repository, clone,commit, push, pull,merge conflict Git 사용법: 원격 저장소, 복제, 커밋, 푸시, 풀, 머지 충돌 해결 [ remote Repository, clone, commit, push, pull, merge conflict ] 소개 Git은 버전 관리 시스템(VCS)으로, 코드와 파일의 변경 이력을 효과적으로 관리하는 도구입니다. 이 블로그 포스팅에서는 Git의 주요 기능과 사용법을 설명하고, 원격 저장소에 대해 자세히 알아보겠습니다. 원격 저장소를 추가하고, 복제하며, 변경사항을 커밋하고, 푸시하고, 풀하며, 머지 충돌을 해결하는 방법을 다룰 것입니다. 1. 로컬 저장소 만들기 로컬에서 Git을 사용하기 위해 저장소를 만들어야 합니다. 다음 명령어로 빈 디렉토리에 Git 저장소를 생성할 수 있습니다. git init 2. 파일 커밋하기 로.. 2023. 8. 3.
session method 세션 메소드 .setAttribute() .getAttribute() .invalidate() .setMaxInactiveInterval() .isNew() 세션 메소드: 유용한 세션 관리 기능들 서론 웹 애플리케이션에서는 사용자의 상태를 유지하고 데이터를 저장하는 데 세션(session)이 매우 중요합니다. 세션은 클라이언트와 서버 간의 상태 정보를 저장하는 데 사용되며, 사용자가 웹 사이트를 둘러보는 동안 일시적인 데이터를 보존하는 데 유용합니다. 자바 웹 애플리케이션에서는 세션 관리를 위해 다양한 메소드를 제공합니다. 이 글에서는 자바의 세션 메소드를 소개하고, 각 메소드의 사용법과 기능을 살펴보겠습니다. 세션 메소드 개요 자바 웹 애플리케이션에서는 javax.servlet.http.HttpSession 인터페이스를 통해 세션과 관련된 다양한 메소드를 사용할 수 있습니다. 각 메소드는 세션의 속성(attribute)을 설정하거나 가져오는 데 사용되며, .. 2023. 7. 31.
[자바스크립트/jQuery] input checkbox name값, value 값으로 체크하기 자바스크립트/jQuery로 Input checkbox를 Name과 Value 값으로 체크하기 소개 이 블로그 포스팅은 자바스크립트와 jQuery를 이용하여 HTML 입력 폼인 input checkbox의 Name과 Value 값으로 체크하는 방법에 대해 설명합니다. 일반적으로 체크박스를 생성할 때는 동일한 Name을 가진 여러 개의 값을 저장해야 할 때가 있습니다. 이때, 배열로 값을 저장하는 방법이 자주 사용됩니다. 하지만 이렇게 저장된 값을 불러와 체크박스를 선택하는 것은 조금 까다로울 수 있습니다. 하지만 Name과 Value를 동시에 사용하여 체크박스를 선택하는 방법을 알면 간단하게 처리할 수 있습니다. 본문 Name과 Value 값으로 체크박스 선택하기 - JQuery 보통 체크박스를 생성할 때.. 2023. 7. 29.
안드로이드 html 웹뷰 Javascript 모바일 웹 주소창 없애기 / 모바일 크롬 브라우저 테마 색상 변경 색깔 주소창이 꼴 보기 싫은 것도 아닌데 모바일의 작은 화면으로 보자니 그 1cm도 아까운가 보다. 아? 아닌가? 아무튼... 흠흠. 모바일웹은 현대인에게 필수인데, 초보 제작자에게는 고민인 부분이다. 분명 필요해서 보이게 해 놨을 텐데, 미적 감각으로 '크롬 모바일 주소창 없애기', '모바일 브라우저 주소창', '웹앱 주소창 없애기', 'Javascript 브라우저 주소창 없애기', '안드로이드 주소창 숨기기', 'Html 주소창 없애기' 검색이 많다. 일단, 앱 개발자들은 웹뷰에서 주소창이 사라지기를 바라는 것이겠고, 모바일웹 개발자들은 모바일웹 화면에서 1cm라도 더 화면을 넓게 보여주기 위해서 모바일 주소창 자동숨김이 일어나기를 바라는 것일 것이다. 대체로 안드로이드 폰에서는 모바일 크롬에서 javas.. 2023. 7. 10.

티스토리툴바