[ 1주차 기본/심화/생각 과제 ] 웨비의 사진관과 가계부 #3

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

@@ -1,8 +1,10 @@
-h2 {
+header {
 	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

@@ -13,6 +15,8 @@ h4{
    position: sticky;
    background-color: rgb(245, 208, 214);
    line-height: 2;
+    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

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

 .prSction{
-    overflow-x: scroll;
+    overflow-x: auto;
+    overflow-y: hidden;
    display: flex;
    width: 100%; height: 100%;


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

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

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

Session01/htmlcss2/account.html

        </div>
        <div class="items">
            <div class="category">용돈</div>
            <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

-            <button class="deleteBtn">x</button>
+            <div class="deleBtn">
+                <button id="deleteBtn">x</button>
+            </div>
        </div>
        <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>
        <!-- 다른 내역 항목들 -->
    </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

@@ -12,7 +12,7 @@
    <title>김밍밍</title>
 </head>
 <body>
-    <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

@@ -12,7 +12,7 @@
    <title>김밍밍</title>
 </head>
 <body>
-    <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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[ 1주차 기본/심화/생각 과제 ] 웨비의 사진관과 가계부 #3

[ 1주차 기본/심화/생각 과제 ] 웨비의 사진관과 가계부 #3

Rose-my commented Oct 13, 2023

urjimyu left a comment

urjimyu Oct 16, 2023

urjimyu Oct 16, 2023

urjimyu Oct 16, 2023

urjimyu Oct 16, 2023

urjimyu Oct 16, 2023

urjimyu Oct 16, 2023

urjimyu Oct 16, 2023

urjimyu Oct 16, 2023

urjimyu Oct 16, 2023

urjimyu Oct 16, 2023

urjimyu Oct 16, 2023

imeureka Oct 17, 2023

imeureka Oct 17, 2023

imeureka Oct 17, 2023

imeureka Oct 17, 2023

imeureka Oct 17, 2023

imeureka Oct 17, 2023

imeureka Oct 17, 2023

imeureka Oct 17, 2023

imeureka commented Oct 17, 2023

seobbang left a comment

seobbang Oct 24, 2023

seobbang Oct 24, 2023

seobbang Oct 24, 2023

seobbang Oct 24, 2023

seobbang Oct 24, 2023

seobbang Oct 24, 2023

seobbang Oct 24, 2023

seobbang Oct 24, 2023

seobbang Oct 24, 2023

seobbang Oct 24, 2023

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

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

[ 1주차 기본/심화/생각 과제 ] 웨비의 사진관과 가계부 #3

Are you sure you want to change the base?

[ 1주차 기본/심화/생각 과제 ] 웨비의 사진관과 가계부 #3

Conversation

Rose-my commented Oct 13, 2023

✨ 구현 기능 명세

1. 기본 과제

2. 심화 과제

3. 생각 과제

💎 PR Point

🥺 소요 시간, 어려웠던 점

🌈 구현 결과물

urjimyu left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

imeureka commented Oct 17, 2023

seobbang left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment