실직한김에만들어보자 - 4일차

#실직한김에만들어보자 시리즈

 

아이고... 코로나가 또 걸려서 한참을 고생했다. 덕분에 계획했던것들이 다 물거품으로~

다시 시작해보자!! 4일차!!

 

- 기록 1

약간 설계를 비틀어서 아래와 같이 변경 해보려고 한다. 왜냐구? 그냥... 그게 더 이쁠 것 같아서! 하핫

 

기존 : 메인 메뉴 -> 로그인 화면

신규 : 메인(메뉴 선택) -> 로그인 필요 할 경우 로그인

좌: 일반 / 우: 마우스 hover 시

좌우로 큼지막한 메뉴를 선택할 수 있게 변경!

/* 예시 */
<div class="outline-frame">
    <div class="inline-frame"></div>
    <div class="inline-frame"></div>
</div>

 

위와 같이 outline-frame을 중앙 정렬 해주고, inline-frame 두개를 나란히 할 수 있게 display: flex 또는 grid를 사용

.outline-frame {
    position: absolute;
    top: 50%;
    left: 50%;
    transform:translate(-50%, -50%);
    display: flex;
}

.inline-frame:nth-of-type(1) {
    border: 25px 0 0 25px;
}

.inline-frame:nth-of-type(2) {
    border: 0 25px 25px 0;
}

position: absolute; 와 transform:translate() 를 활용하여 중앙정렬 후 하위 요소들은 그에 맞게 border 처리를 해 줌.

추가로 메뉴별 마우스 hover 시 opacity가 달라지게끔 애니메이션 추가.

.inline-frame:hover {
    animation: fadeIn 0.5s forwards;
}

.inline-frame:not(:hover) {
     animation: fadeOut 0.5s forwards;
 }

@keyframes fadeIn {
    from {
        opacity: 0.7;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0.7;
    }
}

 

 

- 기록 2

메뉴는 심플하게 2가지로 가려고 한다.

1. 역사(동아리 역사...)

2. 개발(이름이 좀... 동아리원들이 개발했던 내용 보는 곳)

 

'역사' 는 history 라고 하면 될 것 같은데... '개발' 을 정하기가 어려워서 gpt한테 물어봤다.

 

음... 한 단어로 표현하고 싶은데...

developed 도 빠꾸 먹었다... 추천해준 단어들은 별로 맘에 안드는데...

역시 변수명은 gpt!

캬하! portfolio 구나! 정해졌으니 적용해보자.

이미지도 명칭에 맞춰 변경해주었다.

 

무료 이미지는 Font Awesome 을 주로 활용하고 있다.

 

영어로만 검색 가능한게 아쉽지만, 뭐 엄청 어려운 단어 쓸 거 아니면 대부분 검색 가능하니 문제없이 유용하게 사용중이다(검색할 때 FREE 를 꼭 선택하기)

 

history의 경우엔 모두가 볼 수 있게 하고, portfolio의 경우엔 로그인 했을 경우에만 페이지를 이동할 수 있게 하려고 한다.

모두가 볼 수 있게 해야하나? 이건 좀 고민하고 바꿔야겠다.