계산기 CSS 정리

1. CSS 파일 만들 때 Global Variable 지정해보기

css파일도 Javascript 파일과 마찬가지로 코드가 길어지면 가독성이 나빠지고, 같은 값이 반복이 될 때가 많다. Global Variable으로 변수처럼 값을 지정하면 어떤값을 지정한 것인지 바로 보이고, 나중에 값이 바뀔 때 한번에 바꿔 줄 수도 있기 때문에 유지 보수측면으로도 좋다.

:root {
  --red: #b00;
  --blue: #00b;
  --fullwidth: 100%;
}
/* ... */
h1 {
  color: var(--red);
}
#MyText {
  color: var(--blue);
  width: var(--fullwidth);
}

 

2. 활용하면 좋은 기능들

 ⓵ reset.css 같은 다른 사람들이 미리 짜 놓은 자주 쓰는 기능들을 활용하면 좋다.

 ⓶ animation, @keyframes 기능을 이용하면 움직이는 그림 효과를 넣을 수 있다.

@keyframes mymove {
  from {top: 0px;}
  to {top: 200px;}
}

 ⓷ Media query를 사용하면 반응형 웹을 구현할 수 있다.

/* 	viewport가 12450px 이하일 때 적용할 css*/
@media (max-width: 12450px) { ... }

⓸ 웹사이트를 돌아다니다가 예쁜 색의 색상코드를 알고싶으면 구글 확장 프로그램인 color picker를 사용하면 바로 색상코드를 얻을 수 있다.

 

 

3. 와이어 프레임을 만들어 놓고 작업을 진행하면 좀 더 수월하게 할 수 있다.

https://ovenapp.io/

OvenApp.io

 

4. CSS 관련 알아두면 좋은 것들

 ⓵ radial-gradient를 사용하면 하이라이트 효과를 줄 수 있다. linear gradient 기능으로는 버튼을 누르는 효과를 줄 수 있다. 

 ⓶ border- radius를 50%이상으로 설정하면 원이 된다.

 ⓷ display:none으로 박스를 숨겨뒀다가 가상 클래스 hover로 display 값을 바꿔주면 마치 마우스 오버를 했을 때 마치 창이 하나 더 생기는 것 같은 효과를 줄 수 있다.

 

 

 

Reference

- https://stackoverflow.com/questions/15831657/creating-css-global-variables-stylesheet-theme-management

- https://developer.mozilla.org/ko/docs/Web/CSS/Media_Queries/Using_media_queries

- https://www.w3schools.com/cssref/css3_pr_animation-keyframes.php