프론트엔드 지망생

- 16일차 프론트엔드 공부 -transform1. 변형 시킨다는 의미2. 요소에 이동, 회전, 확대축소, 비틀기 등의 변형 효과를 줄 수 있다. transform의 속성값translate(x, y)scale(x, y)skew(x-angle, y-angle)rotate(angle) translate(x, y)요소의 좌표를 움직일 수 있다.x축으로 x만큼, y축으로 y만큼 이동시킨다.transform: translate(20px, 20%) translateX(n)요소의 X축 좌표를 n만큼 움직일 수 있다.transform: translateX(20px) translateY(n)요소의 Y축 좌표를 n만큼 움직일 수 있다.transform: translateY(20px) scale(x, y)X축으로 x만큼, ..

- 15일차 프론트엔드 공부 - 함수calc()괄호 안의 사칙연산을 수행한 결과를 속성값으로 사용한다.ex).item { width : clac(100/4px);} .item2 { width : clac(10px + 20px)} +, - 앞과 뒤는 띄어쓰기가 필수다.*, / 는 띄어쓰기가 필요 없다. 함수 실습1 20px + 50% 100% - 70px 3 * 20px 100% / 4  * { bo..

- 14일차 프론트엔드 공부 -케스케이딩 (Cascading)수많은 스타일 요소 중 어떤 스타일을 브라우저에 그릴지 결정해주는 CSS 우선순위 적용 원리 1.중요도CSS가 선언된 위치에 따라 우선순위가 결정된다. 브라우저 스타일 시트   브라우저 스타일 시트  사용자 스타일 시트-사용자 폰트 지정- 고대비 모드 사용- 사용자가 본인의 취향, 편의를 위해 사용하는 것 개발자 스타일 시트- 개발자가 만들어 놓은 선언개발자 스타일 시트로 연결한 css 파일 요소 안에 있는 css  중요도 정리인라인 스타일 css 요소 안에 있는 css 로 연결한 css 파일사용자 스타일 시트브라우저 스타일 시트  2.구체성(명시도)선택할 대상을 구체적으로 특정할수록 명시도가 높아진다. 명시도가 높아지면 우선순위도 함께 높아..