개별성 규칙

여러개의 스타일이 충돌되어 지정되있으면, 무슨 스타일을 따르게 될까?

정답은 더 구체적으로 스타일을 지정한 것을 따른다. 즉 우선순위가 있고 다음의 표에서 점수가 높을수록 우선순위가 높다. 우선순위가 겹치면 나중에 작성한 것을 따른다.

외울 필요는 없어 보이고 상식적으로 생각하면 그런 것 같다.

다음은 예시이다.

<h1 style="color: red;" id="a" class="b">t1</h1>
<h2 id="aa" class="bb">t2</h2>
<h3 class="bbb">t3</h3>

/* h1에 적용되는 스타일의 우선순위*/ 
/* inline 선택자가 1등 ==> 빨간색 */
#a{color: orange;}
.b{color: yellow;}
h1{color: green;}

/* h2에 적용되는 스타일의 우선순위*/
/* id가 1등 ==> 파랑색 */
#aa{color: blue;}
.bb{color: violet;}
h2{color: pink;}

/* h3에 적용되는 스타일의 우선순위*/
/* class가 1등 ==> 하늘색 */
.bbb{color: lightblue; }
h3{color: lightgreen;}

CSS 상속

CSS에서의 상속이란, 하위 요소에서 어떤 CSS 속성을 명시하지 않은 경우, 기본적으로 상위 요소의 스타일이 하위 요소에도 적용되는 것이다. 속성마다 상속이 되고 안되고가 있는 것 같다. 따로 적진 않겠다.

단위

1. 절대 단위

잘 아는 px(픽셀)이다.

2. 상대 단위

.parent{
	font-size:16px;
}
.child{
	font-size:80%; /* 16px * 0.8 = 12.8*/
}
.child-to-child{
	font-size:80%; /* 16px * 0.8 * 0.8 = 10.24px */
}

.parent{
	font-size : 16px;
}
.child{
	font-size:2em; /* 16px * 2em = 32px */
}
.child-to-child{
	font-size:2em; /* 32px * 2em = 64px */
}

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

.parent{
	font-size:1vw; /* 900px * 1/100 = 9px */
}
.child{
	font-size:2vw; /* 900px * 2/100 = 18px */
}

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

색상 표기

1. rgb(red, green, blue)

rgb값을 넣어주면 된다.

2. rgba(red, green, blue, alpha)

rgb값과 alpha를 넣으면 되는데 alpha는 opacity를 조절한다. alpha는 0~1 사이를 넣으면 된다.

3. 16진수

RGB에 해당하는 값을 각각 16진수로 변환해 나타낸다. ex) #0000ff

출처
https://www.youtube.com/watch?v=qL16GKT2vIo&list=PL-eeIUD86IjTH1qT8qdHXDm-FfOnm7a_U&index=14