Skip to content

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

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

Open
ohsanghy09 wants to merge 5 commits into
base: ohsanghy09
Choose a base branch
from
+133 −0
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
97e0306
feat : index.html-기본 코드 작성, style.css-기본 정렬과 테두리 생성
ohsanghy09 Apr 8, 2026
665e569
Design: index.html, style.css - .border, .center 클래스 생성 및 적용
ohsanghy09 Apr 8, 2026
b85038b
feat : index.html - 기타정보에 github page 하이퍼링크 문구 추가
ohsanghy09 Apr 8, 2026
a5078aa
Design : index.html, sytle.css - h2 태그와 gitpage 태그에 class와 id 적용
ohsanghy09 Apr 8, 2026
c9b2f76
feat: 프로젝트 구조 변경 - profile 폴더 추가
ohsanghy09 Apr 10, 2026
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
0 README.md → profile/README.md
View file
Open in desktop
File renamed without changes.
Binary file added profile/dog.jfif
View file
Open in desktop
Binary file not shown.
82 changes: 82 additions & 0 deletions profile/index.html
View file
Open in desktop
Copy link
Copy Markdown
Member

@wzrabbit wzrabbit Apr 11, 2026

Choose a reason for hiding this comment

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

오, 프로젝트에 <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가 쓰여 있는 곳과 같이 보조하는 내용이면 좋을 거라고도 생각되고요.

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

Copy link
Copy Markdown
Author

@ohsanghy09 ohsanghy09 Apr 12, 2026

Choose a reason for hiding this comment

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

1️⃣

제가 생각하는 시멘틱 태그는 의미있는 영역을 구분하기 위해 나누는 거라고 생각해요. div 태그처럼 영역을 구분하는 건 같지만 시멘틱 태그들은 의미가 있는 부분을 구분하는 데 사용하더라구요.

이 코드를 작성하면서 <div> 태그는 의미있는 부분과 관계없이 영역을 구분하는데 사용하는 태그이고,
주제나 머릿말, 프로필 사진처럼 페이지를 대표하는 부분에는 <header>를, 주요 내용은 <main>을, 마지막 말, 출처, 기타 사항에는 <footer>를 사용하는 것처럼 의미가 있는 부분을 나누기 위해 사용하는 것이 시멘틱 태그라고 이 HTML 코드를 작성하면서 느꼈어요.

저는 특히 <section>와 <div> 태그를 사용할 때 어려웠었는데요, <section> 태그와 <div> 태그의 차이점을 몰랐어서 혼동이 왔던 것 같아요. 그래서 찾아보니 <section> 태그도 시멘틱 태그로 사용되는 만큼 의미있는, 좀 더 정확하게 말씀드리면 주제와 내용이 있는 부분을 나누기 위해서 사용한다더라구요. 그래서 불필요한 <div> 태그를 사용하지 않고, <section> 태그를 활용해서 주제와 내용이 있는 부분을 나눠서 작성했어요.

그리고 시멘틱 태그를 활용해서 코드의 의미가 있는 영역들을 구분하니까 확실히 가독성도 더 좋더라구요. 앞으로 HTML 코드를 작성할 때는 시멘틱 태그를 활용해서 의미있는 영역을 구분하고 사용하려고 노력해보려구요.

2️⃣

저의 <header> 와 <footer>의 사용기준은 영역의 용도에 따른 사용이라고 생각해요.

제가 알기로 <header>는 주로 머릿말, 주제와 같은 소개 및 페이지를 대표하는 프로필과 같이 페이지를 접하는 사람이 가장 먼저 볼 수 있는 것들로 구성해야 하는 것이고, 이게 <header>의 시멘틱 태그 사용의 의미와 맞다고 생각해요.

그리고 <footer>는 가장 마지막에 접하는 정보이기 때문에 전화번호나, 참고 사항, 출처처럼 기타 내용을 바탕으로 구성하는 것이 <footer> 사용의 의미와 맞다고 생각해요.

시멘틱 태그에 대해 생각을 해봤는데 개인의 코드를 작성할 때도 가독성을 좋게 해줘서도 좋지만, 협업할 때는 시멘틱 태그의 사용기준을 정하는 것이 좋은 것 같아요.

Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
<!-- html 파일 명시 -->
<!DOCTYPE html>

<!-- 한국어로 작성 -->
<html lang="ko">


<head>
<!-- 다양한 문자 인코딩 -->
<meta charset="UTF-8">

<!-- 화면 비율 100% 사용, 반응형 기본 화면 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- 외부 CSS 파일 사용 -->
<link rel="stylesheet" href="./style.css">

<title>오상현의 프로필 페이지</title>
</head>



<body>

<!-- 페이지 상단 -->
<header>

<!-- 주제 있는 영역일 경우 section 사용 -->
<section class="border center">
<h2>( 프로필 사진 )</h2>

<!-- 프로필 사진 -->
<img src="./dog.jfif" alt="시고르자브종">
Copy link
Copy Markdown
Member

@wzrabbit wzrabbit Apr 11, 2026

Choose a reason for hiding this comment

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

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

Copy link
Copy Markdown
Author

@ohsanghy09 ohsanghy09 Apr 12, 2026

Choose a reason for hiding this comment

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

안녕하세요 의천님, 제가 알고 있는 alt 는 이미지 로드 실패시 나오는 "이미지 대체 텍스트"라고 알고 있어요. 그래서 이미지가 폴더에 없거나, 경로가 잘못된 경우, 그리고 어떠한 경우로 이미지 로드에 실패할 경우를 생각해 대체할 텍스트로 "시고르자브종" 이라고 작성했고, 이게 alt의 역할이라고 생각해요!!

</section>

</header>


<!-- 메인 내용 -->
<main>

<!-- 이름, 전공, 한줄 소개 -->
<section class="border center">

<h2>( 이름, 전공, 한줄 소개 )</h2>
<p>이름 : 오상현</p>
<p>전공 : 소프트웨어융합학과</p>
<p>한줄 소개 : 잘 부탁드립니다!!</p>
</section>


<!-- 관심사/기술목록 -->
<section class="border center">
<h2>( 관심사/기술목록 )</h2>
<ul>
<li>관심사는 산책입니다! 산책 좋아합니다!!</li>
<li>html</li>
<li>css</li>
<li>text</li>
</ul>
</section>

</main>



<!-- 기타 정보 -->
<footer>
<section class="border center">
<h2>( 기타 사항 )</h2>

<p>전화번호 : 010-5316-5859</p>

<a id="gitpage" href="https://ohsanghy09.github.io/" target="_blank">오상현의 GitHub Page</a>
Copy link
Copy Markdown
Member

@wzrabbit wzrabbit Apr 11, 2026

Choose a reason for hiding this comment

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

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

Copy link
Copy Markdown
Author

@ohsanghy09 ohsanghy09 Apr 12, 2026

Choose a reason for hiding this comment

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

해당 코드를 작성하고 직접 하이퍼링크로 들어가봤는데 현재 HTML 페이지가 Github Page로 이동하더라구요..

다시 원래 페이지로 돌아가는 게 불편했고, 현재 페이지와 하이퍼링크 페이지를 같이 볼 수 있는 경우를 생각했어요.

저 뿐만 아니라 다른 분들도 불편하실 것 같아 새로운 탭으로 생성하려고 target="_blank"을 사용했습니다.



</section>
</footer>

</body>

</html>
51 changes: 51 additions & 0 deletions profile/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
/* body의 자식요소로 배치 적용 */
body {
display: flex;
/* 자식요소 배치적용 - 초기에는 화면에 너비로 쌓임 */
flex-direction: column;
/* 세로 방향으로 header, main, footer 정렬 */
align-items: center;
/* 가로방향으로 header, main, footer 정렬 */
}

/* border(테두리) 적용 */
.border{
Copy link
Copy Markdown
Member

@wzrabbit wzrabbit Apr 11, 2026

Choose a reason for hiding this comment

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

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

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

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

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

Copy link
Copy Markdown
Author

@ohsanghy09 ohsanghy09 Apr 12, 2026

Choose a reason for hiding this comment

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

제가 클래스명을 .border라고 작성한 이유는 윤곽선으로만 사용하려고 했고, CSS 요소를 추가하면서 의도치 않게 윤곽선만 적용하는 게 아니라 다른 역할도 하게 되는 클래스가 됐는데 윤곽선이 가장 직관적인 효과를 갖고 있어서 굳이 이름을 바꾸지 않았어요.

그런데 의천님의 의견을 듣고 저 혼자가 아닌 "협업하는 환경"의 관점에서 보니 역할에 따라 정확하게 작명하는 게 좋을 것 같다는 생각을 했어요. 예를 들어주신 부분 참고해서 작명에 좀 더 신경써볼게요!!

width: 350px;
border-width: 3px;
/* 테두리 두께*/
border-style: solid;
/* 테두리 종류 : 실선 */
border-color: green;
/* 테두리 색상 */
Comment on lines +14 to +19
Copy link
Copy Markdown
Member

@wzrabbit wzrabbit Apr 11, 2026

Choose a reason for hiding this comment

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

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

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

Copy link
Copy Markdown
Author

@ohsanghy09 ohsanghy09 Apr 12, 2026

Choose a reason for hiding this comment

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

제가 CSS에서 강의를 들어면서 이 코드를 작성했는데, 강의에서는 단축속성을 이용해서 CSS를 활용하더라구요.
그런데 저는 옵션만 작성하는 게 어떤 부분에 적용되는 건지 혼동이 와서 스타일 속성들을 나열해서 하는 방식을 사용했어요.

하지만 의천님이 말씀해주신 "엄청나게 코드가 길어질 수 있는 CSS 스타일 특성상"이라는 부분에, 제가 작성한 코드는 간단한 CSS 파일의 코드이니까 스타일들을 나열하는 게 가능했을지도 모른다는 생각을 했어요.

원래 스타일 속성을 나열하는 게 더 가독성이 좋을 것 같다는 생각을 갖고 있었는데, 단축속성을 사용하면 길어지는 코드들을 줄일 수 있으니까 스타일을 나열하는 것보다 더 가독성이 좋아져서 사용하기 좋아질 것 같아요. 제가 각 스타일에 맞는 단축속성들을 익히는 게 중요한 것 같네요.


margin-bottom: 30px;
Copy link
Copy Markdown
Member

@wzrabbit wzrabbit Apr 11, 2026

Choose a reason for hiding this comment

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

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

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

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

Copy link
Copy Markdown
Author

@ohsanghy09 ohsanghy09 Apr 12, 2026 •
edited
Loading

Choose a reason for hiding this comment

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

제가 이번에 CSS 공부를 하면서 margin과 padding 부분이 어려운 것 같아 margin을 직접 사용해서 배치 옵션을 주고 싶었어요.

의천님께서 말씀해주신 gap 옵션도 찾아보고 직접 사용해봤는데, 자식 요소끼리의 간격을 늘려주는 좋은 옵션이더라구요.
만약 제가 과제 코드에 적용했으면 flex-direction: column으로 자식 요소의 배치가 세로축으로 되어 있었던 설정에서 gap 옵션을 사용해 간격값을 지정해주니까 세로 축으로 배열된 자식 요소들의 배치 간격이 margin-bottom처럼 조정이 돼서 편리했을 것 같아요.

코드에는 margin 이라는 배치 적용을 직접한 게 의미있는 것 같아 현재 UI를 유지할게요. 다음에는 의천님이 말씀해주신 flexbox의 gap 옵션을 사용해서 일관성 있게 코드 작성해볼게요! 감사합니다!

/* margin 아래로 30px만큼 공간을 줘서 다른 section과 겹치지 않게 적용 */

}

/* 자식요소 정렬, padding 추가 */
.center {
display: flex;
flex-direction: column;
/* 자식요소 세로 방향 정렬 */
align-items: center;
/* 자식요소 가로 방향 정렬 */
justify-content: center;
Comment on lines +29 to +33
Copy link
Copy Markdown
Member

@wzrabbit wzrabbit Apr 11, 2026

Choose a reason for hiding this comment

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

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

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

Copy link
Copy Markdown
Author

@ohsanghy09 ohsanghy09 Apr 12, 2026 •
edited
Loading

Choose a reason for hiding this comment

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

세 속성을 사용하기 전에 먼저 display : flex를 사용해서 자식 요소 배치에 대한 축을 설정했어요. 이 옵션을 사용하면 기본적으로 현재 메인 축이 가로로 적용되고, 자식요소들이 가로 방향으로 나열되더라구요.

그래서 flex-direction은 자식요소들 을 배치하는데 축을 바꾸는 속성이어서 column으로 자식요소들의 배치 축을 세로로 바꿨고, align-items는 자식요소들의 현재 적용된 교차 축을 기준으로 정렬하는 옵션이고, justify-content는 현재 기준이 되는 축을 기준으로 정렬하는 옵션으로 알고 있어서 각각 body의 중앙으로 자식요소들을 정렬하기 위해 사용했어요.


padding-bottom: 20px;
/* padding-bottom으로 content에서 border까지의 하단 거리 조정 */
}


/* h2 태그(섹션 주제)에 darkblue 색상 적용 및 폰트 적용 */
h2 {
color:darkblue;
font-family: fantasy, sans-serif;
Copy link
Copy Markdown
Member

@wzrabbit wzrabbit Apr 11, 2026

Choose a reason for hiding this comment

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

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

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

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

Copy link
Copy Markdown
Author

@ohsanghy09 ohsanghy09 Apr 12, 2026

Choose a reason for hiding this comment

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

저도 처음에 글꼴 적용을 찾아볼 때 의천님이 말씀해주신 것처럼 브라우저와 OS 환경마다 렌더링 되는 폰트가 바뀐다고 하더라구요.

그래서 앞에 작성했던 fantasy가 적용되지 않을 걸 생각해서 마지막 폰트에는 기본 폰트 그룹인 sans-serif를 넣어 다양한 환경에서 기본 폰트들이 적용될 수 있도록 했어요.

마지막 렌더링 폰트 그룹으로 sens-serif를 선택한 건 앞서 작성했던 폰트 그룹이 렌더링 되지 않았을 때 sans-serif가 렌더링 되면 가장 무난한 글씨가 보이게 되고, 여러 상황에서 사용할 수 있을 거란 생각을 했기 때문이에요.

/* 폰트 설정 : fantasy 폰트 적용 후 안 되면 sans-serif(적용) */
}

/* id는 재사용하지 않고, 유일 (class 보다 강력하므로 같은 이름의 class가 묻힘) */
#gitpage {
color:firebrick;
font-family: 'Courier New', Courier, monospace;
}