메모

0717 수 uiux 74일차 

( https://codepen.io/YoungHeom/pen/yLdYmqm )

( https://codepen.io/YoungHeom/pen/rNEOXZO )

(  )

이메일 발송 폼 ( https://codepen.io/YoungHeom/pen/Rwzrbpq )

ㄴ 근데 메일이 도착안한다. 왜지?

검색어 적기

cake, custom cake, mini cake, bakery kitchen, 

0716 화 uiux 73일차

360도 회전메뉴 ( https://codepen.io/YoungHeom/pen/vYqNWRG )

스와이퍼, 패럴렉스 ( https://codepen.io/YoungHeom/pen/NWZGwYw )

각종 폼 입력 요소 ( https://codepen.io/YoungHeom/pen/LYKpOrE )

포폴 혜지쌤 코드펜에서 가져옴 ( https://codepen.io/YoungHeom/pen/oNrjoaj )

0715 월 uiux 72일차

마우스 호버 시 커서 햇살 효과 ( https://codepen.io/YoungHeom/pen/rNEONyQ )

키프레임을 이용한 반전 ( https://codepen.io/YoungHeom/pen/QWXjWva )

페이지 만드는 속도가 느리면 피그마로 디자인부터 해보기기획의도 생각하면서 만드는 것 중요!(기획의도가 들어간 디자인, 이용자들이 ~를 느꼈으면 좋겠다, 버튼이 작고 안보여서 불편함을 느끼지 않았음 좋겠다. 탈퇴 버튼이 잘 보이게 해서 헤어짐도 깔끔한 사이트가 되고 싶다, 이런 컨셉이구나를 느꼈으면 좋겠다 등등,,)

phone_site 푸터 ( https://codepen.io/YoungHeom/pen/VwJYGWx )

0712 금 uiux 71일차

텍스트 타이핑 애니메이션 1 ( https://codepen.io/YoungHeom/pen/mdZJJNP )

텍스트 타이핑 애니메이션 2 ( https://codepen.io/YoungHeom/pen/RwzPWzj )

0711 목 uiux 70일차

circleProgress ( https://codepen.io/YoungHeom/pen/OJePwXx )

버튼 호버 효과, 라인색 변경 ( https://codepen.io/YoungHeom/pen/LYKEBeZ )

탭메뉴와 스와이퍼 조합 1부 ( https://codepen.io/YoungHeom/pen/OJePwKo )

탭메뉴와 스와이퍼 조합 2부 ( https://codepen.io/YoungHeom/pen/poXvZMM )

탭메뉴와 스와이퍼 조합 3부 ( https://codepen.io/YoungHeom/pen/JjQoabJ )

검색창 만들기 ( https://codepen.io/YoungHeom/pen/ExBxdNO )

테두리 흐려보이게 하깅( https://codepen.io/YoungHeom/pen/poXvZdG )

phone_web 푸터 만들기 ( https://codepen.io/YoungHeom/pen/VwJYGWx )

0710 수 uiux 69일차

https://picsum.photos/id/103/200/300   

ㄴ 이 사진 좀 괜찮음

textarea 라는 태그가 있단걸 이제 앎. ( https://codepen.io/YoungHeom/pen/vYqEKyx ) gpt가 알려줌

탭메뉴에 따라 화면이 전체적으로 바뀌는 효과

작업 1, 파트 스위치 ( https://codepen.io/YoungHeom/pen/ExBaygx )

작업 2, 파트 스위치 ( https://codepen.io/YoungHeom/pen/WNqbxEa )

작업 3, 배경이미지 배치, 프리로딩 (https://codepen.io/YoungHeom/pen/GRbgqMO  )

작업 4, 배경이미지 흐르도록( https://codepen.io/YoungHeom/pen/yLdyJqd )

<div class="part part-1 active" onclick="Part__showPart(1);">파트 1</div>

  ㄴ onclick : 얘(해당 태그)를 클릭했을 때

탭메뉴에 따라 화면이 전체적으로 바뀌는 효과

작업 1, 파트 스위치 ( https://codepen.io/YoungHeom/pen/ExBaygx )

작업 2, 파트 스위치 ( https://codepen.io/YoungHeom/pen/WNqbxEa )

작업 3, 배경이미지 배치, 프리로딩 (https://codepen.io/YoungHeom/pen/GRbgqMO  )

작업 4, 배경이미지 흐르도록( https://codepen.io/YoungHeom/pen/yLdyJqd )

0709 화 uiux 68일차

텍스트량에 따라 유연하게 길어지는 디자인 ( https://codepen.io/YoungHeom/pen/jOjOeop )

시각디자인 리서치 조사 과제 - 자료 찾기

( https://www.webdesignerdepot.com/3-essential-design-trends-july-2024/ )

ㄴ 2024년 7월의 3가지 필수 디자인 트렌드(영어임)

( https://www.webdesignerdepot.com/essential-design-trends-may-2024/ )

ㄴ 2024년 5월의 3가지 필수 디자인 트렌드(영어임)

( https://www.webdesignerdepot.com/ )

ㄴ 영어라서 보기 어렵지만 시각디자인 관련 정보들이 많이 올라와있음

( https://www.creativebloq.com/ )

ㄴ 영어222

( https://www.awwwards.com/ )

ㄴ 영어333 포트폴리오 사이트 같음

( https://www.designdb.com/?menuno=668#gsc.tab=0 )

ㄴ 디자인db. 디자인 트렌드 같은 정보 확인 가능. 한국디자인진흥원에서 만듦. 채용정보도 확인 가능

( https://www.awwwards.com/sites/popin )

gpt씨가 알려줌

0708 월 uiux 67일차

프로그래스바 ( https://codepen.io/YoungHeom/pen/yLdLMNO )

ㄴ 포폴엔 이런거 쓰지말기(어쩐지 관심이 별로 안가더라)

연습!

스크롤 시 게이지 만들어보기 ( https://codepen.io/YoungHeom/pen/MWMWmWr )

flex 내부 아이템 그룹 가운데정렬 배치하기 ( https://codepen.io/YoungHeom/pen/QWXWvwg )

grid 내부 아이템 그룹 가운데정렬 배치하기 ( https://codepen.io/YoungHeom/pen/wvLvgOZ )

0705 금 uiux 66일차

텍스트 외곽선 ( https://codepen.io/YoungHeom/pen/xxoKXeZ )

텍스트 외곽선 움직임 효과 ( https://codepen.io/YoungHeom/pen/WNqeXbL )

회전 애니메이션 ( https://codepen.io/YoungHeom/pen/GRbKOqd )

0704 목 uiux 65일차

스크롤바 overlay ( https://codepen.io/YoungHeom/pen/PorYqmK )

모바일처럼 레이아웃 ( https://codepen.io/YoungHeom/pen/NWZKqjY )

글자 크기와 밑줄 너비 맞추기 ( https://codepen.io/YoungHeom/pen/poXzJPx )

다각형 호버 ( https://codepen.io/YoungHeom/pen/qBzWdMZ )

0703 수 uiux 64일차

커서 효과 1부 ( https://codepen.io/YoungHeom/pen/RwmXJQg )

커서 효과 2부( https://codepen.io/YoungHeom/pen/KKLOeoJ )

커서 효과 3부 ( https://codepen.io/YoungHeom/pen/ZENgRod )

커서 효과 4부 ( https://codepen.io/YoungHeom/pen/MWdNXXM )

커서 효과 5부 ( https://codepen.io/YoungHeom/pen/vYworzJ )

커서 효과 6부 ( https://codepen.io/YoungHeom/pen/BaeXVMP )

커서 효과 7부 ( https://codepen.io/YoungHeom/pen/BaeXVgq )

커서 효과 8부 ( https://codepen.io/YoungHeom/pen/bGyXjGz )

사이즈 조절이 되는 사이드 메뉴바 ( https://codepen.io/YoungHeom/pen/abrejQE )

0702 화 uiux 63일차

:root 

문서(페이지) 전역을 설정(?)할 때..?

tilt js ( https://codepen.io/YoungHeom/pen/NWVQNJo )

ㄴ 마우스 (don't 클릭)드래그하면 움직이는 이미지

maquee ( https://codepen.io/YoungHeom/pen/zYQgBOK )

다크모드 ( https://codepen.io/YoungHeom/pen/vYwoKOj ) 

스크롤트리거로 탑바 색상 자동 변환 ( https://codepen.io/YoungHeom/pen/zYQgBzw )

mix-blend-bode로 탑바 색상 자동 변환 ( https://codepen.io/YoungHeom/pen/VwOojQG )★ ★

0701 월 uiux 62일차

멀티 숫자 카운터, 제이쿼리 each ( https://codepen.io/YoungHeom/pen/GRabPvZ )

드래그(글자 마우스 선택) 안 되게 하는 방법!

ㄴuser-select: none;

줄바꿈 안되는 건 white-space: nowrap;

$('.box-1__minus').click(function(){
    const num = parseInt($('.box__num').text)
    const newNum = num - 1 >= 0 ? num -1 : 0;
    console.log(num);
});

const newNum = num - 1 >= 0 ? num -1 : 0;

' num - 1 >= 0'  조건식

조건식이 참이면 - 1, 거짓이면 0

parseInt: 문자 0이 오면 숫자 0으로 변환해줌

display: none;_visibility: hidden;_opacity: 0; 차이 ( https://codepen.io/YoungHeom/pen/bGyPzEM )

ㄴ 갑자기 궁금해서 따로 정리함

요소를 숨기는 css 속성들 (

'display: none;', ' visibility: hidden;', ' opacity: 0;' ) 부모 태그에 bgc 적용한 후 차이점 알아보기

부모, 자식 태그에 높이가 없고 자식 태그에 텍스트만 입력되어 있을 때

- display: none; 

적용 시 배경(부모 태그)이 아예 화면에서 사라진다.(부모 태그에 높이가 없을 경우) 박스 실종.
그러나 부모 태그에 높이가 적용된 경우엔 자식 태그에 display: none;을 줘도 배경이 사라지지 않는다.

- visibility: hidden;

  공간은 차지하면서 해당 속성을 적용한 요소만 사라진다.( opacity: 0;과 동일 ) 빈 박스.

  커서를 대도(hover) 커서 모양이 바뀌지 않는다.

- opacity: 0;

  공간은 차지하면서 해당 속성을 적용한 요소만 사라진다. ( visibility: hidden;과 동일 )  빈 박스.
  커서를 대면 커서 모양이 cursor: text;으로 바뀐다.

페이지 우측 하단 홈엔드 버튼 만들기( https://codepen.io/YoungHeom/pen/bGyPOXL )

0628 금 uiux 61일차

웹(혜지쌤)

scroll-snap-type ( https://codepen.io/YoungHeom/pen/BaeEgQo )

글자 회전 애니메이션 ( https://codepen.io/YoungHeom/pen/RwmOzKX )

반응형 스와이퍼 ( https://codepen.io/YoungHeom/pen/pomBXww )

현재 활성화된 슬라이드 내용 별도 공간에 표시 1부 ( https://codepen.io/YoungHeom/pen/eYaowjK )

현재 활성화된 슬라이드 내용 별도 공간에 표시 2부 ( https://codepen.io/YoungHeom/pen/ZENZdqo )

* = 모두 선택

0802 14:00 프리미어 에펙 연동 특강 (신청)

0815 14:00 쇼츠/썸네일 제작 실습 (고민중)

0822 14:00 이모티콘(신청)

0816 치과 이슈

0828 14:00 무료 AI프로그램을 이용하여 디자인기획(신청)

0830 14:00 실무 굿즈 기획과 제작(신청)

0627 목 uiux 60일차

animate({ }, ): (애니메이션, n초 동안)

.

웹(혜지쌤)

특정 구간에서 스크롤시, 횡으로 이동하는 효과 1부 ( https://codepen.io/YoungHeom/pen/rNgbJjM )

특정 구간에서 스크롤시, 횡으로 이동하는 효과 2부 ( https://codepen.io/YoungHeom/pen/LYovQOQ ) 

특정 구간에서 스크롤시, 횡으로 이동하는 효과 3부 ( https://codepen.io/YoungHeom/pen/qBGwxMo ) 

( id 501번이 200*300px에서 예쁘긴 한데 사진 크기 커지면 사람나와서 ㅂㄹ ) 

( https://picsum.photos/id/435/1440/810 이게 더 간zl남) 

background-attachment: fixed; 

/* background-image에만 적용됨 */

0626 수 uiux 59일차

img파일로 제출, 이미지 우측 상단에 이름 적기

밑줄 애니메이션 1부 ( https://codepen.io/YoungHeom/pen/KKLGvzg )

2부 ( https://codepen.io/YoungHeom/pen/VwOEzxO )

3부 ( https://codepen.io/YoungHeom/pen/dyEgVvY )

4부 ( https://codepen.io/YoungHeom/pen/mdYzBwO )

5부 ( https://codepen.io/YoungHeom/pen/OJYBxBz )

0625 화 uiux 58일차

@내가 내는 숙제~

구글에 라이브러리 검색 많이 하기(영어로) ex) 마우스 이펙트, 클릭 이펙트, 슬라이더, 스크롤 등등...

@충격 내일 능력단위평가

정보 구조도 - ( https://brunch.co.kr/@applehong/80 ), ( https://velog.io/@kangtsby/3 )

위처럼 이렇게 그리거나 또는 엑셀 형식

- 페이드아웃(fadeOut) 효과 과정

혜지쌤

aos 사용법( https://codepen.io/YoungHeom/pen/NWVzjmW )

백그라운드 컬러가 있고 z-index 순서 제일 위인 로딩중 제이쿼리로 없애는 방법 3 가지 

0624 월 uiux 57일차

웹(혜지쌤)

패스워드 숨김, 보임 모드 변경 ( https://codepen.io/YoungHeom/pen/XWwqxRN )

Nasonry 사용법( https://codepen.io/YoungHeom/pen/pomVxVg )

smooth scroll ( https://codepen.io/YoungHeom/pen/mdYLQPN )

mouseenter 시 hover 발동 효과 ( https://codepen.io/YoungHeom/pen/KKLRrXq )

웹디자인 앱디자인 둘 다 해보기(웹3 앱2 디자인)

0621 금 uiux 56일차

for(let i = 1; t<= $(".a").length; i++){
        $("#a"+i).mouseover(function(){
            $("#a"+i).css({"transition": "all .3s", "width": "200px";})
            
        }).mouseout(function(){
            $("#a"+i).css({"transition": "all .3s", "width": "100px";})
        });
       }
머가 안됏지

.

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <style>
        .a {
            width: 100px;
            height: 100px;
            border: 1px solid #000;
            transition: all .3s;
        }
        .b {
            width: 100px;
            height: 30px;
            background-color: skyblue;
            border: 1px solid #000;
        }
    </style>
</head>

<body>
    <div class="a" id="a1"></div>
    <div class="a" id="a2"></div>
    <div class="a" id="a3"></div>

    <div class="b" id="b1"></div>
    <div class="b" id="b2"></div>
    <div class="b" id="b3"></div>
    <div class="b" id="b4"></div>
    <script>

        function abc(f1, f2, f3, f4) {
            for (let i = 1; i <= $(f1).length; i++) {
                $(f2 + i).mouseover(function () {
                    $(f2 + i).css({ "transition": "all .2s", "width": f4; })

                }).mouseout(function () {
                    $(f2 + i).css({ "transition": "all .1s", "width": f3; })
                });
            }
        }
        abc(".a", "#a", "100px", "300px");
        abc(".b", "#b", "50px", "400px");

    </script>
</body>

얜또왜안됨?

 function abc(f1, f2, f3, f4) {
            for (let i = 1; i <= $(f1).length; i++){
                $(f2 + i).mouseover(function() {
                    $(f2 + i).css({ "transition": "all .2s", "width": f4; })
                }).mouseout(function () {
                    $(f2 + i).css({ "transition": "all .1s", "width": f3; })
                });
            }
        }
        abc(".a", "#a", "100px", "300px");
        abc(".b", "#b", "50px", "400px");

얜또왜??

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <style>
        .a {
            width: 100px;
            height: 100px;
            border: 1px solid #000;
            transition: all .3s;
        }

        .b {
            width: 100px;
            height: 30px;
            background-color: skyblue;
            border: 1px solid #000;
        }
    </style>
</head>

<body>
    <div class="a" id="a1"></div>
    <div class="a" id="a2"></div>
    <div class="a" id="a3"></div>
    <script>

        let i = 0;
        function ae(ix) {
            $(".a").eq(ix).css({ "width": "200px" });
            setTimeout(
                function () {
                    $(".a").eq(ix).css({ "width": "100px" });
                }
                , 2000);
        }
        setInterval(
            function () {
                ae(i);
                i++;
                if (i == $(".a").length) {
                    i = 0;
                }
            }
            , 4000);
    </script>
</body>

웹(혜지쌤)

체크박스 만들기 ( https://codepen.io/YoungHeom/pen/rNgdwxK )

.

.

.

0620 목 uiux 55일차

.

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

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

--a 변수 '--'

웹

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

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

.