Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
68 changes: 68 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Velog </title>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/def66b134a.js" crossorigin="anonymous"></script>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

폰트어썸 사용하셨네요!! 저도 이번에 클론할 때 폰트어썸을 사용했어요 ㅎㅎ
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" />
로만 했었어서.. 배워갑니다!

<style>
@import url('https://fonts.googleapis.com/css2?family=AR+One+Sans&display=swap');
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

</style>
</head>

<body>
<header>
<h1>velog </h1>
<button>트렌딩</button>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

트렌딩과 최신 글자에 박스를 만들어서 아이콘을 넣어보고 싶었다고 하셔서, 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;
}

<button>최신</button>


<!-- <button><i class="fa-solid fa-magnifying-glass "></i></button>

<button><i class="fa-solid fa-tree "></i></button> -->
</header>
<main>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

main태그..!!
저는 사용해본 적이 없는데 찾아보니
image
이렇게 사용하는 거였군요..!
너무 div만 남발하기 보다 이런 태그 사용도 좋은 거 같아요 ㅎㅎ

<article>
<ul>
<li><a href="https://velog.io/@seonkyo0466/%ED%99%88%EC%84%9C%EB%B2%84%EB%A5%BC-%EC%9A%B4%EC%98%81%ED%95%98%EB%A9%B4-%EC%96%B4%EB%96%A4%EA%B2%8C-%EC%A2%8B%EC%9D%84%EA%B9%8C%EC%9A%94"><img src ="https://e7.pngegg.com/pngimages/354/130/png-clipart-apple-color-emoji-smiley-emojipedia-emoji-emoticon-apple-thumbnail.png" alt ="게시물1" ></span></a></li>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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


<li><a href="https://velog.io/@seonkyo0466/%ED%99%88%EC%84%9C%EB%B2%84%EB%A5%BC-%EC%9A%B4%EC%98%81%ED%95%98%EB%A9%B4-%EC%96%B4%EB%96%A4%EA%B2%8C-%EC%A2%8B%EC%9D%84%EA%B9%8C%EC%9A%94"><img src ="https://e7.pngegg.com/pngimages/856/143/png-clipart-yellow-emoji-iphone-emoji-emoticon-smiley-emoji-face-electronics-face-thumbnail.png" alt = "게시물2" ></a> </li>

<li><a href="https://velog.io/@seonkyo0466/%ED%99%88%EC%84%9C%EB%B2%84%EB%A5%BC-%EC%9A%B4%EC%98%81%ED%95%98%EB%A9%B4-%EC%96%B4%EB%96%A4%EA%B2%8C-%EC%A2%8B%EC%9D%84%EA%B9%8C%EC%9A%94"><img src ="https://e7.pngegg.com/pngimages/630/871/png-clipart-heart-eyes-emoji-emoji-heart-iphone-love-emoji-smiley-sticker-thumbnail.png" alt = "게시물3"> </a> </li>

<li>
<a href="https://velog.io/@seonkyo0466/%ED%99%88%EC%84%9C%EB%B2%84%EB%A5%BC-%EC%9A%B4%EC%98%81%ED%95%98%EB%A9%B4-%EC%96%B4%EB%96%A4%EA%B2%8C-%EC%A2%8B%EC%9D%84%EA%B9%8C%EC%9A%94"><img src ="https://e7.pngegg.com/pngimages/842/921/png-clipart-emoji-perspiration-text-messaging-smiley-face-laughing-face-smiley-thumbnail.png" alt = "게시물4"> </a> </li>

<li><a href="https://velog.io/@seonkyo0466/%ED%99%88%EC%84%9C%EB%B2%84%EB%A5%BC-%EC%9A%B4%EC%98%81%ED%95%98%EB%A9%B4-%EC%96%B4%EB%96%A4%EA%B2%8C-%EC%A2%8B%EC%9D%84%EA%B9%8C%EC%9A%94"><img src ="https://e7.pngegg.com/pngimages/866/942/png-clipart-emoji-love-heart-sticker-emoticon-emoji-love-emoticon-love-heart-thumbnail.png" alt = "게시물5"> </a> </li>

<li><a href="https://velog.io/@seonkyo0466/%ED%99%88%EC%84%9C%EB%B2%84%EB%A5%BC-%EC%9A%B4%EC%98%81%ED%95%98%EB%A9%B4-%EC%96%B4%EB%96%A4%EA%B2%8C-%EC%A2%8B%EC%9D%84%EA%B9%8C%EC%9A%94"><img src ="https://e7.pngegg.com/pngimages/856/143/png-clipart-yellow-emoji-iphone-emoji-emoticon-smiley-emoji-face-electronics-face-thumbnail.png" alt = "게시물6" ></a> </li>

<li><a href="https://velog.io/@seonkyo0466/%ED%99%88%EC%84%9C%EB%B2%84%EB%A5%BC-%EC%9A%B4%EC%98%81%ED%95%98%EB%A9%B4-%EC%96%B4%EB%96%A4%EA%B2%8C-%EC%A2%8B%EC%9D%84%EA%B9%8C%EC%9A%94"><img src ="https://e7.pngegg.com/pngimages/1018/609/png-clipart-sleepy-emoji-illustration-emoji-domain-iphone-sleep-face-smiley-thumbnail.png" alt = "게시물7"> </a> </li>

<li><a href="https://velog.io/@seonkyo0466/%ED%99%88%EC%84%9C%EB%B2%84%EB%A5%BC-%EC%9A%B4%EC%98%81%ED%95%98%EB%A9%B4-%EC%96%B4%EB%96%A4%EA%B2%8C-%EC%A2%8B%EC%9D%84%EA%B9%8C%EC%9A%94"><img src ="https://e7.pngegg.com/pngimages/66/827/png-clipart-emoji-iphone-emoji-hug-text-messaging-emoji-electronics-heart-thumbnail.png" alt = "게시물8" ></a> </li>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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


<li><a href="https://velog.io/@seonkyo0466/%ED%99%88%EC%84%9C%EB%B2%84%EB%A5%BC-%EC%9A%B4%EC%98%81%ED%95%98%EB%A9%B4-%EC%96%B4%EB%96%A4%EA%B2%8C-%EC%A2%8B%EC%9D%84%EA%B9%8C%EC%9A%94"><img src ="https://e7.pngegg.com/pngimages/881/437/png-clipart-emoji-emoji-tongue-icon-smiley-miscellaneous-heart-thumbnail.png" alt = "게시물9"> </a> </li>

<li><a href="https://velog.io/@seonkyo0466/%ED%99%88%EC%84%9C%EB%B2%84%EB%A5%BC-%EC%9A%B4%EC%98%81%ED%95%98%EB%A9%B4-%EC%96%B4%EB%96%A4%EA%B2%8C-%EC%A2%8B%EC%9D%84%EA%B9%8C%EC%9A%94"><img src ="https://e7.pngegg.com/pngimages/746/343/png-clipart-emoji-shocked-apple-color-emoji-surprise-sticker-emoji-smiley-anger-thumbnail.png" alt = "게시물10" ></a> </li>

<li><a href="https://velog.io/@seonkyo0466/%ED%99%88%EC%84%9C%EB%B2%84%EB%A5%BC-%EC%9A%B4%EC%98%81%ED%95%98%EB%A9%B4-%EC%96%B4%EB%96%A4%EA%B2%8C-%EC%A2%8B%EC%9D%84%EA%B9%8C%EC%9A%94"><img src ="https://e7.pngegg.com/pngimages/906/700/png-clipart-emoji-illustration-apple-color-emoji-sticker-iphone-emoticon-dead-island-orange-smiley-thumbnail.png" alt = "게시물11"> </a> </li>

<li><a href="https://velog.io/@seonkyo0466/%ED%99%88%EC%84%9C%EB%B2%84%EB%A5%BC-%EC%9A%B4%EC%98%81%ED%95%98%EB%A9%B4-%EC%96%B4%EB%96%A4%EA%B2%8C-%EC%A2%8B%EC%9D%84%EA%B9%8C%EC%9A%94"><img src ="https://e7.pngegg.com/pngimages/688/190/png-clipart-emoji-illustration-emoji-devil-emoticon-purple-innovation-smile-emoji-face-violet-thumbnail.png" alt = "게시물12" ></a> </li>

<li>
<a href="https://velog.io/@seonkyo0466/%ED%99%88%EC%84%9C%EB%B2%84%EB%A5%BC-%EC%9A%B4%EC%98%81%ED%95%98%EB%A9%B4-%EC%96%B4%EB%96%A4%EA%B2%8C-%EC%A2%8B%EC%9D%84%EA%B9%8C%EC%9A%94"><img src ="https://e7.pngegg.com/pngimages/842/921/png-clipart-emoji-perspiration-text-messaging-smiley-face-laughing-face-smiley-thumbnail.png" alt = "게시물4"> </a> </li>

<li><a href="https://velog.io/@seonkyo0466/%ED%99%88%EC%84%9C%EB%B2%84%EB%A5%BC-%EC%9A%B4%EC%98%81%ED%95%98%EB%A9%B4-%EC%96%B4%EB%96%A4%EA%B2%8C-%EC%A2%8B%EC%9D%84%EA%B9%8C%EC%9A%94"><img src ="https://e7.pngegg.com/pngimages/354/130/png-clipart-apple-color-emoji-smiley-emojipedia-emoji-emoticon-apple-thumbnail.png" alt ="게시물1" ></span></a></li>
<li><a href="https://velog.io/@seonkyo0466/%ED%99%88%EC%84%9C%EB%B2%84%EB%A5%BC-%EC%9A%B4%EC%98%81%ED%95%98%EB%A9%B4-%EC%96%B4%EB%96%A4%EA%B2%8C-%EC%A2%8B%EC%9D%84%EA%B9%8C%EC%9A%94"><img src ="https://e7.pngegg.com/pngimages/881/437/png-clipart-emoji-emoji-tongue-icon-smiley-miscellaneous-heart-thumbnail.png" alt = "게시물9"> </a> </li>

</ul>


</article>
</main>



</body>
</html>
37 changes: 37 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@

h1{
text-align: left;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

color:black;
font-family: 'AR One Sans', sans-serif;
letter-spacing: 0.2em;

}


img {
width: 210px;
height: 210px;
object-fit: cover;
}

li{
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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;
}

display:flex;
display:inline-block;
border-radius: 25px;
width: 210px;
padding:20px;
margin: 0 20px;
height: 210px;
border-style: solid;
border-width: 2px;
flex-direction: row;
margin-bottom:30px;
position: relative;
}
button{
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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


margin: 10px;
font-size: 20px;
position :relative;
border: 0;
}