Welcome to Visit!!
Let's get it
웹 개발자로의 새로운 여정을 시작해 보겠습니다.
여러분들의 방문을
진심으로 환영합니다
웹 개발자로서, 다양한 개발 지식을 다루는
블로그를 만들어보겠습니다. 😃
참고하는 웹사이트 목록 💻
필자가 자주 참고하는 웹사이트를 둘러보세요.
CSS 스타일링 🎨
웹 개발을 할 때 사용하는 CSS 사용방법을 확인해보세요.
목차 CSS는 HTML 태그를 꾸미거나 효과를 넣어 주는 등, 디자인 요소를 추가할 때 사용하는 전처리 과정을 의미한다. 프로젝트의 규모가 커지고 반응형 웹을 구현할 때 CSS는 가독성이 떨어지고 유지보수가 어렵다는 단점이 있다. 하지만 SCSS는 CSS와 달리 코드의 재활용성을 높이고, 가독성을 올려 주기 때문에 유용하다. 특히 변수를 활용하여 코드를 작성할 수 있도록 지원하기 때문에 코드의 가독성을 높여주고 반응형 웹 작성을 더 수월하게 만들 수 있다. 그럼 SCSS를 이용하여 반응형 웹을 개발하는 방법을 알아보자. SCSS를 이용한 반응형 웹 개발. SCSS에서 반응형 사이즈 사용법. 우선 SCSS에서 변수를 설정하고 @mixin을 사용하여 밑과 같이 작성한다. SCSS $pc2000: 2000px..
목차 바로 전 포스팅에서 텍스트에 그라데이션을 적용하는 법에 대해 알아보았다. 그렇다면 이번에는 border에 그라데이션을 적용하는 법에 대해서 포스팅해보겠다. 예제 파일 작성하기 1. Index.html 수정 index.html의 body 부분 안에 밑의 코드를 작성한다. HTML 2. Style.css 작성. 우선 HTML에 CSS를 다음과 같이 추가하여 박스들을 정 중앙에 위치시킨다. CSS html { display: flex; align-items: center; justify-content: center; height: 100vh; } 이후 .box1 부분에 다음과 같이 CSS를 작성한다. CSS .box1 { width: 200px; height: 200px; border: 5px solid..
목차 웹 개발을 하다보면, 디자인적인 측면에서 말줄임(...)을 사용해야 하는 경우가 많다. 왜냐하면 이렇게 말줄임표를 사용해야 디자인이 더 깔끔해 보이기 때문이다. 말줄임 CSS 문법은 다음과 같다. CSS overflow: hidden; : 박스에서 넘쳐난 텍스트 숨기기 white-space: nowrap; : 줄바꿈이 없어짐 text-overflow: ellipsis; : ... 말줄임 효과 -webkit-line-clamp : '글자'; : '글자'의 최대 라인수를 결정 -webkit-box-orient: vertical; : 영역 박스의 내의 정렬을 수직으로 만든다. word-break: break-all; : 어절이 유지되지 않고 끊어져서 줄바꿈 됨 1. 한줄만 나타내기 결과) Lorem, i..
목차 웹 개발을 하다보면 가끔식 사용하는 텍스트에 그라데이션 효과를 넣는 것이 헷갈릴 때가 있어서 지금 작성해보고자 한다. 우선 텍스트에 적용되는 그라디언트 속성을 다음과 같다. CSS # 이 속성은 그라데이션을 넣어주는 속성이다. background: linear-gradient(방향, #색상 코드, #색상 코드, #색상 코드,... , #색상 코드); # 이 속성은 요소의 배경이 어디까지 색을 채울지 정하는 속성이다. -webkit-background-clip: text; # 텍스트 문자의 채우기 색을 지정하는 속성으로, 이 속성이 지정되지 않는다면 color의 색상을 따라간다. -webkit-text-fill-color: transparent; 그럼, 이 내용을 바탕으로 텍스트에 그라데이션을 적용하..
Let's learn about
'전체 글'에 대해 공부한 내용을 정리한 페이지입니다.
Guest Book
블로그를 방문해주셔서 감사드립니다.
자유롭게 댓글 달아주세요 ~
Tag Page
원하시는 태그를 클릭해보세요.
전체 글
공부한 내용을 정리한 페이지입니다.
Light Dev
Light Dev에서 공부한 내용을 정리합니다.
목차 클래스형 컴포넌트는 무엇인가? 클래스형 컴포넌트는 함수형 컴포넌트와 React Hook이 등장하기 이전에 사용하던 컴포넌트 형태로 ES6(ECMA Script 2015)부터 추가된 JavaScript Class를 바탕으로 컴포넌트를 작성한다. 함수형 컴포넌트 성능이나 메모리 사용에 있어 약간의 이점이 있음 Hook을 통해 state, lifeCycle을 구현함 클래스형 컴포넌트에 비해 표현이 간결함 클래스형 컴포넌트 ES6(ECMA Script 2015)부터 추가된 Class를 통해 컴포넌트 선언 함수형 컴포넌트와 Hook이 등장하기 전에 폭넓게 사용되었기 때문에, 레거시 코드에서 자주 발견할 수 있는 형태 표현방법이 좀 더 명시적이고, 함수형 컴포넌트 보다 약간 기능이 더 많음 클래스형 컴포넌트 ..
목차 React, Vue에서의 SCSS 사용법 SCSS는 CSS 전처리기(Preprocesser)라고도 합니다. CSS를 좀 더 프로그래밍 언어스럽게 작성 가능하여, CSS에서 변수, 연산자, 함수, extend, import 등을 사용할 수 있다. 단, 브라우저는 SCSS 문법을 모르기 때문에 SCSS로 작성한 파일을 다시 CSS로 컴파일해야 한다. Sass 라이브러리 설치 우선 Sass 라이브러리를 설치한다. Shell // Sass 라이브러리 설치하기. $ npm install sass --save # or $ yarn add sass React에서의 SCSS 사용법 Scss 문서 생성하기 이후 App.scss 문서를 생성하면 App.js에 SCSS 스타일링이 적용된 것을 확인할 수 있다. SCSS..
목차 제가 웹개발을 할 때 자주 참고하는 사이트를 정리한 포스팅입니다. @Web's CSS 코드펜의 자료들 중 좋은 자료들을 모아 놓은 티스토리 블로그 사이트. 매우 유용한 자료가 많아서 애용하는 블로그다. @web's CSS 코드펜 레퍼런스 사이트입니다. wsss.tistory.com Inpa Dev 수많은 개발자 블로그들이 있지만 그 중에서 인지도가 매우 높은 사이트이다. 포스팅의 내용이 매우 알차며 프론트, 백엔드 정보들을 많이 얻을 수 있다. Inpa Dev 👨💻 성장 욕구가 가파른 초보 개발자로서 공부한 내용을 쉽게 풀어쓴 기술 블로그를 운영하고 있습니다. inpa.tistory.com Codepen 코드펜은 사용자가 만든 HTML, CSS, Javascript코드를 테스트하고 시연하기 위한 ..
목차 Package.json 생성 TS-Node를 사용하기 전에 Package.json을 생성한다. TypeScript // 'package.json' 다음 명령어로 생성하고 전부다 enter 처리하면 된다. $ yarn init // 'package.json' 생성을 자동으로 하고 싶다면 $ yarn init -y 설치하기 Package.json을 생성하였다면 TS-Node 관련 패키지를 설치한다. Shell // 'Express', 'typescript', 'nodemon' 설치하기. $ npm install express @types/express @types/node nodemon ts-node typescript # or $ yarn add express @types/express @types/..
목차 TS-Node는 무엇인가? JavaScript를 웹이 아닌 콘솔에서 실행하기 위해서는 Node.js를 설치한 후에 node 자바스크립트파일명.js를 통하여 실행할 수 있다. 물론 TypeScript 파일도 자바스크립트 문법으로만 작성을 한다면 node 타입스크립트파일명.ts를 통하여 실행이 가능하긴 하다. 그러나 타입스크립트 문법으로 작성된 .ts 파일은 Node.js에서 실행이 되지 않는다. 왜냐하면 Node.js는 JavaScript 파일만 해석할 수 있지, TypeScript 파일은 해석할 수 없기 때문이다. 그래서 TypeScript 파일을 Node.js에서 실행하기 위해서는 TS-Node를 설치해야 된다. TS-Node는TypeScript 코드를 JavaScript로 컴파일하지 않고 직접 ..
목차 SWR은 무엇인가? SWR이란 “Stale-While-Revalidate”라는 HTTP 캐시 무효화 전략에서 유래된 데이터 페칭을 위한 리액트 라이브러리이다. SWR의 기본적인 작동은 우선 캐시(stale)에서 데이터를 불러오고, 검증을 위한 요청(revalidate)을 보내고, 마침내 최신 데이터로 업데이트하는 과정을 거친다. 또한 SWR을 사용하는 컴포넌트들은 지속적이고 자동적으로 데이터 업데이트가 이루어짐으로써 항상 최신 상태를 유지할 수 있게 된다. SWR의 대표적인 장점 자동화가 간단하다. 가볍고 빠르기 때문에 데이터의 업데이트 또한 빠르게 이루어져 reactive한 환경을 갖출 수 있다. SSR(Server-Side-Rendering), SSG(Static-Site-Generation),..
목차 VSCode로 코드를 작성할 때 계속 저장하면서 작업을 해야하는 경우가 있다. 왜냐하면 작업 도중 VSCode가 오류를 일으키거나 입력이 잘못되어 작업하던 자료가 없어지는 상황이 일어나기 때문이다. 이 문제를 해결하려면 VSCode에 있는 자동저장 기능을 켜 놓으면 문제를 해결할 수 있다. 파일 자동 저장 설정하기 VSCode 설정하기 우선 VSCode 설정파일에서 자동저장을 변경해야 하는데 설정에 들어가는 3가지 방법이 있다. 맨 위 상단에 파일에서 기본설정 클릭 후 설정 메뉴를 클릭하는 법. 화면 왼쪽 하단의 톱니바퀴 모양을 클릭하는 법 단축키 CTRL+,를 클릭하는 법이 있다. Auto Save 설정하기 설정에 들어갔다면 사용자 - 텍스트 편집기 - 파일로 들어간다다. 이후 Auto Save ..
목차 CSS로 밑줄 애니메이션 만들어보자 프론트엔드 작업을 하다보면 강조하고 싶은 글들이 있을 때 형광펜 효과나 애니메이션 효과를 사용해야 할 때가 있다. 왜냐하면 형광펜 효과나 애니메이션 효과가 들어가게 되면 방문자들에게 좀 더 좋은 UI를 제공할 수 있기 때문이다. 저는 첫번째 예제 파일에서는 CSS를 이용한 밑줄 효과를 작성했는데, 이것은 "형광펜으로 밑줄을 그은 듯한 느낌의 CSS 스타일"로, 3가지 종류의 예시를 작성해보았다. 두번째 예제 파일에서는 "마우스 호버시 밑줄이 나타나는 애니메이션 CSS"를 작성해보았다. 형광펜 밑줄 효과 우선 태그만 사용한 경우 mark 태그를 사용하면 기본적으로 노란색 형광펜이 칠해진 상태가 된다. HTML /* HTML */ HTML의 mark tag만 사용한 ..
© Copyright 2023 Light