20231018 TIL 개인과제 시작! grid, overflow 사용

강의 1주차 다음부터는 정리하기에 설명할 수 있을 정도의 이해도가 되지 않아서인지 몇시간동안 부여잡고 있어도 깔끔하게 정리가 안되길래 차라리 프로젝트를 하면서 정리를 하는 것이 더 효율적일 것 같다고 생각했다.

 

개인 과제를 내일부터 하려다가 html이랑css는 오늘 갑자기 삘이 와서 해버렸다. 

 

우선 오늘 치 결과

과제 조건 중에 '순수 바닐라 자바스크립트로만 코드를 짜라' 랑 노 부트스트랩이 있는데 좀 재밌긴 했다. 

 

내가 오늘 중점적으로 구현하려 한것

• 검색 input과 butten 구리지 않게 하기!  ->다른 사이트거 훔쳐보자
• 카드 정렬 (3장씩 나열) -> 우선 flex로
• 양 사이드 공간 확보해두기 (시간 남으면 뭔가 추가하려고) ->div로 만들어놓기
• 헤더 만들어보기

카드는

	<div class="cardbox">
                1
                <div class="cardContent">
                    <img id="poster_path" src="" alt="">
                    <h2 id="title">movie name</h2>
                    <p id="overview">movie comment</p>
                    <p id="vote_average">movie rate</p>
                    <p>movie id</p>

                </div>

            </div>

이렇게 짰는데  간단하게 1 은 rate순으로 순위를 내보려고 추가했고  카드에 들어갈 내용 줄줄 ~ 그리고 movie의 id를 넣어놨는데 스크립트에서 hide처리 할거다. (이번에도 필요성이 있는진 모르지만.. )

 

근데 지금 생각해보니까, 1을 저렇게 두지 말고 이름 앞에 1. 이름 이렇게 붙이는 게 나을듯! 

 

=> 이름을 젤 위로 올리고 1을 이름 앞에 두기 

 

양 사이드는 

<div class="sideThing1">
            무얼 넣을까
        </div>

이러게 했고 순서때문에 카드보다 앞에 하나 뒤에 하나 넣었다. 

이걸 넣다가 정렬하는게 조금 어려웠는데 

처음은  카드들, 양사이드 를 하나 묶어서 display : flex ~~ row 로 나란히 정렬을 했는데 그렇게 하면 새로운 카드를 추가하면 밑으로 가는 게 아니라 양사이드 사이로 꾸깃 들어가더라.. 

 

그래서 반복문으로 하면 빼빼로 대량 생산 하겠어서 다른 방법을 찾다가 살짝 컨닝처럼 예시로 보여준 웹페이지의 구조를 조금 훔쳐봤다. 그랬는데 grid란 css가 있다는 게 아닌가.. 이름만 들어도 어떤 느낌인지 알겠긴 해서 바로 구글링해서 방법을 찾았다. 

처음 쓴 방식은  카드랑 사이드를 넣어서 묶어 줬다. 

// 그리드 안에 넣을 요소들을 다 묶기
	.gridPart {
            display: grid;
//그리드를 몇칸으로 만들지!
            grid-template-columns: 1fr 1fr 1fr; 
            //=> repeat(3, 1fr)로 대체가능
            grid-template-rows: auto;
            //=> 요소의 수 만큼 알아서 

        }

이렇게 만들었더니 

이런식으로 나왔다.  카드가 그냥 다음 그리드로 순서대로 쌓였다.. 카드를 묶어놓은 cards를 하나로 잡아서 카드들이 한 그리드 안에 길게 배열되었다. 그래서 cards로 묶은 걸 풀어주고 다시 실행했더니 그냥 순서대로 그리드에 들어가더라.. 

 

내가 원하는 건 중앙에 3칸식 쌓이는 거고 양 사이드는 들어가면 안// 그리드 안에 넣을 요소들을 다 묶기
            grid-template-columns: 1fr 1fr 1fr;  //=> repeat(5,1fr)

로 만들어 준다음에 그러면 후자 처럼 그냥 계속 쌓이니까

            grid-column: 1/2;
            grid-row: 2/100;

 

이런 식으로 1번 부터 2번까지 그리드를 할당해 주면서 고정을 시켰다.  결과가 만족스러운 편이었다. 하지만 거슬렸던 것은 페이지를 축소를 하면 

헤더랑 바디랑 따로따로 노는 것이 거슬렸다. 네이버는 한몸처럼 작아지는데..  그래서 헤더 까지 그리드로 묶어주기로 했다.

 

헤더를 처음 넣었을 땐 난리도 아녔는데.. 맨위 헤더 따로 이름 따로 다 따로 그리드에 들어가서 페이지가 진짜 망가졌었는데 위에 처럼 그리드를 할당해줘서 해결을 했다. 

 

그래서!

이 사단이 났다! 대박. 1fr 를 지정한 그리드는 웹페이지 전체에서  분할되어 들어가니싸 전체에서 5분할 되서 갈기갈기 나눠졌다..

그래서 또 다시 column을 바꿔줬다. 이번엔 그리드 자체의 크기를 지정했다. 대강 카드 크기랑 계산해서.. 

해냈슈..  근데 아직 해결하지 못한건 사이드의 그리드 할당이 100으로 임시방편이여서 다른 방법으로  grid-area 를 이용해서 해보려고 다시 cards 묶어서 

 

.gridPart {
	grid-template-areas:
		"header header header"
		"   a    main    b   "
		"   .     .      .   "
		"footer footer footer";
}

각 위치에 해당하는 클래스에 아래를 추가해줬는데 

grid-area: header;
grid-area: a; 
grid-area: main; 
grid-area: b; 
grid-area: footer;

이상한 결과가 나왔었는데 기억이 안나네.. 내일 다시 해봐야지..

암튼 지금 상태로는 푸터를 포기하고 영화기록의 한계를 두거나 해야된다. 

 

https://studiomeal.com/archives/533

이번에야말로 CSS Grid를 익혀보자

자세한 설명 좌

 

그리고 대방의 검색칸 ! 네이버를 따라서 해봤는데 좀 잘 한 것 같다. 

        .searchBox {
            display: flex;
            flex-direction: row;

            height: 50px;
            width: 600px;

            border: 3px solid black;
            border-radius: 18px;

            overflow: hidden;

        }

        .searchInput {
            background-color: transparent;
            border-color: transparent;
            height: 45px;
            width: 500px;
            outline: none
        }

        .searchBtn {
            background-color: black;
            color: white;
            border-color: transparent;
            height: 50px;
            width: 95px;

        }

이런식으로 인풋이랑 버튼을 디브로 묶고 안에서 사이즈 조정해줬는데 디브 밖으로 삐져나온 부분은 

overflow : hidden;

를 해주면 밖으로 나간 부분은 숨겨진다! 

visible : 박스를 넘어가도 보여줍니다.  //존재 의미가 뭐지..
hidden : 박스를 넘어간 부분은 보이지 않습니다.
scroll : 박스를 넘어가든 넘어가지 않든 스크롤바가 나옵니다.
auto : 박스를 넘어가지 않으면 스크롤바가 나오지 않고, 박스를 넘어갈 때에는 스크롤바가 나옵니다.

그래서 카드 부분에도 auto를 넣어줬다.  혹시 설명이 긴게 있을까 해서 그랫는데 구글링 하다가 문득 flex말고 float로 카드를 만들면 불규칙적으로 쌓이게 해도 괜찮지않을까..

 

아직 덜 완성이라서 구역 배경색을 넣어봐서 뭔가 있어보이는데 없애면 ... 암것도..  

 

암튼 오늘은 여기까지!

 

 

• 검색 input과 butten 구리지 않게 하기!  ->다른 사이트거 훔쳐보자 => 네이버 따라해봤음
• 카드 정렬 (3장씩 나열) -> 우선 flex로 => 그리드 사용
• 양 사이드 공간 확보해두기 ->div로 만들어놓기 => 영화 순위에 없는 추천작이 쌓이게 해보자!, 방명록처럼
• 헤더 만들어보기 => 소박하게 또갱이 넣었다!, 시간 남으면 뭔가 더 만들어보자~

 

 

HIL(hour i learn)//시간표,, 시간별 공부 기록

13시간 공부!/ 5시까지 TIL마칠 수 있겠지..? // 못마침.. 6시야!!

 

TIL작성이 너무 오래걸리네~!

더 요령있게 쓸 수 있었으면 좋겠다.

 

자바스크립트 강의를 머리 쥐어 뜯으며 들었는데 이해가 안가서 혼공스랑 같이 보기도 했는데 약간 조금 씩 이름이 다르고 순서가 달라서 보기가 복잡했다. 그래서 1주차 정리만 2일 걸렷.. 

 

내일 의 내가 할 것!

• 혼공스 끝내기
• 퍼블리싱 책 보고 css 참고해보기 
• 자바스크립트 들어가기.. => 데이터 끌어오기, 카드에 대입하기 
• 사이드에 입력창과 카드 추가하기
• 오늘 코드 고치기