CodeStates/JavaScript

Section1 / Unit4 : 복습&계산기 목업 만들기

yeeendy 2023. 4. 17. 15:21

코드스테이츠 수업 5일차!

첫 페어 과제로 계산기를 만들었다.

기본 지식을 배우는 것이랑 그것을 활용하는 것은 확실히 큰 차이가 있었다.

 

 

만들면서 찾은 필요했던 속성

 

*버튼 기본 세팅 초기화 하는 방법 -> button{all:unset}

*:hover 에 ::after을 추가해서 content를 추가할 수도 있었다(마우스를 올리면 글자가 뜨게)

*불투명도 조절 -> {opacity: ;} (0~1)로 조절

*그림자 넣는 방법 -> box-shadow (text-shadow 사용하면 글자에 그림자를 넣을 수 있다)

 

 

아직 지식이 부족해서 페어한테 많은 도움을 받았고 지식 쌓는데에 큰 도움이 되었다.

 

 

여러 수강생들의 작업물을 보면서 처음 보는 속성들이 있어서 메모해둔다.

*gap 간격 조절

-> margin과 gap의 차이점은

->gap의 경우 엘리먼트 요소들 사이에만 공간을 만든다.

->margin의 경우 인접한 요소들의 존재 여부와 상관없이 항상 스타일이 사용된다.

*cursor : pointer

->링크를 나타내는 포인터(손가락 모양)

*transform

->요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여할 수 있다

*backdropfilter -> 블러처리를 opacity를 사용하신 줄 알았는데 이 속성을 사용하셨다

*그라데이션

->3가지 종류

->linear-gradient 선형 그레디언트

->radial-gradient 반지름형 그레디언트

->repeating gradient 반복형 그레디언트

 

조급해하지 말고 차근차근 기초부터 만드는 연습을 해둬야할 것 같다

'CodeStates > JavaScript' 카테고리의 다른 글

Section1 / Unit5 : JS 조건문  (0) 2023.04.19
Section1 / Unit5 : JS  (0) 2023.04.18
Section1 / Unit4 : HTML/CSS활용  (0) 2023.04.14
Section1 / Unit3 : CSS  (0) 2023.04.13
Section1 / Unit2 : HTML  (0) 2023.04.12