분류 전체보기171 [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. [AI활용]uiux, html&css 코딩 한번에 끝 클로드 활용, 웹사이트 코딩하기 개발 코드 잘 만들어 주기로 소문난 클로드를 활용해서 html css로 구성된 웹사이트를 만들어 보겠습니다. 결과물 먼저 보면 아래와 같아요. 생각보다. 그럴듯 하게 나와서 놀랐습니다... 심지어 반응형 까지 지원합니다! AI 프롬프트 명령어 이전 글에서 Chat GPT를 통해 얻는 소스를 그대로 가져가서 입력했어요. 이전글 -https://lionbum.tistory.com/266 웹사이트를 디자인 해줘. 빵집이고, 타이틀은 오늘도 베이글 이야.(bagel for today)특징 - 심플한 레이아웃 –직관적인 구성으로 가독성 강화- 따뜻한 색감 – 브랜드 무드보드에 맞춘 컬러 적용- 고퀄리티 이미지 – 베이글과 매장의 따뜻한 분위기 전달- 깔끔한 폰트 – 가독성이 .. 2025. 3. 20. [AI브랜딩/디자인] 빵집 브랜딩과 마케팅 AI로 브랜딩? 빵집도 가능할까?빵순이이자, 베이글 애호가로서 베이글 가게를 창업하는 것을 AI와 함께 시도해 보려고 합니다.아마도 먼 훗날 언젠가 진짜 열게 될지도 모를 베이글 가게.AI를 활용해서 브랜딩을 해보고 사이트 구축 까지 해보려고 합니다.브랜드명 정하기 베이글을 전문으로 파는 빵집을 열려고 해. 브랜드명을 추천해줘 따뜻하고 감성적인 네이밍오늘도 베이글 – "오늘도 좋은 하루, 오늘도 베이글!" 기분 좋은 시작을 알리는 느낌굿모닝 베이글 – 아침을 깨우는 따뜻한 빵집베이글하우스 – 편안한 동네 사랑방 같은 느낌빵-글빵-글 – 발음도 귀엽고, 빵이 부풀어 오르는 모습 같기도 한 이름둥글둥글 베이글 – 친근한 감성의 네이밍트렌디하고 힙한 네이밍BAGLE & CO. – 심플하면서도 세련된 BEIG.. 2025. 3. 18. [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. [피그마] 프레임을 늘리면 콘텐츠가 왜곡 및 변형 된다면? 한 방에 해결하는 방법! 피그마(Figma)를 사용하다 보면 프레임 크기를 조정했을 때 콘텐츠가 이상하게 늘어나거나 비율이 틀어지는 경험을 해본 적 있나요? 특히 벡터 파일이나 그룹화된 요소를 다룰 때 이런 문제가 자주 발생하곤 합니다. 저도 이 문제로 한참을 헤맸지만, 사실 해결 방법은 아주 간단했습니다. 1. 왜 이런 일이 생길까? 문제의 핵심은 Constraints(제약 조건) 설정에 있습니다. 피그마는 각 요소가 부모 프레임에 대해 어떻게 반응할지를 결정하는 Constraints 옵션을 제공합니다. 기본적으로 "Scale"로 설정된 경우 프레임 크기를 조정하면 내부 콘텐츠도 비율에 따라 늘어나거나 줄어들게 됩니다. 2. 문제 상황 예시프레임 크기를 늘렸더니 벡터 아이콘이 늘어나서 뭉개짐.텍스트 박스가 프레임과 함께 비율이.. 2025. 1. 13. [포토샵활용] 레이어 마스크 바로가기키 설정으로 작업 속도 높이는 법 이렇게 귀여운 아이콘이 있습니다.하지만 배경이 흰색이라 사용하기가 애매 합니다. 포토샵에서 레이어 마스크를 사용 하면 손쉽게 투명 배경을 만들 수 있습니다! 근데 이런 아이콘이 100개. 흰색 배경을 제거 해야 한다면? 포토샵 바로가기키 설정으로 작업 속도를 높일 수 있습니다. 포토샵 레이어 마스크란?레이어 마스크는 이미지 수정 시 특정 부분을 숨기거나 나타낼 수 있는 도구입니다.디자인 작업에서 자주 사용됩니다.흰색 배경 없애기 1. 매직 툴로 흰영역 선택 흰색 배경 없애기 2. 선택 영역 확대(옵션) 선택 영역에 이런 부분이 없다면 안하셔도 됩니다. 아래처럼 픽셀이 애매한 부분을 저는 덜어내겠습니다. 확인을 누르면 아래 처럼 2픽셀 안으로 들어간 것을 확인 할 수 있습니다. 흰색 배경 없애기 .. 2024. 12. 17. [why] 글래스모피즘(Glassmorphism)이 세련된 느낌을 주는 이유. 글래스모피즘은 최신 디자인 트렌드를 반영하는 스타일로,이미지의 분위기를 더 세련되게 만들어 줍니다. 글래스모피즘(Glassmorphism)이 모던하고 세련된 느낌을 주는 이유는 다음과 같은 디자인 특징들에 기반하고 있습니다: 투명성과 흐림 효과 (Frosted Glass Effect)글래스모피즘의 핵심은 반투명한 배경과 흐릿한 효과입니다.이는 마치 유리나 Frosted Glass처럼 보이는 효과로, 배경이 자연스럽게 흐려지면서 콘텐츠가 강조됩니다.이런 효과는 미니멀하고 세련된 느낌을 주기 때문에 복잡한 디자인 요소들을 단순화하고, 그 자체로도 아름다워 보입니다. 입체적인 느낌 (Depth and Layers)글래스모피즘은 시각적으로 깊이감을 만들어 줍니다.반투명한 레이어들이 배경을 비추고 있는 형.. 2024. 11. 29. 아이러브 이미지- 이미지 압축 사이트 이미지 압축 사이트 웹 작업을 하다보면 꼭 필요한 작업중의 하나가 바로 이미지 최적화 입니다.포토샵으로 줄여도 한계가 있고, 특히 png (투명 이미지)의 경우 이미지 파일을 줄이는게 쉽지 않은데이럴때 이런 사이트의 도움을 받으면 유용 합니다!. 테스트로 2.48MB 의 무시무시한 용량의 이미지가 있습니다.요즘은 용량이 절반이상 줄었는데,가장 중요한건 퀄리티 이겠죠. 용량 줄이기 전 사진 용량 : 2.48 용량 축소 후 사진 용량 : 964kb 육안으로 보기에 별 차이가 없어 보입니다! 알아두면 유용한 사이트 입니다. 사진 출처 - unsplash https://unsplash.com/ko/%EC%82%AC%EC%A7%84/%EC%B9%B4%EB%A9%94%EB%9D%BC%EC%9.. 2024. 11. 25. 서울아트북페어 2024 Seoul Art Book Fair_북서울미술관 2022년 북페어 방문 후 두번째! 지난 주말, 기대하던 서울 아트 북페어 2024(Seoul Art Book Fair 2024)에 다녀왔습니다.이번 북페어는 서울 중심부의 세련된 공간에서 열려, 다양한 독립 출판물과 아트 북, 그리고 창작자들을 만날 수 있는 귀한 시간이었어요. ㅎㅎ 나오는길에 마주한 토이 아트도 흥미로웠습니다! ㅎㅎㅎ 부스 배치가 깔끔하게 정리되어 있어서 돌아다니기 편했어요.각 부스마다 작품의 개성이 뚜렷했고, 방문객이 책을 편히 둘러볼 수 있는 공간이 마련된 점이 좋았습니다.전시장의 분위기 역시 창의적인 에너지가 넘쳐서 영감을 받기 좋은 환경이었어요. 다만 사람이 너무 많아서 ㅠㅠ 천천히 구경하기는 쉽지 않았어요!그래도 다양한 아이디어와 창의력을 엿볼 수 있었떤 전시였습니다! 2024. 11. 24. 아무튼 클래식 요즘 종종 찾아 읽고 있는 아무튼 시리즈. 아무튼, 클래식“그 속의 작은 길들을 천천히 걸으면서 내가 겪은 순간들을 꽤 소중히 여겨왔다”음악 기자로 일하면서 가장 즐거웠던 건 역시 예술 가들을 만나는 일이었다. 녹음기를 들이밀면서 자, 저는 당신 이야기를 글로 써서 세상에 널리 전할 겁니다 하는 기자 앞에서 말을 고르지 않는 사람은 없다. 전부라고는 할 수 없어도 일하면서 만난 예술가 대부분이 자신의 삶과 일에 대한 곧은 태도를 분명 하게 전달할 줄 알았다. 조리 있게 논리적으로 말하는 데는 서툴더라도 사회 속에서 살아가는 예술가가 지닐 만한 삶의 뭉툭한 부분과 뾰족한 부분을 구분 하고 인정할 줄 알았다. 자신감과 자만, 겸손함과 졸렬함을 헷갈리지 않는 성숙한 사람들이었다.음악은 실체가 없다. 그림이나 .. 2024. 11. 23. 보편의 단어 - 이기주 불과 물그렇다면 사랑이라는 보편적인 감정은 어느 쪽에 속한다 고 봐야 할까? 물인가, 불인가. 아니면 물도 불도 아닌그 무엇인가.사랑은 물의 감정인 동시에 불의 감정이 아닌가 하는 생 각이 든다. 신기하게도 사랑은 때론 우리의 마음을 한없 이 부드럽고 섬세하게 만들면서도, 때론 더없이 뜨겁고 단순하게 만들기도 하지 않나.단언하건대 사랑은 무엇이든 쌓을 수 있고 무엇이든 무 너뜨릴 수 있는 유일한 감정이다.운동전의 양면이 시간상의 차이를 두지 않고 같은 때에 눈앞에 펼쳐질 순 없지 않나. 그러나 현실에선 행운과 불운이 동시에 다가오는 순간이 얼마든지 있다. 좋은 운수에 그렇지 않은 요소가 묻어 있거나 불행 속에 행복의 씨앗이 심겨 있는 경우는 그야말로 비일비재하다.행운과 불운은 대립적인 것이 아니라 삶의 .. 2024. 11. 22. 빨강 머리 앤이 하는 말. 앞으로 알아낼 것이 많다는 건 참 좋은 일 같아요. 만약 이것저것 다 알고 있다면 무슨 재미가 있겠어요! 그럼 상상할 일도 없잖아요!”꿈을 이룬 다는 것의 진짜 의미, 꿈과 현실 그중 무엇을 선택할 것인가. .... 우리가 무엇인가를 선택할 때 망설이는 이유는 그 결정으로 지불해야 하는 몫이 있기 때문이다. 하지만 우리는 살면서 수업이 선택해야 한다. 그 선택의 결과가 지금의 우리이며, 그것은 누구도 대신할 수 없는 내 몫이다.꼭 꿈을 직업으로만 이뤄야 하는 걸까? 사람들은 말한다. ‘가슴뛰는 일을 해라!’ 멋진 말이다. 하지만 누구나 가슴 뛰는 일을 직업으로 가질 수 있는 걸까? 자신의 꿈을 직업으로 이룬 사람은 많지 않다. 꿈을 직업으로 이루었다고 꼭 행복해지는 것도 아니다...... 직업은 적어도 .. 2024. 11. 21. 튜브. 손원평 장편소설 아몬드 보다 먼저 본 튜브. 이 책을 보고 아몬드를 챙겨봤다. 뻔하다고 생각한 결말을 가뿐하게 넘겨준 작가의 재치. 책갈피 그죠, 해보는 거죠. 그리고 그다음에요? 있잖아, 진석아. 난 그동안 뭘 할 때마다 늘 목표를 생각했거든. 근데 그 목표들이 순수하지가 않았어. A는 B를 위한 행동이고 B는 C를 위한 행동이었을 뿐이었으니까. 그랬거든? 근데 그게 다 부질없게 느껴지더라, 최종 목표가 무너지면 중간에 했던 A부터 Z가 전부 무의미해 지더라고. 그래서 이제 그렇게 거창한 목표 같은 걸 안 세우기로 했어. 행동에 목표를 없애는 거지. 행동 자체가 목표인 거야. 미래를 생각 안 한다는 거예요? 언젠가는 다시 생각할지도 모르지. 하지만 일단은 아니야. 네 말대로 지금은 미래 같은 거 생각 안 해. 충분히 .. 2024. 11. 20. 침묵이라는 무기 우리는 말의 홍수에서 살고 있다. “잘 알면 세 마디로 족하다. 잘 모르니 서른 마디가 필요한 법이다.”라는 말이 있다. “입을 다물 수가 없어서 말을 할 때가 많다.” - 암브로시우스, 교회학자 세상에는 쓸데없는 말이 넘쳐나고 있다. 방송마다 똑같은 뉴스를 반복하고, 스마트폰은 쉬지 않고 울려대며, 버스에서는 쉴 새 없이 라디오가 돌아간다. 웅변은 은이요, 침묵은 금이다”라는 격언이 있다. 입 밖으로 내지 않은 것이 입 밖으로 낸 것보다 더 많은 뜻을 전달할 수 있다. 입 밖으로 내지 않은 것이 입 밖으로 낸 것보다 더 많은 뜻을 전달할 수 있음을 이해하지 못한다. 우리는 감정이 상하면 즉시, 반사적으로, 생각 없이 대꾸하고, 언쟁은 점점 심해진다. “말이 많은 사람은 할 말이 적은 겁니다. 제가 진짜.. 2024. 11. 19. 셀렉트 - 단 하나의 선택지. 단하나의 선택지가 되어라.타이포 그래피는 모든 디자인의 시작입니다. 디자인의 기본 언어에는 크게 세 가지가 있는데 바로 타이포그래피와 컬러, 그리고 매터리얼 입니다.자신만의 감각을 키우는 효과적인 방법멋진 카페나 갤러리, 편집숍에 갈때 그냥 구경만 하고 오는 것이 아니라 BGM, 조명, 메뉴판, 집기레이아웃부터 마감재 하나하나 섬세하게 살펴보는 습관을 가지는 것입니다.가장 개인적인 것이 가장 트렌디한 것이다.트렌드는 싫지만 트렌디하고 싶어.트렌드에서 남보다 뒤처지고 소외되는 것을 두려워하는 현상을 포모증후군 이라고 합니다. 포모는 fear of missing out의 머리글자 입니다.트렌드란 남과 다르게 보이고 싶은'고유성의 욕망'과 대세를 따르고 싶은'추종의 욕망' 사이에 있다.Designing is .. 2024. 11. 18. 그림이 들리고 음악이 보이는 순간. 노엘라 난 '사랑'이 좋다. 사랑은 행복, 희열, 환희, 애틋함, 애절함, 외로움, 그리움, 화, 질투… 많은 감정을 내게 선사해준다. 내 안의 이런 감정들은 심장이 뛰는 소리와 함께 내가 살아 있음을 느끼게 한다. 사랑에는 많은 모습이 있다. 단 한 번에 마음을 사로잡는 사랑이 있는가 하면 두세 번을 보아도 좀처럼 알 수 없는 사랑도 있다. 알수록 빠져드는 사랑이 있는가 하면 잘 알지 못해도 끌리는 사랑이 있다. 첫눈에 사랑임을 알아차릴 수 있는가 하면 나도 모르는 새 사랑으로 변하기도 한다. 그림과 음악도 이런 다양한 사랑의 모습과 감정으로 내게 다가왔다. 우리는 살아가면서 수많은 명화와 음악을 접한다. 어떤 작품은 단번에 나의 눈과 마음을 사로잡는가 하면 어떤 작품은 머리로도, 가슴으로도 느끼기 어려울 때.. 2024. 11. 17. 마음의 수수께끼를 풀어드립니다. "합리적 결정을 하려면, 당신이 태생적으로 비합리적 존재라는 것부터 인정하라." 댄 애리얼리Dan Ariely 사람은 자신이 소유한 물건에 더 큰 가치를 부여한다사람은 동일한 물건이더라도 일단 무언가를 소유하게 되면 그 것을 갖기 전보다 더 가치 있는 것으로 평가해서 떠나보내고 싶어 하지 않는다. 미국 행동경제학의 일인자이자 2017년 노 벨 경제학상을 받은 리처드 탈러Richard Thaler는 이렇게 사람들이 자신의 소유물을 과대평가하는 현상을 '소유 효과 endowment effecti라고 불렀다. 한계는 몸이 아니라 마음이 정한다평소에 쉽게 내뱉는 "이제 예전 같지 않아, "이제 나이가 들어 서라는 말이 우리를 더 늙게 만드는지도 모른다. 혹시 이런 말 올 입버릇처럼 한다면 우선 이 말을 쓰지 말.. 2024. 11. 15. 챗 GPT 에게 퍼블리싱 시켜보기(말풍선 css html) AI에게 문의하세요! 챗 지피티에게 이 이미지를 보여주고 html 과 Css 로 구현해 달라고 했을 때의 결과물?!정말이지 GPT 덕에 빨라지는 퍼블리싱... ㅎㄷㄷ 2024. 11. 14. 디지털 정부서비스 UI/UX 가이드라인(코드 및 가이드 라인 제공) 디지털 정부서비스의 UI/UX 가이드라인 사이트입니다.이 사이트는 공공서비스를 디지털화하는 데 있어 필수적인 가이드라인을 명확하게 제시하고 있어 매우 유용합니다. https://uiux.egovframe.go.kr/guide/index.html KRDS디지털 정부서비스 UI/UX 가이드라인 누구나 쉽고 편리하게 이용할 수 있도록 사용자 중심의 공공 웹·앱을 구축, 운영 및 관리 하도록 지원합니다uiux.egovframe.go.kr 1. 명확한 가이드라인사이트에서는 기본적으로 지켜야 할 UI/UX 가이드라인이 명확하게 정리되어 있어, 사용자들이 쉽게 이해하고 적용할 수 있습니다. 2. 코드 제공사이트에서는 실제 코드를 확인할 수 있는 기능을 제공하여, 개발자들이 가이드라인을 실질적으로 구현할 수 있도.. 2024. 10. 28. [웹폰트 사용방법] 웹에 최적화된포맷 - 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. 터미널이란? , 주요 사용 명령어 터미널이란? 터미널은 컴퓨터에서 사용자와 컴퓨터 시스템 간에 상호작용할 수 있는 인터페이스입니다. 주로 텍스트 명령어를 입력하여 파일 관리, 프로그램 실행, 시스템 설정 등을 수행할 수 있습니다. 터미널은 다양한 운영 체제에서 사용되며, Unix 계열 시스템(예: macOS, Linux)에서 특히 많이 사용됩니다. Windows에서는 명령 프롬프트(Command Prompt)와 PowerShell이 유사한 기능을 제공합니다. 터미널의 주요 기능과 사용 방법디렉토리 탐색과 파일 관리현재 디렉토리 확인 : `pwd` 명령어를 사용하여 현재 작업 중인 디렉토리의 경로를 확인할 수 있습니다.pwd 디렉토리 변경: `cd` 명령어를 사용하여 다른 디렉토리로 이동할 수 있습니다.cd path/to/director.. 2024. 7. 29. [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. 자바스크립트 가이드 - 이론, 기초 공부 사이트 https://wguide.co.kr/js-variable/ W.GUIDE(더블유가이드)실무자들을 위한 가이드 및 팁 공유 커뮤니티wguide.co.kr 말끔하게 정리가 잘 되어 있습니다.자바스크립트 기초 공부 하기에 좋은 사이트 입니다. 2024. 6. 18. 이전 1 2 3 4 ··· 6 다음 728x90 반응형
