[CSS] 필수 속성 다루기(색상, 텍스트, 단위, 적용순서) **

CSS 언어의 특징 (Cascading Style Sheets : 단계적으로 적용되는 스타일의 언어) 

1) 기본 스타일 시트 

(참고로) HTML 태그는 태그 자체에는 꾸밈 담당 역할이나 기능은 X 

웹 브라우저 자체에 기본 스타일 시트가 내장되어 있음 

 

2) 적용 우선순위와 개별성 

기본 스타일보다 사용자 속성이 더 우선적. 

같은 태그 요소의 선택자가 여러개일때 마지막에 작성한 것이 우선 적용, 하나만 적용 

 

개별성은 어떤 스타일이 마지막에 영향을 주는지를 말하는 것. 

개별성 규칙의 점수가 큰 순서대로 적용이 됨. (우선순위) 

 

선택자	예시, 종류	점수
전체 선택자	*	0
태그 선택자	div, p, hn들	1
가상 요소 선택자	:: before, :: after	1
클래스 선택자	.box , .title	10
가상 클래스 선택자	:hover, :visited, :link	10
아이디 선택자	#title, #main	100
인라인 스타일	style="color:red"	1000
무조건 적용	!important	10000

선택자를 분류하고 개수를 세서, 점수를 곱해 합하면 점수 파악. 

 

++ CSS는 같은 태그에 중복해서 스타일이 지정되더라도 개별성 규칙 점수에 의해 적용될 스타일이 적용됨! ++ 

     실무에선 더 길고 자세하게 쓸 수록 우선순위 높다고 판단 

 

 

상속 

상속 : 부모 요소에 적용된 스타일을 자식 요소가 그대로 물려받아 적용되는 현상 

 

자식태그는 부모태그의 스타일을 그대로 물려받는다.

하지만, 모든 속성이 전부 상속되지는 않음. (구체적으로 뭐가 되고 안되는지 떠나, 상속이란 특성은 기억하자) 

https://www.w3.org/TR/CSS21/propidx

Full property table

inherited?열의 속성이 yes인 속성만 상속됨. 

 

단위

* 절대 단위 : 어떤 환경이라도 동일한 크기로 보이는 단위

 

px 하나만 있다. 

px : 모니터의 화면을 구성하는 사각형 1개의 크기. 다른 단위로 값을 지정해도 결국은 px 단위로 환산되어 계산됨

 

* 상대 단위 : 부모요소 / 웹 브라우저의 창 크기에 따라 상대적으로 결정되는 단위 

단위	설명
%	해당 속성의 상위 요소 속성값에 상대적인 크기를 가짐
em	부모 요소의 텍스트 크기에 상대적인 크기를 가짐
rem	html 태그의 텍스트 크기에 상대적인 크기를 가짐
vw	뷰포트의 너비를 기준으로 상대적인 크기를 가짐
vh	뷰포트의 높이를 기준으로 상대적인 크기를 가짐

% 예시

font-size:80%이면 이것의 부모의 크기의 80%크기로 설정 

 

em 

오로지 텍스트 크기를 기준으로 삼는다. 

ex) 2em이면 부모요소 속성값의 2배 

 

* 뷰포트 : 코드가 보이는 대상 ( = 웹, 모바일에서 웹 브라우저 창의 너비가 뷰포트 너비) 

1vw : 뷰포트 너비의 1/100 크기를 의미. 

1vh : 뷰포트 높이를 기준으로 상대적 크기, 뷰포트 높이의 1/100 크기 의미 

 

 

색상 표기법

키워드 표기법 

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

실무에선 의외로 사용이 적다.

color : ~~ ; 표기법으로

 

RGB 표기법 

rgb (red, green, blue)

rgba(red, green, blue, alpha-투명도) 

각각의 값을 0~255의 256개의 숫자로 표기.

가장 낮은 색은 0, 높은 색은 255, 알파값은 0~1 사이의 소수점으로 표기. 

 

ex)

color : rgb(255, 0, 20)

color : rgba(0, 255, 0, .5)  // 소수점의 0은 생략 가능 

 

HEX 표기법 

red, green, blue에 해당하는 값을 각각 16진수로 변환해 00~ff로 나타내는 표기법 (16진수 표기법) 

실무에서 가장 많이 쓰임! 

 

표기법) color : #RRGGBB (16진수 표기법으로 들어감) 

00이 가장 낮고, ff가 가장 높음. 

#ff0000은 빨간색, #00ff00은 초록색, #0000ff는 파란색 

 

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

font-family : 속성값으로 글꼴명 작성, 쉼표로 구분 / 1개 이상의 글꼴을 나열해 지정

!! 한글로 된 글꼴이나 공백이 있는 글꼴명은 큰 따옴표로 감싸야 함!!

 

font-family 속성은 반드시 글꼴유형(generic-family)을 작성하도록 권장. 

글꼴 유형 ? - 글꼴의 형태. 지정한 글꼴을 전부 불러오지 못하더라도 텍스트가 유사한 형태로 보여져서 사용자가 웹 사이트에서 느끼는 경험을 최대한 일정하게 유지가능 

 

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

 

 

font-size : 단위를 포함한 크기를 넣음. 텍스트 크기 조절 

일반적인 텍스트 크기는 16px임. 

ex) font-size : 14px;

 

 

font-weight : 텍스트의 굵기를 지정하는데 사용

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

숫자 표기법 : 100 ~ 900 사이로, 가장 얇은 굵기와 최대굵기

키워드 표기법 : lighter(부모요소와 상대적), normal(400), bold(700), bolder(부모요소와 상대적)

 

font-style : 글꼴의 스타일 지정 

속성값	설명
normal	기본형태
italic	이탤릭체 (글꼴 지원 이탤릭체)
oblique	기울임꼴 (단순 글자 기울임)

 

font-variant : 영문 텍스트를 크기가 작은 대문자로 변경시 사용 

 

color : 텍스트의 색상 

 

text-align : 텍스트 정렬시 사용 

left, right, center, justify(양쪽) 

justify 실습으로 확인 

 

text-decoration : 텍스트에 선을 그을 때 

none(제거 시 사용가능) , line-through(텍스트 중간 관통) , overline(텍스트 위에 선) , underline(텍스트 아래에 선) 

 

letter-spacing : 글자 사이의 간격 조절할 때 사용 

 

line-hight : 텍스트 한 줄의 높이를 지정시 사용