TIL 2023-10-06 팀 프로젝트 프로필 및 카드 움직임 구현하며 배운

배운 것들

 

:hover

:focus

transform: scale()

block-level-elements

non-block-level-elements

display: block / inline

h1 margin-top 조절

Js toggle 종류

min-width

iframe

 

더 있는 거 같은데.. 지금 집중력이 말이 아니다.. 웹 개발 강의 듣고 웹 개발 엄청 쉽다 했는데 나는 아직 초보인가보다.

완전 무에서 유로 만드려고 했는데 손이랑 머리에 잘 익혀지지가 않는다. 오늘 삽질 많이 함

원래 초보 때는 삽질하면서 배우는 거겠지?

어쨌든 오늘도 TIL 스타트

 

코딩에 코짜도 모르는 시절,, 머릿속으로 구현해보고 싶었던 거 짱많았다.

그래서 오늘 엄청 만들어봤다. 진짜 아이디어 제시 엄청 함 초보 특인가..?🥹

 

우선 첫번째

얘네들 마우스 올리거나 클릭하면 카드 커지게 하는 걸 만들거다. 생각보다 간단하다.

Class 를 이미 적용했으니 이용하면 된다.

    .card:hover,
    .card:focus {
        transform: scale(1.1);
    }

이걸 넣어주면 마우스가 대상에 올려져있거나 클릭하면 다른 곳 클릭하기 전까지 계속 커져있는다.

 

근데 이것만 넣으면 너무 심심하다. 마우스 올리면 그냥 바로 커진다

    .card {
        margin: 0px 50px;
        border: 0.5px solid gray;
        border-radius: 5px;
        transition: all 0.3s linear;
        cursor: pointer;
    }

        transition: all 0.3s linear;
        cursor: pointer;

cursor 이거 넣어주면 마우스 올라갔을 때 커서가 클릭 가능 한 모습으로 바뀌고

transition 은 css가 바뀔 때 애니메이션 속도를 조절해준다 

만족.. 나중에 border 로 테두리 바꾸거나 하면 이쁠 거 같다.

 

두번째

어제 막판에 멘탈 나가게 했던 이.. 겹침...

폭풍 검색,,,

전에 만들었던 신문 프로젝트 창 열어보고 css 코드 하나하나 엄청나게 검색했다... 다 적용해보고... 뭐지... 안된다..

반응형도 해보려 해보고 신문 프로젝트에 있는 거 다 해봤었다.. 안된다..

결국 튜터님한테 여쭤봤다.. 시간 너무 소비하면 그게 또 문제다

내가 프로필 박스 안에 쓴 글들이 non-block-level-elements 으로 써서 그랬었다.

그리고 반응형을 줘야 완벽해지는데 그건 지금 초보 상태에서는 전혀 몰라도 되는 얘기라고 하셨다.

 

div 안에 있는 것들을 

block-level-elements 바꿔주기 위해서 div로 묶고 non-block인 img를 block으로 바꿔주는

style="display: block;"

이것도 넣어주었다.

그래도 여전히 겹침이 존재했다.

글씨 막 튀어나오고 이런건 해결했는데 저 이미지나 그런게 계속 겹쳤다.. 머리 터지겠는 상황..!

비장의 무기 min-width를 찾았다.

프로필에 min-width 값을 줬다.. 우선 해결했다

사진이 바뀌는 이유는 따로 테스트 할 파일들을 2~3개 만들어놨어가지고 지금 블로그 글 작성할 때 계속 캡쳐해서 찍어오기 때문

 

어쨋든 해결했다. 근데 또 문제가 생겼다.

 

이번엔 이미지랑 저 글씨가 상단 정렬?? 이 안된다.

아.. ㅋㅋ

하나를 고치면 다른 하나가 또 생기는 마법

 

이것도 근데 금방 고쳤다.

h1태그를 썼었는데 h1 기본 상단 margin 값이 좀 높았던 것.

검사 눌러서 바로 확인 가능하다

 

h1에 margin-top: 0px을 주면 바로 해결 가능

사실 이거 생각하느라 10분이나 걸렸다.

 

내가 만들었던 와이어 프레임

카드를 누르면 토글 형식으로 뜨는데 조금 이쁘게 떠줬으면 좋겠었다.

 

https://jqueryui.com/effect/

위 링크 들어가면 나오는데 저런거 하고 싶었다. 우선 토글부터 구현하자..

 

id 값을 프로필에 넣어주고

  function openMyPage() {
    $('#profilebox').toggle();
  }

이렇게 적어주면 우선 토글은 된다.

 

어 근데 카드 3개에 프로필 박스 3갠데..

 

id를 1,2,3으로 다 나눠 적고

    function openMyPage1() {
        $('#profilebox1').toggle();
        $('#profilebox2').hide();
        $('#profilebox3').hide();

    }
    function openMyPage2() {
        $('#profilebox1').hide();
        $('#profilebox2').toggle();
        $('#profilebox3').hide();
    }
    function openMyPage3() {
        $('#profilebox1').hide();
        $('#profilebox2').hide();
        $('#profilebox3').toggle();
    }

이런 식으로 적어줬다.

이제 누르면 프로필이 나오고 다른 프로필들은 숨겨진다.

 

추가로 페이지 들어가면 자동으로 프로필들 다 숨겨주는 것들 넣어줬다

    $(document).ready(function () {
        $('#profilebox1').hide();
        $('#profilebox2').hide();
        $('#profilebox3').hide();
    })

 

근데 뭔가 좀 심심하다..

맞다 애니메이션 넣으려고 했었지

 

찾아보니 간단하게 애니메이션 줄 수 있어서 그거 적용해봤다.

    function openMyPage1() {
        $('#profilebox1').slideToggle('slow');
        $('#profilebox2').slideUp();
        $('#profilebox3').slideUp();

    }
    function openMyPage2() {
        $('#profilebox1').slideUp();
        $('#profilebox2').slideToggle('slow');
        $('#profilebox3').slideUp();
    }
    function openMyPage3() {
        $('#profilebox1').slideUp();
        $('#profilebox2').slideUp();
        $('#profilebox3').slideToggle('slow');
    }

slidetoggle('속도')

여기서 속도는 fast slow 등으로 설정 가능하다

 

이외에도 여러가지 토글이 있다고 한다. 

 

hide, show, fadeout, fadein 등등.. 입맛에 맞게 바꿔주면 되시겠다.

ㅋㅋㅋㅋ아 기쁘다!!!

저기 위에 보이는 든-든한 국밥팀 이미지.. 오늘 만든거다 오늘 꽤 많은 걸함..

 

이제 팀원들이 잘 쓸 수 있게 주석으로 설명 다다다 적어주고 이름 나눠서 설명하고 이렇게 하시면 됩니다 적어주고 push했다.

 

이런 식으로 설명 해준 다음 인원별로 복사하고 class뒤에 번호 바꿔 붙여주고 push..

거의 다 왔다..

TIL 쓰는 방식을 좀 바꿔야하나..?

이거 쓰는데 1시간 넘게 걸렸다 다른 사람들 어떻게 쓰는지 봐야지

 

오늘은 여기서 끝