[ JS : UI 만들기 ] 쉽고 빠르게 UI 만드는 법 Learn 하기 (드랍다운 만들기)

UI 만드는 꿀팁

 
CSS와 DOM만 잘 다루면 아주 EASY 하다.
총 4가지만 잘 지키면 된다.

1. HTML을 만든다.
2. CSS를 만든다.
3. CSS속성을 HTML에 적용한다. ex) <h1 class="dropdown-list hidden>
4. 그리고 자바스크립트를 작성한다.

끝

초간단 드랍다운

드롭다운을 만들어보자.

 

1. HTML을 만든다.

<button>버튼이당</button>

<ul class="ullist">
	<li>안녕</li>
	<li>하세요</li>
	<li>드랍다운</li>
	<li>입니다.</li>
</ul>

 

2. CSS를 만든다.

.hidden {
	display:none;
}

 

3. CSS속성을 HTML에 입힌다.

<button>버튼이당</button>

<ul class="ullist hidden">
	<li>안녕</li>
	<li>하세요</li>
	<li>드랍다운</li>
	<li>입니다.</li>
</ul>

 

4. 그리고 자바스크립트를 작성한다.

const button = document.querySelector('button')
const ul = document.querySelector('.ullist')

button.addEventListener('click', ()=>{
	ul.classList.toggle('hidden')
}
)

Q. toggle이 뭔가요?
 
이런 느낌이라고 보면 된다. 버튼 하나로 add와 remove 둘 다 하고 싶을 때 쓰는 거다.

const button = document.querySelector('button')
const ul = document.querySelector('.ullist')

let count = 0;


button.addEventListener('click', ()=>{
	if(count % 2 === 0){
		count++
		ul.classList.add('hidden')
	}else{
		count++
		ul.classList.remove('hidden')
		}
	}
)

 
 
 
사라지고 나타나는 모든 UI는 이렇게 만들어봅자!
 

 

UI만들기 2탄 다크모드 만들기

[ JS : UI만들기 ] 쉽고 빠르게 UI 만드는 법 Learn 하기 2 (다크모드 만들기)