[CSS] CSS, SCSS, SASS
CSS 파일에서 변수를 정의하는 방법div.css:root { --div-color: red; }div { background-color: var(--div-color); }CSS 작성에 있어 Sass만이 방법인 건 아니긴 합니다. css 파일 안에서 함수를 사용할 순 없지만css 여러 내장 함수를 지원하고 있다.calc(): 계산을 수행하는 함수로, 길이, 너비, 위치 등을 계산할 때 사용됩니다. 예를 들어, width: calc(100% - 20px)요소의 너비를 화면 너비의 100%에서 20px을 뺀 값으로 설정합니다.rgb(): RGB 색상을 생성하는 함수로, 빨간색, 초록색, 파란색 값을 사용하여 색상을 지정합니다. 예를 들어, background-color: rgb(255, 0, 0);는 ..
2024. 1. 23.
[WEB] 웹 프론트엔드 기초 - 1. 브라우저와 개발 도구/프레임워크 이해하기
브라우저사용자가 웹 페이지를 요청하고 표시하는 데 사용되는 소프트웨어HTML, CSS, JavaScript와 같은 웹 기술을 해석하고 실행하여 사용자에게 웹 페이지를 표시Windows, macOS, Linux, Android, iOS 등 다양한 운영 체제에서 웹 브라우저를 지원하고 있다. 브라우저 구성 요소주소 표시줄뒤로/앞으로 버튼북마크확장 기능광고 차단, 팝업 차단, 개발자 도구 브라우저 엔진Chromium, Gecko, WebKit렌더링 엔진HTML과 CSS를 해석하고 페이지를 렌더링하는 엔진예를 들어, Chrome은 Blink 엔진을 사용하고, Firefox는 Gecko 엔진을 사용합니다.자바스크립트 엔진JavaScript 코드를 해석하고 실행하는 엔진입니다V8 엔진 (Chrome 및 Node.j..
2024. 1. 12.
[WEB] 프레임워크와 라이브러리 개념 정리 - 개발 환경, 개발 도구 체인
프레임워크다양한 api들 컴파일러, 애플리케이션 지원기능, 라이브러리 등이 모두 포함된 것짜여진 패턴이나 틀 기반에서 내가 코딩을 하는 것예) Ext JSExpressSpringReact, Vue, Angular 라이브러리보조적인 모듈, 오브젝트, 클래스, 함수, 코드들의 집합내가 가져다 사용해서 자유롭게 사용하는 방식예)ReactjQueryRedux 라이브러리와 프레임워크 차이 프레임워크라이브러리코드 작성 방식 일반적으로 프레임워크에서 정의한 규칙에 따라 코드를 작성해야 합니다. 개발자는 프레임워크가 제공하는 틀 안에서 작업하며, 특정 이벤트에 대한 콜백 함수를 정의하거나 상속을 통해 프레임워크의 기능을 확장할 수 있습니다. 라이브러리는 개발자가 직접 호출하여 사용하는 형태이므로, 코드의 흐름은 ..
2024. 1. 11.
