계산기 복습

실시간 세션에서 나온 내용

1. 글로벌 셋업

 CSS에 공통된 스타일을 디폴트 값으로 정할 때 사용하는 방법 중 하나.

 

그 외에도 알아본 결과

 Global CSS는 default값이다.
다른 스타일을 적용하고 싶으면 원래 하던대로 스타일을 지정하면 된다.
css(cascading style sheet): 가장 최상위에서 스타일을 적용하면 자식이 덮어씌워지게 된다.
자식에 스타일을 지정하면 자식에서는 그 스타일이 우선시 된다.

2. 컨테이너 안에 마진이나 패딩을 위아래로 할 때 버튼들이 벗어나는 현상 / 박스사이징을 미리 했었는데도 불구하고

 계산기 새로 만들 때 다시 한번 해보기.

3. flex box 와 flex-grow가 아닌 flex-basis를 주로 사용하여 코드를 줄임.

4. hover>ul {display: flex;} 로 디스플레이 변경 구현

   hover를 사용하여 새로운 방법으로 계산기를 구현해 냈다.
   계속적으로 더 좋은 방법을 구현할 방법에 대해 찾는 것. 이게 몰입의 핵심인 것 같다.

5. overflow : hidden; 을 사용해서
밖으로 삐져나오는 부분들은 안보이게 하기.

 

 그 외에도 scoll : 넘치는 부분을 스크롤로 정하기 / auto : 스크롤을 쓰기 애매한 경우 자동으로 설정

더 자세한 내용은 https://www.daleseo.com/css-overflow/ 참고하기

6. 반응형 / @media screen으로 디스플레이 활용

 

 CSS 미디어 쿼리 : 반응형 웹디자인의 기본 / 뷰포트(viewport) 너비에 따라 다른 스타일을 적용하기 위해서 뿐만 아니라 다크 모드 지원 등 다양한 용도로 활용이 가능

7. 비포태그 / 그래디언트 각도조절 / 포지션 앱솔루트적용
  transition -> 애니메이션 효과

 

  css 가상요소  : 가상 요소(pseudo-element)는  특별한 상태를 기술하는 대신, 문서의 특정 부분을 스타일

 

꾸밈을 위해서 의미없는 태그를 더 추가해야 될 때, 태그 대신에 가상으로 처리

 

  css transition  : https://poiemaweb.com/css3-transition 사이트 참조

 

   linear-gradient : 방향을 지정하지 않았을 시, 디폴트는 위에서 아래 방향 /  linear-gradient (방향, 색1, 색2, ..., 색n)

  방향은 To top, to bottom, to right, to left로 지정할 수도 있으며,

  0 deg, 180 deg, 90 deg, 270 deg로 지정할 수도 있다. 

  디폴트는 To bottom, 그리고 180 deg이다. deg의 경우 숫자가 커질수록 시계 방향으로 이동한다.

  ex) linear-gradient(45deg, Violet,Orange) ; 는 45도 기울기

  세 가지 이상의 색을 지정하는 것도 가능

  색이 변하는 지점도 설정 가능하다. 색상을 지정한 후 코마를 찍기 전에 **%를 설정하면, 그 지점까지 색이 유지

8. 키프레임 / 애니메이션 효과 사용

    @keyframes

9. 에멧 문법

에밋(Emmet)이란?

 HTML, MXL, XSL 문서 등을 편집할 때 빠른 코딩을 위해 사용하는 플러그인 입니다. 매우 간단한 몇 가지 코드만 입력하면, 자동으로 완전한 HTML 코드를 생성

 

 

새롭게 배운 것들을 통해 다시 한번 계산기 만들기

 

1. 계산기의 컨셉
2. 버튼의 정렬 방법
3. 핵심적인 CSS 속성
4. 실패 경험과 배운 점
5. 더 발전 시키고 싶은 부분

 

 만들고 다시 한번 생각 해 보기