프론트 엔드/css

좋은 CSS를 만드는 법

👋글을 시작하기에 앞서...... Css는 정말 무궁무진하고 자유롭게 제작이 가능하기 때문에 때로는 잘 만들어진 화면이더라도 내부의 CSS고통을 겪고 있을지 모릅니다. 눈으로 보이지 않기 때문에 저를 비록 한 초보자들이 많이 모르고 지나쳤을 꺼라 생각되어 이 글을 끄적입니다......... 👆좋은 CSS를 만드는 법 단순히 화면만 이쁘게 만들어 진다고 좋은 Css가 아닙니다. 👉아래 내용을 참고해서 자신의 코드를 평가해 보세요 📍단순하고 체계적으로 유지 명확하고 일관된 레이아웃을 사용하고 너무 많은 스타일과 요소를 사용하지 마십시오. 📍CSS 전처리기 사용 Sass 또는 Less와 같은 CSS 전처리기를 사용하면 변수, 함수 및 혼합을 사용하여 보다 효율적이고 유지 관리 가능한 코드를 작성할 수 있습니다..

[CSS]React에서 스크롤시 화면 변화

❗필요! React에서 scroll 했을 때 애니메이션 효과는 useState, useEffect으로 만들 수 있습니다. import React, { useState, useEffect } from "react"; 또한 CSS 라이브러를 사용하면 애니메이션을 더 편하게 사용할 수 있습니다. npm install animate.css --save import "animate.css/animate.min.css"; animate.css의 자세한 사용법은 다음 사이트를 참고해 주세요 https://animate.style/ Animate.css | A cross-browser library of CSS animations. Animate.css is a library of ready-to-use, cross-..

[CSS]CDD 개발 도구

❓CDD Component Driven Development의 약자로 부품 단위로 UI 컴포넌트를 만들어 나가는 개발이다 디자인과 개발 단계에서부터 재사용할 수 있는 UI 컴포넌트를 미리 디자인하고 개발합니다. 👍기존에 작성했던 컴포넌트를 재활용을 할수 있기 때문에 시간과 노력을 아낄 수있습니다. ⚡Styled Components 👆위에서 설명했던 CDD개발 도구 중 하나가 바로 Styled Components입니다. Styled Components는 CSS in JS라는 개념을 실용화시키기 위해 나온 라이브러리입니다 👉CSS를 컴포넌트 단위로 개발할 수 있다는 이점으로 인해 현재 가장 인기를 누리고 있습니다. 🔎Styled Components 사용하기 👉그렇다면 어떻게 라이브러리를 코드에 적용할 수 있..

[CSS] CSS의 역사

인터넷이 만들어진 이후 CSS작성 방식은 꾸준히 진화해 오게 되었습니다. 오늘은 CSS의 과거 현재 그리고 미래에 대해 알아보며 그동안 어렵게만 느껴져 왔던 CSS에 한 발자국 더 가까워지는 시간을 가지고 싶어 이 글을 작성합니다. 🤠1990년대(CSS 대항해시대) 1990년도에는 말 그대로 아무런 규칙과 약속도 없는 CSS는 무법 개발자들의 시대였습니다. 인터넷이 발달하면서 웹 페이지를 표시하기 위해 개발된 HTML의 탄생하게 되었습니다. 이후 예쁜 웹 페이지를 원하는 개발자들의 요구의 의해 HTML에 서식을 입힐 수 있는 기능이 생기게 되었습니다. (이것이 바로 Inline-style 기법이었습니다) line안에 스타일을 집어넣어 태그에 서식을 넣을 수 있는 기법이었습니다. CSS의 등장으로 사람들은..

[CSS]박스모델

코텐츠를 먼저 작성하기 전 작성 공간을 할당해 주는 것이 인지상정! 오늘은 콘텐츠의 고유한 영역인 박스에 대해서 공부해보자 모든 콘텐츠는 각자의 영역이 있고 이 영역은 (박스)라 불리게 된다. 박스에는 높이(Height), 넓이 width)를 가지게 되며 이 값은 임의로 변경이 가능하다. (아래 사이트를 참조해서 한번 시도해 보세요) https://webclub.tistory.com/356 CSS의 7가지 단위 - rem, vh, vw, vmin, vmax, ex, ch CSS Unit (CSS 7가지 단위) 우리가 잘 알고 있는 CSS기술을 사용하는 것은 쉽고 간단할 수 있지만 새로운 문제에 봉착하게 되면 해결하기 어려울 수 있습니다. 웹은 항상 성장,변화하고 있고 새로운 webclub.tistory...

[CSS]기초및 사용방법

css는 웹을 더 직관적이고 사용자 친화적으로 만들어 주는 언어입니다. 쓰는 법은 가장 쉬우나 그만큼 어려운 함수이니 제대로 공부해보자!!! ⚡css란? ➡CSS는 HTML 문서의 스타일을 만드는 데 사용하는 언어입니다. ➡CSS는 HTML 요소가 어떻게 표시되어야 하는지 설명합니다. 아래 예시를 보면서 이해해 봅시다. My First CSS Example This is a paragraph. css언어 사용 전 css언어 사용 후 기존의 색 없고 및및햇던페이지가 더 친숙하게 느껴지고 보기 편해졌을 것이다. 인간이 쉽게 사용 가능한 ui를 만들려면 위에 보이는 거처럼 css사용이 필수이다. 다음으로 사용법을 알아보자 📌css 사용방법 css는 Selector(style을 받는 대상)과 Declaratio..