본문 바로가기

전체 글98

반응형 웹 css 미디어쿼리 출처 : https://princesskiji.tistory.com/80 [HTML / CSS] - 반응형 웹🌐 반응형 웹 브라우저의 크기에 실시간으로 반응하여 크기에 따라 레이아웃이 변하는 웹 사이트를 의미 하나의 소스 코드로 모든 스크린에 최적화된 웹 사이트를 구축할 수 있는 방법론 디바princesskiji.tistory.com 출처 : https://blog.naver.com/yuyyulee/223016565842 [Html,CSS] 반응형 웹 만들기 (미디어 쿼리)요즘 웹 페이지를 만들 때 가장 중요한 것 중 하나가 바로 반응형. 웹 페이지를 PC의 브라우저 뿐만 아니...blog.naver.com 출처 : https://velog.io/@jin_jin_dev/CSS-medi.. 2024. 9. 5.
Figma_Component 기능 알아보기 1. Component(컴포넌트)란 무엇일까요?디자인작업에서 생산성과 효율성을 높여주는 component란 무엇일까요?compenet의 사전적 의미는 요소, 부품 등을 의미합니다. Figma에서도 컴포넌트는 화면을 구성하는 모든 요소들입니다. (텍스트, 이미지, 버튼, 아이콘 등)이런 요소들중 재사용하는 요소들을 정의해 필요할 때마다 검색해 사용할 수 있도록 만든 것이 바로 컴포넌트 기능입니다.ㄴ 아이콘, 버튼, 팝업, 인풋 등 많이 사용하는 오브젝트를 저장해두고 반복해서 사용하는 기능ㄴ 작업을 빠르게 해줌, 여러 사람이 디자인 할 때 통일된 디자인 시스템, 유지할 수 있게 도와주는 기능   2. Componet 만들기(1) 자주사용하는 버튼을 제작합니다.(2) 버튼을 클릭후 위에 2개의 버튼 중 맨 왼.. 2024. 9. 4.
피그마_컴포넌트 (Component) 1. 컴포넌트 개념 1) 컴포넌트 단축키 : Ctrl + Alt + k 2) 개념 : 사용자와 상호작용하는 기본적인 형태로 어느 공간에서도 기능을 수행할 수 있는 최소한의 단위개념 1) 컴포넌트 단축키 : Ctrl + Alt + k 컴포넌트 : 가장 최소단위ex. 아이콘 버튼_벡터  2) 개념 : 사용자와 상호작용하는 기본적인 형태로 어느 공간에서도 기능을 수행할 수 있는 최소한의 단위임   - 디자인 요소를 재사용하고 유지보수하기 쉽게 만드는 방법을 제공함 - Figma의 컴포넌트 기능은 디자인 시스템을 구축하고 협업하는 데 큰 도움을 주며,. 특히 대규모 프로젝트에서 효율적인     디자인 작    업을 가능하게 함 - 컴포넌트를 해야 디자인 수정 및 유지보수 반복작업을 줄이는 효율성도 극대화 됨 -.. 2024. 9. 4.
공부위키 # 2024-08-16 UIUX 웹 21일차## 다중선택자```css```html```js[과제]- 118강 6단계ㄴ15분 안에 구현- 122강 10단계ㄴ 20분 안에 구현# 2024 - 08 -19 UIUX 웹 22일차## 122강 복습(1분 47초)조건 : 20분안에 구현구현영상CODEPEN - 시작소스코드CODEPEN - 완료소스코드[NWZXyZJ...codepen.io](https://codepen.io/jangka44/pen/NWZXyZJ?editors=0100)- GoFullPage전체 화면 페이지 캡쳐https://chromewebstore.google.com/detail/%EC%A0%84%EC%B2%B4-%ED%8E%98%EC%9D%B4%EC%A7%80-%ED%99%94%EB%A9%B4-%.. 2024. 8. 16.
2024. 08. 16 UIUX 웹 21일차 [velog] velog velog.io * whites-space: nowrap - 줄바꿈x* 너비를 주면 nowrap을 안해도 됨  [117강 복습]2차 메뉴 구현[메모]* 마크다운 [118강 복습][과제]- 122강 만들어서 과제 톡방에 업로드 !!!(20분 안에)- 다음주 부터 디자인 구현 시작이라 꼭 연습 많이 해볼 것...!- 3차 메뉴 10분 안에 만들기 => 오늘 끝내라 !!! 2024. 8. 16.
2024. 08. 14 UIUX 웹 20일차 [선택자]- 수업페이지 : 60강, 61강, 81강에 정답 영상있음 참고- CSS Diner 공략집 CSS DinerA fun game to help you learn and practice CSS selectors.flukeout.github.io -> 축약표현 div > a 자식선택자div a 후손선택자div ~ a 동생선택자div + a 인접동생선택자 [자식 선택자]- 자식 : div의 입장에서 감싸는 입장(부모 엘리먼트)- 형제 : 부모가 같은 관계- *는 태그 구분 없이 세션에 자식이기만 하면 된다.- ~ 동생선택자- + 인접동생선택자ㄴ 네모 상자 안에 작은 네모 : 후손      1) only child: 형제 없는 엘리먼트 2) nth-of- type(1):   3) nth- child   .. 2024. 8. 14.

티스토리툴바