[2주차]클론코딩 이윤서

[dldbstj22]

✨ 구현 기능 명세

포스팅 글 누르면 링크로 연결되는 기능
폰트
이미지의 동그란 테두리

🎁 PR Point

코딩 자체가 거의 처음이라 많은 시간이 걸렸다. 원하던 모습을 만들어내지는 못했지만 짧은 기간 동안 강의랑 책 찾아보면서 해본 첫 개발이라 의미 있었다. 개념 공부를 좀 더 하고 더 완성도 있는 결과물을 만들어내고싶다.

😭 어려웠던 점

사진 첨부하는데 한 3일이 걸렸는데 알고보니 src를 scr로 쓰고 있었다. 너무 한심하고 허무했지만 찾아서 다행이다. 또한 트렌딩과 최신 글자에 박스를 만들어서 그 속에 아이콘을 넣어보고 싶었지만 못했고 오른쪽 상단에 검색 아이콘을 구글링해서 코드를 가져왔지만 구현되지 않았다. 또한 flex-direction:row를 했음에도 이미지가 매번 세로로 나열되어 답답했는데 inline-block을 하면 되는 것을 알았다.
가로를 5개로 정하고 싶은데 크기를 조절하는 방법이 아닌 다른 방법도 알고싶다.

😎 구현 결과물

[Minju-Kimm]

a태그에 실제 글 링크를 걸어두셨네요!! a태그 내에 img 태그 넣은 것 정말 센스있게 잘 짜신 거 같아요!!(저도 알못이지만 이렇게 짜는 게 정석이라 배워서..허허)

[Minju-Kimm]

오오 h1 정렬을 text-align으로 하셨군요! 저는 항상 부모 태그 내에 글자 태그를 flex로 정렬해주다 보니 생각해보지 못 한 발상이네요!

[Minju-Kimm]

img 하나하나 넣느라 고생 꽤나 하셨을 거 같아요...
alt태그에 게시물 설명까지!!
저는 귀찮아서 alt태그를 안 쓰기는 했는데, 시각장애인 분들이나 이미지 로드가 제대로 되지 않을 때 alt태그는 필수적이라고 하더라구요.. 배워갑니다!

[Minju-Kimm]

link 로 이미 css연결을 해두었기 때문에, css파일에
@import url('https://fonts.googleapis.com/css2?family=AR+One+Sans&display=swap');
를 넣어도 될 거 같다고 생각합니다 !!

[Minju-Kimm]

폰트어썸 사용하셨네요!! 저도 이번에 클론할 때 폰트어썸을 사용했어요 ㅎㅎ
script로 연결하는 방법도 있군요..
저는

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
로만 했었어서.. 배워갑니다!

[Minju-Kimm]

main태그..!!
저는 사용해본 적이 없는데 찾아보니

이렇게 사용하는 거였군요..!
너무 div만 남발하기 보다 이런 태그 사용도 좋은 거 같아요 ㅎㅎ

[Minju-Kimm]

트렌딩과 최신 글자에 박스를 만들어서 아이콘을 넣어보고 싶었다고 하셔서, button태그 대신 a 태그로 추가 구현해 보았습니다! 참고용으로 봐주세요!
참고로 font-awesome은 script태그로 안 써봐서...ㅠㅠ
위의 link태그를 추가 작성해주었습니다!

html

<h1>velog</h1>
    <div class="nav-box">
        <a href="#none" class="trending">
            <i class="fa-solid fa-arrow-trend-up"></i>
            <p>트렌딩</p>
        </a>

        <a href="#none" class="recent">
            <i class="fa-solid fa-arrow-trend-up"></i>
            <p>최신</p>
        </a>
    </div>

css

.trending, .recent{
    text-decoration: none;
    color: inherit;
    font-size: 20px;
    width: 100px;
    height: 40px;
    display: flex;
    /* 부모 박스에 flex걸어주고, justify-content: center; , align-items :center; 걸어주면 가로 가운데, 세로 가운데 정렬을 할 수 있어요! */
    justify-content: center;
    align-items: center;
    /* line-height: 속성으로 세로 가운데 정렬을 하실 수 있어요(텍스트 정렬); */
    line-height: 40px;
    /* 구분용으로 넣은 border라 없애셔도 됩니다 */
    border: 1px solid gray; 
}
.nav-box{
    display: flex;
    flex-direction: row;
}
header{
    width: 100%;
    height: 120px;
    display: flex;
    flex-direction: column;
}
h1{
    text-align: left;
    color: black;
    font-family: 'AR One Sans', sans-serif; 
    letter-spacing: 0.2em;
}

[Minju-Kimm]

flex-direction:row를 했음에도 이미지가 매번 세로로 나열되어 답답했는데 inline-block을 하면 되는 것을 알았다.

-> 부모박스에 해야 의도한대로 적용이 됩니다!
li를 감싸는 부모박스인 ul에 적용해야 될거에요!
살짝만 수정해보았습니다! 참고용으로 봐주세요

ol,ul,li{
    list-style: none;
}

ul{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    flex-grow: 1;
    flex-shrink: 1;
}
li{ 
    border-radius: 25px;
    width: 210px;
    height: 210px;
    padding:20px;
    margin: 0 20px; 
    height: 210px;
    border-style: solid;
    border-width: 2px;
    flex-direction: row;
    margin-bottom:30px; 
    position: relative;
}

[Minju-Kimm]

코딩 자체가 처음이라고 하셨는데 정말 수고 많으셨어요!!
처음인데 엄청 잘하셨는데요.. 전 처음에 레이아웃 짜는 것도 제대로 못 했어요.. 지금도 초짜지만..
고생 많으셨어요!! 제 리뷰에 궁금한 점 있으시면 언제든 디스코드나 카카오톡으로 연락주세요!!
앞으로 함께 발전해나가는 gdsc 되었으면 좋겠어요!! 늦은시간에 알림이 와서 놀랐는데 정말 고생하셨네요..!! ㅎㅎ 시험기간 화이팅 하세요!!