0620 목 uiux 55일차

0620 목 uiux 55일차

웹코딩 참고 사이트(김영원 강사님) ( https://kimyws.tistory.com/29 ) ( https://webstoryboy.co.kr/ ) 플렉스 개구리 ( https://flexboxfroggy.com/#ko )

혜지 강사님 수업페이지(html&css) ( https://codepen.io/hjyee/full/OJGrVYJ ). 자바스크립트 수업페이지 ( https://codepen.io/hjyee/full/PogMVOP ) 깃허브 기초 ( https://codepen.io/hjyee/full/LYoNWga ) 기초 키보드 사용법 ( https://codepen.io/YoungHeom/pen/eYaOYEX ) 연산자 ( https://codepen.io/YoungHeom/pen/Rwmbxze ) 코드펜 사용법 ( https://codepen.io/YoungHeom/pen/gOJOWgE ) 무료 강의 ( https://programmers.co.kr/ ) 자바스크립트 정리 ( https://velog.io/@solmii/Java-Script%EB%A5%BC-Script ) 피그마 강좌 ( https://www.youtube.com/@yeonjung-figma ), ( https://www.youtube.com/@UXUIDesign ) - 개인적 메모 작업물 보기 - 핀터레스트나 드리블( https://dribbble.com/ ), 노트폴리오, 비핸스, 디자인 나스 - ( https://designnas.com/ ) 자격증 기출문제 ( https://www.comcbt.com/ )( https://quizeey.com/ ) ( https://cubic-bezier.com/ ) 유용한 링크 모음 ( https://codepen.io/YoungHeom/pen/XWwzPvE )

.

강사님 메모 25일평가 안내 프로토타입 수집 및 제작 스토리보드, 브레인 스토밍 스케치 자료 제출 자료는 이미지 또는 pdf로 제출 (와이어 프레임 형식) 경쟁 분석  신규사업 개발 과 기존 사업 개선을 위해 실시 조사대상 선정 기본원칙 : 완성도 높고 시장에서 성공한 제품, 서비스 주요원칙 현재의 상위 서비스 추천서비스 성공한서비스 평판 및 주적 랭킹 상위 트렌드 분석 트렌드 : 경향, 동향, 추세 단기간 지속되는 변화나 현상 UX,UI디자인 가치와 동일시 트렌드 분석방법 소비자 행동패턴 조사나 분석 소비자들이 어떠한 욕구를 갖고있는지를 예측 주변현상 조사 분석 정확히 파악하는 과정 새로운 문화와 변화를 읽어야함 디자인 트렌드 기술트렌드 가트너 10대 전략

제이쿼리1 ( https://codepen.io/YoungHeom/pen/QWRQXLg )

2( https://codepen.io/YoungHeom/pen/zYQRVxm )

 

--a 변수 '--'

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> <div class="a1">기본</div> <script> $(function(){}) // 모두 읽어들인다음 실행 $(".a1"); documet.querySeletorAll(".a1"); // a1이름을 가진 태그를 모두 선택 </script>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> <div class="a1">기본</div> <div class="a1"></div> <div class="a1"></div> <div class="a1"></div> <script> $(function(){}) // 모두 읽어들인다음 실행 $(".a1"). text("안녕"); documet.querySeletorAll(".a1"); // a1이름을 가진 태그를 모두 선택 </script>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> <div class="a1">기본</div> <div class="a1">1</div> <div class="a1">2</div> <div class="a1">3</div> <script> $(function(){}) // 모두 읽어들인다음 실행 $(".a1"). css("height", "100px"); $(".a1"). css("background", "aqua"); documet.querySeletorAll(".a1"); // a1이름을 가진 태그를 모두 선택 </script>

 

 

---

웹

 

 

object-fit: "object-cover"는 "object-fit" 속성의 하나로, 이미지나 비디오를 컨테이너에 맞추는 방식을 설정.

컨테이너를 완전히 채우도록 이미지나 비디오의 크기를 조정하지만 but! 콘텐츠의 가로세로 비율은 유지되지 않을 수 있음.

 

 

<ul class="grid sm:grid-cols-2 md:grid-cols-5 lg:grid-cols-5 xl:grid-cols-5 gap-5">

.