CSS
-
BEM (Block, Element, Modifier)은 CSS 클래스를 명명하는 방법론 중 하나로, HTML과 CSS의 구조를 더 이해하기 쉽고 유지보수하기 쉽게 만들어주는 효과가 있습니다. BEM의 이름은 아래 세 가지 컴포넌트에 따라 붙여집니다. Block (블록) Element (요소) Modifier (수정자) 1. Block (블록) 블록은 독립적인 엔티티로, 재사용이 가능합니다. 예를 들면, 헤더, 컨테이너, 메뉴, 체크박스 등이 이에 해당합니다. 2. Element (요소) 요소는 블록 내부의 구성 요소로, 블록이 없으면 의미를 가지지 못합니다. 예를 들면, 메뉴 항목, 리스트 항목, 헤더 타이틀 등이 이에 해당합니다. 3. Modifier (수정자) 수정자는 블록이나 요소의 상태와 행동을..
[CSS] BEM 방법론에 대해 알아보자(Block, Element, Modifier)BEM (Block, Element, Modifier)은 CSS 클래스를 명명하는 방법론 중 하나로, HTML과 CSS의 구조를 더 이해하기 쉽고 유지보수하기 쉽게 만들어주는 효과가 있습니다. BEM의 이름은 아래 세 가지 컴포넌트에 따라 붙여집니다. Block (블록) Element (요소) Modifier (수정자) 1. Block (블록) 블록은 독립적인 엔티티로, 재사용이 가능합니다. 예를 들면, 헤더, 컨테이너, 메뉴, 체크박스 등이 이에 해당합니다. 2. Element (요소) 요소는 블록 내부의 구성 요소로, 블록이 없으면 의미를 가지지 못합니다. 예를 들면, 메뉴 항목, 리스트 항목, 헤더 타이틀 등이 이에 해당합니다. 3. Modifier (수정자) 수정자는 블록이나 요소의 상태와 행동을..
2023.06.01 -
React 애니메이션 라이브러리는 웹 애플리케이션의 사용자 경험(UX)를 높이기 위해 많이 사용됩니다 1. Framer Motion 특징: Framer Motion은 사용하기 쉬운 API와 풍부한 기능을 제공하는 React 애니메이션 라이브러리입니다. 물리 기반 애니메이션, 제스처 제어, 컴포넌트 간 전환 등의 기능을 제공합니다. 장점: 사용하기 쉬운 API 높은 성능 물리 기반 애니메이션 및 제스처 제어 지원 풍부한 예제와 문서화 단점: 비교적 큰 파일 크기 사용해야 하는 경우: 사용하기 쉬운 API와 높은 성능이 필요한 경우, 물리 기반 애니메이션을 적용할 때 사용합니다. 2. React-Spring 특징: React-Spring은 물리 기반의 애니메이션을 구현할 수 있는 라이브러리입니다. 직관적인 ..
[React] 9개의 대표적인 애니메이션 라이브러리 비교해보기React 애니메이션 라이브러리는 웹 애플리케이션의 사용자 경험(UX)를 높이기 위해 많이 사용됩니다 1. Framer Motion 특징: Framer Motion은 사용하기 쉬운 API와 풍부한 기능을 제공하는 React 애니메이션 라이브러리입니다. 물리 기반 애니메이션, 제스처 제어, 컴포넌트 간 전환 등의 기능을 제공합니다. 장점: 사용하기 쉬운 API 높은 성능 물리 기반 애니메이션 및 제스처 제어 지원 풍부한 예제와 문서화 단점: 비교적 큰 파일 크기 사용해야 하는 경우: 사용하기 쉬운 API와 높은 성능이 필요한 경우, 물리 기반 애니메이션을 적용할 때 사용합니다. 2. React-Spring 특징: React-Spring은 물리 기반의 애니메이션을 구현할 수 있는 라이브러리입니다. 직관적인 ..
2023.04.16 -
이번에 알아볼 내용은 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..
[배경지식] CSS 프레임워크를 알아보자이번에 알아볼 내용은 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..
2022.12.31 -
프로젝트명: Cool20 ( 쇼핑몰 ) 기간: 11월 첫째주부터 약 7주간 진행 팀원: 3 역할: 백엔드 및 기능 제작 사용 언어: HTML, CSS, JSP, JS, SQL 개발환경: VS Code, Eclipse 들어가며 수업시간에 했던 내용들을 종합하여 팀별로 나만의 쇼핑몰을 만들어보는 프로젝트를 진행했다 처음 팀 단위 프로젝트를 진행하였기에 과정이 매끄럽게 이어지지는 않았던 것 같다 1. 프로젝트 아이디어 구상 2. 프로젝트 기능 설계 3. 프로젝트 기능, 세부기능 추가 및 점검 4. 완성 1. 프로젝트 아이디어 구상(1주차) 보통 쇼핑몰 하면 가장 먼저 떠오르는 것이 있다. 바로 의류 쇼핑몰이다. 이를 만들기 위해 우리는 괜찮은 이름을 찾아보았고, 핫텐이라는 쇼핑몰에서 본따 Cool20이라는 쇼..
[Cool20] 나만의 쇼핑몰 만들기(후기)프로젝트명: Cool20 ( 쇼핑몰 ) 기간: 11월 첫째주부터 약 7주간 진행 팀원: 3 역할: 백엔드 및 기능 제작 사용 언어: HTML, CSS, JSP, JS, SQL 개발환경: VS Code, Eclipse 들어가며 수업시간에 했던 내용들을 종합하여 팀별로 나만의 쇼핑몰을 만들어보는 프로젝트를 진행했다 처음 팀 단위 프로젝트를 진행하였기에 과정이 매끄럽게 이어지지는 않았던 것 같다 1. 프로젝트 아이디어 구상 2. 프로젝트 기능 설계 3. 프로젝트 기능, 세부기능 추가 및 점검 4. 완성 1. 프로젝트 아이디어 구상(1주차) 보통 쇼핑몰 하면 가장 먼저 떠오르는 것이 있다. 바로 의류 쇼핑몰이다. 이를 만들기 위해 우리는 괜찮은 이름을 찾아보았고, 핫텐이라는 쇼핑몰에서 본따 Cool20이라는 쇼..
2022.12.27 -
프로젝트를 통해 프론트엔드 부분에 대해 만들면서 학습 해나가던 중 맨땅에 헤딩 급으로 부딪힐 때 많이 도움이 되었던 사이트이다 장점1: 메뉴가 보기 편하다 웹 개발을 진행하다가 모르는 태그가 있다면 달려와서 여기서 알아보면 상당히 직관적인 해답을 얻을 수 있다 장점2: 예제 접근성 최대한 간단하게 필요한 내용만 써 둔 예제라서 그런지 활용 하기에 좋다 결론: 웹 기초 문법 학습 최적화 보통의 학습법은 선 실습 후 학습의 방법으로 하는 것이 더 효율이 좋아서 그렇게 하고 있었는데 이 사이트는 기본적으로 설명이 깔끔해서 그런지 먼저 학습을 하고 웹 개발에 들어갔을 때 더 도움이 되었던 것 같다 이런 사람들에게 추천합니다 웹 개발이 처음이고 뭘 어떻게 해야할 지 모르겠다 코드 복사해서 가져오는 건 잘하는데 아..
[ofcourse] HTML, CSS, JavaScript 입문자 추천프로젝트를 통해 프론트엔드 부분에 대해 만들면서 학습 해나가던 중 맨땅에 헤딩 급으로 부딪힐 때 많이 도움이 되었던 사이트이다 장점1: 메뉴가 보기 편하다 웹 개발을 진행하다가 모르는 태그가 있다면 달려와서 여기서 알아보면 상당히 직관적인 해답을 얻을 수 있다 장점2: 예제 접근성 최대한 간단하게 필요한 내용만 써 둔 예제라서 그런지 활용 하기에 좋다 결론: 웹 기초 문법 학습 최적화 보통의 학습법은 선 실습 후 학습의 방법으로 하는 것이 더 효율이 좋아서 그렇게 하고 있었는데 이 사이트는 기본적으로 설명이 깔끔해서 그런지 먼저 학습을 하고 웹 개발에 들어갔을 때 더 도움이 되었던 것 같다 이런 사람들에게 추천합니다 웹 개발이 처음이고 뭘 어떻게 해야할 지 모르겠다 코드 복사해서 가져오는 건 잘하는데 아..
2022.11.22 -
일단 저장해두면 굉장히 좋은 곳에 쓸 것 같은 기능이라 가져와 보았습니다 코드를 뜯어보면 동적인 애니메이션 관련 코드들에 대해 알 수 있기에 굉장히 의미있는 코드들이라고 생각합니다 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..
[HTML+CSS] 텍스트 슬라이드 기능(가로/세로)일단 저장해두면 굉장히 좋은 곳에 쓸 것 같은 기능이라 가져와 보았습니다 코드를 뜯어보면 동적인 애니메이션 관련 코드들에 대해 알 수 있기에 굉장히 의미있는 코드들이라고 생각합니다 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..
2022.11.21 -
오늘은 좌측에는 검색창, 중앙에는 로고, 우측에는 부가메뉴가 있는 헤더를 만들어보려 한다 우선 다음 글에서 기본적인 틀을 나눠둔 코드를 가져오도록 하겠다 0. 코드 준비 [HTML+CSS] 무작정 따라 만들어보기(쿠팡 footer만들기 1편) HTML, CSS를 그 누구보다 더 빠르고 정확하고 생동감 있고 실감 나게 체험을 해 보고 싶었던 나는 일단 유명한 브랜드의 웹 페이지를 직접 따라 만들면서 이게 이런 거구나 라는 감정을 느껴보고 time-map-installer.tistory.com 언제나 시작할 때 코드를 입력할 공간을 준비를 해 두는 것이 좋다 1. 헤더 나누기 총 세 가지 요소가 들어갈 것이기에 3등분을 해 둔다 #header { border: 1px solid red; height: 20%..
[HTML+CSS] Copang 반응형 헤더 만들기(검색창/로고/부가메뉴)오늘은 좌측에는 검색창, 중앙에는 로고, 우측에는 부가메뉴가 있는 헤더를 만들어보려 한다 우선 다음 글에서 기본적인 틀을 나눠둔 코드를 가져오도록 하겠다 0. 코드 준비 [HTML+CSS] 무작정 따라 만들어보기(쿠팡 footer만들기 1편) HTML, CSS를 그 누구보다 더 빠르고 정확하고 생동감 있고 실감 나게 체험을 해 보고 싶었던 나는 일단 유명한 브랜드의 웹 페이지를 직접 따라 만들면서 이게 이런 거구나 라는 감정을 느껴보고 time-map-installer.tistory.com 언제나 시작할 때 코드를 입력할 공간을 준비를 해 두는 것이 좋다 1. 헤더 나누기 총 세 가지 요소가 들어갈 것이기에 3등분을 해 둔다 #header { border: 1px solid red; height: 20%..
2022.11.21 -
주로 HTML과 CSS를 웹페이지를 만드는 데에 많이 쓰곤 한다 그리고 이 두 파일을 연동하는 방법은 생각보다 간단하다 1. main.html 생성 2. style.css 생성 3. 안녕하세요 5. style.css에 속성 아무거나 지정 후 작동되는 지 확인 body{ color: aqua; }
HTML + CSS 파일 연동하는 방법주로 HTML과 CSS를 웹페이지를 만드는 데에 많이 쓰곤 한다 그리고 이 두 파일을 연동하는 방법은 생각보다 간단하다 1. main.html 생성 2. style.css 생성 3. 안녕하세요 5. style.css에 속성 아무거나 지정 후 작동되는 지 확인 body{ color: aqua; }
2022.11.21 -
지난 글에서는 기본적인 layout을 비슷하게 만들어 보는 것까지 진행하였다 이번 글에서는 내용을 모두 채워넣는 것을 목표로 하겠다 1. 내용 집어넣기(input text footer_top) 우선, 가장 윗줄부터 텍스트로 되어있는 글을 전부 집어넣을 예정이다 지금까지 진행된 코드 보기 main.html input about header input about content 회사소개 | Investor Relations | 인재채용 | 입점/제휴문의 | 공지사항 | 고객의 소리 | 이용약관 | 개인정보 처리방침 | 쿠팡페이 이용약관 | 쿠팡페이 개인정보처리방침 | 신뢰관리센터 | 제휴마케팅 | 광고안내 Global Site Coupang Taiwan style.css #header{ height: 20%;..
[HTML+CSS] 무작정 따라 만들어보기(쿠팡 footer만들기 2편)지난 글에서는 기본적인 layout을 비슷하게 만들어 보는 것까지 진행하였다 이번 글에서는 내용을 모두 채워넣는 것을 목표로 하겠다 1. 내용 집어넣기(input text footer_top) 우선, 가장 윗줄부터 텍스트로 되어있는 글을 전부 집어넣을 예정이다 지금까지 진행된 코드 보기 main.html input about header input about content 회사소개 | Investor Relations | 인재채용 | 입점/제휴문의 | 공지사항 | 고객의 소리 | 이용약관 | 개인정보 처리방침 | 쿠팡페이 이용약관 | 쿠팡페이 개인정보처리방침 | 신뢰관리센터 | 제휴마케팅 | 광고안내 Global Site Coupang Taiwan style.css #header{ height: 20%;..
2022.11.20 -
HTML, CSS를 그 누구보다 더 빠르고 정확하고 생동감 있고 실감 나게 체험을 해 보고 싶었던 나는 일단 유명한 브랜드의 웹 페이지를 직접 따라 만들면서 이게 이런 거구나 라는 감정을 느껴보고 싶었다 그래서 갑자기 선택해본 실습 예정 작품은 아래와 같다 이 실습을 진행하면서 하게 될 작업들은 다음과 같다 모양 최대한 근접하게 만들기 링크들은 미 구현할 예정 반응형으로 만들어버릴 예정 1. 구역 나누기(devide whole page) 우선, 웹페이지를 구현하기 위해 형식상이지만 구역을 나누려고 한다 tag를 통해 header, content, footer로 나누어 구현하겠다 눈으로 대략 재었을 때 약 30% 정도면 되겠다 싶어서 다음과 같이 나눴다 header 20% content 50% footer..
[HTML+CSS] 무작정 따라 만들어보기(쿠팡 footer만들기 1편)HTML, CSS를 그 누구보다 더 빠르고 정확하고 생동감 있고 실감 나게 체험을 해 보고 싶었던 나는 일단 유명한 브랜드의 웹 페이지를 직접 따라 만들면서 이게 이런 거구나 라는 감정을 느껴보고 싶었다 그래서 갑자기 선택해본 실습 예정 작품은 아래와 같다 이 실습을 진행하면서 하게 될 작업들은 다음과 같다 모양 최대한 근접하게 만들기 링크들은 미 구현할 예정 반응형으로 만들어버릴 예정 1. 구역 나누기(devide whole page) 우선, 웹페이지를 구현하기 위해 형식상이지만 구역을 나누려고 한다 tag를 통해 header, content, footer로 나누어 구현하겠다 눈으로 대략 재었을 때 약 30% 정도면 되겠다 싶어서 다음과 같이 나눴다 header 20% content 50% footer..
2022.11.20 -
인터넷을 돌아다니며 웹 개발에 대한 정보를 얻던 중, 어떤 사이트에 들어가 잠깐 맛을 보았던 사이트이다 분명 경험 한 시간은 얼마 되지 않았지만 각잡고 여기서 학습하면 상당히 도움이 될 것 같다고 느낀 사이트이다 바로 Mdn MDN Web Docs The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps. developer.mozilla.org 1. Theme 가장 처음 눈에 띄었던 것은 테마이다 개발자의 덕목 중 하나는 블랙테마라고 했던가 장시간 개발 / 학습 시에 발생하는 눈의 피로를 줄여주는 그런 테..
[MDN] HTML, CSS, JavaScript 가이드 사이트인터넷을 돌아다니며 웹 개발에 대한 정보를 얻던 중, 어떤 사이트에 들어가 잠깐 맛을 보았던 사이트이다 분명 경험 한 시간은 얼마 되지 않았지만 각잡고 여기서 학습하면 상당히 도움이 될 것 같다고 느낀 사이트이다 바로 Mdn MDN Web Docs The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps. developer.mozilla.org 1. Theme 가장 처음 눈에 띄었던 것은 테마이다 개발자의 덕목 중 하나는 블랙테마라고 했던가 장시간 개발 / 학습 시에 발생하는 눈의 피로를 줄여주는 그런 테..
2022.10.27