CSS 기본과 SCSS, SASS 처럼 CSS 작성하기

728x90

CSS 적용하는 방법

// 인라인스타일 속성
<body style="background-color:powderblue;">
  powderblue 색상
</body>

// 내부 스타일시트
<head>
  <style>
    // css code
  </style>
</head>

// 외부 스타일시트 파일 가져오기
<head>
  <link href="./style.css" />
</head>

<p style="color: red;">안녕하세요</p>

<style>
  p { color: green; }
</style>

<link rel="stylesheet" href="styles.css" />

/* 선택자: p */
p {
  color: blue;
}

/* 선택자: .highlight */
.highlight {
  background-color: yellow;
}

선택자 종류

CSS 작성에 있어 Sass만이 방법인 건 아니긴 합니다. css 파일 안에서 함수를 사용할 순 없지만css 여러 내장 함수를 지원하고 있다.

div.css

:root { --div-color: red; }

div { background-color: var(--div-color); }

calc(): 계산을 수행하는 함수로, 길이, 너비, 위치 등을 계산할 때 사용됩니다. 예를 들어, width: calc(100% - 20px)요소의 너비를 화면 너비의 100%에서 20px을 뺀 값으로 설정합니다.
rgb(): RGB 색상을 생성하는 함수로, 빨간색, 초록색, 파란색 값을 사용하여 색상을 지정합니다. 예를 들어, background-color: rgb(255, 0, 0);는 빨간색의 배경색을 설정합니다.
rgba(): RGB 색상과 투명도를 생성하는 함수로, 빨간색, 초록색, 파란색 값과 투명도 값을 사용하여 색상을 지정합니다. 예를 들어, background-color: rgba(255, 0, 0, 0.5);는 투명도가 0.5인 빨간색의 배경색을 설정합니다.
hsl(): HSL 색상을 생성하는 함수로, 색상, 채도, 명도 값을 사용하여 색상을 지정합니다. 예를 들어, color: hsl(120, 100%, 50%);는 채도와 명도가 100%인 녹색의 텍스트 색상을 설정합니다.
url(): 이미지 파일의 경로를 지정하는 함수로, 배경 이미지나 이미지 요소의 src 속성에 사용됩니다. 예를 들어, background-image: url('image.jpg');는 image.jpg 파일을 배경 이미지로 설정합니다.
var(): CSS 변수를 참조하는 함수로, 미리 정의된 변수 값을 가져와 사용합니다. 예를 들어, color: var(--primary-color);는 --primary-color라는 CSS 변수의 값을 사용하여 텍스트 색상을 설정합니다.

css 속성을 js에서 쓰는 방법

js에서 리턴값을 css에서 쓰는 방법

const root = document.documentElement; root.style.setProperty('--brand-color', BrandColor);

728x90

CSS 확장 / Sass에만 존재하는 기능이 CSS에 통합 되다 ! (0)	2025.02.12
CSS 단위 비교: px, em, rem 차이점과 올바른 사용법 (0)	2024.05.30
Reset CSS vs Normalize CSS: 크로스 브라우징을 위한 스타일 초기화 방법 (0)	2024.01.12
CSS 스타일 제거하기 :hover 효과 삭제 방법 (0)	2024.01.02
CSS 레이아웃 배치: flex, grid, gap (1)	2023.12.18

신림쥐의 기술 블로그