Responsive Admin Dashboard with Light & Dark Mode #3

웹 사이트를 만들기전에 어떤 식으로 사이트를 구성할 것인지 미리 구상할 필요가 있고 나눠진 영역에 따라서 HTML 태그들을 나눈 이후에 각각의 UI에 어떤 클래스 명을 넣을 것인지 고민해야한다. 자주 쓰는 태그들을 따로 정의하여 반복하여 사용하지 않도록 하고 들어가는 색깔 또한 :root로 변수처리해준다. 

 

이후에는 어떤 애니메이션을 넣을 것인지, 트랜지션을 넣을 것인지 고민해본다. 또한 @media를 이용하여 디스플레이의 크기 변화에 따라서 반응형으로 웹사이트를 조정한다. 여기까지가 일반적인 HTML, CSS, Javascript로 할 수 있는 것들인데 폰트나 이미지의 크기 변화, div 태그의 box 값들을 조정할 필요가 있다.

 

https://blog.naver.com/bibimseol/221346378885

[나만의 폰트 만드는 법] 나의 손글씨체 폰트로 제작하는 법! 총정리! #손글씨체 #FCP로 만드는 나

https://www.daleseo.com/css-responsive-typography/

CSS로 반응형 글꼴 스타일하기

https://developer.mozilla.org/ko/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

반응형 이미지 - Web 개발 학습하기 | MDN

 

1. CSS 레이아웃

 

1.1 normal flow(일반 흐름)

 

https://sdsupport.cafe24.com/reference/html/block-inline.html

스마트디자인 서포트

 

1.2 flexbox(플렉스박스)

https://www.daleseo.com/css-flexbox/

CSS 플렉스박스(Flexbox) 이해하기

 

1.3 grid(그리드)

https://yamoo9.gitbook.io/css-grid

레이아웃 디자인 - CSS Grid Layout Guidebook

 

https://www.youtube.com/watch?v=EiNiSFIPIQE

https://github.com/kdeldycke/awesome-falsehood?tab=readme-ov-file#typography

GitHub - kdeldycke/awesome-falsehood: 😱 Falsehoods Programmers Believe in

 

2. 자바스크립트 객체 다루기

2.1 json 객체 리터럴

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'
    },
]

 

 

2.2 Array.prototype.forEach() 

Orders.forEach(order => {
    const tr = document.createElement('tr');
    const trContent = `
        <td>${order.productName}</td>
        <td>${order.productNumber}</td>
        <td>${order.paymentStatus}</td>
        <td class="${order.status === 'Declined' ? 'danger' : order.status === 'Pending' ? 'warning' : 'primary'}">${order.status}</td>
        <td class="primary">Details</td>
    `;
    tr.innerHTML = trContent;
    document.querySelector('table tbody').appendChild(tr);
});

 

https://chat.openai.com/share/1a0efbae-46c8-40f9-8b6d-6a1b7b19ba0d

 

forEach()는 3개의 리스트를 한번씩 접근하는 내장함수이다. 해당 함수의 첫번째 인자로 order => {...}를 집어넣었는데 이는 콜백함수이다. 이 콜백함수에 다시 const 변수들을 선언하고 콜백함수에 order가 다시 사용되었다. 

 

`<td>${order.productName}</td>`는 템플릿 리터럴로 $로 주황색처리가 된 영역의 값은 문자열 인터폴레이션으로 처리되어 실재 문자 데이터가 아닌 변수에 담긴 데이터를 처리할 수 있게 해준다.

${order.status === 'Declined' ? 'danger' : order.status === 'Pending' ? 'warning' : 'primary'}

 

이것은 삼항연산자로 ===, ?, : 로 나눠서 볼 수 있다. order.status === declined와 같으면 danger를 반환한다. 만약 같지 않으면 다음으로 넘어가서 order.status === pending이면 warning을 반환하고 그마저도 아니면 마지막으로 primary를 반환한다. 

 

:root{
--color-warning: #F7D060;
--color-danger: #FF0060;
--color-primary: #6C9BCF;
}

 

상태값(status)에 따라서 노랑(warning), 빨강(danger), 파랑(primary)으로 바뀌게 된다.

 

 tr.innerHTML = trContent;
    document.querySelector('table tbody').appendChild(tr);

 

이것은 앞서 const로 선언한 tr에 접근하여 innerHTML의 값을 trContent로 바뀌고 dom에 접근하여 table tbody 태그를 선택해 변경된 tr를 넣어준다.

맨 밑에 tbody 태그가 있다.

 이렇게 상태 표시를 색깔로 구분하여 적용하였다.