1. 백틱(`) 위치 • Mac 키보드에서 숫자 1 왼쪽에 있는 (백틱) 키를 누릅니다.• 해당 키에는 `와 물결(~) 기호가 함께 표시되어 있습니다. 2. 입력 방법 • 영어 키보드 레이아웃일 경우:1. 그냥 (backtick) 키를 눌러 입력.2. Shift 키 없이 누르면 됩니다.• 한글 입력 상태일 경우:1. 한글 입력기를 **영어(E)**로 전환 (단축키 ⌘ + Space).2. 영어 상태에서 (backtick) 키를 눌러 입력. 3. 예시• 백틱(``)으로 감싸는 템플릿 리터럴:let message = `백틱으로 변수를 삽입해요!`;console.log(message); 참고 • 한글 상태에서는 백틱이 입력되지 않으니, 반드시 입력기를 영어로 전환.• 단축키 설정이 다르다면 시스템 설정 > 키..

접근성을 높이기 위해 중요한 규칙: • 버튼에는 항상 텍스트를 포함: • 텍스트는 스크린 리더 사용자에게 중요한 정보 제공. • 이미지에 대체 텍스트(alt 속성) 추가 * CSS로 접근성을 위한 스타일링CSS로 이미지를 사용해 텍스트를 숨기는 방법: • 스크린 리더에서 텍스트를 읽도록 유지하되 화면에서 숨김 처리. • “blind” 스타일링 예제:.blind { position: absolute; /* 화면에서 제거 */ width: 1px; height: 1px; overflow: hidden; /* 내용 숨김 */ clip: rect(0, 0, 0, 0); /* 브라우저에 잘리지 않도록 */ white-space: nowrap; /* 줄바꿈 방지 */} * VS Code에서 터미널 사용법..

1. Animista  • URL: https://animista.net/ Animista - On-Demand CSS Animations LibraryAnimista is a CSS animation library and a place where you can play with a collection of ready-made CSS animations and download only those you will use.animista.net  • 설명: Animista는 CSS 애니메이션 효과를 손쉽게 미리 보고 코드로 생성할 수 있는 사이트이다. • 주요 기능: 1. 애니메이션 미리 보기: 다양한 CSS 애니메이션을 선택하고 결과를 실시간으로 확인할 수 있다. 2. 맞춤형 애니메이션: 사용자가 지속 시..

웹 세상에 첫 씨앗이 심어지다: HTML의 탄생과 성장 이야기 옛날 옛적, 컴퓨터와 인터넷이 처음 생겨났을 무렵, 사람들은 웹(Web)이라는 새로운 세상을 만들고 있었어. 그곳은 마치 하얀 도화지 같은 공간이었고, 그 안에는 아직 아무런 내용도 없었어. 사람들이 아무리 둘러봐도 그저 텅 빈 화면만이 보였지. 그때, 하얀 도화지 위에 HTML이라는 작은 씨앗이 심어졌어. “안녕, 나는 HTML이라고 해. HyperText Markup Language야. 나의 역할은 웹 페이지에 구조와 내용을 채우는 것이야.” HTML은 웹 세상에 자신이 해야 할 일을 찾아서 열심히 일하기 시작했어. HTML은 사람들에게 글을 보여주고, 이미지를 올리고, 다른 페이지로 이동할 수 있도록 링크를 만들었지. HTML은 웹 페이..

1. CSS 애니메이션의 개념과 활용CSS 애니메이션은 웹 요소에 생동감을 부여하는 기술로, 웹 페이지를 단순한 정적인 구성에서 벗어나 사용자 경험(UX)을 향상시킨다. 애니메이션은 Transition과 Keyframes를 사용하여 구현하며, 요소의 위치, 크기, 불투명도, 색상 등의 속성을 변화시킬 수 있다. CSS가 어렵다면.. (똑같이 어려웠던 과거의 나를 떠올리며🫣)브런치에 쉽게 풀어써놓았다.02. 동화로 이해하는 CSS 02화 02. 동화로 이해하는 CSS“웹 세상에 색을 입히는 마법사, CSS의 모험” 옛날 옛적, 컴퓨터와 인터넷이 생겨나고 사람들은 웹 페이지를 만들기 시작했어. 웹 세상에는 HTML이라는 친구가 먼저 나타나서, 페이지의 구조와brunch.co.kr 애니메이션 종류 1. Tr..

HTML의 계층적 구조와 주요 태그 학습 1. HTML의 계층적 구조란 무엇인가? HTML의 계층적 구조란 웹 페이지를 구성하는 요소들이 부모-자식 관계를 통해 계층적으로 배치되는 방식을 의미한다. 이러한 구조는 HTML 문서의 가독성과 유지보수성을 높이며, 다음과 같은 원칙을 따른다: • 부모 요소(Parent): 다른 요소를 포함하는 요소를 의미한다. • 자식 요소(Child): 부모 요소 안에 포함된 요소를 의미한다. • 형제 요소(Sibling): 동일한 부모를 공유하는 요소를 의미한다. HTML 계층적 구조 예제 HTML 학습 사이트 소개 예제 HTML이란? HTML은 웹 ..

1. CSS Grid CSS Grid는 2차원 레이아웃을 지원하는 강력한 CSS 모듈이다. 이를 통해 우리는 HTML 요소를 행(row)과 열(column) 모두에서 자유롭게 배치할 수 있다. Flexbox가 단방향 레이아웃에 최적화되어 있다면, Grid는 복잡한 2차원 레이아웃을 쉽게 다룰 수 있도록 설계되었다. 쉽게 말해서 엑셀 시트!가로(열, column)와 세로(행, row)로 나누고, 그 안에 있는 칸마다 요소를 배치할 수 있는 것이다. 1. 그리드의 기본 규칙 1. 그리드 컨테이너: 그리드를 적용할 큰 틀을 만든다. • display: grid;를 사용해 활성화. 2. 그리드 아이템: 그 안에 들어갈 요소들을 배치한다. • 그리드 컨테이너 안의 모든 자식 요소가 그리드 아이템이 된다. 2. 그..

티스토리에는 이론, 실습 위주의 글을 올립니다. 🤧프로덕트 디자이너는 기획자, 개발자와 협업이 필수적이다. 아래 리스트를 참고하여 위풍당당한 프로덕트 디자이너가 되보자!프로덕트 디자이너가 알아두면 좋을 개발 상식 01. HTML 기본 개념프로덕트 디자이너가 알아두면 좋을 개발 상식 02. HTML 기본 요소프로덕트 디자이너가 알아두면 좋을 개발 상식 03. HTML으로 웹페이지 기본 구조 작성해보기프로덕트 디자이너가 알아두면 좋을 개발 상식 04. Figma에서 UX/UI 디자이너가 개발자와 소통 잘하는 법 (컴포넌트 네이밍)프로덕트 디자이너가 알아두면 좋을 개발 상식 05. CSS 기본 개념과 문법 이해하기프로덕트 디자이너가 알아두면 좋을 개발 상식 06. CSS : 박스모델프로덕트 디자이너가 알아두..

2년차 디자이너로서 개발 지식은 알게 모르게 나를 주눅 들게 만드는 부분이었다. 좋은 기회로 부트캠프에서 프론트엔드 개발을 배우면서, 이 과정을 기록으로 남겨야겠다고 다짐했다.개인 웹사이트를 제작해본 경험은 있지만, 지금은 아주 초보적인 단계에서부터 하나씩 기록해 나가고 있다. 프로덕트 디자이너라면 개발자, 기획자와의 유연한 소통이 필수적이기 때문에, 이러한 과정을 통해 나의 이해도를 점차 높여가고 싶다.각 주제별로 순차적으로 글을 작성하고 있으니, 더 궁금한 부분이 있다면 아래 목록에서 클릭해 확인해 보길 바란다! 😽⇊⇊⇊프로덕트 디자이너가 알아두면 좋을 개발 상식 01. HTML 기본 개념프로덕트 디자이너가 알아두면 좋을 개발 상식 02. HTML 기본 요소프로덕트 디자이너가 알아두면 좋을 개발 상..

캘린더 뷰, 회원가입 기능 클론 코딩중이다.그러므로 오늘은 프로덕트 디자이너로 서비스 제작에 참여했을 때 알면 좋을만한 것들을 정리해보겠다.프론트엔드 공부를 시작하면서 무작정 네이밍 규칙을 이해하지 못한 채 따라하려 했던 지난 날들이 아까웠다. 🥲내 목표는 개발 상식을 익혀서 협업에서 좋은 역량을 펼치는 것이므로, 하나씩 블로그에 정리하고 있다.나와 같은 사람들이 있다면, 이 글이 도움이 될 것이다. 🤗 Figma에서 UX/UI 디자이너가 개발자와 소통 잘하는 법Figma는 디자인과 개발 간 협업을 쉽게 만들어 주는 강력한 도구다. 특히 컴포넌트와 디자인 시스템을 일관되게 관리할 수 있어서 디자인 의도를 명확히 전달할 수 있다. 하지만 효과적인 협업을 위해 Figma를 사용하는 방법과 몇 가지 중요한..