나는야 이미 발등튀김

안녕하세요! 2025년 7월 31일, UI·UX 반응형 웹퍼블리셔 국비 지원 수업 48일차 수업 내용을 정리해보았습니다. 오늘은 HTML, CSS, JS를 활용하여, 섹션의 정중앙에 중심을 두고 회전, 메뉴아이템들도 회전, 텍스트량에 따라 유연하게 길어지는 디자인, CSS로 프로그레스 바 및 숫자 카운팅 애니메이션 + full page에 대해 배웠습니다. --- 48일차 학습내용 43강## 섹션의 정중앙에 중심을 두고 회전, 메뉴아이템들도 회전 /* 섹션 기본 크기 설정 */.section { width: 1920px; height: 900px; margin: 0 auto;}/* 섹션1: 회전 애니메이션 포함 */.section-1 { position: relative; ov..

안녕하세요! 2025년 7월 30일, UI·UX 반응형 웹퍼블리셔 국비 지원 수업 47일차 수업 내용을 정리해보았습니다. 오늘은 HTML, CSS, JS를 활용하여,mix-blend-mode로 탑바 배경색이 섹션의 배경색에 맞게 자동변환, 커서효과, 스크롤바 overlay, 밑줄의 너비를 글자의 크기와 맞추는 방법, 다각형 호버 변환, 텍스트에 외곽선 효과, 텍스트 외곽선 마우스 움직임 효과에 대해 배웠습니다. --- 47일차 학습내용 36강## mix-blend-mode로 탑바 배경색이 섹션의 배경색에 맞게 자동변환37강## 커서효과38강## 스크롤바 overlay39강## 밑줄의 너비를 글자의 크기와 맞추는 방법40강## 다각형 호버 변환41강## 텍스트에 외곽선 효과 텍스트 외곽선 효과 자세한 설명..

안녕하세요! 2025년 7월 29일, UI·UX 반응형 웹퍼블리셔 국비 지원 수업 46일차 수업 내용을 정리해보았습니다. 오늘은 HTML, CSS, JS를 활용하여,fullpage + animate.css 조합, 텍스트 SVG로 만드는 방법,tilt.js 사용법, 무한하게 이어지는 marquee, 다크모드 만드는 방법, 스크롤트리거로 탑바 배경색이 섹션의 배경색에 맞게 자동변환 에 대해 배웠습니다. --- 46일차 학습내용 28강## 멀티 숫자 카운터, 제이쿼리 each29강## 0030강## fullpage + animate.css 조합31강## 텍스트 SVG로 만드는 방법32강## tilt.js 사용법tilt js(사이트 바로가기)$('.js-tilt').tilt({ scale: 1.2, ..

안녕하세요! 2025년 7월 25일, UI·UX 반응형 웹퍼블리셔 국비 지원 수업 44일차 수업 내용을 정리해보았습니다. 오늘은 HTML, CSS, JS를 활용하여,로딩화면 구현해야 하는 이유와, AOS, imagesLoaded, imgur, Image Downloader, mousemove effect,aos 애니메이션 커스텀, 00에 대해 배웠습니다. --- 44일차 학습내용 17강## 로딩화면 구현해야 하는 이유와, AOS, imagesLoaded, imgur, Image Downloader # 사이트AOS (사이트 보기)animate css (사이트 보기)이미지가 필요할 때 - Lorem picsum (사이트 보기)Image Downloader (사이트 보기)CDN - imagesloaded (..

안녕하세요! 오늘은 포토샵(Photoshop) 작업 시 자주 사용하는 단축키들을 한 번에 정리해봤어요. 실무나 과제, 취미 작업에서도 효율을 높이는 데 큰 도움이 됩니다😊포토샵 단축키 정리 모음zip. 1. 포토샵 기본 셋팅 설정기능단축키포토샵 초기화 실행Ctrl + Alt + Shift + 포토샵 아이콘 더블클릭환경설정 창 열기Ctrl + K2. 파일 메뉴 단축키기능단축키새 문서 만들기Ctrl + N기존 파일 열기Ctrl + O문서 모두 닫기Ctrl + Alt + W저장Ctrl + S다른 이름으로 저장Ctrl + Shift + S웹용으로 저장 (Export)파일 > 내보내기 > Save for Web3. 화면 조작(확대, 이동, 회전 등)기능단축키화면 확대 / 축소Ctrl + + / - 또는 Alt..

안녕하세요! 오늘은 jQuery: prop() vs attr() 차이점을 정리해보았습니다. jQuery를 사용하다 보면 prop()과 attr() 두 가지 메서드를 자주 접하게 됩니다. 처음에는 비슷해 보여도 쓰임새와 역할이 분명히 다릅니다. 특히 checked, selected, disabled 같은 속성 값을 다룰 때 정확히 이해하고 써야 오류를 줄일 수 있어요.기본 개념 정리메서드설명사용 예시attr()HTML 속성(attribute) 값을 가져오거나 설정함id, class, href 등prop()DOM 프로퍼티(property) 값을 가져오거나 설정함checked, selected, disabled 등- 실전 예제// attr() 사용console.log($('.form-1__checkbox-al..

1. display: block한 줄을 다 차지해요. 다음 요소는 새 줄에서 시작됩니다.대표적인 예: , , 등📌 결과: 두 박스가 세로로 쌓여요.2. display: inline-block줄 바꿈 없이 옆에 나열되지만, 크기(width, height)를 지정 가능해요.대표적인 예: 버튼처럼 생긴 박스들을 가로로 나열하고 싶을 때📌 결과: 두 박스가 가로로 나란히 나와요.3. display: none화면에서 완전히 사라짐. 공간조차 차지하지 않아요.JavaScript로 요소를 숨길 때 자주 사용돼요.📌 결과: 해당 요소는 보이지도 않고, 공간도 없음. 마치 없는 것처럼 돼요.값특징줄 바꿈크기 조절예시block한 줄 전체 차지OO, inline-block옆에 나란히, 크기 조절 가능XO버튼, 카드 ..

안녕하세요! 2025년 7월 14일, UI·UX 반응형 웹퍼블리셔 국비 지원 수업 35일차 수업 내용을 정리해보았습니다. 오늘은 능력단위평가 날로 수정 보완을 진했습니다. --- 35일차 능력단위평가 진행- 프로필 페이지 수정 프로필 페이지 수정 보완을 하여 저만의 프로필을 만들었습니다. LEE LEE UX/UI Designer Email: LEELEE@example.com Phone: 123-456-7890 Location: 대전시 Social - tistory ..

안녕하세요! 2025년 7월 2일, UI·UX 반응형 웹퍼블리셔 국비 지원 수업 27일차 수업 내용을 정리해보았습니다.오늘은 JS, jQuery 기초를 배웠습니다. --- 27일차 학습내용 jQuery 1강 ## 자바스크립트에서 함수란?: 함수는 특정 작업을 수행하는 코드 블록이다.function hello() { alert("안녕");}hello();: 함수를 만들었다면, 실행하려면 반드시 '호출'해야 한다.--- # 버튼 클릭으로 함수 호출하기버튼: HTML 요소에서 자바스크립트 함수를 실행하려면 onclick, onmouseover 같은 이벤트 속성을 사용한다.: 위 예제에서는 버튼을 클릭할 때 hello() 함수가 실행한다. --- # document.getElementsByTagName()va..