CSS 기본 특징

 

 

 

---

 

CSS에는 어떤 특징들이 있을까?

 

 

---

 

 

 

 

기본 스타일 시트

 

--

기본 스타일 시트는

웹 브라우저에 기본으로 내장되어 웹 브라우저에 표시되는 요소들의 "글꼴", "크기", "색상", "굵기", "문단 설정" 등의

스타일이 미리 정의된 파일 또는 문서 양식을 의미한다.

 

그래서 기본 스타일 시트를 통해 h1, h2 태그만 사용해도 웹 브라우저에는 텍스트가 다양한 크기와 굵기로 표시된다.

--

 

 

 

 

적용 우선순위 & 개별성

 

--

적용하는 것들마다 각각의 우선순위가 정해져 있다.

 

예시1)

기본 스타일 시트를 내장하고 있는 "h1 태그"를 사용자가 별도의 스타일 속성으로 적용하게 되면

h1{
   font-size:16px;
   font-weight:normal;
}

기본 스타일 시트보다 우선순위가 높은 사용자 정의 스타일 속성으로 적용되어

h1 태그는 위 코드로 우선 적용된다.

 

예시2)

같은 요소에 여러 스타일을 적용하게 되면

p{color:red;}
p{color:blue;}
p{color:orange;}

처음부터 순차적으로 적용된다.

1. p태그에 색상을 빨강으로 적용
2. p태그에 색상을 파랑으로 적용
3. p태그에 색상을 주황으로 적용

마지막인 주황이 최종으로 적용되어 결과가 나오게 된다.

 

 

CSS 개별성 규칙

여러 개의 선택자가 동일한 요소에 적용될 때,

어떤 스타일을 우선적으로 적용될지 결정하게 되는 것으로

개벼성 규칙을 점수로 계산되며, 점수가 높을수록 우선 적용된다.

 

 

예시 코드

/* 태그 + 클래스 */
p.text {
  color: pink;
}

/* 클래스 + 가상 클래스 */
.text:hover {
  color: purple;
}

/* ID + 클래스 */
#highlight.text {
  color: brown;
}

<p class="text">핑크색</p>
<p class="text" id="highlight">갈색</p>
<p class="text" id="highlight" style="color: black;">검정색</p>

 

점수 계산

• p.text   :   0, 0, 1, 1
• .text:hover   :   0, 0, 2, 0
• #highlitght.text   :   0, 1, 1, 0
• 인라인 스타일  :  1, 0, 0, 0

우선순위 적용

1. 인라인 스타일  =>  검은색
2. #highlight.text  =>  갈색
3. p.text  =>  핑크색

같은 점수라면 마지막에 작성된 스타일을 적용

참고) !important가 붙으면 점수와 상관없이 가장 우선 적용됨

--

 

 

 

 

상속

 

--

상속은

부모 요소에 적용된 스타일을 자식 요소가 그대로 물려받아 적용되는 것을 의미한다.

 

예시 코드

<style>
   div{
      color:red;
   }
</style>

<!-- 코드 생략 -->

<div>
   <p>하이</p>
</div>

해당 스타일은 "p 태그"에 적용한 것이 아니고 "div 태그"에 적용한 것이지만
"div 태그"안에 있는 "p 태그"까지 적용된 결과다.

다만, 모든 속성이 전부 상속되는 것은 아니다. (굳이 구분할 필요는 없다.)

--

 

 

 

 

단위

 

--

CSS속성에는 다양한 단위의 값을 사용할 수 있다.

• 절대 단위  :  어떠한 환경이라도 동일한 크기
• 상대 단위  :  부모 요소 or 웹 브라우저의 창 크기에 따라 상대적으로 결정되는 크기

 

절대 단위

• px   :   모니터의 화면을 구성하는 사각형 픽셀 1개의 크기

 

상대 단위

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

 

예시

/* % 예시 코드 */
.parent{
   font-size:16px;
}
.child{
   font-size:80%;      /* 16px(부모 크기) * 0.8 = 12.8px */
}
.child-to-child{
   font-size:80%;      /* 12.8px(부모 크기) * 0.8 = 10.24px */
}


/* em 예시 코드 */
.parent{
   font-size:16px;
}
.child{
   font-size:2em;      /* 16px(부모 크기) * 2em = 32px */
}
.child-to-child{
   font-size:2em;      /* 12.8px(부모 크기) * 2em = 64px */
}


/* rem 예시 코드 */
html{
   font-size:1rem;
}
.parent{
   font-size:1rem;      /* 16px * 1rem = 16px */
}
.child{
   font-size:2rem;      /* 16px * 2rem = 32px */
}


/* vw 예시 코드 */
/* 기준 뷰포트 너비 900px */
.parent{
   font-size:1vw;      /* 900px * 1/100 = 9px */
}
.child{
   font-size:2vw;      /* 900px * 2/100 = 18px */
}


/* vh 예시 코드 */
/* 기준 뷰포트 높이 400px */
.parent{
   font-size:1vh;      /* 400px * 1/100 = 4px */
}
.child{
   font-size:2vh;      /* 400px * 2/100 = 8px */
}

--

 

 

 

 

색상 표기

 

--

색상 또한 표기법이 여러 개 존재한다.

 

키워드 표기법

color:red;

 

RGB 표기법

rgb(red, green, blue)
rgba(red, green, blue, alpha)

color:rgb(255, 0, 0);

color:rgba(0, 255, 0, .5);

alpha는
0 ~ 1 사이의 소수점으로 표기되며 투명도를 담당한다. (정수 0은 생략 가능)

 

HEX 표기법

#RRGGBB

color:#ff0000;           /* #f00 */
color:#335522;           /* #352  반복이 있으면 으로 줄여서 작성 가능 */

--