CSS

HTML과 CSS를 활용할 때, CSS를 추가하는 방법은 세 가지입니다HTML 태그에 style 속성을 사용하여 CSS를 직접 추가합니다.HTML 문서의 head 태그 안에 style 태그를 사용해 스타일을 정의합니다.CSS 파일을 별도로 작성하고 태그로 HTML에

css { 프로퍼티명 : 값;}축약표현은 여러 CSS속성을 하나의 표현으로 설정가능.텍스트 색상을 지정합니다.요소 내부 여백(컨텐츠와 경계선 사이)을 설정합니다.요소 외부 여백(요소와 요소 사이의 거리)을 설정합니다.요소 외부 여백(요소와 요소 사이의 거리)을 설정합니

CSS에서 상속되는 속성(inheritable properties)은 부모 요소의 스타일이 자식 요소로 전파되는 속성을 말한다.텍스트와 관련된 속성들은 기본적으로 상속된다.color: 텍스트 색상font-family: 폰트 종류font-size: 글꼴 크기font-st

CSS 선택자는 HTML 요소를 선택하여 스타일을 적용하는 도구이다. 주요 선택자들은 다음과 같다.전체 선택자 (\*): 모든 요소를 선택합니다.태그 선택자: 특정 HTML 태그를 선택합니다.클래스 선택자 (.): 특정 클래스 이름을 가진 요소를 선택합니다.아이디 선택

CSS 박스 모델은 HTML 요소를 네 개의 영역으로 나눠 구성합니다.

CSS의 position 속성은 웹페이지에서 요소의 배치를 제어하는 데 중요한 도구이다.요소의 기본 위치 지정 방식입니다. 요소는 일반적인 문서 흐름에 따라 배치됩니다.top, right, bottom, left 속성의 영향을 받지 않습니다.z-index에 영향을 받지

background 속성은 HTML 요소의 배경을 설정하는 데 사용됩니다. 이 속성은 여러 개의 개별 속성을 축약하여 사용할 수 있습니다.배경 색상을 설정합니다.색상 이름: red, blue, green 등.16진수 색상: - RGB/rgba: rgb(255, 0, 0

filter 속성은 요소의 시각적 표현을 조작하여 다양한 그래픽 효과를 적용할 수 있습니다. 주로 이미지, 텍스트, 배경에 사용되며, 브라우저에서 CSS 수준에서 효과를 처리하므로 빠르고 효율적입니다.

CSS의 크기 단위는 요소의 크기(너비, 높이, 여백 등)를 지정할 때 사용되며, 절대 단위와 상대 단위로 나뉩니다

1. 하드웨어 픽셀과 소프트웨어 픽셀 하드웨어 픽셀 (Device Pixel) 물리적인 디스플레이 화면에서 실제로 존재하는 픽셀입니다. 디바이스의 제조 과정에서 정해지는 고정된 값입니다. 높은 해상도를 가진 디바이스는 더 많은 하드웨어 픽셀을 가질 수 있습니다. 예: iPhone 13 Pro의 실제 해상도(하드웨어 픽셀)는 2532 × 1170 소프트웨어 ...

1.제네릭패밀리와 폰트패밀리 제네릭패밀리 (Generic Family) 글꼴의 일반적인 분류(그룹)를 나타냅니다. serif, sans-serif, monospace, cursive, fantasy, system-ui 등. 사용 가능한 특정 폰트를 찾지 못했을 때, 브라우저는 제네릭 패밀리에 해당하는 시스템 기본 글꼴로 대체합니다. 항상 마지막에 배치하여 ...

Flexbox는 CSS 레이아웃 모델 중 하나로, 컨테이너 안의 아이템들을 쉽고 효율적으로 정렬할 수 있도록 도와줍니다.

CSS Grid는 웹 페이지의 레이아웃을 구성하는 강력한 방법 중 하나로, 2차원(행과 열) 배치를 효율적으로 관리할 수 있다.

transform 프로퍼티는 요소를 변형(이동, 회전, 확대/축소, 기울이기)할 때 사용됩니다.

transition은 요소의 상태 변화를 부드럽게 애니메이션하는 방법입니다.

1. CSS Variables (CSS 변수) CSS 변수(Custom Properties)는 CSS 내에서 변수를 선언하고 사용할 수 있도록 해주는 기능입니다. --변수이름: 값; 형식으로 변수 선언 var(--변수이름, fallback)을 사용해 호출 CSS 변수의 장점 전역 & 지역 선언 가능 유지보수 편리 (한 곳에서 값을 변경하면 전체 반영) 미...

Sass(Syntactically Awesome Stylesheets)는 CSS를 더 강력하고 효율적으로 작성할 수 있도록 도와주는 CSS 전처리기(Preprocessor)입니다.