개발자.. 너란놈..

div 2개만 이용하고 Percent를 변경하여 사용하고 싶어서 아래와 같이 만들었습니다.

HTML (React)

uploadPercent는 useState로 변경 하는 로직을 사용 하였습니다.

<div className="progress-bg">
    <div className="progress-bar" style={{width:`${uploadPercent}%`}}></div>
</div>

CSS (SASS)

/* 프로그레스바 배경 */
.progress-bg {
    width: 100%;
    height: 10px;
    background-color: #aeb5c4; /* 배경색 */
    border-radius: 15px;
    overflow: hidden;

    /* 진행 부분 */
    .progress-bar {
        height: 100%;
        width: 0%; /* 진행 상태: 0% ~ 100% */
        background-color: #193263; /* 진행바 색상 */
        opacity: 0.9;
        border-radius: 15px 0 0 15px;
        transition: width 0.3s ease;
    }
}

테일윈드를 사용하면 절대로 쓸 일이 없는 구문이긴 하지만 테일윈드나 다른 프레임워크를 설정하기 어려워서 하나 만들어 보았습니다.

Padding

//숫자를 200 -> 1000 하면 1000까지 가능
@for $i from 0 through 200 {
    .pd-#{$i} {
        padding: #{$i}px !important;
    }

    .pt-#{$i} {
        padding-top: #{$i}px !important;
    }

    .pr-#{$i} {
        padding-right: #{$i}px !important;
    }

    .pb-#{$i} {
        padding-bottom: #{$i}px !important;
    }

    .pl-#{$i} {
        padding-left: #{$i}px !important;
    }
}

Margin

//숫자를 200 -> 1000 하면 1000까지 가능 (조절가능)
@for $i from 0 through 200 {
    .md-#{$i} {
        margin: #{$i}px !important;
    }

    .mt-#{$i} {
        margin-top: #{$i}px !important;
    }

    .mr-#{$i} {
        margin-right: #{$i}px !important;
    }

    .mb-#{$i} {
        margin-bottom: #{$i}px !important;
    }

    .ml-#{$i} {
        margin-left: #{$i}px !important;
    }
}

Select와 Option으로 사용 시 스타일링의 어려움이 있기 때문에 아래와 같이 ul 과 li로 구성 하였습니다.

HTML

<div class="dropdown">
    <div class="dropdown-selected">Select an option</div>
    <ul class="dropdown-options">
        <li data-value="1">Option 1</li>
        <li data-value="2">Option 2</li>
        <li data-value="3">Option 3</li>
        <li data-value="4">Option 4</li>
    </ul>
</div>

CSS (SASS)

.dropdown {
    position: relative;
    width: 250px;

    /* 선택된 항목 표시 */
    .dropdown-selected {
        padding: 5px;
        border: 1px solid #ccc;
        border-radius: 4px;
        background-color: #f9f9f9;
        cursor: pointer;
        font-size: 16px;
        color: #333;
    }

    /* 화살표 표시 */
    .dropdown-selected::after {
        content: "▼";
        position: absolute;
        top: 50%;
        right: 15px;
        transform: translateY(-50%);
        font-size: 12px;
        color: #333;
    }

    /* 옵션 목록 */
    .dropdown-options {
        display: block;
        list-style: none;
        margin: 0;
        padding: 0;
        position: absolute;
        width: 100%;
        border: 1px solid #ccc;
        background-color: #fff;
        z-index: 100;
        border-radius: 4px;
        max-height: 150px;
        overflow-y: auto;

        &.show {
            display: show;
        }

        /* 옵션 항목 */
        li {
            padding: 10px;
            cursor: pointer;

            /* 호버 및 선택된 항목 스타일 */
            &:hover{
                background-color: #007bff;
                color: #fff;
            }

            &.selected{
                background-color: #007bff;
                color: #fff;
            }
        }
    }
}

아래는 참고용으로 Vue로 Select Option을 제대로 이벤트 동작하게끔 하기 위해 정리합니다.

Vue

<div class="dropdown" ref="dropdown">
    <div class="dropdown-selected" @click="toggleDropdown">Select an option</div>
    <ul class="dropdown-options" v-if="isOpen">
        <li data-value="1" @click="selectOption(1)">Option 1</li>
        <li data-value="2" @click="selectOption(2)">Option 2</li>
        <li data-value="3" @click="selectOption(3)">Option 3</li>
        <li data-value="4" @click="selectOption(4)">Option 4</li>
    </ul>
</div>

export default{
	data() {
        return {
            isOpen:false
        }
    },
    methods: {
    	toggleDropdown() {
            this.isOpen = !this.isOpen;
        },
        selectOption(option) {
            this.selectedText = option.text;
            this.isOpen = false;
        },
        handleClickOutside(event) {
            // dropdown 외부 클릭 시 드롭다운 닫기
            if (!this.$refs.dropdown.contains(event.target)) {
                this.isOpen = false;
            }
        }
    },
    mounted() {
        document.addEventListener('click', this.handleClickOutside);
    },
    beforeDestroy() {
        document.removeEventListener('click', this.handleClickOutside);
    },    
}

※Sass 사용

import './scss/style.scss';
이런식으로 바로 사용 할 수 있음. (--wacth를 안해도 됨)

import './scss/style.scss';

function App() {

	return (
		<div className='wrap'>
			<h1>TITLE1</h1>
			<h1>TITLE2</h1>
		</div>
	);
}

export default App;

.wrap {
	border: 1px solid red;
}

변수를 사용하여 선언 하거나 Style에 바로 입력

function App() {
	const fontStyle = {
		color: 'aqua',
		fontSize: 60,
		fontWeight: 'normal',
	};

	return (
		<div className='wrap'>
			{/* 미리 스타일 객체를 변수에 선언후 가상돔에 연결 */}
			<h1 style={fontStyle}>TITLE1</h1>
			{/* 가상돔에 직접 객체 리터럴 형식으로 스타일 적용 가능 */}
			<h1 style={{ color: 'orange', fontSize: 30 }}>TITLE2</h1>
		</div>
	);
}

export default App;

SASS란?

Sass: Syntactically Awesome Style Sheets의 약자로 CSS를 만들 때 좀 더 편리하게 쓸 수 있게 만들어주는 CSS 전처리기 언어 이다.

SASS 설치를 하기 위해서는 Node.js를 설치 하여야 한다.

Node.js 설치 주소

https://nodejs.org/ko

※보통은 안정성이 있는 LTS 버전을 사용하고 신규 버전은 새로운 것들이 추가되어 안정성이 있는 LTS 버전 보다는 안정성이 떨어져서 LTS 버전을 다운로드 받는 것을 추천한다.

node.js를 다운로드 받고 '다음'을 눌러서 설치를 완료하고 나면 '명령 프롬포트' 에서 정상 설치가 되었는지 확인 할 수 있다.

위와 같이 Node가 설치 되면 'npm' 을 사용하여 SASS를 설치 할 수 있습니다.

npm install sass -g

설치가 완료되고 나면 아래와 같이 VS code를 통해서 SASS / SCSS를 사용 할 수 있습니다.

1. VS CODE에서 터미널을 열고 (Ctrl + `)

2. 터미널에 명령어를 입력 합니다.

3. 명령어가 제대로 동작하면 scss 스타일에서 코딩 하는 것을 바로 CSS 전처리기인 SASS가 css로 변환 해줍니다.