[2주차] 과제 박재현 #1
[2주차] 과제 박재현 #1
Conversation
There was a problem hiding this comment.
안녕하세요! 리뷰 코멘트 달러 온 최민주입니다! 바쁜 시간 동안 열심히 만들어주신 코드 잘 보았습니다!! 이번에 html과 css를 처음 배우셨다고 하셨는데도 다양한 기능과 태그를 통해 정말 열심히 구현하려 노력하신 게 보여 정말 좋았습니다:) 다음번에도 좋은 코드 기대하겠습니다 수고 많으셨어용!!
| </header> | ||
| <main> | ||
|
|
||
| <article> |
There was a problem hiding this comment.
오, article 태그를 사용하셨네요! 이런 태그를 적재적소에 알맞게 사용하면 나중에 협업할 때도 정말 보기 편해지는 것 같아요 ㅎㅎ 저는 항상 이런 태그들을 잘 사용을 못해서 ㅜ 사용하신 모습이 너무 좋아보였습니다! bb
| <main> | ||
|
|
||
| <article> | ||
| <ul> |
There was a problem hiding this comment.
오옹 반복되는 포스팅 카드들을 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> |
There was a problem hiding this comment.
풀리퀘에서 본 어려웠던 점을 보고 말씀드리면, 포스팅 카드 하나하나는 그 구조가 똑같기 때문에
| </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로 조절)
| font-size: 20px; | ||
| background-color: white; | ||
| position :relative; | ||
| border: 0; |
There was a problem hiding this comment.
border은 버튼 요소의 가장자리? border-line을 어떻게 디자인할지에 관한 친구로, 저는 보통
border: solid 1px black;
이런 식으로 쓰는데, solid는 실선으로 하겠다, 1px는 굵기가 1px다, black은 색깔이 black이다 라는 뜻입니다! 이걸로 자신이 원하는 대로 버튼을 만들어 볼 수 있습니다.
추가적으로
border-radius: 10px;
이렇게 쓰면 특정 요소의 꼭짓점이 10px만큼 둥글어집니다.
border-radius: 100%;
하면 아예 모양이 원모양이 되고요!
|
|
||
| #포스팅1{ | ||
| width: 20%; | ||
| height: 25vh; |
There was a problem hiding this comment.
오, 길이를 정하는 데에 있어 다양한 단위를 많이 쓰셨네요! %로 하면 반응형을 구현할 수 있고, vh는 지금 사용자가 보고 있는 화면 전체를 100vh로 두고, 그 안에서의 비율을 조정할 수 있어서 좋죠! 다양한 단위들을 적절하게 쓰면 확실히 보기 편해지는 것 같아요
✨ 구현 기능 명세
벨로그 메인화면의 제목, 상단 아이콘(검색기능과 로그인화면으로 이동하는 아이콘), 포스팅목록 구현
포스팅 카드에 hover 되었을 때 어두워지는 효과, 돋보기 아이콘과 로그인 아이콘에 hover되면 색 바뀌는 효과
🎁 PR Point
몰려서 나온 학교 과제의 여파로,, 어제 밤에서야 강의를 들을 수 있게 되어서 어제 생전 처음 배운 html/css로 오늘 과제를 한거라 모든 부분이 엉성할거에요,,,^^ 어떤 부분이든 코멘트 주시면 감사하겠습니다 ><
😭 어려웠던 점
포스팅 카드를 이미지로 구현하면 되는지 칸을 나눠서 이미지 칸이랑 이미지 밑에 텍스트 부분을 따로 구현하는건지 헷갈렸어요..! 마음은 이미지 칸과 이미지 밑 텍스트부분을 나눠서 구현하고 싶었지만 능력치의 한계로...^^ 우선 하나의 이미지로 구현해서 제출합니다 시험기간 휴동기간 동안 수정해보도록 할게요 !
ㄴ 오마이갓 포스팅 카드의 사진이랑 멘트랑 사용자랑 댓글수 같은걸 따로 구현하는게 맞았네요....^^ 시험기간 휴동기간 내에 꼭 더 개발하도록 하겠습니다,,, ^0^
😎 구현 결과물
KakaoTalk_20231006_212837259.mp4