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
32 changes: 32 additions & 0 deletions index.html
View file
Open in desktop
Copy link

Choose a reason for hiding this comment

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

안녕하세요! 리뷰 코멘트 달러 온 최민주입니다! 바쁜 시간 동안 열심히 만들어주신 코드 잘 보았습니다!! 이번에 html과 css를 처음 배우셨다고 하셨는데도 다양한 기능과 태그를 통해 정말 열심히 구현하려 노력하신 게 보여 정말 좋았습니다:) 다음번에도 좋은 코드 기대하겠습니다 수고 많으셨어용!!

Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css" />
<script src="https://kit.fontawesome.com/688ec50e73.js" crossorigin="anonymous"></script>
</head>
<body>
<header>

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

</button>
<button> <i class="fa-solid fa-user"></i>
</button>
</header>
<main>

<article>
Copy link

Choose a reason for hiding this comment

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

오, article 태그를 사용하셨네요! 이런 태그를 적재적소에 알맞게 사용하면 나중에 협업할 때도 정말 보기 편해지는 것 같아요 ㅎㅎ 저는 항상 이런 태그들을 잘 사용을 못해서 ㅜ 사용하신 모습이 너무 좋아보였습니다! bb

<ul>
Copy link

Choose a reason for hiding this comment

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

오옹 반복되는 포스팅 카드들을 ul 태그를 이용해서 목록으로 관리를 하셨군요! 이건 생각 못해봤는데 굉장히 재밌는 방법인 거 같아요 bb

<li><p id=포스팅1 ></p> <p id=포스팅1></p> <p id=포스팅1></p> <p id=포스팅1></p> <p id=포스팅1></p></li>
<li><p id=포스팅1></p> <p id=포스팅1></p> <p id=포스팅1></p> <p id=포스팅1></p> <p id=포스팅1></p></li>
<li><p id=포스팅1></p> <p id=포스팅1></p> <p id=포스팅1></p> <p id=포스팅1></p> <p id=포스팅1></p></li>
</ul>
Copy link

Choose a reason for hiding this comment

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

풀리퀘에서 본 어려웠던 점을 보고 말씀드리면, 포스팅 카드 하나하나는 그 구조가 똑같기 때문에

Suggested change
</ul>
</ul>
<div class="posting-card"> //가장 큰 상자가 되는 컨테이너
<img src = "이미지 링크"/> //이미지 박스 (img태그는 이미지 밖에 안 올려집니다)
<div class="text-box"> // 이미지 밑에 텍스트 박스
<p>타이틀</p>
<p>설명</p>
</div>
</div>

이런 식으로 제일 큰 박스인 posting-card div 태그 사이에 img 태그로 감싸진 img 부분과 text-box div 태그로 감싸진 부분 이렇게 두 가지 영역으로 나뉘고, 다시 text-box div 태그 안에 타이틀과 설명이 들어가는 방식입니다! 이게 바로 우리가 흔히 들은(?) 부모 요소와 자식 요소의 개념입니다. 서로 친구 관계여서 동등한 depth에 있는 건지, 자식이라서 부모의 성질을 계승하게 할 건지 등등을 고려하시면 좋습니당.
만약에 posting-card의 배경색을 바꾸면 그 아래에 있는 모든 컴포넌트들의 배경색이 바뀌겠지만, text-box의 배경색을 바꾸면 부모 요소인 posting-card나 친구 요소(?)인 img 태그는 영향을 받지 않겠죠?!

이렇게 하나의 posting-card라는 큰 박스를 만들어놓으면, 이제 각기 다른 내용물이 들어가더라도 크게는 posting-card라는 컴포넌트가 반복이 되는 거죠! (물론 배치는 css로 조절)

</article>

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


button{
margin: 10px;
font-size: 20px;
background-color: white;
position :relative;
border: 0;
Copy link

Choose a reason for hiding this comment

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

border은 버튼 요소의 가장자리? border-line을 어떻게 디자인할지에 관한 친구로, 저는 보통
border: solid 1px black;
이런 식으로 쓰는데, solid는 실선으로 하겠다, 1px는 굵기가 1px다, black은 색깔이 black이다 라는 뜻입니다! 이걸로 자신이 원하는 대로 버튼을 만들어 볼 수 있습니다.

추가적으로
border-radius: 10px;

이렇게 쓰면 특정 요소의 꼭짓점이 10px만큼 둥글어집니다.
border-radius: 100%;
하면 아예 모양이 원모양이 되고요!

left: 1300px;
flex-direction: row;
justify-content: flex-end;
}

i:hover{
color: palevioletred;
}

ul{
text-align: center;
}
li{
display: flex;
margin: 80px;
flex-direction: row;
justify-content: center;
}

#포스팅1{
width: 20%;
height: 25vh;
Copy link

Choose a reason for hiding this comment

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

오, 길이를 정하는 데에 있어 다양한 단위를 많이 쓰셨네요! %로 하면 반응형을 구현할 수 있고, vh는 지금 사용자가 보고 있는 화면 전체를 100vh로 두고, 그 안에서의 비율을 조정할 수 있어서 좋죠! 다양한 단위들을 적절하게 쓰면 확실히 보기 편해지는 것 같아요

background-image: url(캡처3.PNG) ;
background-size: 100%;
margin: 10px;
}

#포스팅1:hover{
filter: brightness(0.5);

}


h1{
position: relative;
left:10%;
top:70px;
}
Binary file added 캡처3.PNG
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.