• 

  [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는 컴포넌.. 댓글 0 2025.05.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.. 댓글 1 2025.05.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서버 재시작 댓글 0 2025.05.22

• 

  [피그마]와이어 프레임(wire frame) 제작, 유용한 템플릿 추천 피그마로 와이어 프레임 제작 할 때 유용한 템플릿을 몇개 추천 드립니다. 피그마 템플릿 검색 방법 https://www.figma.com/community 해당 부분에 들어가서 wire frame 으로 검색하면 다양한 템플릿이 나옵니다.  검색하면 다양한 템플릿이 나오는데요, 이중 유료도 있고, 플러그인을 활용하는 것도 있습니다.요즘 템플릿도 다 디자인이 잘 되어 나와서, 본인 디자인에 맞는 스타일을 골라서 쓰면 되는데요. 저는 몇가지 기준을 잡고 템플릿을 골랐습니다ui가 명확히 드러날 수 있는 디자인(강조요소 명확)너무 디테일 하지 않은 템플릿종종, 기획단계에서 지나치게 디테일 해지는 경우가 있습니다.  디자인의 자유도를 방해할 수 있기 때문에 적당히(?) 디테일하고 심플한 디자인을 찾다가 발견한 템플.. 댓글 1 2024.06.17

• 

  [웹 디자인/퍼블리싱] 디자인시 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% 배율을 적용한 해상도노트북 폰트 사이즈 기본 .. 댓글 0 2023.07.06

• 

  일러스트 활용 - 사진 이미지를 벡터(일러스트로) 바꾸기 + 색상 보정 사진 일러로 바꾸기 사진 이미지(jpb, png)등을 벡터(ai)로 바꿔야 하는 때가 종종 있다. 출력을 해야 하거나, 고해상도의 이미지를 원할때가 있기 때문에. 이미지 확대시 벡터 확대시 벡터 색상 보정 ** 일러에서도, 디테일하게 색상 편집과 보정이 가능하므로, 포토샵까지 가서 작업할 필요가 없다! 이미지 벡터로 변경 하기 1. 이미지 불러오기 2. 이미지 포함 시키기 * 포함을 눌러주면 X 자 모양이 사라짐 ( 이걸 안누르면 나중에 이미지가 안불러와 짐- 현재는 경로만 갖고온 상태 ) 3. 이미지 추적 - 충실도가 높은 사진 이미지 벡터화 진행 중 **색이 많은 이미지나, 배경이미지 같은 것으로 하면 너무 느려 지므로, 컴퓨터가 계산하는데 너무 오래 걸리므로 가급적 작은 이미지등에만 사용 하는게 좋.. 댓글 0 2022.03.20