[FrontEnd] Ch.6 CSS 필수 속성 알아보기-1

CSS의 특징 살펴보기

기본 스타일 시트

h1, h2 등등은 따로 스타일을 지정하지 않아도 폰트 크기 등이 정해져 있습니다.

이처럼 웹 브라우저 내에 내장된 기본 스타일 시트가 존재합니다.

 

적용 우선순위와 개별성

 

우리가 알던 h1 태그와 크기, 굵기 등이 모두 다릅니다.

이처럼 사용자가 별도로 스타일을 정의하면 기본 스타일 시트보다 사용자의 정의가 우선시 된다는 것을 알 수 있습니다.

 

그렇다면 같은 태그에 여러 스타일을 정의하면 어떻게 될까요?

마지막에 작성된 스타일이 적용된 것을 알 수 있습니다.

이를 CSS에서는 단계적 적용이라고 부릅니다.

 

각 선택자에 점수가 존재하고, 높은 점수의 선택자가 우선시되며, 같은 점수의 선택자라면 나중에 나온 선택자가 우선시 되는 방식입니다.

이때 단계적 적용의 순서를 정하기 위한 점수를 개별성 규칙의 점수라고 부릅니다.

선택자	예	점수
전체 선택자	*	0
태그 선택자	div, p, h1	1
가상 요소 선택자	::before, ::after	1
클래스 선택자	.box, .title	10
가상 클래스 선택자	:hover, :visited, :link	10
아이디 선택자	#title, #main	100
인라인 스타일	style="color=red"	1000

위 표를 바탕으로 선택자가 등장한 횟수만큼 점수를 더합니다.

 

만약 css 속성값의 뒤에 !important를 작성하면 해당 선택자에 점수를 10000점 부여합니다.

 

실무에선 더 세부적인 설정을 위해 부모 선택자부터 자식 선택자까지 순서대로 기입하기도 합니다.

 

상속

부모 요소의 속성을 그대로 가져옵니다.

자식 혹은 하위 태그에 별도의 속성이 없다면 부모의 속성을 그대로 물려받습니다.

모든 속성이 상속되지 않습니다.

 

단위

CSS에는 사용 가능한 다양한 단위가 있습니다.

그 중 절대 단위와 상대단위가 있는데, 절대 단위는 어떤 환경에도 동일한 크기로 보이는 단위이며, 상대 단위는 부모 요소와 웹 브라우더의 창 크기에 영향을 받아 상대적으로 결정되는 단위를 말합니다.

 

절대 단위는 px(pixel) 하나 입니다. 다른 모든 상대단위는 결국 절대 단위인 px로 변환되어 보여집니다.

단위	설명
%	해당 속성의 상위 요소 속성값에 상대적인 크기를 가집니다.
em	부모 요소의 텍스트 크기에 상대적인 크기를 가집니다.
rem	html 태그의 텍스트 크기(보편적으로 16px)에 상대적인 크기를 가집니다.
vw	뷰포트 너비를 기준으로 상대적인 크기를 가집니다.
vh	뷰포트 높이를 기준으로 상대적인 크기를 가집니다.

 

색상 표기법

키워드 표기법

• color : 키워드;

색상의 영문명을 속성값으로 사용하는 방법입니다.

하지만 실무에선 가장 사용할 일이 적은 방법입니다.

VSCode에 약 150가지의 키워드 색상이 지원되고 있습니다.

 

RGB 색상 표기법

• color : rgb(red, green, blue)
• color : rgb(red, green, blue, alpha)

실무에서 가장 보편적으로 사용하는 색상 표기법입니다.

Red, Green, Blue 색의 3원색의 줄임말로,

rgb(red, green, blue)

rgba(red, green, blue, alpha)

로 사용합니다.

각 항목에 0~255까지 10진수로 적습니다.

 

HEX 표기법

• color: #000000;
• color: #00000000;

RGB 색상 표기법에서 수만 따온 표기법입니다.

#FFFFFF나 #00FF00FF처럼 16진수를 사용한 표기법입니다

 

텍스트 속성으로 텍스트 꾸미기

웹 페이지에서 가장 많이 볼 수 있는 구성요소인 텍스트에 관한 속성들을 알아봅시다.

 

font-family 속성

• font-family : <글꼴1>, <글꼴2>, ... , <글꼴 유형>;

글꼴을 지정하는 속성입니다.

영문 글꼴명을 적거나 큰 따옴표("")안에 한글로 글꼴명을 적으면 됩니다.

하나만 적을 수도 있고, ,를 사용해 두 개 이상의 글꼴을 사용할 수도 있습니다.

마지막에 글꼴 유형을 명시해 글꼴을 전부 불러오지 못해도 텍스트가 유사한 형태로 보이게 할 수 있습니다.

글꼴 유형	설명
serif	삐침이 있는 명조 계열의 글꼴
sans-serif	삐침이 없고 굵기가 일정한 고딕 계열의 글꼴
monospace	텍스트 폭과 간격이 일정한 글꼴
fantasy	화려한 글꼴
cursive	손으로 쓴 것 같은 필기체 계열의 글꼴

 

font-size 속성

• font-size : <사이즈>;

텍스트 크기 변경을 위해 사용되는 속성입니다.

 

font-weight 속성

• font-weight: <숫자 표시법>|<키워드 표기법>;

숫자로 100~900사이의 100단위 숫자를 기입하거나 키워드로 normal, bold, bolder 중 선택해서 적으면 됩니다.

 

font-style 속성

• font-style: <스타일>;

글꼴의 스타일 지정을 위해 사용합니다.

normal, italic, oblique 로 기본, 이탤릭, 기울임 을 뜻합니다.

 

font-variant 속성

• font-variant : <속성 값>;

영문 텍스트를 크기가 작은 대문자로 변경할 수 있습니다.

normal은 보통 값이고, small-caps 로 변경합니다.

 

color 속성

• color: <속성 값>;

텍스트의 색상을 지정합니다.

 

text-align 속성

• text-align: <속성 값>;

속성값	설명
left	텍스트를 왼쪽 정렬합니다.
center	텍스트를 중앙 정렬합니다.
right	텍스트를 오른쪽 정렬합니다.
justify	텍스트를 양쪽 정렬합니다.

 

text-decoration 속성

• text-decoration: <속성값>;

텍스트를 꾸미기 위해 사용하는 속성입니다.

속성값	설명
none	텍스트 장식을 모두 지웁니다.
line-through	텍스트 중간을 관통하는 선을 긋습니다.
overline	텍스트 위에 선을 긋습니다.
underline	텍스트 아래에 선을 긋습니다.

 

letter-spacing 속성

• letter-spacing:normal|<크기>;

자간을 조정하는 속성입니다.

 

line-height 속성

• line-height: normal|<속성값>;

줄 간의 간격을 정하는 속성입니다.

속성값	설명
normal	웹 브라우저에서 정한 기본값을 사용합니다.
숫자	현재 font-size 값에 입력한 숫자를 곱한 값을 적용합니다.
퍼센트	현재 font-size 값에 입력한 비율을 곱한 값을 적용합니다.
크기	입력한 크기를 적용합니다.