[나만의 프로필 페이지] 오상현 제출합니다

[ohsanghy09]

과제명

나만의 프로필 페이지

💡 작업 내용

• HTML, CSS 파일 생성
• 이미지, 텍스트, 시맨틱 HTML 구현
• 외부 CSS 분리
• GitHub Page 배포링크 작성

🔗 참고 링크

https://likelion.net/courses/technology/next-frontend

• HTML Beginner, HTML Next Level
• CSS Beginner, CSS Next Level

🤔 느낀 점 / 어려웠던 점

CSS 배치가 쉽지 않았습니다..

[ohsanghy09]

PR Update

push하면 commit 기록을 따라 계속 업데이트.

[wzrabbit]

@ohsanghy09 👋🏻

안녕하세요 상현님, 저는 마모키의 프론트엔드 파트 리뷰어 김의천이라고 해요. 저를 부르실 때는 가볍게 실명으로 불러주시면 될 것 같습니다

자기소개 페이지는 잘 보았어요, 카드가 나열된 형태의 깔끔한 구성이고, Github Pages에 또다른 페이지도 배포해주셨네요 👍🏻
시멘틱 태그도 주의깊게 사용해 주신 부분을 잘 볼 수 있었던 것 같아요

다만 개발은 "만들고 끝"이 아니라, "왜 이렇게 만들었는지", "다른 접근 방법은 있는지" 등 목적과 의견을 나누며 탐구하는 것도 중요하다고 생각해요. 그래서 지금 이 자리가 있는 거죠.

리뷰는 단순히 "이렇게 하세요" 라고 지시하는 것보다, 개발자들이 서로 의견과 근거를 나누며 더 좋은 해결책을 찾아나가는 과정이라고 생각해요. 그래서 질문을 많이 적어 보았어요.

혹여나 몇몇 코멘트가 상현님에 대한 지적이라고 생각이 드실 수도 있을 텐데, 그게 아니고 상현님이 아니라 상현님의 코드 에 대해 이야기하는 것이라고 생각하시면 왜 리뷰라는 절차가 있는지 이해하실 수 있을 것 같아요. 똑같은 원리로, 상현님이 제가 이야기한 사항에 대해 이유를 들어 반박하거나, 다른 의견을 제시하는 것에도 저는 비난이라고 생각하지 않고 의견을 나누는 과정이라고 생각할 거에요. 그러니 의견을 공유하시는 데 주저하지 않으셨으면 합니다!

구현은 마치셨으니, 이제 작성하신 코드에 대해서 같이 고민해보죠.
화이팅입니다!

*이후 질문사항이 생기신다면 -- 이곳에 자유롭게 적어주셔도 될 것 같고, 마모키 Discord의 프론트 채널에 자유롭게 저 멘션하고 질문 적어주셔도 될 것 같아요. 솔직히 지금까지는 비어 있어서 썰렁하네요

[wzrabbit]

alt로 "시고르자브종"을 적으셨는데, 실제로 웹사이트를 보면 "시고르자브종" 이 적혀 있지는 않잖아요? UI에 아무 변화가 없어 보이는데, 여기에서 alt가 하는 역할은 무엇이길래요? 🤔

[wzrabbit]

클래스명인 .border만 보았을 때에는 윤곽선과 관련된 스타일일 것 같은데, 실제로 여기 있는 스타일들을 보면 윤곽선뿐만 아니라 margin을 통해 여백도 조정하고 있고, width를 통해 클래스를 이용하는 사용처의 길이도 정하고 있어요. 즉 하는 역할이 이름만 봤을 때 예상한 것과는 다른 상황으로 보여요

클래스의 이름만 보고도 어떤 스타일이 담겨 있을지 예측할 수 있으면, 나중에 코드를 다시 읽을 때 훨씬 수월하게 읽으실 수 있을 거라고 생각해요 -- 특히 여러 사람이 협업하는 환경에서는 다른 사람의 코드를 수정하거나 사용하기도 하니 중요성이 더욱 부각될 거에요.

이 클래스가 하는 역할이 좀 더 잘 드러나도록 이름을 구상해 보시는 것은 어떨까요? 역할이 잘 드러난다면 무엇이든 좋지만, 클래스는 그 요소가 무엇인지, 또는 어떤 역할을 하는지 로 작명하는 경우가 많아요. 예를 조금 들어볼 테니, 작명에 참고하셔도 좋을 것 같아요

• .product-card -- 상품 카드 (이 요소가 무엇인지)
• .price-tag -- 가격표 (이 요소가 무엇인지)
• .sold-out -- 품절 상태 (어떤 역할 및 상태인지)
• .featured -- 추천 상품 강조 (어떤 역할인지)

[wzrabbit]

CSS에는 단축 속성이라는 게 있는데요, 몇몇 스타일의 경우 여러 속성을 하나의 속성으로 표현할 수 있게끔 해 주는 속성이에요. 스타일들을 나열하느라 엄청나게 코드가 길어질 수 있는 CSS 스타일 특성상 잘 사용하면 더 가독성이 좋게 스타일을 짜실 수 있을 거에요.

지금도 좋은 코드지만 단축 속성에 대해 찾아보신 이후 이 스타일들을 단축 속성을 이용해 묶는다면 더 간결하게 스타일을 짤 수 있을 것 같은데 어떻게 생각하시나요?

[wzrabbit]

오, 프로젝트에 <header>, <main>, <section>, <footer> 시멘틱 태그를 잘 도입해 주신 것 같군요 👍🏻
여기서 몇 가지 질문을 드려 보고자 합니다

1️⃣

시멘틱 태그들, 왜 쓰는 걸까요? 솔직히 이렇게 써도 웹사이트는 문제 없이 잘 보여지거든요. 심지어 눈에 보이는 동작도 같아 보이고요. 이번 과제에서는 사용이 필수였지만, 상현님이 시멘틱 태그를 조사하시면서 느낀 새로운 이유들도 있을 것 같아서 궁금해요

- <header>
-   <section class="border center">
+ <div>
+   <div class="border center">
      <h2>( 프로필 사진 )</h2>
      <img src="./dog.jfif" alt="시고르자브종" />
-   </section>
- </header>
+   </div>
+ </div>

2️⃣

<header>와 <footer> 사용에 대해서 이야기 해 보고 싶은데, 상현님은 <header>와 <footer>를 사용하는 기준이 어떻게 되시나요?

사실 시멘틱 태그를 사용한다고 해서 이 두 태그들을 필수로 사용해야 하는 것은 아니거든요. 웹사이트의 디자인과 성격에 따라 갈린다고 생각해요. "보다 머리말스러운", "보다 꼬리말스러운" UI에 붙이면 좋을 것이라고 저는 생각하고 있어요. 머리말, 꼬리말이 그렇듯이 웹사이트의 구체적인 콘텐츠보다는 제목이나 카테고리들, Copyright가 쓰여 있는 곳과 같이 보조하는 내용이면 좋을 거라고도 생각되고요.

이건 관례는 있지만, 정답이 정해진 건 아니라서 저는 상현님의 생각을 들어보고 싶어요

[wzrabbit]

주석을 보았을 때는 각각 "자식 요소 세로 방향 정렬", "자식 요소 가로 방향 정렬" 이라 둘이 충돌하는 느낌이 드는 것 같은데, 사실 flex-direction과 align-items, justify-content는 셋 모두 요소의 정렬에 관여하지만 무엇을 구체적으로 정렬하는지는 다를 거에요

세 속성의 차이점이 무엇이고, 각각 무엇을 정렬하는 데 관여할까요?

[wzrabbit]

sans-serif가 뭔진 알고 있었는데 fantasy라는 것도 있었군요? 저도 처음 안 정보네요 🤔 MDN 문서에 잘 정리되어 있군요

• https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/font-family#fantasy

fantasy는 CSS의 다섯 가지 기본 글꼴 분류(generic font family) 중 하나로, 장식적이고 유희적인 스타일의 글꼴을 나타낸다고 하네요
특정 폰트가 아니라 포괄적 분류이기 때문에, 실제로 어떤 폰트로 렌더링되는지는 브라우저와 OS 환경마다 다르고요

Windows 11 / Chrome에서 상현님 사이트를 열어 보았는데 저는 Impact 글꼴이 적용된 것으로 보이네요

[wzrabbit]

지금 상현님 사이트가 카드들을 한 줄로 나열한듯한 형태이고, flexbox를 사용하고 계신 상황이고, 간격이 있는 UI잖아요?

이 경우 margin-bottom 사용도 좋은데, flexbox만의 스타일인 gap이란 것도 사용할 수 있어요. 이 경우 자식 요소들을 차례로 배치할 때 자체적인 간격을 만들어 줄 수 있어요. 간격은 자식이 아닌 부모가 정해주는 거라 자식 자체에는 여백이 생기지 않아서, 자식을 여러 곳에 재사용할 때 쓰기 좋은 구조가 되기도 해요. 한 줄로 배치하는 레이아웃을 만드는 데 특화된 flexbox의 강력함 중 하나라고 볼 수 있죠.

필요에 따라 도입해보셔도 좋고, 현재의 UI를 유지하셔도 좋을 것 같아요

[wzrabbit]

target="_blank" 은 사용해 주신 이유가 있으신가요?