WIL 1주차 WEEK I LEARNED

WIL이란?

• 개발자는 코드로 말합니다. 더 좋은 코드로 이야기하려면, 좋은 글을 쓰는 연습도 필요하답니다.
• 글 쓰는 연습에 기록과 회고만큼 좋은 것이 없지요 ✍️

 

개인 페이지!!

 

 

-이미지 <a> 태그 스크롤 다운 기능

<div class="album-wrap" style="color:goldenrod">
    <nav>
        <ul>
            <li>
                <a href="#title1">ALBUM INFO</a>
            </li>
            <li>
                <a href="#title2">WHAT ABOUT ME?</a>
            </li>
            <li>
                <a href="#title3">MBTI & TMI</a>
            </li>
            <li>
                <a href="../김규민/index.html">MAIN PAGE</a> <!--메인페이지링크 첨부 필수-->
            </li>
        </ul>
    </nav>

nav바 소스

<div>
    <p style="text-shadow: 3px 2px 2px gray;" class="first-title hvr-grow" id="title1">ALBUM INFO</p>
</div>

스크롤을 멈추게 하고싶은 영역에 id값을 만들어주고 여기선 id="title1" 이것이고 위 코드에서 

a 태그 href 부분에 #+id명을 적어줍니다.

 

여기서 #은 선택자입니다. 이름을 부를 때 id인지 class인지 구별을 해주기 위한 장치입니다. 

-부트스트랩  트랜스폼 기능

transform:translateX()

지정 요소 X 또는 Y축으로 이동

translateX(거리) 함수는 좌우(수평 방향)의 이동 거리 값을 지정합니다.

 

@keyframes showText1 {
    from {
        transform: translateX(-30px);
        opacity: 0;
    }

    to {
        transform: translateX(0px);
        opacity: 1;
    }
}

 

.bottom-left {
    position: absolute;
    top: 100px;
    width: 850px;
    height: 500px;
    animation: showText1 15s;

}

이런식으로 연결하여서 구현하였다... css의 css를 입히는 그런 느낌

 

출처: https://mainichibenkyo.tistory.com/125

-호버 애니메이션 기능

 

.hvr-grow {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}

 

이 코드를 이용하여 효과를 주었다!!

 

 

-네비게이션 바 메뉴 홈버튼 기능

 

<div class="album-wrap" style="color:goldenrod">
    <nav>
        <ul>
            <li>
                <a href="#title1">ALBUM INFO</a>
            </li>
            <li>
                <a href="#title2">WHAT ABOUT ME?</a>
            </li>
            <li>
                <a href="#title3">MBTI & TMI</a>
            </li>
            <li>
                <a href="../김규민/index.html">MAIN PAGE</a> <!--메인페이지링크 첨부 필수-->
            </li>
        </ul>
    </nav>

nav바를 아래 사이트를 보구 구현하였다!!

 

출처: https://yjshin.tistory.com/entry/CSS-10-%EB%84%A4%EB%B9%84%EA%B2%8C%EC%9D%B4%EC%85%98-%EB%B0%94navigation-bar-%EB%A7%81%ED%81%AC-%EC%88%98%EC%A7%81-%EC%88%98%ED%8F%89

 

 

 

주간회고의 목적

1. 지난 일주일을 되돌아봄으로써 나의 현재 상태를 파악하고
2. 더 나은 다음주를 만들기 위해 어떤 부분을 어떻게 채워나갈 지를 고민하는 것

• 지난 일주일 동안 가장 인상 깊었던 배움에는 뭐가 있었지?
• 그 배움까지 다가가는데 어떤 어려움이 있었지?
• 그 과정에서 나는 무엇을 깨달았고, 어떤 감정/생각이 들었었지?
• 결과적으로, 현재 나의 상태는?
• 이 상태에서 다음 일주일을 더 잘 보내려면 어떻게 해야 할까?

추천하는 템플릿

• **FACTS(사실, 객관)** : 이번 일주일 동안 있었던 일, 내가 한 일
• **FEELINGS(느낌, 주관)** : 나의 감정적인 반응, 느낌
• **FINDINGS(배운 것)** : 그 상황으로부터 내가 배운 것, 얻은 것
• **FUTURE(미래)** : 배운 것을 미래에는 어떻게 적용할 지

지난 일주일간 나는 이틀정도는 강의를들으면서 캠프오기전의 공부내용을 복습하였고 3일간 프로젝트를 하였다. 

월~화 즉 이틀간 복습공부를 하였는데 이때까지만해도 나는 이정도의 내용을 숙지정도만하고 그냥 따라가는 정도로하는 가벼운마음으로 시작했다.

엄청난 부담감을 앉고 하기에는 이미 TIL작성이라던지 기록을 남기는 일에 자신도없었고 그러한 습관자체가없었기에 굉장히 어려웠다.

마침 프로젝트를 시작했는데 아무것도 없이 시작하는 기분이였다.

예전에 프로젝트를 했을때는 어느정도 초안이라던지 뭔가 기준같은게 어느정도는 있었는데 이번에는 생판 처음부터 하나둘 전부 빌드를 해야된다고생각하니까 너무 막막하고 앞이 깜깜했다.

이론에서 배웠던부분들을 바로바로 적용하기에는 우리가 구현해낼려고하는것들과 또 여러가지의 것들을 구현해내기에는 굉장히 좀 수준의 차이가 많이 났다고 느꼈다.

물론 활용을 해서 전부 구현해내면 둘도없이 좋은것들이지만 막상 나의 소개 페이지에서 우리가 배워왔던 그 기술을 응용해서만 나타내기에는 너무나도 부족했고 그러기위해서는 새로운 판을 다시 짜야했다.

늘 div같은것도 스스로 직접짜거나 위치 만져줘서 해봤던 경험이 별로없고 강의를 듣다보면 코딩스니펫에 익숙해져있다보니까 코딩스니펫처럼 코드 복붙에 너무 연연해했던 과거때문에 나 스스로가 빌드할때 div 즉 레이아웃 설정조차 스스로 제대로 못해서 진짜 애먹었다.

특히 나중에 에니메이션을 넣어줄때 또한 그 div문제떄문에 애를 먹게되었는데 가장 큰이유는 div가 아니라 실상은 백그라운드 이미지때문에 애를 먹었다.

사이즈가 규격이 정해져있기떄문에 그 규격에 맞는 크기만큼 짜주기위해서 나는 그 픽셀값을 조정해줘야되는데 그부분을 조정하다보면 내가 생각하는 그 이쁜 배경이미지의 느낌이 전혀 나오질 않다보니까 미적감각을위해 기능을 포기하게되는데 이건 나중에 굉장히 큰 실수를 야기한사실이라는걸 다시 깨닫게된다.

내가 생각해놨던 그런 기능들이랑 배치해야되는부분들이있다보니까 내가 구현은 했는데 깔끔하게 코드정리가 되질 못하였고 그부분에서 내가 80퍼센트만 나의 목적에 도달했다고생각했다.

팀원들과 많이 소통을 나누면서 에니메이션 부분이라던지 css 활용하는법 그런부분에 있어서 많이 부족하고 약했던 부분들인데 그런부분에 대해서 더 많이 보완이되고 이젠 어느정도 혼자 찾아서 적용할수있는 상황까지 오게되었다.

적용이안된다는 문제보다는 구도에서 깨지기떄문에 에니메이션을 안넣은 느낌이 강했다.

그러니까 쉽게말해서 내가 막힘없이 내가 원하는 기능들을 다 넣기위해서는 레이아웃을 어떻게 짜느냐 이게 굉장히!!! 중요하다는걸 다시한번느꼈다.

레이아웃을 잡아주는것 즉 뼈대를 잘 잡아야 거기위해 어떤 색칠을하던간에 잘 입혀지기때문이다.

더 나은 다음주를 위하여 나는 내가 부족했던부분이 결국 기본기라고 생각이되었다 아무리 빌드쳐도 그 첫 단추가 제대로 꿰지않으면 안된다는 말 사실 이 첫 단추라는 의미를 우린 다시한번생각해볼필요가있다.

과연 그 첫 단추를 잘 꿰기위해서 우리가 많은 레이아웃을 짜본다고 달라질까? 나는 그렇게 생각하지않는다 항상 그 상황이라는건 변하고 주어진 상황에 알맞게 우리가 레이아웃을 판단해서 잘 활용하고 그부분에 대해서 적재적소로 뽑아낼줄알아야된다고생각한다.

사실 이런 창의성같은부분에있어서 내가 갖고있는 상상의 나래를 다 펼치지 못했던이유는 첫번쨰는 시간적인 여유가 적었고 이건 사실 다른 수강생분들도 동일하기에 내가 하는 말들은 모두 변명일것이라고 생각이 든다.

그렇지만 무언가를 개발하기위해서는 많은 경험적인부분들이 필요하고 많은것들을 쌓아둔상태여야 내가 활용을할수있는 수단들이 생기고 그래도 한번이라도 접해본 기술이나 구조에대한 이해가 완벽하지않은이상 많이 힘들다고 생각한다.

대부분실력있으신분들은 다 과거 혹은 전에 많은 부분을 스파르타에 해오신분들이 많다고 생각이된다. 다들 고퀄리티의 무언가를 만들어오셨고 그 경험들은 무시못한다고생각한다. 

그렇기에 더 의기소침할 필요없이 나도 경험을 쌓아서 그분들과 동일한 선상에 오를수있도록 꾸준하게 할 생각을 가지고 할 예정이다.

진수야 강한놈이 오래가는게 아니라 오래가는 놈이 강한거다 힘내보자 ㅎㅎ 안되도 해봐야지 포기할꺼면 시도도 안하는게 맞으니깐 일단 시작한거 내 최선다해보고 에베레스트같이 높을지라도 가보자 어차피 나는 처음부터 다시 시작해야되고 개발자로써의 마인드나 지식은 비전공자와 비슷한수준이니까 다시 하나하나 쌓아보자 겁먹지말고 쫄지말고 나이키 정신 JUST DO IT!!