해보자 후회하지말고

feed랑 feed-detail화면 컴포넌트는 다 만들어뒀는데 한화면에 끼워보질않아서 주말에 각잡고 해보기로했다.
와장창 하면 세상에 그런 재앙이 없기 때문에...학원에서 하면 집중 잘 안될 것 같았음.
 
둘다 절반정도 완성을 했는데, 단순히 크기만 커지는게 아니라 레이아웃이 같이 변하는 구조라 이렇게 피그마에 그려놓은 나를 좀 때려주고 싶었다...^^... 그땐 자신있었는데 몰랐지 큰 함정이 있을거란걸.😂
 

✨ feed

 
상세화면 하고 나니까 여긴 좀 상대적으로 쉬웠던것같은 느낌적인 느낌 ^^........
 
 
✔️ 피드 글자와 좋아요&댓글 + 전체적으로 동시에 늘어나고 줄어드는 비율
 
1. 피드 내 텍스트 정렬
프로필 사진보다 글자 컨텐츠가 안으로 들어가있는데, 이 비율을 유지하면서 화면이 줄어들때 공간을 뺏기지도 말아야 한다는 것. 처음엔 겉을 싸고있는 박스에다 패딩이나 마진을 줬더니 화면이 좁아지면 공간을 뺏겨서 (그도그럴게 width는 컨텐트 기준으로 부여되는 수치이므로 min-width:300;을 주는건 컨텐트꺼고 그 바깥에 있는 패딩이나 마진은 의미가 없다) 인라인태그에다가 다이렉트로 패딩을 꽂았더니 컨텐트+패딩==컨텐트사이즈가 되어서 공간을 유지할 수 있었음.
 
따라서 flex-start도 text-box를 기준으로 start시점이 시작되지만, 내가 패딩을 먹여놓았으므로 패딩보다 뒤에서 start할 수 있어서 좌측정렬이 잘 됐고 공간도 뺏기지 않게 되었다!!!!! '컨텐트영역'을 생각해보면 당연한건데 거의 감으로 알아낸것 같음.

.feed-detail .text-box {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;

    width: inherit;
    height: inherit;
}

.feed-detail .text-box h1 {
    align-self: flex-start;
    padding: 15px 20px 15px 20px;
}

.feed-detail .text-box p {
    align-self: flex-start;
    padding: 0px 20px 20px 20px;
}

 
 
2. 좋아요,댓글, 북마크 라인 정렬 (나는 feed용 footer라고 별명을 붙여둠)
여긴 모듈부터 좀 잘못만들었던것 같다. 모듈 하나만 만들땐 중앙정렬 되어있고 잘 늘어나고 줄어드니 별 문제없어보였는데.... 위에 사진보다 안쪽에서 균형을 유지해야하는게 자꾸 공간을 뺏겨서 😂 아이콘끼리 한 블럭이고 북마크가 떨어져있는데 정렬을 유지하면서 공간도 안뺏기면서 비율도 맞아야하고 너는 마진이니 패딩이니 하면서 좀 더럽게 짜여진것 같다.
벗 난 최선을 다했어...
 
그리고 사진의 세로폭이 커지면서 처음엔 footer가 사진에 묻혀버렸었음.아마 height:100%이었던것 같음. 그래서 사진의 박스에 max-height를 주고 footer가 놓여있으니  사진이 점점 커져도 영향을 안받게 됐다!

.feed-detail .contents-box .feed-pic {
    width: 100%;
    max-width: 500px;
    max-height: 334px;

    margin-bottom: 10px;
}

.feed-detail .contents-box .feed-pic img {
    width: inherit;
    height: inherit;
}

 
 
3. 그냥 전체적으로 합맞추는게 어려웠음
모듈 잘 끼면 뿅 될줄 알았는데 사진 비율에 맞춰서 예쁘게 늘어나게 만드는게 전체적으로 어려웠다.
다행히 프로필과 footer는 같은 조건, 같은 폭이라 나중엔 프로필에 설정해둔것과 비교하면서 해결했음!
 
 

✨ feed-detail

 
전날 피드를 한게 그나마 다행이었다. 아니면 이 복잡한걸 해결 못했을듯.
 
동시에...토요일날 그렇게 머리싸매서 해놓고 일요일에 또 똑같은 모양을 만들고 있으려니 정말 환장하는줄 알았다. 복붙만 하면 될것같지만 전혀 아니고요? 그와중에 여긴 또 다른 함정이 있어서 날 헤매게 만드는데....
 
일단 '태그' 부분을 컴포넌트에서 빼놔서 그거 하나 더 추가하고 컴포넌트 합쳤다가 css 클래스명 겹쳐서 다시 조정하다가 html부터 싹 뜯어고치고 다시 css 적용해서 넘기느라 진을 빼고 시작했다.
 
 
✔️ 프로필라인 상단 라운드처리(absolute) + 하단 버튼들 배치 + 레이아웃 변경
 
1. 프로필 상단 라운드처리
처음 볼때부터 여긴 absolute로 하는수밖에 없겠단 생각을 하긴 했었다. 함정은 사진이 커지는데 프로필이 그 자리에 박혀있으면 안된다는것. 일단 둘이 한 박스로 묶어주긴 했는데 top으로 하면 사진때문에 자꾸밀려서 고민하다가, bottom으로 설정 해보라는 아이디어를 듣고 해봤더니 먹혀서 천만다행이었다!!!!!!!!
 

<section class="desc-mobile md:d:none-over">

    <!-- 피드 사진 모바일 -->
    <section class="feed-detail-pic">
        <h1 class="d:none">피드상세사진</h1>
        <div class="pic-group">
            <img src="/images/index/drawing.jpg" alt="운동">
        </div>
    </section>

    <!-- 피드 프로필 모바일 -->
    <section class="feed-detail-profile">
        <h1 class="d:none">피드 상세보기 프로필 모바일화면</h1>
        <div class="feed-detail-pro-list">
            <div>
                <div class="profile-pic"><img src="/images/커밋2.jpg"></div>
                <div><span class="text-profile-name">회원닉네임</span></div>
            </div>
            <div><button class="btn btn-size-3 btn-color-2 border-radius-5 btn-ing">진행중</button></div>
        </div>
    </section>

</section>

//----------------------------------

.feed-detail .desc-mobile {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    position: relative;
}

.feed-detail-profile {
    position: absolute;
    bottom: -50px;
}

▲ 태그가 모바일 이름으로 따로 묶여있는건..... 내가 설계를 복잡하게 해놓은 탓이다.....
 
 
2. 공유하기, 댓글, 북마크, 참여하기 버튼 배치
가로버튼 배치가 쉬울것같으면서도 가운데도 띄우면서 비율도 맞추면서 예쁘게 조정하는게 생각보다 힘들다. 기능적요소때문에 댓글버튼이 새로 생기면서 버튼 사이즈도 리사이징했다!
 
 
3. 레이아웃 변경
피그마 그릴땐 크게 레이아웃 변경 하면 되겠지 뭐! 라고 생각했는데 저놈의 라운드처리때문에 absolute가 걸려있으니까 레이아웃 넘길때도 꽤나 골이아팠다. 그래서 모바일은 [모바일용 사진+모바일 프로필(absolute처리된)]을 하나로 묶어서 min-width:800일때 날려버리고, [웹화면 사진] + [프로필+하위컨텐츠]로 다시 묶어서 flex-direction:row; 로 변경 후 모바일 화면에선 none처리를 했다.
 
이때 양쪽에 다 쓰이는 하위컨텐츠들은 (제목~참여하기버튼) 계속 살려둬야해서 웹용 프로필 태그들이 어중간하게 끼어들게 됨. html만 보면 그리 예쁜 구조는 아닌것같다. 아니...웹화면에선 그냥 relative, absolute조건만 풀고 정렬하면 되겠지 했는데 이게 묶이는 문제가 있어서 뜻대로 쉽게 안되더라고...
 
그리고 디테일화면에 들어가는게 워낙많아서 처음으로 클래스이름때문에 고전했다. 지금도 한끝차이로 중복을 피해가는 애들이 있어서, 다른 컴포넌트 더 붙일때 한번 더 보수를해볼 예정.
 
그래도 그나마 나았던건 선생님께서 클래스명 같다고 그 안에 다 때려넣지말고 레이아웃/스타일/미디어쿼리 이렇게 섹션을 나눠서 하라고 하셨는데 덕분에 레이아웃 배치에만 집중할 수 있었던것 같다.
 

이번 작업들로 얻었던건

• 최상위박스는 보통 flex와 center조건만 먹이고 그 아래에 <div>등으로 공간을 만들어서 본격적인 작업을 하는데, 최상위박스에 width:100%;를 해주는게 좋다는 것. 안써도 아래 박스들이 width:inherit;하면 별 문제없을거같은데 div공간을 추가하다 보면 윗박스가 딱히 설정된 width값이 없어서 아래 설정들이 초기화가 될 때가 있었다. 안전하게 그냥 써두는걸로.
• width는 컨텐트 값이다. 인라인 태그가 있을경우는 인라인에 패딩을 먹여야 컨텐트가 늘어나고 width도 그에 맞게 늘어난다!
• 컴포넌트 대충 짜지 말자... 여러 컴포넌트가 동일한 느낌으로 예쁘게 늘어나려면 컴포넌트에 미디어쿼리 넣을때 계산을 잘해둬야 나중에 고생을 덜한다. 
•  
•  
• 클래스명을 더 효율적이고 직관적이면서 안겹치도록 짜보자.... 오늘건 나도 정신 없이 이것저것 추가/삭제를 많이해놔서 누가 코드리뷰해달라고 하면 파악좀 해야할듯.
• 레이아웃이 변경될때 폭 800기준으로 해놓았으므로 사진과 컨텐트폭을 합해서 딱 800 혹은 800이하가 되어야한다! 플렉스로 row설정만 하면되지뭐~ 했다간 화면보다 튀어나가는 애들을 만날 수 있을것... 이것때문에 두번다 고생했는데 그냥 길어서 그런거였다. 미디어쿼리에 잊지말고 사진과 컨텐트 폭 초기화 설정넣어주기.  
•  

 
오늘 진짜 너무 힘들었다. 이렇게 또 주말이 가는구만.
만들고보니 예뻐서 좋긴 한데 약간 전생에 무슨죄를 지었나 하는 생각이 스쳐지나가기도 했..😂
제발 마지막까지 잘 구현되게 해주세요. 헤더랑 다른 컴포넌트 더 추가하기 무섭다 진짜...
 
7시에는 일어나야하는데 지금 새벽 2시반. 내일 수업을 위해서라도 자자!!!
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

오후 CSS 수업때 선생님께 피드백을 들었는데 생각지도 못한 부분에서 깨달음을 얻었다.

아무래도 화면을 구현해야한다는 생각때문에, 결과적으로 웹에 띄운 모양이 디자인과 맞으면 맞는거 아닌가 했는데, 너무 결과론적인 생각이었고, html자체는 웹'문서'이기 때문에 문서구조에 맞게 텍스트를 만들어두고, 거기에 css 기교를 부려서 (h1이 중앙에 출력된다면 걔만 선택자로 찝어낸다던가) 만들어야 한다는 것...

<header>태그는 썼어도 <h1>의 중요성에 대해 그리 깊게 생각하지 않았는데 (쓰더라도 출력내용이 아니면 주석처리 등으로 나만 참고할수있게 숨겼었다) css가 빠진 문서 내용만 봐도 무슨 웹문서인지 인식 가능해야하고, css로 만든 화면에서 빠져야 할 부분이라면 d:none을 쓰는게 맞는거였다. 접근하는 방향 자체가 달랐던것. 때문에 기존에 만들어둔 헤더를 싹다 뜯어고쳐야했다.

1. 기존 헤더 구조바꾸기

2. 미디어쿼리 적용해서 두가지버전을 쓸 수 있도록 하기

▶ 단순히 <li>하나씩 숨겼더니 큰화면일때 메뉴가 많아서 작은화면일때 쓰는 메뉴들이 자꾸 옆으로 밀렸다. (숨어있는 li태그들 때문) 

3. 선생님께서 <ul>을 두개로 나눠보라고 피드백을 주셨다.

▶ 나눈다음에 블럭단위로 미디어쿼리를 적용했더니 남아있는 태그도없고 엄청 깔끔하게 적용이 됐다 😁

✨ 헤더와의 전쟁 (feat.반응형)

<!--피드백 받고 수정한 구조-->

<header class="main-header md:main-header">
    <!-- 작은화면(모바일) under 800 -->
    <div class="header-content-box md:header-content-box md:under-800-none">
        <h1 class="text-jua md:header-title">헤더타이틀</h1> <!--h1에게 페이지의 타이틀이라고 확실하게 역할부여하기-->
        <nav>
            <ul class="header-list md:header-list">
                <li><a href="" class="icon icon-menu icon-size-40">메뉴</a></li>
                <li><a href="" class="icon icon-notification icon-size-30">알림</a></li>
            </ul>
        </nav>
    </div>

    <!-- 큰화면(웹) over 800-->
    <div class="header-content-box md:header-content-box md:over-800-none"> <!--div전체가 미디어쿼리에따라 사라짐-->
        <h1 class="logo logo-mini">OctaP</h1>
        <nav>
            <ul class="header-list md:header-list text-noto">
                <li><a href="">피드</a></li>
                <li><a href="">미션</a></li>
                <li><a href="">마이페이지</a></li>
                <li><a href="">고객센터</a></li>
                <li><a href="" class="icon icon-person icon-size-30">로그인</a></li>
            </ul>
        </nav>
    </div>
</header>

👉 깔끔하게 폭 딱딱맞는 헤더 크으으. 밑에 메뉴바는 다른 팀원이 작업중이라 합쳐만 봤다. 위아래 라인을 맞추려면 빨간박스랑 똑같이 블럭으로 묶어서 flex 조건을 똑같이 주면 될것같은데... 라고 생각중.

👉 아이콘이 애매하게 붕 뜨길래 봤더니 아이콘 대신 들어가있던 글씨가 <li>태그 안에있는데 그 공간이 남아있었다. reset파일에 li도 지정해놨는데 왜죠? 고민해봐야할듯...

✨ 로그인에 쓰일 인풋박스들

👉 메인 로그인창과 가입창 인풋박스가 똑같으면서도 달라서, 부분부분 조건만 수정해가며 쓸수있나 생각하다가 그럼 css 파일도 너무 더러워질것 같아 그냥 따로 빼놨다. 합체해야겠단 생각이 들면 그때가서 생각해야지 ㅎ..

✨피드와 피드상세화면

.feed-profile-list { /*전체 페이지 크기설정+ 프로필과 아이콘 사이 띄워주기*/
    display: flex;
    justify-content: space-between;
    width: 333px;
    height: 49px;
}

.grid-profile { /*grid설정*/
    width: 123px;
    height: 45px;
    display: grid;
    grid-template-columns: 45px 1fr;
    grid-template-rows: 25px 20px;
    column-gap: 9px;
    /* border: 1px solid blue;  -- 작업할때 보더 띄워두고 확인하면서 진행함!*/
}

.profile-pic { /*사진 들어갈 공간 병합*/
    grid-row-start: 1;
    grid-row-end: 3;
}

.profile-pic>img { /*사진 크기 설정+모양내기*/
    width: 45px;
    height: 45px;
    border-radius: var(--radius-size-30);
}

👉 그리드 기억이 안나서 복습을 좀 하면서 만들어봐야했다. (그리드 설정법에 디테일이 생각보다 많아서 적당히 적용했다...) 나는 그리드화 된 div안에 <img>를 띄우면 당연히 해당 그리드 박스안에 갇힐줄 알았는데 이미지가 그냥 뚫고 나왔다 ^^;;;  그래서 사진크기를 따로 설정해줌.

• 겉박스에 border줘서 그리드 겉범위 확인하면서 작업하기
• 공간사이즈를 신경써서 지정하는게 핵심!
• 만드려는 공간갯수(4개)만큼 <div>1</div> <div>2</div> <div>3</div> <div>4</div> 해두고 그리드 설정에 따라서 숫자들이 움직이는걸 보고 작업하니까 편했다. 병합할때 밀린것도 바로 확인가능했음.

• 선생님께서 피그마 처음 디자인할때부터 왜!!! 컴포넌트를 생각해가며 만들라고 하신지 이해하는중. 최대한 통일해야 부분부분 구현할때도 편하다.😵
• 내가 맡은곳은 그나마 컴포넌트작업을 열심히 해놓기도했고, 디자인할때부터 묶어서 생각해둔 부분이 있어서, css로 클래스 붙일때도 돌려쓴부분이 많다. 클래스&설정을 똑같이 갖다써서 (어차피 feed와 feed detail은 그화면이 그화면이다) 혹시모를 css 충돌도 방지중.

선생님께서 부분부분으로 하나씩 잡고 구현해놓으면 나중에 그걸 묶어서 꽂아넣을 수 있다고 하셨다.

아이콘도 싹 정리했고 (이제 수정 없겠지 제발요) 아이콘을 정리하면서 망가진 헤더도 복구 완료!

글씨 크기나 굵기도 다시 조정하면서 더 예쁜 헤더가 됐음.

몇번 해보니까 슬슬 간격 맞추는 노하우가 생기는것 같음.

메뉴는 나중에 자스가 들어가야 할테니 보완해야 할 점을 써보자면

• 클릭할때마다 메뉴명이 굵은 글씨로 바뀌고 보라색 선이 같이 다녀야 함
• 보라색 선이 살짝 더 아래로 내려왔으면 좋겠다. 지금은 가장 아래선을 기준으로 두께가 올라가서 겹쳐진 느낌이 안든다!

그리고 생각지못하게 알게된 & 고려해야 했던 점은

• 아이콘 만드느라 배운 슈도클래스를 선 위에 또 선을 올리면서 쓰게 된다는 것 (이미지를 만들 공간을 슈도로 하나 더 만드니까, 선도 그렇게 하면 되지않을까 했는데 됨!)
• justify-content를 space-evenly로 했는데도 폭이 짝짝이길래 이상하다 싶었는데 글자수가 달라서 컨텐츠 폭이 다르기 때문에 나눠진 공백도 서로 달라서 그런거였음! 그래서 보정하는 작업을 해야 했다. 이런것도 신경써야하다니...?

/* 보라색선 그리기 */
.menu::before {
    content: "";
    position: absolute;
    bottom: 0;
    /* left: 0; */
    /* right: 0; */
    width: 125px;

    border-bottom: 3px solid var(--color-main-4);
}

/* 글씨길이 차이로 인한 폭 보정 */
.menu :nth-child(2) {
    margin-right: 2%;
}

.menu :nth-child(3) {
    margin-right: 2%;
}

다음은 프로필인데... 그리드 쓰고싶은데 그게 합리적인 방법일지 연구가 필요해서 일단 고민해보겠음 🤔 

수업 복습하면서 아이콘을 하나씩 만드는데 어떻게 해야 효율적으로 쓸 수 있을지 고민하다가 갑자기 얘네가 넘 귀여워서 뭐라도 써먹어보고싶었다. 

생각_1

일단 선생님이 알려주신대로 겉박스를 만들어둔걸 어떻게든 재활용하고싶었는데 속박스 사이즈와 다르니까 아이콘이 자꾸 잘리더라고..? 그래서 겉박스도 사이즈 버전대로 만들어야겠다는 생각을 했다. (맞는 해법인지는 모르겠다)

가만 보니 겉박스가 필요한건 overflow로 글씨를 없애버리기 위함인데, 그럼 그냥 태그에서 문자를 쓰지 않고 태그만 붙여서 하면 안되나? 이런식으로 말이다.....🤔 

<a class="icon"></a>

생각_2

<!--아이콘을 만들어두니까 html에 적용할것도 너무 간단명료해져서 좀 충격적...-->
<body>
    <h1>헤더만들기</h1>
    <div class="header">
        <div class="icon40 icon-menu">메뉴아이콘</div>
        <div><span>피드</span></div>
        <div class="icon30 icon-alarm">알림아이콘</div>
    </div>
</body>

(*반응형을 고려한 @media는 아직 넣지 않았다)

아직도 마진과 패딩 조절이 어렵다 흑흑

일단 폭을 지정해두고 justify-content: space-between;을 적용한건 기발하고 완벽하고 멋졌는데! 😎

아이콘들이 안쪽으로 조금씩 들어와야하다보니 피그마에서 x축 보고 치수를 계산한것도 좋았는데!

메뉴 속박스(슈도코드로 이미지가 뜨는 박스) 에다가 marin-left를 적용해도 잘 됐건만, 오른쪽 알람아이콘은 margin-right를 적용하니까 회색 선보다 더 바깥쪽으로 마진이 튀어나가버렸다. 나는 폭이 지정되어있으니까 당연히 안쪽으로 들어올거라 생각했는데.

padding을 지정하면 이미지가 밀려버려서 그것때문에 겉박스를 크게 만들기엔 이상한것같고... 결국 겉박스에다가 margin-right를 줘서 움직이게 했는데 이게 맞는지 모르겠다. 그렇다면 메뉴도 겉박스에다가 margin을 적용해야 맞을텐데!?...라고 생각하며 지금 다시 해봤더니 속박스에 마진을 줬을때 아이콘이 잘려나간게 맞았다.

아까 너무 신이 나서 몰랐나보다. 어쩐지 알림아이콘보다 10px이나 크면서 왜이렇게 작지??싶었다. 

이제 아이콘도 다룰줄 알겠다, 피드 하단바도 만들어봐야겠다 😁

얼레벌레 하고는 있는데 이게 맞는건지.....😂