diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..6b665aa --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} diff --git a/Week1-0401/MyStore.css b/Week1-0401/MyStore.css new file mode 100644 index 0000000..87cbbd9 --- /dev/null +++ b/Week1-0401/MyStore.css @@ -0,0 +1,268 @@ +@font-face { + font-family: 'NeoDunggeunmoPro-Regular'; + src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302@1.0/NeoDunggeunmoPro-Regular.woff2') format('woff2'); + font-weight: normal; + font-style: normal; +} + +/* body CSS */ +body { + font-family: 'NeoDunggeunmoPro-Regular'; + background-color: rgb(252, 233, 233); + +} + +/* HeaderBar 관련 CSS */ +header { + display: flex; + position: fixed; + top: 0; + width: 100%; + justify-content: space-between; + align-items: center; + background-color: #f8f8f8; + padding: 20px; + box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2); + z-index: 1; +} + +.logo { + font-size: 28px; + color: #333; +} + +#hamberger { + display: none; + cursor: pointer; + color: #333; + font-size: 24px; + font-weight: bold; + user-select: none; +} + +header aside { + display: flex; + flex-direction: row; + +} + +header aside a { + margin: 0 10px; +} + +header aside a:hover { + color: plum; +} + +@media (max-width: 1000px) { + header { + padding: 20px; + } + + header>aside { + display: none; + } + + header>aside a { + margin: 1rem; + } + + #hamberger { + display: block; + } + + #hamberger:hover+aside, + aside:hover { + display: flex; + flex-direction: column; + position: fixed; + height: 100vh; + width: 250px; + top: 0; + right: 0; + background-color: #f8f8f8; + box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2); + padding: 1rem; + } +} + +/* Main파트 CSS */ + +/* 메인파트1 : nav */ +main { + display: flex; + flex-direction: row; + margin: 10px; + margin-top: 5rem; + padding: 10px; +} + +main nav { + display: flex; + padding: 10px; + position: sticky; + top: 5rem; + flex-direction: column; + min-width: 150px; + height: fit-content; + background-color: #f1f1f1; + border: 2px solid #ccc; + border-radius: 10px; + box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); +} + +main nav .category { + margin: 5px; + padding: 10px; + border-radius: 10%; +} + +main nav .category:hover { + background-color: palevioletred; + color: white; +} + +/* 메인파트2 : cardSection */ +#cardSection { + width: 100%; + height: 100%; + padding: 0 50px; + display: grid; + grid-gap: 20px; + grid-template-columns: repeat(6, 250px); + grid-auto-rows: 300px; +} + +@media screen and (max-width: 1800px) { + #cardSection { + grid-template-columns: repeat(5, 250px); + } +} + +@media screen and (max-width: 1600px) { + #cardSection { + grid-template-columns: repeat(4, 250px); + } +} + +@media screen and (max-width: 1300px) { + #cardSection { + grid-template-columns: repeat(3, 250px); + } +} + +@media screen and (max-width:1100px) { + #cardSection { + grid-template-columns: repeat(2, 250px); + } +} + +@media screen and (max-width: 900px) { + #cardSection { + grid-template-columns: repeat(1, 1fr); + padding: 0 150px; + } +} + +/* 메인파트3 : cardSection > Card CSS */ + +#cardSection .card { + position: relative; + width: 100%; + height: 100%; + justify-content: center; + display: flex; + align-items: center; + overflow: hidden; + border-radius: 5px; + transform-style: preserve-3d; + background-color: white; +} + +#cardSection .card::before { + position: absolute; + content: ' '; + display: block; + width: 160px; + height: 500px; + background: linear-gradient(90deg, transparent, purple, transparent); + animation: rotation_border 5000ms infinite linear; + z-index: -1; +} + +#cardSection .card .card-content { + width: 98%; + height: 98%; + border: 1px solid purple; + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; + padding: 1rem; + border-radius: 5px; + background-color: white; +} + +#cardSection .card .card-content img { + width: 150px; +} + +@keyframes rotation_border { + 0% { + transform: rotateZ(0deg); + } + + 0% { + transform: rotateZ(360deg); + } +} + +.tagContainer { + width: 200px; + height: 15px; + overflow: hidden; + /* white-space: nowrap; */ + text-align: center; + + /* 글자지켜! */ + word-break: keep-all; +} + +.tagContainer .tag::before { + content: "#"; +} + +.pokemonName { + font-size: 25px; +} + +.JJim { + width: 100%; + height: 30px; + display: flex; + justify-content: flex-end; +} + +.favorite { + padding: 5px; + width: fit-content; + height: fit-content; +} + +.heart { + display: none; +} + +#cardSection label::before { + content: '🤍'; + display: block; +} + +#cardSection .heart:hover+label::before { + content: '❤️'; + cursor: pointer; +} + +#cardSection .heart:checked+label::before { + content: '❤️'; +} \ No newline at end of file diff --git a/Week1-0401/MyStore.html b/Week1-0401/MyStore.html new file mode 100644 index 0000000..998889b --- /dev/null +++ b/Week1-0401/MyStore.html @@ -0,0 +1,180 @@ + + + + + + + + ChansPoketmon + + + + + + + + + +
+

🐣찬우의 포켓몬 잡화점

+
☰
+ +
+ +
+ +
+
+
+
+ 이상해씨 +
+
+ 진화1 + 귀여운 + 잎사귀 + 고마운 +
+
+ poketmonImg +
+
+
+ + +
+
+
+
+
+
+
+ 피캬츄 +
+
+ 진화1 + 번개 + 주인공 +
+
+ poketmonImg +
+
+
+ + +
+
+
+
+
+
+
+ 리자몽 +
+
+ 진화3 + 불속성 + 난폭한 +
+
+ poketmonImg +
+
+
+ + +
+
+
+
+
+
+
+ 푸크린 +
+
+ 진화3 + 노래방 + 잠자는 +
+
+ poketmonImg +
+
+
+ + +
+
+
+
+
+
+
+ 날쌩마 +
+
+ 진화2 + 유니콘 + 얼룩말 +
+
+ poketmonImg +
+
+
+ + +
+
+
+
+
+
+
+ 어니부기 +
+
+ 진화2 + 거북이 + 물대포 +
+
+ poketmonImg +
+
+
+ + +
+
+
+
+ +
+
+ + + \ No newline at end of file diff --git a/Week1-0401/SeminarStudy/Seminar.html b/Week1-0401/SeminarStudy/Seminar.html new file mode 100644 index 0000000..954b22e --- /dev/null +++ b/Week1-0401/SeminarStudy/Seminar.html @@ -0,0 +1,168 @@ + + + + + + + + + + + Document + + + + + +
+

햅히의 1차 세미나

+

HTML CSS 정복하기

+
+ +

Semantic Tag

+ + + + + + + + + + + + + \ No newline at end of file diff --git a/Week1-0401/Todo.css b/Week1-0401/Todo.css new file mode 100644 index 0000000..d9f9a32 --- /dev/null +++ b/Week1-0401/Todo.css @@ -0,0 +1,238 @@ +@font-face { + font-family: 'Uiyeun'; + src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2105@1.1/Uiyeun.woff') format('woff'); + font-weight: normal; + font-style: normal; +} + +body { + display: flex; + width: 450px; + height: 100vh; + margin: 0 auto; + box-sizing: border-box; + font-family: "Uiyeun"; + font-size: 25px; +} + +#Mobile { + display: flex; + position: relative; + flex-direction: column; + width: 450px; + height: 100%; + margin: 0 auto; + box-sizing: border-box; + background: linear-gradient(#9198e5, #f2c4c4, #f5f3f4); +} + +header { + width: 100%; + display: flex; + justify-content: center; + padding: 1rem; + font-size: 2.8rem; + color: white; +} + +/* 메인 달력영역 */ +#calendar { + border-radius: 10px; + padding: 1rem; + margin: 0.5rem; + height: fit-content; + box-shadow: 3px 3px 3px hsl(0deg 0% 0% /0.25); + background-color: white; +} + + +#calendar #calendar-content #day-Week { + display: grid; + grid-template-columns: repeat(7, 1fr); +} + +#calendar #calendar-content #day-Week .day { + width: 2rem; + height: 2rem; + display: grid; + place-items: center; + margin: 0 auto; +} + +#calendar #calendar-content #todo-week { + display: grid; + grid-template-columns: repeat(7, 1fr); +} + +#calendar #calendar-content #todo-week .dayBox { + width: 2rem; + height: 4rem; + display: grid; + place-items: center; + margin: 0 auto; +} + +#calendar #calendar-content #todo-week .dayBox .heart { + font-size: 26px; + position: relative; +} + +#calendar #calendar-content #todo-week .dayBox .heart .count { + position: absolute; + width: 100%; + height: 100%; + top: 2px; + left: 0; + text-align: center; + align-items: center; + font-size: 20px; + color: white; +} + +#todolist { + height: 550px; + margin: 2rem 1.5rem; + display: flex; + flex-direction: row; + flex-wrap: wrap; + gap: 1rem; + overflow-y: scroll; +} + +#todolist::-webkit-scrollbar-button { + width: 0; + height: 0; +} + +#todolist::-webkit-scrollbar { + width: 6px; +} + +#todolist::-webkit-scrollbar-track { + background-color: transparent; +} + +#todolist::-webkit-scrollbar-thumb { + border-radius: 3px; + background-color: #cdcdf4; +} + +#todolist .category .category-title { + width: fit-content; + height: fit-content; + padding: 0.3rem; + display: flex; + justify-content: center; + align-items: center; + border-radius: 30px; + +} + +/* 카테고리별 색지정 */ +.yellow { + background-color: rgb(248, 248, 130); + box-shadow: 5px 5px 10px -5px yellowgreen; +} + +.blue { + background-color: rgb(147, 147, 255); + box-shadow: 5px 5px 10px -5px rgb(60, 33, 232); +} + +.green { + background-color: rgb(57, 241, 72); + box-shadow: 5px 5px 10px -5px rgb(43, 143, 58); +} + +.pink { + background-color: rgb(246, 115, 209); + box-shadow: 5px 5px 10px -5px rgb(105, 12, 108); +} + +.aqua { + background-color: rgb(121, 223, 251); + box-shadow: 5px 5px 10px -5px rgb(6, 54, 67); +} + +main #todolist .category .category-title .title { + padding: 0.2rem; + color: black; + +} + +/* 메인 투두리스트 영역 */ +#todolist .category { + min-width: 40%; +} + +#todolist .category .todo { + padding-top: 0.4rem; + color: black; + font-size: medium; + display: flex; + flex-direction: row; +} + +#todolist .category .todo label { + font-size: 1.5rem; +} + +#todolist .category .todo .heart { + display: none; +} + +#todolist .category .todo label::before { + content: '🤍'; + font-size: 1rem; + margin-right: 0.2rem; + display: inline-block; +} + +#todolist .category .todo .heart:hover+label::before { + content: '❤️'; + font-size: 1rem; + margin-right: 0.2rem; + cursor: pointer; +} + +#todolist .category .todo .heart:checked+label::before { + content: '❤️'; + font-size: 1rem; + margin-right: 0.2rem; +} + +#todolist .category .category-title button { + border-radius: 100%; + border: none; + color: white; + background-color: slateblue; +} + + +/* footer css */ +footer { + width: 450px; + box-sizing: border-box; + width: 100%; + position: absolute; + bottom: 1rem; + display: flex; + justify-content: center; +} + +footer button { + width: 4rem; + margin: 0.3rem; + padding: 0.3rem; + border-radius: 18%; + font-family: "Uiyeun"; + font-size: larger; + font-weight: 500; + border: none; + background-color: #9198e5; + box-shadow: 3px 3px purple; +} + +footer button img { + width: 20px; +} \ No newline at end of file diff --git a/Week1-0401/Todo.html b/Week1-0401/Todo.html new file mode 100644 index 0000000..044a092 --- /dev/null +++ b/Week1-0401/Todo.html @@ -0,0 +1,195 @@ + + + + + + + + Todo + + + + + + + + + + +
+

❤️WEB TODO MATE❤️

+
+
+
+
+
    +
  • 월
    • +
  • 화
    • +
  • 수
    • +
  • 목
    • +
  • 금
    • +
  • 토
    • +
  • 일
    • +
+
    +
  • +
    ❤️ +
    5
    +
    +
    27
    +
    • +
  • +
    ❤️ +
    3
    +
    +
    28
    +
    • +
  • +
    ❤️ +
    7
    +
    +
    29
    +
    • +
  • +
    ❤️ +
    5
    +
    +
    30
    +
    • +
  • +
    ❤️ +
    9
    +
    +
    31
    +
    • +
  • +
    💜 +
    2
    +
    +
    1
    +
    • +
  • +
    ❤️ +
    3
    +
    +
    2
    +
    • +
+
+
+
+
+

+
TodayTodo
+ +

+
+ + +
+
+ + +
+
+ + +
+
+ +
+

+
개발은재밌어
+ +

+
+ + +
+
+ + +
+
+ + +
+
+ +
+

+
감성하루할일
+ +

+
+ + +
+
+ + +
+
+ + +
+
+ +
+

+
기대되는 솝활동
+ +

+
+ + +
+
+ + +
+
+ + +
+
+ +
+

+
얻어가야하는 일
+ +

+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
+ + + + + \ No newline at end of file diff --git a/Week1-0401/reset.css b/Week1-0401/reset.css new file mode 100644 index 0000000..ff0de8f --- /dev/null +++ b/Week1-0401/reset.css @@ -0,0 +1,46 @@ +/* reset.css */ +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; + box-sizing: border-box; +} +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} + diff --git a/Week1-0401/think.md b/Week1-0401/think.md new file mode 100644 index 0000000..77ae3ff --- /dev/null +++ b/Week1-0401/think.md @@ -0,0 +1,21 @@ + +# 💟 웹 최적화에 대해 알아보고, 여러분들의 생각을 마음껏 작성해주제요☺️ + +## - 웹 최적화는 무엇일까? +웹이 가지고 있는 성능을 최고로 발휘하게 만드는 노력 + +## - 최적화가 필요한 이유는 무엇일까? +웹 최적화를 통해 layout 랜더링 속도 , 로딩 & 반응 속도 , SEO 노출 등 초점에 따라 다양한 이유를 가짐 + +## - 이를 위해 어떤 개발을 해야 할까? +랜더링 속도를 빠르게 하기 위해서는 웹브라우저의 랜더링 과정을 이해하고 성능측정을 통해 무거운 작업들을 어떻게 효율적으로 처리할 수 있는지 등에 대한 고민을 해야한다.
+가령 브라우저 랜더링의 순서 DOM CSSOM Render Tree 등을 이해하고 불필요하거나 중복되는 랜더링 작업을 줄여보려 할 수도 있다.
+또한 최신 브라우저 기능 html tag css 을 이용하는 것도 좋은 방법이다. + +## - 최적화를 위한 개발을 꼭 해야 할까? +웹 최적화는 사용자와 직접적 영향으로 이어질 수 있기 때문에 반드시 필요한 작업이다.
+특히 사용자와 긴밀한 상호작용을 요구하는 프론트엔드는 빠르고 부드러운 환경이 유저의 ux에 큰 영향을 미친다. + +📌추신 : +1. 뭔가 생각과제를 단순히 구글을 배끼는 것보다 조금 더 효율적으로 공부할 수 있는 공부법을 찾아봐야겠다,,,, +2. 차후 조금 더 추가 업데이트 예정...! \ No newline at end of file