피그마에 파일 불러오기 1. 파일 불러오기 (홈화면->import).fig .sketch .pdf*.pdf는 figzam으로만 불러올 수 있음 2. 오브젝트 불러오기 (복붙 or 도형툴->place image/video)비트맵: .png .jpg .gif벡터: svg, path동영상: .mp4 .mov .webm 웹디자인/피그마 2024.12.22
미러링 하는 방법 3가지 1. 브라우저에서 미러링하기figma.com/mirror 2. 모바일 앱에서 확인figma 앱 -> miiror 3. 피그마 프리뷰로 보기피그마 -> 재생버튼 -> preview 웹디자인/피그마 2024.12.22
[책 리뷰] 트렌드 코리아 2024 총점 ⭐️ ⭐️ ⭐️ ⭐️ (4점) ✏️ 이런 분들께 추천해요!2024년 전체적인 트렌드를 알고 싶은 분전문가들이 분석한 우리나라 트렌드를 통해 사업이나 자기 발전 방향성을 계획하고 싶은 분 ✏️ 감상평트렌드코리아 시리즈는 2009부터 있다고 하지만 저는 2024를 처음 접했는데요!트렌드에 별로 관심도 없고 제가 뭐 사업을 하는 사람도 아니었기에 처음에는 이 책을 굳이 읽어야 하나?라는 생각이 들었어요.요즘엔 뉴스도 유튜브에서 재밌게 접할 수 있잖아요.우리나라 소식은 유튜브만 켜면 금방 알 수 있는데 나도 이미 다 알고 있는 뻔하디 뻔한 말만 적혀 있는거 아닌가 했어요.그런데 이 책을 읽으면서 약간 신세계를 경험하는 듯한 느낌을 받았어요.평소 뉴스를 볼 때는 음.. 그렇구나 성수동 핫하다고? 나도 담주.. 도서 리뷰 2024.12.19
[맛있는 디자인 스터디 14기] 1~6주차 학습 후기 스터디카페 링크 ↓ https://cafe.naver.com/matdistudy 한빛IT 북터디 공식 카페 영상 2024.04.01
[책 리뷰] 세이노의 가르침 총점 ⭐️ ⭐️ ⭐️ ⭐️ (4점) ✏️ 이런 분들께 추천해요! 마인드 개선이 필요한 분 돈을 많이 벌고 싶은 욕심이 있으신 분 가난하게 태어나 부자가 된 사람의 삶을 엿보고 진실된 얘기를 듣고 싶은 분 ✏️ 감상평 저는 삶의 동기부여가 될 만한 책을 찾고 있었는데 책을 읽기 시작한 지 얼마 되지 않아서 어떤 책을 골라야할지 선뜻 선택하지 못했습니다. 유익한 책도 많지만 돈을 벌려는 수단으로 쓰인 책도 많기 때문이에요. 세이노의 가르침은 베스트 샐러라 알고는 있었는데 서점 리뷰에는 욕이 많다는 이유로 안좋은 평이 많아 선택을 고민했었습니다. (그리고 저자가 일본인인 줄 알았어요. 세이노는 SayNo라는 필명을 가진 작가이고 한국인입니다!) 그러다 회사 차장님의 추천으로 이 책을 읽게 되었습니다. 리뷰에서.. 도서 리뷰 2024.03.08
피그마 필수 단축키 (윈도우 기준) 결과 단축키 기능검색 Ctrl + / 오브젝트 복제 Ctrl + D 투명도 조절 숫자키 0~9 (00-0%) 그룹 Ctrl + G 그룹해제 Ctrl + Shift + G 눈금자 Shift + R 확대 Ctrl + + 또는 Ctrl + 휠↑ 축소 Ctrl + - 또는 Ctrl + 휠 ↓ 컴포넌트 만들기 Ctrl + Alt + K 웹디자인/피그마 2024.01.19
블록 요소와 인라인 요소에서 width와 height 단위: px, cm, em, rem, %, vw, vh * 값이 0인 경우 보통 단위 생략 block요소 div { width: auto; /* 100% */ height: auto; /* 0 */ } inline요소 인라인 요소는 크기를 지정할 수 없고 필요한 만큼 너비를 사용하기 때문에 width와 height 코드는 사실상 의미가 없다. span { width: auto; /* 0 */ height: auto; /* 0 */ } 웹 퍼블리싱/CSS3 2023.12.29
CSS 선택자 기본 선택자 1. 전체 선택자 * {...} 2. 태그 선택자 태그명 {...} 2. 클래스 선택자 .클래스명 {...} 4. 아이디 선택자 #아이디명 {...} 복합 선택자 1. 일치 선택자 a는 기본 선택자, b는 기본 선택자 ab {...} 2. 자식 선택자 b는 a의 자식 요소 a > b {...} 3. 후손(하위) 선택자 b는 a의 후손(하위) 요소 a b {...} 4. 인접 형제 선택자 a의 다음 형제 요소 b 하나만 선택 a + b {...} 5. 일반 형제 선택자 a의 다음 형제 요소 b 모두 선택 a ~ b {...} * 자식 요소는 후손(하위)요소에 포함된다. 부모 요소는 조상(상위) 요소에 포함된다. 가상 클래스 선택자 1. hover a에 마우스(포인터)가 올라가 있는 동안 a 선.. 웹 퍼블리싱/CSS3 2023.12.24
모든 브라우저에서 내가 적용한 스타일을 똑같이 출력하고 싶을 때(feat. CSS초기화) html, css 코드가 출력되는 화면이 브라우저마다 다를 수 있다. 내가 원하는 스타일을 모든 브라우저에서 동일하게 출력되게 하고싶다면 브라우저마다 다르게 제공되는 CSS스타일을 초기화하고 내가 적용한 CSS스타일만 화면에 출력되도록 해야한다. CSS를 초기화하는 코드는 구글에 reset css cdn을 검색하면 나온다. 이 코드를 HTML 문서 내 링크된 CSS코드 위에 복붙하면 된다. CSS코드를 초기화하는 코드기 때문에 내가 작성한 CSS코드 위에 작성해서 초기화를 해주어야 한다. CSS 초기화 전 크롬 브라우저에서 코드 출력) Header1 Header2 Header3 Header4 Paragraph Unordered List Item1 Unordered List Item2 Unordered L.. 웹 퍼블리싱/CSS3 2023.12.23
자바스크립트 코드를 맞게 썼는데 에러뜨는 이유(feat.자바스크립트 코드 위치) 코드를 맞게 썼음에도 에러가 뜨는 경우, 스크립트 코드 위치를 의심해볼 수 있다. 아래와 같은 코드도 스크립트 위치가 잘못되어 콘솔에 에러메시지가 떴다. html 코드) hamtol javascript 코드) const myName = document.getElementById('my-name'); console.log(myName.innerText); 콘솔 에러) 브라우저는 코드를 한 줄 한 줄 읽어나가는데, 스크립트 코드를 읽고 있을 때는 html의 부분을 아직 읽기 전이기 때문에 자바스크립트에서 쓰이는 html데이터가 아직 없는 상태인 것이다. 위의 코드상 브라우저는 이렇게 적으면 코드를 끝까지 읽은 후 스크립트 코드로 돌아가기 때문에 데이터를 꺼내는데 문제가 없어진다. 하지만 defer을 쓰려면 .. 웹 퍼블리싱/HTML5 2023.12.22