CSS - 데이터 타입

소개

안녕하세요, 미래의 CSS 마법사 여러분! CSS 데이터 타입의 세계를 함께 탐험하게 되어 기쁩니다. 10년 이상 컴퓨터 과학을 가르쳐온 사람으로서, 데이터 타입을 이해하는 것은 소설을 쓰기 전에 알파벳을 배우는 것과 같다고 말할 수 있습니다. 기본적이고, 감히 말하자면, 즐겁기도 합니다! 그麼, 함께 CSS 데이터 타입의 미스터리를 풀어보겠습니다.

문법

데이터 타입의 구체적인 내용에 들어가기 전에, CSS가 데이터를 어떻게 처리하는지에 대해 이야기해보겠습니다. CSS는 특정한 방식으로 값을 표현하며, 이 문법에 익숙해지는 것이 중요합니다.

셀렉터 {
속성: 값;
}

예를 들어:

p {
color: red;
font-size: 16px;
}

여기서 'red'과 '16px'은 다른 데이터 타입의 값입니다. 'red'은 색상 키워드이고, '16px'은 길이 값입니다. 이렇게 쉬웠죠? 이미 익숙해지고 계시네요!

텍스트 데이터 타입

이제 텍스트에 대해 이야기해보겠습니다. CSS는 텍스트를 사랑하며, 여러 가지 방식으로 처리할 수 있습니다.

문자열

CSS에서 문자열은 단어에 대한 포장지와 같습니다. 단일 따옴표나 이중 따옴표로 감싸일 수 있습니다.

.greeting::before {
content: "Hello, World!";
}

이 예제에서 "Hello, World!"는 문자열입니다. CSS에게 "이렇게 적은 대로 처리해줘!"라고 말하는 것과 같습니다.

식별자

식별자는 CSS에서 물건의 이름과 같습니다. 따옴표가 필요 없으며, 속성, 클래스, ID 등에 사용됩니다.

#main-header {
font-family: Arial, sans-serif;
}

여기서 'Arial'과 'sans-serif'은 식별자입니다. CSS에게 어떤 폰트를 사용할지 알려줍니다.

URL

CSS에서 URL은 자원의 주소와 같습니다. url() 함수와 함께 사용됩니다.

body {
background-image: url('background.jpg');
}

이는 CSS에게 배경 이미지를 어디에서 찾을지 알려줍니다.

숫자 데이터 타입

숫자는 많은 CSS 속성의 중추입니다. 여러 가지 방법으로 사용할 수 있습니다!

정수

정수는 소수점이 없는 전체 수입니다.

.container {
z-index: 5;
}

여기서 5는 정수로, 요소의 스택 순서를 결정합니다.

숫자

CSS의 숫자는 소수점을 포함할 수 있습니다.

.opacity-example {
opacity: 0.5;
}

이는 투명도를 50%로 설정하여 요소를 반투명하게 합니다.

차원

차원은 숫자와 단위가 결합된 것입니다.

.box {
width: 100px;
height: 50%;
margin: 10em;
}

여기서 픽셀(px), 퍼센트(%), em을 사용할 수 있습니다.

양

양은 CSS에서 조리법의 측정과 같습니다. 양을 정의하여 어떤 것을 얼마나 원하는지 명시합니다.

길이

길이는 절대적인(픽셀)이나 상대적인(em, %)일 수 있습니다.

.container {
width: 80vw;
padding: 2rem;
}

'vw'는 뷰포트 너비를 의미하며, 'rem'은 루트 요소의 폰트 크기에 상대적입니다.

각도

각도는 회전 및 그라디언트에 사용됩니다.

.rotated {
transform: rotate(45deg);
}

이는 요소를 45도 회전시킵니다.

시간

시간 값은 애니메이션과 전이에 사용됩니다.

.animated {
transition: all 0.5s ease;
}

이는 모든 속성에 대해 반초 전이를 설정합니다.

타입의 조합

occasionally, CSS likes to mix and match data types.

함수 값

함수는 인수를 받아서 값을 반환합니다.

.gradient {
background: linear-gradient(to right, red, blue);
}

이는 빨간색에서 파란색으로 가는 그라디언트를 생성합니다.

색상

색상은 CSS에서 그림의 도구상자와 같습니다. 여러 가지 방법으로 정의할 수 있습니다.

.colorful {
color: #ff0000;  /* 16진수 */
background-color: rgb(0, 255, 0);  /* RGB */
border-color: hsl(240, 100%, 50%);  /* HSL */
}

각각은 다른 표기법을 사용하여 색상을 정의합니다.

이미지

CSS에서 이미지는 파일에서 가져온 그림 이상의 것일 수 있습니다.

.image-types {
background-image: url('cat.jpg');
list-style-image: linear-gradient(to right, red, blue);
}

여기서 외부 이미지와 그라디언트를 이미지로 사용합니다.

2D 위치

CSS에서 위치는 웹 페이지에서 체스를 하듯이 처리됩니다.

.positioned {
position: absolute;
top: 50px;
left: 100px;
}

이는 요소를 상단에서 50픽셀, 좌측에서 100픽셀 위치에 배치합니다.

계산 데이터 타입

occasionally, we need CSS to do math for us.

.calculated {
width: calc(100% - 20px);
}

이는 부모의 너비에서 20픽셀을 뺀 길이를 계산합니다.

표시

표시는 요소가 어떻게 렌더링되는지 결정합니다.

.flex-container {
display: flex;
}

이는 요소를 fleks 컨테이너로 만들어 fleks 박스 레이아웃을 가능하게 합니다.

기타 데이터 타입

CSS는 몇 가지 더 요령을 가지고 있습니다.

전역 값

전역 값은 모든 속성에 사용할 수 있습니다.

.inherited {
color: inherit;
}

이는 요소가 부모 요소와 같은 색상을 사용하도록 합니다.

이 표는 우리가 다룬 주요 CSS 데이터 타입을 요약합니다:

데이터 타입	예제	설명
문자열	"Hello, World!"	따옴표로 감싸인 텍스트
식별자	Arial	폰트, 속성, 클래스 등에 사용되는 이름
URL	url('image.jpg')	자원의 주소
정수	5	소수점이 없는 전체 수
숫자	0.5	소수점을 포함할 수 있는 수
길이	10px, 2em, 50%	단위와 함께 측정
각도	45deg	회전 값
시간	0.5s	애니메이션 및 전이 시간
색상	#ff0000, rgb(255,0,0)	색상 값
함수	calc(), linear-gradient()	계산이나 효과를 생성하는 함수

기억하세요, CSS는 도구상자이며, 데이터 타입은 도구입니다. 이를 더 많이 익히면, 더 창의적이고 정밀한 디자인을 만들 수 있습니다. 계속 연습하고, 곧 프로처럼 웹 페이지를 스타일링할 수 있을 것입니다!

Credits: Image by storyset