BEM (Block, Element, Modifier)은 CSS 클래스를 명명하는 방법론 중 하나로, HTML과 CSS의 구조를 더 이해하기 쉽고 유지보수하기 쉽게 만들어주는 효과가 있습니다. BEM의 이름은 아래 세 가지 컴포넌트에 따라 붙여집니다. Block (블록) Element (요소) Modifier (수정자) 1. Block (블록) 블록은 독립적인 엔티티로, 재사용이 가능합니다. 예를 들면, 헤더, 컨테이너, 메뉴, 체크박스 등이 이에 해당합니다. 2. Element (요소) 요소는 블록 내부의 구성 요소로, 블록이 없으면 의미를 가지지 못합니다. 예를 들면, 메뉴 항목, 리스트 항목, 헤더 타이틀 등이 이에 해당합니다. 3. Modifier (수정자) 수정자는 블록이나 요소의 상태와 행동을..

React 애니메이션 라이브러리는 웹 애플리케이션의 사용자 경험(UX)를 높이기 위해 많이 사용됩니다 1. Framer Motion 특징: Framer Motion은 사용하기 쉬운 API와 풍부한 기능을 제공하는 React 애니메이션 라이브러리입니다. 물리 기반 애니메이션, 제스처 제어, 컴포넌트 간 전환 등의 기능을 제공합니다. 장점: 사용하기 쉬운 API 높은 성능 물리 기반 애니메이션 및 제스처 제어 지원 풍부한 예제와 문서화 단점: 비교적 큰 파일 크기 사용해야 하는 경우: 사용하기 쉬운 API와 높은 성능이 필요한 경우, 물리 기반 애니메이션을 적용할 때 사용합니다. 2. React-Spring 특징: React-Spring은 물리 기반의 애니메이션을 구현할 수 있는 라이브러리입니다. 직관적인 ..

이번에 알아볼 내용은 CSS 프레임워크이다. 프론트의 메타 자체가 빠르게 바뀌는 편이므로 작성일을 기준으로 많이 쓰이는 프레임워크 기준으로 정리를 해 두었다 + 이 글에서 쓰인 수치들은 별도의 명시가 없을 시 2021년 데이터 수치를 작성해 둔 것이다 CSS 프레임워크란? 미리 개발 해 둔 완성형 디자인을 쉽게 가져다 쓸 수 있도록 한 것 바로 아래에 이전년도까지의 만족도, 흥미, 사용률을 나타내는 사이트에서 정보를 얻어왔다 The State of CSS 2021: CSS Frameworks The Rankings chart can be toggled between satisfaction, interest, usage, and awareness to give you a fuller picture of a..

프로젝트명: Cool20 ( 쇼핑몰 ) 기간: 11월 첫째주부터 약 7주간 진행 팀원: 3 역할: 백엔드 및 기능 제작 사용 언어: HTML, CSS, JSP, JS, SQL 개발환경: VS Code, Eclipse 들어가며 수업시간에 했던 내용들을 종합하여 팀별로 나만의 쇼핑몰을 만들어보는 프로젝트를 진행했다 처음 팀 단위 프로젝트를 진행하였기에 과정이 매끄럽게 이어지지는 않았던 것 같다 1. 프로젝트 아이디어 구상 2. 프로젝트 기능 설계 3. 프로젝트 기능, 세부기능 추가 및 점검 4. 완성 1. 프로젝트 아이디어 구상(1주차) 보통 쇼핑몰 하면 가장 먼저 떠오르는 것이 있다. 바로 의류 쇼핑몰이다. 이를 만들기 위해 우리는 괜찮은 이름을 찾아보았고, 핫텐이라는 쇼핑몰에서 본따 Cool20이라는 쇼..

프로젝트를 통해 프론트엔드 부분에 대해 만들면서 학습 해나가던 중 맨땅에 헤딩 급으로 부딪힐 때 많이 도움이 되었던 사이트이다 장점1: 메뉴가 보기 편하다 웹 개발을 진행하다가 모르는 태그가 있다면 달려와서 여기서 알아보면 상당히 직관적인 해답을 얻을 수 있다 장점2: 예제 접근성 최대한 간단하게 필요한 내용만 써 둔 예제라서 그런지 활용 하기에 좋다 결론: 웹 기초 문법 학습 최적화 보통의 학습법은 선 실습 후 학습의 방법으로 하는 것이 더 효율이 좋아서 그렇게 하고 있었는데 이 사이트는 기본적으로 설명이 깔끔해서 그런지 먼저 학습을 하고 웹 개발에 들어갔을 때 더 도움이 되었던 것 같다 이런 사람들에게 추천합니다 웹 개발이 처음이고 뭘 어떻게 해야할 지 모르겠다 코드 복사해서 가져오는 건 잘하는데 아..

일단 저장해두면 굉장히 좋은 곳에 쓸 것 같은 기능이라 가져와 보았습니다 코드를 뜯어보면 동적인 애니메이션 관련 코드들에 대해 알 수 있기에 굉장히 의미있는 코드들이라고 생각합니다 seroSlide.html Welcome to Coda Let's play programming with HTML/CSS seroSlide.css body{ margin: 0; padding: 0; font-family: montserrat, sans-serif; background: black; } .animated-text{ color: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #2980b9; pad..