- 프레임워크를 사용하지 않고 웹 사이트에 들어가는 관라자 대시보드를 따라서 만들어보자.
- 모든 에셋과 코드는 아래의 링크를 통해서 받을 수 있다.
https://github.com/AsmrProg-YT/Dashboard-Designs/tree/master/Admin%20Dashboard%20%2301
- Reza Mehdikhanlou 라는 사람이다.
https://github.com/AsmrProg-YT
AsmrProg-YT - Overview
Hey it's me "Reza Mehdikhanlou", Owner of AsmrProg youtube channel. Here i will upload youtube videos projects sources. Subscribe Here : https://bit.ly/3Lf1K4A - AsmrProg-YT
github.com
- 모니터를 2개를 쓰는 게 확실히 좋다.
기본 파일 구조 만들기
- images 폴더와 index.html 빈 파일을 만들어준다.
- orders.js 파일에 다음과 같은 코드를 작성하였다.
const Orders = [
{
productName: 'JavaScript Tutorial',
productNumber: '85743',
paymentStatus: 'Due',
status: 'Pending'
},
{
productName: 'CSS Full Course',
productNumber: '97245',
paymentStatus: 'Refunded',
status: 'Declined'
},
{
productName: 'Flex-Box Tutorial',
productNumber: '36452',
paymentStatus: 'Paid',
status: 'Active'
},
]
const Orders = [ { }, { } ] 로 구성되어 있다. const는 상수(변하지 않는 값)를 선언할 때 사용된다. ctrl + shift + i로 크롬 개발자 도구에 있는 콘솔창에서 다음과 같이 타입을 확인해보자.
What’s the difference between “{}” and “[]” while declaring a JavaScript array?
What’s the difference between “{}” and “[]” while declaring a JavaScript array? Normally I declare like var a=[]; What is the meaning of declaring the array as var a={}
stackoverflow.com
{} 은 오브젝트(객체)이지만 [ ] 은 배열이다.
velog
velog.io
즉, orders.js라는 파일에 상수 Orders가 있고 이 안은 배열 [ ] 로 0,1,2의 인덱스 값이 들어 있으며 각각의 인덱스에 따른 element(요소)에 {} 객체로 4개의 key와 value를 작성하였다. 노랑색이 key, 초록색이 value이다. 리터럴 방식으로 선언하였다.
#25 자바스크립트(JavaScript) - 리터럴(Literal)
안녕하세요 여러분! 에이블디 입니다! 이번 시간에는 리터럴(Literal)에 대해 알아보겠습니다! 지난 시간에 이어 객체를 생성하는 방법에 대해 더 알아볼 텐데요, 오늘은 리터럴 표기법을 사용해
abled.tistory.com
- images 폴더에 웹페이지에 사용할 이미지들을 깃헙에서 다운로드 받아서 집어 넣었다. (zip 파일을 다운로드 받거나 git repo를 사용해도 상관없다.)
Emmet — the essential toolkit for web-developers
Emmet — the essential toolkit for web-developers Emmet is a plugin for many popular text editors which greatly improves HTML & CSS workflow: Demo | @@@ tooltip: Type CSS-like abbreviation type: ul#nav>li.item$*4>a{Item $} wait: 1000 tooltip: Run “Expan
emmet.io
이미 VS Code에 설치되어 있다. 이걸 이용해서 아래와 같이 원하는 코드를 미리 만들어 자동완성할 수 있다. 이러한 것을 Snippets(스니펫)이라고 한다. 생산성을 향상시킬 수 있는 아주 좋은 방법이다.
https://www.smashingmagazine.com/2021/06/custom-emmet-snippets-vscode/
Creating Custom Emmet Snippets In VS Code — Smashing Magazine
In this article, Manuel explains why Emmet is one of his favorite productivity tools for writing HTML and CSS, and how you can create custom Emmet snippets in Visual Studio Code to help you improve your front-end workflows even more.
www.smashingmagazine.com
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
기본적으로 제공되는 html5 스니펫이다. 5 버전으로 사용되고 있다. W3C에서 옛날 HTML 버전을 볼 수도 있다. 옛날 홈페이지를 볼 수 있는 아카이브가 있다. 여기서 옛날에 어떤 방식으로 웹 사이트를 만들었는지 볼 수 있다. 쓸일이 거의 없을 것 같긴하다.
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Sharp" rel="stylesheet">
<link rel="stylesheet" href="style.css">head 태그 하위에 링크 태그를 작성하여 css파일들을 불러준다. 참고로 https://fonts.googleapis.com/icon?family=Material+Icons+Sharp 주소를 들어가보면 아래와 같은 값을 가지는 페이지로 이동한다.
/* fallback */
@font-face {
font-family: 'Material Icons Sharp';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/materialiconssharp/v109/oPWQ_lt5nv4pWNJpghLP75WiFR4kLh3kvmvR.woff2) format('woff2');
}
.material-icons-sharp {
font-family: 'Material Icons Sharp';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}
CSS 코드들이 적혀져 있는데 @font-face 뒤에 { } 안에 다양한 값들이 들어가 있다. 그리고 material-icons-sharp는 css 클래스이다. 클래스 안에 font-family, font-weight 와 같은 값들이 들어가 있고 -webkit-font-feature-settings: 'liga';라는 값도 들어가 있다.
https://webclub.tistory.com/261
Web Font - @font-face 적용 방법
Font(서체)의 사용 좀 더 흥미진진한 웹 사이트를 만들고 싶을 때 첫 번째로 고려하게 되는 것은, 표제어나 단락 등, 페이지를 구성하는 각 요소에 서로 다른 서체를 지정하는 것입니다. 최근의 모
webclub.tistory.com
WOFF File Format 2.0
The glyf table data can be presented in the WOFF2 file in one of two formats defined by the transformation version number (encoded in the table directory flag bits, see subclause 4.1 for details). The transformation version "3" defines a null transform whe
www.w3.org
<div class="container">
<!-- Sidebar Section -->
<aside>
<div class="toggle">
<div class="logo">
<img src="images/logo.png">
<h2>Asmr<span class="danger">Prog</span></h2>
</div>
<div class="close" id="close-btn">
<span class="material-icons-sharp">
close
</span>
</div>
</div>
<div class="sidebar">
<a href="#">
<span class="material-icons-sharp">
dashboard
</span>
<h3>Dashboard</h3>
</a>
<a href="#">
<span class="material-icons-sharp">
person_outline
</span>
<h3>Users</h3>
</a>
<a href="#">
<span class="material-icons-sharp">
receipt_long
</span>
<h3>History</h3>
</a>
<a href="#" class="active">
<span class="material-icons-sharp">
insights
</span>
<h3>Analytics</h3>
</a>
<a href="#">
<span class="material-icons-sharp">
mail_outline
</span>
<h3>Tickets</h3>
<span class="message-count">27</span>
</a>
<a href="#">
<span class="material-icons-sharp">
inventory
</span>
<h3>Sale List</h3>
</a>
<a href="#">
<span class="material-icons-sharp">
report_gmailerrorred
</span>
<h3>Reports</h3>
</a>
<a href="#">
<span class="material-icons-sharp">
settings
</span>
<h3>Settings</h3>
</a>
<a href="#">
<span class="material-icons-sharp">
add
</span>
<h3>New Login</h3>
</a>
<a href="#">
<span class="material-icons-sharp">
logout
</span>
<h3>Logout</h3>
</a>
</div>
</aside>
<!-- End of Sidebar Section -->
여기서 중요한 것은 맨 처음 대시보드에 어떤 기능들을 넣을 것이고 어떻게 UI를 구성할 것인지 생각하는 것이다. 일반적으로 어드민 대시보드는 어떤 서비스를 제공할 때 관리자만이 설정하거나 볼 수 있는 데이터에 접근할 수 있도록 하는데 목적이 있다.
실시간으로 변화하는 데이터의 이동이나 통계 수치들을 시각화 하여 사용자에게 전달해주는 게 대시보드의 주 목적이다. 보고서를 쓸 때 엑셀을 이용하여 대시보드를 만들 수도 있는데 사용자에게 원하는 데이터의 범위를 선택하여 주요 통계에 대한 인사이트를 제공하는 목적도 가지고 있다.
https://www.youtube.com/watch?v=eaSg0mu6nLM
https://medium.com/cortico/3d-data-visualization-with-react-and-three-js-7272fb6de432
3D Data Visualization with React and Three.js
Go step-by-step through the making of a 3D data visualization including animation and interaction. Made with React and Three.js.
medium.com
https://qpalca.studio/Unreal-Assets-For-Broadcasters
Unreal Assets For Broadcasters — Qpalca
qpalca.studio
똑같은 데이터라고 할지라도 다양한 방식으로 데이터 시각화를 할 수 있다. 다른 사람에게 어떤 정보를 전달할 때 글이나 말, 사진, 동영상 등으로 전달할 수도 있지만 실질적으로 사람이 쓰는 기계 (PC, 모바일, VR, 대형 스크린) 로 전달된다. 어떤 공간에서 가장 많이 사용되는 전달 수단은 상황에 따라서 달라진다.
어떠한 정보를 전달하는 매체는 너무 많다. 드론, 폭죽, 전단지, 현수막, 명함, PC, 휴대폰, 손전등, 홀로그램, 잡지, 신문, 보고서, 논문, 개발 문서, 칠판, 공책, 연필, 목소리, 우편, 편지, 만년필 등등 너무 나도 많다. 어릴 때 한번쯤은 만들어본 종이컵 전화기 또한 무언가를 전달하는 방법 중 하나이다.
이 중 디스플레이에서 사람들에게 어떠한 데이터를 보여줄 것이며 이를 통해 어떤 가치를 창출할 수 있는가?에 집중해본다고 하더라도 굉장히 광범위한 영역이다. 돈이 되는 가치 있는 데이터를 어떻게 확보할 것이며 어떤 방식으로 전달하여 사용자에게 돈을 받을 것인가?와 같은 질문들을 개발을 하기전에 충분히 생각해볼 필요가 있다.
그 다음 CSS의 다이어 그램이다. HTML 태그와 그 안에 있는 ID, Class를 이용하여 CSS 값들을 태그별로 계층별로 영역을 나눠 적용 시킬 수 있다. 이러한 작업을 할 때 보통 open with live server를 이용하여 확인하는 작업을 한다. 나온지 꽤 되었지만 figma를 이용하여 2D 웹사이트를 만들 때 도움을 받기도 한다.
한편 좀 더 인터랙티브한 웹을 만들기 위해선 3D 에셋들, 다양한 이펙트, 아티클, 카메라 좌표를 이용한 웹 디자인 표현과 같은 것들도 배워야 한다. 물론 사람에 따라서 퀄리티는 천차만별이다. 또 다른 스크린보다 더 풍부한 시각적 경험을 사용자가 느끼게 만드는 것뿐만 아니라 최적화 문제 또한 같이 고민해야 하는 영역이다.
3D 웹 개발이 아니라 3D 게임을 만들다보면 항상 직면하는 문제이며 언리얼 엔진으로 새롭게 상상한 무언가를 표현하고자 할 때 사용자의 하드웨어의 성능에 따라서 표현할 수 있는 범위가 달라진다. 이상과 현실 사이에서 어떻게 표현할 것인가와 같은 고민을 하기도 한다.
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');최상단에는 구글 폰트의 값들을 @import url ('주소')로 넣어주었다.
:root{
--color-primary: #6C9BCF;
--color-danger: #FF0060;
--color-success: #1B9C85;
--color-warning: #F7D060;
--color-white: #fff;
--color-info-dark: #7d8da1;
--color-dark: #363949;
--color-light: rgba(132, 139, 200, 0.18);
--color-dark-variant: #677483;
--color-background: #f6f6f9;
--card-border-radius: 2rem;
--border-radius-1: 0.4rem;
--border-radius-2: 1.2rem;
--card-padding: 1.8rem;
--padding-1: 1.2rem;
--box-shadow: 0 2rem 3rem var(--color-light);
}:root{} 는 최상의 태그인 html을 의미한다. 즉, html 태그 아래에 생성되는 모든 태그에 적용시킬 수 있는 값을 변수로 작성하는 것이며 이러한 개념을 css에서 이용하여 하위의 태그들의 CSS 값들을 계층(선택자)에 따라서 다르게 적용시키는 것을cascading(캐스케이딩)라고도 한다.
.dark-mode-variables{
--color-background: #181a1e;
--color-white: #202528;
--color-dark: #edeffd;
--color-dark-variant: #a3bdcc;
--color-light: rgba(0, 0, 0, 0.4);
--box-shadow: 0 2rem 3rem var(--color-light);
}.dark-mode-variables 는 index.js에서 사용되는데 다크 모드를 토글하기 위해서 CSS 값을 바꾸기 위해 만든 CSS클래스 변수이다. 여기서 알 수 있는 사실은 변수에는 수많은 다양한 값들이 들어갈 수 있으며 이를 통해 HTML, CSS, Javascript들을 조작할 수 있다는 것이다.
*{
margin: 0;
padding: 0;
outline: 0;
appearance: 0;
border: 0;
text-decoration: none;
box-sizing: border-box;
}여기서 *가 나오는데 이것은 전역 선택자이다. 재밌게도 :root, *, html 모두 최상위 계층에 있는 것들이다. 전역변수가 3개 이상 된다고 생각할 수 있는데 그렇게 사용할 순 있지만 사실 각각의 의미는 조금씩 다르다. 너무 방대하게 적용되어서 낯설게 느껴질 수 있으나 한번 정리하고 넘어가자.
:root, *, html css 선택자 비교해보기
1.1 DOM과 CSS 상속 과정 확인해보기
먼저 html은 부모 태그와 자식 태그로 이뤄져 있는데 이러한 구조를 DOM tree라고도 말한다. DOM(Document Object Tree)은 크롬 개발자 도구로도 확인할 수 있다.
:root와 html, * 각각 스타일을 넣어서 어떻게 작동하는지 확인해보자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
:root{
--color-primary: #6c9bcf;
}
</style>
</head>
<body>
</body>
</html>
html 태그를 선택해보면 다음과 같은 것들을 스타일 탭에서 볼 수 있다. main.html:8은 해당 파일의 8번째 줄에 :root가 있다는 의미이고 아래의 다른 :root, html은 사용자 에이전트 스타일시트인데 이것은 브라우저가 기본으로 제공하는 값이다.
head 태그를 선택해보면 html로 부터 inhenited(상속됨) 되었다고 나온다.
innerText, outerText가 추가된 head 태그를 볼 수 있다. html 태그와 head 태그에는 있지만 body 태그에는 없다. 그러나 스타일에는 해당 색이 잘 표기되어 있다. 왜 그런지는 나중에 한번 확인해봐야겠다.
1.2 HTML 태그의 CSS 값 확인해보기
HTML 태그의 값을 확인해보면 개발자 도구의 창의 크기에 따라서 Content의 크기가 달라지는 걸 알 수 있다. 즉 html 태그는 최상의 태그이며 나머지 태그들의 콘텐츠 영역 전체를 감싸게 된다. 웹 페이지마다 html에 들어간 css 값들이 조금씩 다르게 되어 있다.
페이지마다 디자인을 할 때 사용되는 폰트와 색깔의 갯수가 달라지며 비슷한 목적을 가지는 페이지라고 할지라도 어떤 순서로 배치하느냐, 어떤 식으로 CSS 파일을 관리하느냐에 따라서 다르게 작성된다는 것을 알 수 있다.
점점 많아지는 CSS 파일들을 어떻게 체계적으로 관리할 것인가?
https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Organizing
Organizing your CSS - Learn web development | MDN
This is the final part of our building blocks module, and as you can see there are many ways in which your exploration of CSS can continue from this point — but now you can go on to testing yourself with our assessments: the first one is linked below.
developer.mozilla.org
1. 코드 한줄에 얼마나 많은 태그를 선택할 것인가?
- 어떻게 UI를 나눌 것인가?
- PC의 사용자 창의 크기, 휴대폰 사용자 창의 크기, 태블릿 사용자 창의 크기는 모두 다르다. 반응형으로 제작하여 창이 줄어들어도 볼 수 있게 UI의 크기의 범위에 따라서 CSS 값을 조정해야 한다.
2. 태그들이 가지고 있는 속성값 중 겹치는 것들은 어떤 것들인가?
- UI의 변화가 생길 때 어떤 부분은 변하고 어떤 부분은 변하지 않는가?
- 색이 너무 다양하면 통일성이 느껴지지 않는다.
- 안전 표시, 위험 표시를 하기 위해 공통적으로 인식하는 색이 있지만 다르게 표현하는 경우 디지털 값이 문제가 아니라 디자인이 문제라고 할 수 있다. 이처럼 색깔 + 표지판으로 정해져 있는 약속이 있다. [Color symbolism]
- 현실의 하늘을 디지털로 표현하기 위해선 어떻게 해야 하는가? [Computer Graphics, simulation]
3. 이미 만들어진 UI를 컴포넌트로 재사용할 수 있는가?
- 비슷한 UI를 만들기 위해서 기존의 코드를 재사용할 수 있는가?
- 다른 사람들이 만든 수 많은 웹사이트가 있고 github로 찾아볼 수 있으며 framwork를 이용할 수도 있다.
1.3 html 선택자에 색깔을 넣으면 어떻게 될까?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
:root{
--color-primary: #6c9bcf;
}*/
html {
color: aqua;
}
</style>
</head>
<body>
<p>1</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
:root{
--color-primary: #6c9bcf;
}*/
html {
color: aqua;
background-color: black;
}
</style>
</head>
<body>
<p>1</p>
<div style="width: 50px; height: 50px; background-color:antiquewhite;"></div>
</body>
</html>
[vs] Visual Studio Code : CSS { } 빈 속성 에러 메시지 비활성화 하기
Visual Studio Code : CSS { } 빈 속성 에러 메시지 비활성화 하기 "Do not use empty rulesets" VS를 작업하다보면 CSS 선택자 작성 시 #wrap { } #wrap header { } (위) 선택자만 작성하고 속성:값을 작성하지 않으면 (위)
webty.tistory.com
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
:root{
--color-primary: #6c9bcf;
}
html {
color: aqua;
background-color: black;
}
* {
margin: 10px;
}
</style>
</head>
<body>
<p>1</p>
<div style="width: 50px; height: 50px; background-color:antiquewhite;"></div>
</body>
</html>
여기서 head 태그에도 값이 들어가는데 표시는 되지만 자동으로 웹브라우저에 의해 제거되어 표시된다.
:root는 CSS 색을 넣기 위해 변수로 따로 명시하여 작성하는 선택자이고 html은 하위에 있는 모든 요소에 있는 CSS 속성값에 동일하게 적용된다. 다만 하위에 있는 태그에 따로 명시를 하면 해당 CSS 속성값을 우선한다. 마지막으로 *는 html을 포함한 모든 요소의 CSS 속성값을 의미한다.
그렇다면 아래와 같이 선언되면 어떻게 될까?
<!DOCTYPE html>
<html lang="en">
<head style="width: 100px; height: 100px; background-color: blue; ">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
:root{
--color-primary: #6c9bcf;
}
html {
color: aqua;
color: var(--color-primary);
background-color: black;
}
* {
margin: 10px;
color: #39996c;
}
</style>
</head>
<body>
<p>1</p>
<div style="width: 50px; height: 50px; background-color:antiquewhite;"></div>
</body>
</html>
html 선택자, :root 가 아닌 * 선택자에 선언된 color로 색깔이 지정이 됨. :root는 변수라고 생각하면 될 것 같고 html보다 *이 더 우선되어 설정이 되는 것으로 보인다. 이러한 우선순위는 어떻게 판단되는 것일까?
https://developer.mozilla.org/en-US/docs/Web/CSS/Cascade
Introducing the CSS Cascade - CSS: Cascading Style Sheets | MDN
The cascade is an algorithm that defines how user agents combine property values originating from different sources. The cascade defines the origin and layer that takes precedence when declarations in more than one origin, cascade layer, or @scope block se
developer.mozilla.org
https://web.dev/learn/css/the-cascade?hl=ko
캐스케이드 | web.dev
때로는 두 개 이상의 경쟁 CSS 규칙이 요소에 적용될 수 있습니다. 이 모듈에서는 브라우저가 사용할 것을 선택하는 방법과 이 선택을 제어하는 방법을 알아봅니다.
web.dev
'클론코딩 > Responsive Admin Dashboard' 카테고리의 다른 글
| Responsive Admin Dashboard with Light & Dark Mode #4 (0) | 2024.03.04 |
|---|---|
| Responsive Admin Dashboard with Light & Dark Mode #3 (0) | 2024.02.22 |
| Responsive Admin Dashboard with Light & Dark Mode #2 (0) | 2024.02.18 |