퍼블리싱81 React에서 CSS 파일을 사용하는 두 가지 방법 _ about.css vs about.module.css 리액트 에서 컴포넌트마다 스타일을 입혀야 할 일이 많습니다.그때 사용하는 CSS 파일에 두 가지 방식이 있습니다. 일반 CSS (about.css)와 CSS 모듈 (about.module.css)입니다.두 방식의 차이와 언제 어떤 걸 써야 하는지 간단하게 정리해볼게요.1. 일반 CSS : about.css가장 기본적인 방식입니다..css 파일을 만들고 className="클래스명" 형태로 스타일을 적용합니다. About.jsximport './about.css';function About() { return About Me;} about.css.title { color: red;} 장점기존 CSS 방식에 익숙한 사람에게 편리함전역 스타일을 정의할 때 유용단점클래스명이 전역이기 때문에, 다른 컴포넌트.. 2025. 5. 26. [React] 리액트에서 스타일을 적용하는 두 가지 방법 리액트에서 스타일을 적용하는 방법은 크게 두 가지가 있습니다. JSX 내부에서 style 객체 사용하기 외부 CSS 파일을 만들어서 불러오기 //JSX 스타일 객체방식 //외부 CSS 파일과 className 1. JSX 내부에서 style 객체 사용하기style={{ ... }} 또는 style={styles.이름} → JSX 안에서 직접 스타일을 작성 변환한 스타일 객체const styles = { aboutSection: { padding: '2rem', backgroundColor: '#fefefe', border: '1px solid #ddd', borderRadius: '8px', marginTop: '2rem', }, heading: { color: .. 2025. 5. 23. [React] 기초, 셋팅 초기 파일명과 파일 역할 파일별 역할 설명 파일이름역할App.jsx리액트 앱의 메인 컴포넌트. 보통 이 파일에서 전체 레이아웃을 구성하며, 다른 컴포넌트들을 불러와 사용합니다.App.cssApp.jsx에서 사용하는 스타일이 들어가는 파일입니다. App 컴포넌트 전용 CSS로 생각하면 됩니다.index.css프로젝트의 전역 스타일을 정의합니다. 예: body, html, 기본 글꼴, margin/padding 초기화 등 전체에 적용되는 CSSmain.jsx리액트 앱의 진입점(Entry point) 입니다. App.jsx를 root DOM에 렌더링하는 역할을 하며, 가장 처음 실행되는 파일입니다.html 마크업과 비교 index.css에는 reset.css, 기본 글꼴, 공통 요소 마진 제거 등을 하면 좋아요.App.css는 컴포넌.. 2025. 5. 22. [React] html 과 리액트 비교해보기 Html 익숙하기에, 리액트를 빠르게 이해해 보고자 두개를 비교해 봤습니다. 리액트 문법과 HTML 문법의 차이리액트 문법과 전통적인 HTML 문법의 주요 차이점1. JSX란 무엇인가?리액트는 UI를 구성할 때 JSX라는 문법을 사용합니다.JSX는 JavaScript XML의 약자로, JavaScript 코드 안에서 HTML과 비슷한 코드를 작성할 수 있도록 해줍니다.즉, 리액트 문법은 기본적으로 JavaScript 코드 내에 HTML 구조를 작성하는 방식입니다. 2. 속성 이름의 차이HTML 속성JSX 속성 설명 HTML 속성JSX 속성 설명 classclassNameclass는 JS 예약어라 변경됨forhtmlFor라벨 연결 시 사용tabindextabIndex카멜케이스 표기법 사용onclickonC.. 2025. 5. 22. [React] 설치, 실행, 아이콘 설치, 터미널단축키 설치 터미널 명령어 npm create vite@latest # Vite 최신 버전으로 프로젝트 생성my-app # 생성할 폴더 이름-- --template react # 리액트 템플릿 사용 실행 명령어 cd my-app # 생성된 폴더로 이동npm install # 필요한 패키지 설치npm run dev # 개발 서버 실행 (http://localhost:5173)아이콘 설치 npm install react-icons터미널 단축 키 동작 Ctrl + C서버 종료 (코드에는 영향 없음)npm install새 라이브러리 설치npm run dev서버 재시작 2025. 5. 22. (html/css/js) 나의 웹 포폴 간편하게! 무료로 웹에 올리기! https://www.netlify.com/ Scale & Ship Faster with a Composable Web Architecture | NetlifyRealize the speed, agility and performance of a scalable, composable web architecture with Netlify. Explore the composable web platform now!www.netlify.com Netlify는 어떤 회사인가요?2014년에 설립된 미국 기반의 클라우드 호스팅 회사React, Vue, Next.js, 정적 사이트 등을 빠르고 쉽게 배포할 수 있도록 도와주는 플랫폼개발자와 디자이너들이 정적 웹사이트를 배포할 때 가장 많이 사용하는 서비스 중 하나예요.. 2025. 5. 21. [html,js,css] ai 클로드 활용, 플러그인 없이, 스와이프 슬라이드 만들기 슬라이드를 넣고 싶을때, 주로 플러그인을 활용하지만 종종, 간단한 슬라이드가 필요할때가 있습니다. 그래서 모바일에서 터치 슬라이드로 활용할 수 있는 슬라이드를 만들고자,클로드 ai를 활용해서 슬라이드를 제작해 봤습니다. 코드 생성은 클로드 https://claude.ai/ 를 활용했습니다. 클로드 ai 요청 명령어" html 과 css 만으로 모바일에서 좌우로 스와이프 되는 기능이 있는 슬라이드를 만드려고해. 오른쪽이나 왼쪽으로 스와이프 하면 다음이나 이전 페이지로 넘어가는거야. 각 페이지에는 정중안에는 h3의 텍스트가 위치해 있어. 페이지는 무한정으로 생산 가능하게" 1. html 첫번째 슬라이드 .. 2025. 3. 12. 리액트 네이티브, <br> 태그 줄바꿈 하기 리액트 네이티브에서는 HTML의 태그를 직접 사용할 수 없습니다.대신 다음과 같은 방법들로 줄바꿈을 구현할 수 있습니다: 개행 문자 사용 {`2024.06.21 13:00 \n ~ 2024.06.21 14:00`} 여러 Text 컴포넌트 사용 2024.06.21 13:00 {"\n"}~ 2024.06.21 14:00 줄바꿈이 필요한 부분을 분리 2024.06.21 13:00 {"\n"} ~ 2024.06.21 14:00 이 중 첫 번째나 두 번째 방법이 가장 간단하고 일반적으로 사용됩니다.\n은 줄바꿈 문자로, 텍스트를 새 줄로 나눕니다. 2025. 2. 4. [웹폰트 사용방법] 웹에 최적화된포맷 - woff2 웹사이트 성능을 최적화하는 방법: 가벼운 웹폰트 포맷 선택하기! 웹폰트 종류가 여러개 인데, 무엇을 선택 해야 할지 확실히 잘 모르는 경우가 있어요. 폰트 선택은 웹사이트 로딩 속도와 사용자 경험에 직접적인 영향을 미치기에 중요합니다! 예를들어 저는 pretendard 서체를 사용하려고 하는데, 홈페이지에서 제공하는 폰트의 포맷 종류가 아래와 같이 여러개 입니다. 출처 : https://cactus.tistory.com/306?category=1007051 폰트 포맷 종류.otf, .ttf: 고품질이지만 무겁고, 웹에서는 비효율적..woff, .woff2: 웹에 최적화된 경량 포맷. 특히 .woff2는 파일 크기가 작아 로딩 속도가 빠름..woff2 포맷의 이점파일 크기 작고, 압축률 높아 .. 2024. 8. 29. [CSS] 변수를 음수로 변환하는 방법 CSS 변수를 사용하면 여러 스타일 속성 값을 쉽게 재사용할 수 있어유지보수가 편리하고 코드의 가독성도 향상됩니다. 종종 CSS 변수 값을 음수로 변환해야 할 때가 있습니다. 예를 들어 아래 처럼 마진 값을 주었을 때, 위 아래 마진이 40px이 되어 버리죠.리액트나 next js 처럼 모듈이나 컴포넌트를 활용하는 경우, 마진 병합이 일어나지 않게 되어 해결 방법으로 같은 변수를음수로 적용하기로 했습니다. 1. CSS 변수 정의CSS 변수를 정의합니다. 공통 마진 20px 변수로 지정합니다. :root { --margin_20: 20px;} 2. calc() 함수를 사용하여 변수 값을 음수로 변환하기CSS에서 음수 값을 적용하려면 calc() 함수를 사용해야 합니다.calc() 함수는 CSS 변수.. 2024. 8. 2. [Javascript, css] 스크롤 내리면 카운팅 시작 되는 소스 안녕하세요! 카운팅 숫자의 업그레이드 버전을 알아보겠습니다. 우선 구현이 어떻게 되는지 결과 부터 보시죠!스크롤을 내려 주세요! Result Html Count number 사용자 명 방문자 명 대기시간 분 대기문서 건 JavaScript function animateValue(id, start, end, duration) { var range = end - start; .. 2024. 6. 25. [CSS]마우스 호버시 아이콘 모양 변경(사이드바 보기/감추기역할) 주로 사용된 csstransform:hover 1. html 2. CSS.arrow { z-index: 999; top: 50%; left: 0px; position: fixed; transform: translateX(100px) translateY(-50%) rotate(0deg) translateZ(0px); transition: transform .3s ease-out; cursor: pointer !important;}.arrow .icon-wrap { justify-content: center; align-items: center; width: 2rem; he.. 2024. 6. 19. [Javascript, css] 라이트모드/다크모드 설정 day night mode 요즘 사이트들은 대부분 낮/밤 모드가 있습니다.이 부분을 구현하는 방법은 여러가지가 있는데,저는 아래와 같은 방식으로 구현해 봤어요. 다크모드 설정 방법 1. 다크모드 버튼 클릭시 dark 클래스 추가 - 스크립트로 제어 2. 다크모드 버튼 아이콘 이미지는 백그라운드 이미지로 제어 - 클릭 시 css로 아이콘 변경 가능 3. root 속성으로 작성된 css를 활용 - 다크모드에서 일괄 수정 4. 아이콘 이미지의 경우(SVG) 반전 효과 사용 : css의 filter:invert(1) 속성 활용 위의 사항들을 순서로 하여 마크업과 CSS 제작을 진행해 봅니다. 최종 view 모습 (하단에서 확인) 라이트 모드 다크모드 HTML .. 2024. 6. 14. [jQuery]셀렉트박스+제이쿼리, 셀렉트 선택 시 내용 보여지게 셀렉트 박스에서 선택 시 해당 내용으로 이동하게 하는 제이쿼리 소스 입니다. 별도 페이지 생성이 필요 없으며 id 값으로 해당 내용을 감추거나 보여줍니다. 적용 이미지 위 디자인과 같이 책보는 느낌처럼 활용도 가능한 소스 입니다. 탭과 유사한 기능이라고 보시면 됩니다. HTML 1. Step1 : Lorem Ipsum is simply dummy text Chapter 1 : Lorem Ipsum is simply dummy text Chapter 2 : Select another text Chapter 3 : Selet third text box 1. Step1 : Lorem Ipsum is simply dummy text Chapter 1 : Lorem Ipsum is simply dummy text.. 2024. 2. 22. [jQuery] mouseenter , mouseleave 마우스 호버 효과 - 마우스 엔터 마우스 호버효과처럼 보이지만 조금 다른 mouseenter/mouseleave 효과 입니다. 마우스가 특정 요소 위에 들어오거나 벗어날 때만 반응하므로 드롭다운 버튼이나 툴팁 등의 UI에서 주로 사용됩니다. 주로 사용되는 부분 드롭다운 버튼 인풋 박스 HTML KR KR EN CN CSS #Lang > * { display: inline-block; vertical-align: middle; } #Lang .lang_list { position: relative; width: 50px; text-align: center; font-size: 14px; } #Lang .lang_list > a { display: block; width: 100%; height: 40px; line-height:2.5; f.. 2024. 1. 31. [javaScript] 클릭 시 클래스 명 변경 되는 자바스크립트 클릭시 자동으로 아이콘의 클래스 명이 변경되게 하는 소스 입니다. 아이디 저장 과 같은 기능뿐 아니라, 클래스 명이 토글 형태로 변경 되어야 하는 부분에 사용할때 가능 합니다. *방법 : 폰트 아이콘의 클래스명을 제어해서 아이콘 모양을 변경해줍니다! html 아이디 저장 css .login_save{ margin:3em } .login_save i{ font-size: 26px; padding-right:3px; cursor:pointer; font-weight:400; color:#999; letter-spacing: -1px; } .login_save i.xi-check-circle{ color:#000 } JavaScript const logo = document.getElementById("sta.. 2023. 11. 29. [js/css] 스크롤바 커스텀 디자인 mCustomScrollba, 스타일 플러그인 mCustomScrollbar는 사용이 간편해서 많이 사용되는 커스텀 스크롤바 중 하나 입니다. 사용하다 보니 자꾸 손이가는 플러그인중 하나라서 사용법과, 자료를 함께 공유하고자 합니다.🙆 특징 다양한 디자인이 있다. 컨텐츠에 가로값에 영향을 주지 않는다. 가로스크롤 생성이 가능하다 사용방법 css / js 소스를 불러온다 사용할 div에 클래스를 추가해준다 스크립트를 작성해 준다 1. 소스불러오기 2. class 추가 하기 ............. 3. 스크립트 작성 이 스크롤바의 최대 장점인 다양한 디자인 적용입니다. 아래 사이트에 들어가시면 여러가지 디자인을 확인할 수 있습니다. https://manos.malihu.gr/repository/custom-scrollbar/demo/examples/s.. 2023. 11. 24. [css]구글 아이콘 웹폰트 사용방법 저는 웹 퍼블리싱을 할때 주로 웹폰트아이콘을 사용합니다. 아이콘 이미지 보다도 사용성이 무척 좋기 때문인데요. 사용방법 구글 웹아이콘(바로가기 url) 로 들어가서 사용하고자 하는 아이콘 선택 fillter 옵션에서 - fill / weight / 등 옵션 선택하기 경로 및 복사 하기 **별도로 저장해서 이미지로도 사용이 가능합니다. 1. 아이콘 선택 (원하는 스타일로 맞춤) 2. 스타일 링크 복사 3. 스타일 css 복사 4. html로 적용 home check_box toggle_off download_for_offline result 라인스타일(line icon) 꽉찬스타일(fill) https://fonts.google.com/icons?icon.set=Material+Symbols 다음엔 폰트 .. 2023. 11. 23. [css] 말줄임 표시 방법 , 1줄 or 2줄 일때 말줄임표는 정말 자주 쓰입니다. 스크립트로 처리하기도 하지만 Css로도 처리가 가능합니다. 사용된 css - white-space:nowrap; 자동줄바꿈방지 - overflow-x:hidden; 넘어가는 것 안보이게 - text-overflow:ellipsis; 넘어서 안보이는 텍스트 ... 표시 *주의 : width값 지정 필요 html 텍스트가 길어지면 말줄임표가 자동으로 생깁니다. 텍스트가 길어지면 말줄임표가 자동으로 생깁니다.텍스트가 길어지면 말줄임표가 자동으로 생깁니다.텍스트가 길어지면 말줄임표가 자동으로 생깁니다. css body{ color:#555; } .wrap{ display: flex; align-items: center; height: 200px; justify-content: c.. 2023. 11. 22. [css] white-space 여백 공백 처리 속성(pre, pre-wrap,pre-line) , br 태그 먹을까? html에 내용을 넣을때, white-space 속성을 사용하는 경우가 있습니다. 여백과 공백을 다루는 white-sapce 속성에 대해서 조금더 자세히 알아봤어요! 줄바꿈 부분이 각 속성마다 다르기에 문득,, br 태그를 통해 줄바꿈이 가능한지 궁금 했습니다. 공백과 들여쓰기 줄바꿈 normal 공백 여러개가 있어도 1개만 적용 자동 줄바꿈 nowrap 공백 여러개가 있어도 1개만 적용 줄바꿈 없음 pre 공백 있는 그대로 표시 줄바꿈 없음 pre-wrap 공백 있는 그대로 표시 자동 줄바꿈 pre-line 공백 여러개가 있어도 1개만 적용 자동 줄바꿈 break-spaces 공백 있는 그대로 표시 자동 줄바꿈 pre / pre-wrap / pre-line 속성을 각각 비교해 보기로 했습니다. - 같은.. 2023. 11. 21. [Css] 배경 blur 버튼 만들기 (애플 공식 홈 st. 글래스모피즘버튼 ) 버튼 뒤쪽에 blur 효과가 적용되어 버튼을 좀더 도드라져 보이게 합니다. 공식 애플 웹사이트를 방문했다가 위와같은 스타일의 버튼이 적용되어 있는 것을 보고 만들어 봤어요! 사실 이 스타일은 글래스모피즘 이라고 불립니다. 사용되는 css backdrop-filter 요소 뒤 영역에 흐림이나 색상 시프트 등 그래픽 효과를 적용할 수 있는 속성입니다. 요소 "뒤"에 적용하기 때문에, 효과를 확인하려면 요소나 요소의 배경을 적어도 반투명하게는 설정해야 합니다. 적용 방법 backdrop-filter: blur(2px); 버튼으로 만들기 결과 css .btn_blur { backdrop-filter: blur(4px); background-color: rgb(66 66 69/70%); border-radius:.. 2023. 11. 13. 모바일에서 input 태그, number 숫자 자판(키패드) - 안드로이드/아이폰 모바일 퍼블리싱 - 인풋 타입에서 숫자 자판 나오게 하기 input type 으로 숫자, number을 지정할 때 일반 자판이 아닌 숫자 자판을 나오게 하려면 아래와 같이 지정해 주면 됩니다. 안드로이드 아이폰, IOS 위처럼 적게 입력하면 Android OR IOS 모두 숫자키패드가 나옵니다. 참고 : https://stackoverflow.com/questions/25425181/iphone-ios-presenting-html-5-keyboard-for-postal-codes 2023. 10. 16. CSS 애니메이션 타이밍 효과 비교 (linear, ease, ease-in, ease-in-out) 주 사용 요소 animation-timing-function, 대표적인 설정값 linear : 일정한 속도로 진행 ease : 천천히 시작되고 속도가 줄어들면서 끝난 ease-in : 천천히 시작 ease-out : 빠르게 시작 ease-in-out: 빠르게 시작되어 평균속도 유지 Result 각 버튼을 클릭하면 속도확인 가능합니다. Html 기본값 linear ease ease-in ease-out ease-in-out Css div{ margin:50px auto; display:block; vertical-align: top; width:100px; height:100px; background:#202228; border-radius:6px; text-align:center; line-height:.. 2023. 8. 2. [Css 활용] 말풍선 위 아래로 움직이는 효과, 키프레임 주 사용 CSS - animation - keyframe + animation-timing-function + flex - 정가운데 배치 Html Css .wrap { height:100vh; display:flex; align-items:center; justify-content:center; } .moving { animation: move 0.7s ease-in 0s infinite alternate; margin-top: 0; width:80px } @keyframes move { 0% {margin-top: 0px;} 100% {margin-top: 10px;} } Result *result 클릭해 주세요. 2023. 8. 1. [웹 디자인/퍼블리싱] 디자인시 PC 화면 사이즈 정하기(+미디어쿼리 분기점) 웹디자인/ 퍼블리싱 디자인 할 때 화면 크기를 어느정도로 잡아야 할지 정확히 잘 모를때가 있다. 가로값 기본은 1980이라면 높이값의 경우 모니터 사이즈인 1080이 아닌 약 1053 으로 해야 한다(상단URL 부분등 제외) 디자인 작업할때 자주 쓰는 해상도와 높이값 1. 1920 x 1080일명 FHD(Full High Definition)라고 불리는 해상도24인치 데스크탑, 보편적인 모니터 크기의 해상도XD 나 figma 에서 작업시 뷰포트는 1053px💡 브라우저의 상단 부분의 URL 과, 북마크 등의 높이값을 빼고 작업을 한다. viewport는 약, 1053px 정도로 설정 2. 1536 x 864FHD 노트북의 해상도1920 x 1080에 125% 배율을 적용한 해상도노트북 폰트 사이즈 기본 .. 2023. 7. 6. css background 속성 / 단축 속성 / 주의점 css 상에서 백그라운드로 이미지를 넣을 때 주로 꽉찬 배경 이미지를 넣고자 할때 쓰인다. 자주쓰지만 또 자주 헷갈리는 속성중에 하나. 속성명이 길기 때문에 단축 속성으로 적어 주는게 좋다. 특히 단축 속성엔 유의해야할 몇가지를 잘 알아두면 좋을 듯 하다! 1. css background 속성 종류 background-color background-image background-position background-size background-repeat background-origin background-clip background-attachment 2. Css 단축 속성 background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-cli.. 2023. 6. 26. 모달팝업, 모달창, 이미지 슬라이드 제이쿼리 플러그인 - 무료(MIT) Super Box - 단순한 모달 창 기능 - MIT 라이센스 https://bpier.re/projects/jquery_superbox/ jQuery SuperBox! The english version of this page has been generously translated from french by Anna Mondeteguy. jQuery Superbox! is a script which allows you display windows with the lightbox effect. This script is a plugin for jQuery (1.3.x). The minified version of Supe bpier.re ColorBox - 영상팝업 가능 - iframe 팝업 가능 - 슬.. 2023. 6. 16. [CSS 활용] css로 블러 효과(포토샵 blur 효과 주기) HTLM Whereas disregard and contempt for human rights have resulted Go ahead, resize me. CSS @import url('https://fonts.googleapis.com/css2?family=Cinzel&family=Permanent+Marker&display=swap'); body { background: url("https://images.unsplash.com/photo-1593418270780-4c6e6b7eb5af?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1528&q=80") no-repeat ce.. 2023. 6. 15. 크리스마스, 눈 내리는 효과 만들기 (자바스크립트) 자바스크립트로 자연스럽게 내리는 눈 효과 만들기 Html css body,div{ margin:0; padding: 0; } .snow{ width:100%; height: 100vh; background-image: url(https://images.unsplash.com/photo-1491002052546-bf38f186af56?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2200&q=80); background-size:cover; } JS function Snowy() { function t() { window.requestAnimationFrame(t), $.clearRect(0, 0.. 2022. 12. 22. CSS 이미지사이즈 맞추기 - object-fit & background 비교 CSS를 이용해 아래처럼 이미지를 가득 채워 넣는 방법으로 object-fit 과 background-size를 활용하는데 결과는 거의 유사하다 코드의 간결함과 호환성 부분을 체크한 뒤 활용 하면 될 듯. object-fit 장점 : 코드가 간편, 이미지나 비디오 적용 가능 단점 : IE 미지원 html object-fit: fill object-fit:contain object-fit: cover css .fill { object-fit: fill; } .contain { object-fit: contain; } .cover { object-fit: cover; } background-size 고정된 이미지라면 css 속성에서 background-imag 에다 넣어주고 서버에서 받아올 경우 아래처럼 이.. 2022. 12. 21. 이전 1 2 3 다음 728x90 반응형
