Web/Html&Css
-
SASS 사용법Web/Html&Css 2023. 4. 21. 16:41
📒 SASS ✔ 왜? (사용 이유) ◼ CSS 대용 언어로, CSS의 반복 코드 문제 등을 해결하기 위해서 탄생했다. ◼ CSS에 추가적인 문법(조건문, 반복문, 변수, 함수)을 제공한다. 즉, 프로그래밍스럽게 코드를 짤 수 있게 도와준다. ✔ SASS 사용하기 ◼ Live Sass Compiler를 설치한다. ◼ main.scss 파일을 생성해서 개발한다. ◼ 웹브라우저는 .css 파일만 읽을 수 있고, .scss를 읽을 수 없다. 따라서, scss 파일을 css 파일로 변환해서 사용해야 한다. ◼ Live Sass Compiler가 설치되어 있으면 VS Code 하단의 Watch Sass를 클릭하면 동일 폴더에 .main.css 파일이 생성된다. ◼ Html 파일에 .main.css 파일을 첨부해서 ..
-
Html&CSS 유용한 방법들Web/Html&Css 2023. 4. 21. 00:08
📒 웹 폰트 첨부 방법 ✔ 폰트 넣는 방법 body { font-family: "gulim", 'dotum'; } ◼ body 태그 안에 있는 모든 글자를 굴림체로 적용한다. 굴림체 적용 시 에러가 발생하면 돋음체가 적용된다. ◼ 클라이언트 컴퓨터에 해당 폰트가 설치되어 있어야 적용된다. ◼ font-family는 inherit 된다. -> 자동 상속 ✔ 커스텀 폰트 넣는 방법 @font-face { font-family: '폰트 이름'; src: url(폰트 경로); } ◼ @font-face: 내가 준비한 폰트 파일을 CSS에서 사용 가능하게 등록한다. ◼ 클라이언트 컴퓨터에 등록한 폰트가 없을 시, url로 지정한 곳에서 다운 받아 사용된다. ◼ 한글 폰트의 사이즈는 매우 크기 때문에, 1~2개만 ..
-
반응형 레이아웃Web/Html&Css 2023. 4. 1. 23:14
📒 CSS 단위 알아보기 ✔ vw 현재 브라우저 폭에 비례해서 설정할 수 있는 단위 .test { width: 100vw; height: 100vw; background-color: grey; } ✔ vh 현재 브라우저 높이에 비례해서 설정할 수 있는 단위 .test { width: 100vw; height: 50vh; background-color: grey; } ✔ rem html 태그(16px) 폰트 사이즈에 비례해서 설정할 수 있는 단위 .test { width: 100rem; // 1600px height: 50vh; background-color: grey; } ✔ em 내 폰트 사이즈에 비례해서 설정할 수 있는 단위 .test { font-size: 15px; width: 100rem; //..
-
Html&CSS 사용하기Web/Html&Css 2023. 3. 31. 00:09
📒 HTML&CSS 학습 전 브라우저 렌더링이란? ✔ 브라우저는 텍스트로 이루어진 HTML, CSS, JavaScript 파일을 읽고 웹 페이지를 그려낸다. ✔ 웹 페이지를 그려내는 과정을 "파싱", "렌더링" 작업으로 이루어진다. ❕ 파싱 작업은 HTML, CSS, JavaScript 등의 문서를 읽고 이를 조작할 수 있는 자료구조로 변환하는 과정 ❕ 렌더링 작업은 파싱 작업으로 생성된 자료구조의 일종인 렌더 트리를 기반으로 브라우저 화면에 그 내용을 시각적으로 출력하는 과정 📒 파싱과 렌더링 과정 ✔ HTML, CSS 문서는 텍스트로 이루어져 있어, 브라우저가 해당 자료를 사용해 사용자가 시각적으로 인지할 수 있는 내용으로 렌더링하려면, 우선 전달된 문서를 파싱하고, 이를 사용할 수 있도록 메모리에 ..