[ 1주차 기본/심화/생각 과제 ] 웨비의 사진관과 가계부 by Rose-my · Pull Request #3 · DO-SOPT-WEB/MinyoungKim

Rose-my · 2023-10-13T06:13:03Z

✨ 구현 기능 명세

1. 기본 과제

웨비의 사진관

header
<header>NewYork</header>

section(preview)

.prSction{
    overflow-x: auto;
    overflow-y: hidden;
    display: flex;
    width: 100%; height: 100%;
    white-space: nowrap;
}

.prItem {
    width: 100%;
    height: 100%;
    /* 각 이미지의 너비 설정 */
    margin-right: 10px;
     /* 이미지 간 간격 설정 */
    flex-wrap: nowrap;
}
/* 추가적인 스타일링을*/
.prItem img {
    width: 200px;
    height: 200px;
    border: 1px solid #ddd;
    /*border-radius: 5px;*/
}

nav

ul li a:hover {
    color: rgb(106, 166, 223); /* hover 시 텍스트 색상 변경 */
    text-decoration: underline; /* hover 시 밑줄 표시 */
    cursor: pointer;
}

section(img) part1

h4{
    position: sticky;
    background-color: rgb(245, 208, 214);
    line-height: 2;
    top:0;
    z-index:1;
}
.flexbox01{
    flex-wrap:wrap;
    white-space: nowrap;
    display: flex;
    flex-direction: row;
}
.sec01item {
    width:200px;
    height: 200px;
    flex-grow: 1;
    border: 1px solid #ddd;
    margin-right: 10px;
    margin-bottom: 10px;
    /* 이미지 간 간격 설정 */
}

section(img) part2

.flexbox02{
    display: flex; flex-direction: row;
    white-space: nowrap;
    width:100%;
    height:300px;
    justify-content: center;
    gap:10px;
    position: relative;
}

section(img) part3

.grid-container {
  display: grid;
  grid-template-rows: repeat(4, 150px);
  grid-template-columns: repeat(8, 1fr);
  grid-auto-rows: 150px;
  gap: 10px; /* 그리드 아이템 사이의 간격 설정 */
  position: relative;
}

footer

footer{
    height:10vh;
    background-color: #efc9e6;
}

top button

<button id="topButton"><div style="cursor:pointer;" onclick="window.scrollTo(0,0);">Top</div>
</button>

가계부

제목
<header>민영이 가계부**</header>
나의 자산

.income {
    border: 2px solid rgb(25, 111, 224);
    width:30%;
    box-sizing: border-box;
    line-height: 2.5;
}
.expense {
    border: 2px solid rgb(215, 6, 6);
    width:30%;
    box-sizing: border-box;
    line-height: 2.5;
}

날짜

.sec01{
    height:20px;    
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap:10px;
    /*margin:20px;*/
}

수입, 지출 선택

<div class="stylecheck">
            <input type="checkbox" id="incomeCheckbox" checked>
            <label for="inCheck">수입</label>
            <input type="checkbox" id="expenseCheckbox" checked>
            <label for="outCheck">지출</label>
</div>

내역리스트

.inoutlist {
    display: flex;
    flex-direction: column;
     /* 일정 height 이상이면 스크롤 표시 */
    box-sizing: border-box;
    overflow-y: scroll;
    height:40vh;
    width:100%;
    align-items: center;
}

리스트 추가 버튼

<footer>
      <div class="footerContent">
           <button id="add"><div style="cursor:pointer;">추가</div>
            </button>
        </div>
</footer>

2. 심화 과제

웨비의 사진관

첫번째 섹션
- 이미지들이 한 줄씩 줄어듭니다.
- 마지막 줄에 개수가 맞지 않는 경우 이미지 너비를 늘려 width 값을 채웁니다.

가계부

checkoutbox input
반응형
- 어느 모바일 디바이스에서 봐도 전체적인 UI 정렬 및 레이아웃이 깨지지 않도록 구현합니다.

3. 생각 과제

웹 접근성

모든 사람에게 공평하게 웹 사이트 및 웹 애플리케이션에 접근할 수 있게 합니다. 플랫폼 독립적인 웹에서는 디지털 공간에서의 평등을 강조할 수 있습니다. 접근성을 높이기 위해서는 사용자의 경험을 향상시키기 위해 적절한 HTML을 구현하고 키보드만으로 접근 가능하도록 만듭니다. 접근성은 모든 사용자가 공정하게 혜택을 누릴 수 있는 웹 환경을 조성하는 데 필수적이라고 생각합니다.

검색엔진 최적화

웹 사이트의 방문자 수를 높이기 위해서는 메타 데이터 최적화가 있습니다. 각 페이지의 메타 설명과 메타 태그를 적절히 작성하여 검색 엔진이 페이지 내용을 이해하고 색인화하기 쉽도록 합니다.

💎 PR Point

웨비의 사진관 목차 스크롤 / 커스텀

##피드백

이미지 태그 마구잡이로 쓴 점
div 태그 마구잡이로 쓴 점
flex-direction / justify-alignment 불필요하게 썼는지

🥺 소요 시간, 어려웠던 점

매일 4시간씩
html의 태그와 css의 컨테이너 안에 아이템 배치가 어려웠어요

🌈 구현 결과물

2023-10-13.3.02.31.mov

웨비의 사진관

…to Semi1

urjimyu

세미나에서 배운 내용 적용하려는 고민들이 곳곳에 보여요👍🏻
시험기간이라 바쁠 텐데 심화과제까지 추가한 거 최고..!
정말 고생 많았어요!!🫶

urjimyu · 2023-10-16T07:40:56Z

Session01/htmlcss1/album.html

@@ -12,7 +12,7 @@
    <title>김밍밍</title>


별명이 밍밍인가요..? 너무 귀엽다,,💛

urjimyu · 2023-10-16T07:53:51Z

Session01/htmlcss1/style.css

 	background-color: palegoldenrod;
    color: black;
    text-align: center;
    line-height: 2;


혹시 모두 line-height: 2;로 지정해준 이유가 있을까요?
그리고 line-height 속성에 대해 찾아보다가 생각과제였던 웹 접근성과 관련된 내용이 있어 공식문서 링크도 첨부합니다!
line-height
난독증 환자나 시력이 좋지 않은 사람들을 위해 line-height를 최소 1.5로 정하는 걸 추천해준다고 하는데 그런 면에서 좋은 코드라고 생각되어요:)

urjimyu · 2023-10-16T07:54:43Z

Session01/htmlcss1/style.css

+    top:0;
+    z-index:1;
 }
 /*position: sticky;*/


저도 주석을 실수로 올리는 경우가 많은데요..!ㅎㅎ 필요하지 않은 주석은 제거하고 PR 올려주는 게 좋습니다!

urjimyu · 2023-10-16T08:17:21Z

Session01/htmlcss1/style.css

@@ -21,7 +25,8 @@ body {
 }

 .prSction{


CSS 네이밍 규칙에 맞게 줄임말보다는 직관적이고 이해하기 쉬운 클래스명을 사용하면 나중에 더 복잡해졌을 때 작업하기 수월해요!
저도 수정할 예정입니다..!ㅎㅎ
CSS 네이밍 규칙

urjimyu · 2023-10-16T08:17:52Z

Session01/htmlcss1/style.css

+    overflow-x: auto;
+    overflow-y: hidden;
    display: flex;
    width: 100%; height: 100%;


코드 정렬 하면 좀 더 깔끔할 것 같아요!

코드 정렬할 때 참고하면 좋은 자료 첨부합니다! 다만 너무 엄격하게 전부 지키려고 하면 오히려 효율이 떨어질 수 있어서 본인에게 맞는 방식으로 큼직하게 나눠주면 나중에 리팩토링할 때나 코드리뷰할 때도 편리하답니다😊
CSS 작성 순서

urjimyu · 2023-10-16T09:19:19Z

Session01/htmlcss2/account.html

            <div class="description">고모부</div>
            <div class="amountP">+ 250,000원</div>
-            <button class="deleteBtn">x</button>
+            <div class="deleBtn">


클래스명에 오타가 있는 것 같습니다..!

urjimyu · 2023-10-16T09:22:21Z

Session01/htmlcss2/account.html

        <div class="items">
            <div class="category">식비</div>
            <div class="description">스타벅스</div>
            <div class="amountM">- 5,000원</div>


::before를 활용하면 한 번에 부호를 붙여줄 수 있습니다! 나중에 2주차 과제할 때 유용할 것 같아서 슬쩍 달아봅니다!

urjimyu · 2023-10-16T09:23:34Z

Session01/htmlcss2/account.html

    </div>
+    <footer>
+        <div class="footerContent">
+            <button id="add"><div style="cursor:pointer;">추가</div>


스타일은 css 파일을 만들어 놓았으니 css 파일들에 몰아 넣으면 더 좋을 것 같아요✨

urjimyu · 2023-10-16T09:24:17Z

Session01/htmlcss2/account.html

이전 커밋에 있는 애들이 리뷰가 한 줄씩 안 달리나봐요..! lang 설정이 영어로 되어 있어서 ko로 수정하는 게 좋을 것 같습니다!

urjimyu · 2023-10-16T09:24:49Z

Session01/htmlcss2/account.html

@@ -11,14 +11,14 @@
    <title>김밍밍</title>


title은 SEO를 고려해서 웹사이트 주제와 관련 있는 제목으로 수정하면 좋을 것 같아요:)
title 태그의 중요성

imeureka · 2023-10-17T07:21:43Z

Session01/htmlcss1/album.html

-    <h2>NewYork</h2>
+    <header>NewYork</header>
    <div class="container">
        <section class="prSction">


저도 지민언니와 같이 img 태그 같은경우 div 로 감싸지 않고 바로 단독으로 썼으면 좋겠어요!
불필요한 div 태그를 남발하는 경우, 1. 불필요한 DOM node 생성으로 불필요한 메모리를 잡아먹는 단점이 있으니 div 태그의 필요성에 대해 고민하며 코드를 작성하면 좋을 것 같습니다! 👍

imeureka · 2023-10-17T07:23:16Z

Session01/htmlcss1/album.html

-    <h2>NewYork</h2>
+    <header>NewYork</header>
    <div class="container">
        <section class="prSction">


또한 저도 고칠 점인데 생각과제로 알아본 웹 접근성을 위해서 ... 시맨틱 태그 적극적으로 활용하기!
<article>는 독립적으로 배포 및 재사용할 수 있는 독립형 콘텐츠에 사용되니 이 태그도 사용하면 좋을 것 같습니다.

imeureka · 2023-10-17T07:25:50Z

Session01/htmlcss1/album.html

+        <footer>
+            <div class="footerContent">
+                <p>&copy; 2023 Sopt</p>
+                <button id="topButton"><div style="cursor:pointer;" onclick="window.scrollTo(0,0);">Top</div>


인라인 스타일을 사용했는데, 일반적으로 문제를 더 효과적으로 분리하고 유지 관리하기 위해 외부 CSS 파일에서 이러한 스타일을 정의하는 것이 좋습니다!
저는 <a href > 로 script 없이 이동시켜봤어요!

imeureka · 2023-10-17T07:29:19Z

Session01/htmlcss1/sec01.css

@@ -0,0 +1,27 @@
+.sec01img{
+    justify-content: center; /* 이미지를 가운데 정렬 */
+    align-items: center;


이 속성같은 경우에 display: flex; 가 있어야 적용되는 속성입니다!

imeureka · 2023-10-17T08:09:08Z

Session01/htmlcss1/sec01.css

+}
+.flexbox01{
+    flex-wrap:wrap;
+    white-space: nowrap;


white-space 속성은 줄바꿈 및 공백을 설정합니다. 그래서 flexbox01 에는 불필요해 보이는 요소 같아요!

imeureka · 2023-10-17T08:09:43Z

Session01/htmlcss1/sec03.css

+  border: 1px solid #ccc; /* 그리드 아이템 테두리 스타일 설정 */
+  text-align: center;
+}
+.grid-item:first-child {


아! 이렇게 할 수 있구나 ㅜㅜ 대박 이런 방법도 알아갑니당!!

imeureka · 2023-10-17T08:50:27Z

Session01/htmlcss2/header.css

+    margin: 0px 0px;
+}
+/* Top 버튼 스타일 */
+.footerContent{


bottom: 0; left: 50%; position: fixed; transform: translateX(-50%)
저번에 민영이가 물어본 footer 맨 아래에 위치하고 싶다 했는데 이 속성값들 추가시켜주면 height에 상관없에 맨 밑에 위치 시킬 수 있는 것 같아!

imeureka · 2023-10-17T08:53:05Z

Session01/htmlcss2/account.html

+        </div>
+    </div>
+    <div class="sec01">
+        <button id="prevBtn"><b><</b></button>


< 이 기호와 관련되어선 특수기호를 써주는게 좋을 것 같아!

&lt; < 꺽쇠

&gt; > 꺽쇠

imeureka · 2023-10-17T08:57:52Z

시험기간인데 진짜 열심히 했다 미뇽아!! 민영이에게 참고가 될 것 같아서 html 구조 잡기 링크남겨!
나도 웹 접근성에 맞춰 시맨틱 태그도 활용하고 불필요한 div도 최소화하게 코드를 수정해봤으면 좋겠어!
https://wonyoung2257.tistory.com/9

…to Semi1

seobbang

과제 고생 많았어요오!ㅎㅎ 리팩토링까지 화이팅 🔥🔥

seobbang · 2023-10-24T02:46:48Z

Session01/htmlcss1/album.html

+    <title>1차세미나 사진관 과제</title>
+</head>
+<body>
+    <header>김밍밍 인 뉴욕</header>


header 는 제목, 로고, 검색 폼, 작성자 이름 등의 요소 를 포함하는 소개 및 탐색에 도움을 주는 콘텐츠를 담는 영역!이기 때문에 정확히는 이 안에서

Suggested change

<header>김밍밍 인 뉴욕</header>

<header><h1>김밍밍 인 뉴욕</h1></header>

이렇게 써주는게 좋답니다! :)

seobbang · 2023-10-24T02:47:05Z

Session01/htmlcss1/album.html

+    <header>김밍밍 인 뉴욕</header>
+
+    <!--preview-->
+    <section class="preview">


header,footer 제외하고 main으로 감싸주면 좀 더 시맨틱하겠죵 !

seobbang · 2023-10-24T02:47:30Z

Session01/htmlcss1/album.html

+        <img src="wk1/02.png" alt="Photo">
+        <img src="wk2/02.png" alt="Photo">
+        <img src="wk3/01.png" alt="Photo">
+        <img src="wk3/02.png" alt="Photo">


alt 속성은 이미지가 보이지 않더라도 어떤 이미지인지 알 수 있도록 자세하게 써주셔야 웹 접근성에 좋답니당 !

seobbang · 2023-10-24T02:48:52Z

Session01/htmlcss1/album.html

+    <section class="section-1">
+        <h4 id="category-1">뉴욕은 낭만이 넘치는 도시에요</h4>


section-1, category-1보다는 각 내용에 맞게 의미를 가진 이름으로 명명해볼까요 ?! 의미를 띈 이름으로 class, id를 명명해주어야 추후 유지보수와 가독성에 좋은 습관이랍니당

ex) newyork-section

seobbang · 2023-10-24T02:49:07Z

Session01/htmlcss1/album.html

+    <!--category1-->
+    <section class="section-1">
+        <h4 id="category-1">뉴욕은 낭만이 넘치는 도시에요</h4>
+            <div class="images-1">


여기도 마찬가지 !!

seobbang · 2023-10-24T03:03:43Z

Session01/htmlcss2/account.html

+    <div class="borderline"></div>
+    <section class="summary-section">
+        <article class="summary-article">
+            <h3>나의 자산</h3>


heading태그는 h1부터 순차적으로 써주는게 원칙이랍니당!

seobbang · 2023-10-24T03:04:23Z

Session01/htmlcss2/account.html

+                <button type="button"><b>&lt;</b></button>
+                <span id="currentDate">10/13</span>
+                <button type="button"><b>&gt;</b></button>


지민언니가 가영이 리뷰에 남겨준 것처럼, b태그는 최대한 지양하고 font-weight으로 스타일링해주는게 좋답니당 !

특수기호랑 type 넣어준거 넘 센수쟁이 ~~

seobbang · 2023-10-24T03:05:30Z

Session01/htmlcss2/account.html

+        <button type="button">
+            <button id="add">추가</div>
+        </button>


Suggested change

<button type="button">

<button id="add">추가</div>

</button>

<button type="button">추가

</button>

버튼이 중첩된건 어색한 구조에요! 이렇게 줘야하고, 그 안에서 뭔가 한번더 감싸야 하는 스타일링이 필요하다면 span 태그를 이용해봅시당

seobbang · 2023-10-24T03:07:47Z

Session01/htmlcss2/inoutlist.txt


 .items {
    display: flex;
+    flex-direction: row;


이것듀! default값이라 명시해주지 않아도 됩니당 !

seobbang · 2023-10-24T03:08:33Z

Session01/htmlcss2/style.css

+/* summary section 
+    <section class="summary-section">
+        <article class="summary-article">
+            <h3>나의 자산</h3>
+            <span class="total">159400</span>
+            <div class="summary-article-details">
+                <div class="summary-article-details-in"><span>90,600원</span></div>
+                <div class="summary-article-details-out"><span>250,000원</span></div>
+            </div>
+        </article>
+    </section>
+*/
+.summary-section{
+    /*display: flex;
+    flex-direction: column;
+    align-items: center;


주석은 지워주세용 ~!

Rose-my added 10 commits October 13, 2023 09:31

Semi1

f0808d5

Delete 1차세미나 directory

496a9d0

css 수정

f3ccae1

Update style.css

4c5a749

assign1 css

817d781

Merge branch 'Semi1' of https://github.com/DO-SOPT-WEB/MinyoungKim in…

20f5144

…to Semi1

htmlcss1 header

f009da3

htmlcss2 button list 수정

e8a03f8

생각과제

81b2181

Update semi1.md

8a311a9

urjimyu reviewed Oct 16, 2023

View reviewed changes

Rose-my requested review from imeureka and seobbang October 16, 2023 14:08

imeureka reviewed Oct 17, 2023

View reviewed changes

Rose-my added 4 commits October 18, 2023 20:23

코드리뷰 후 수정

e5e0b5b

Merge branch 'Semi1' of https://github.com/DO-SOPT-WEB/MinyoungKim in…

bd817d6

…to Semi1

코드리뷰 후 수정

a827692

심화과제 -이미지 호버 구현

60ac2b1

seobbang reviewed Oct 24, 2023

View reviewed changes

Rose-my added 3 commits October 26, 2023 19:38

섹션3 사진 gap 수정

bce4082

코드리뷰 반영

caa9027

코드리뷰 버튼수정 반영

17e9151

Rose-my added the 기본과제 label Oct 27, 2023

chore: .gitignore 생성

8781204

Rose-my added the 생각과제 label Nov 1, 2023

	<header>김밍밍 인 뉴욕</header>
	<header><h1>김밍밍 인 뉴욕</h1></header>

		<section class="section-1">
		<h4 id="category-1">뉴욕은 낭만이 넘치는 도시에요</h4>

Conversation

Rose-my commented Oct 13, 2023

✨ 구현 기능 명세

1. 기본 과제

2. 심화 과제

3. 생각 과제

💎 PR Point

🥺 소요 시간, 어려웠던 점

🌈 구현 결과물

Uh oh!

urjimyu left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

imeureka commented Oct 17, 2023

Uh oh!

seobbang left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects