6. CSS 활용

1. 선택자 정리 

 -> CSS에서는 스타일링 해줄 요소를 선택자로 결정 

 

 -태그 이름 

/* 모든 <h1> 태그 */
h1 {
  color: orange;
}

 

-클래스 / 아이디 선택자

/* 'important'라는 클래스를 갖고 있는 모든 태그 */
.important {
  color: orange;
}
 
/* 'favorite'라는 아이디를 갖고 있는 태그 */
#favorite {
  color: blue;
}

 

-자식 선택자

/* 'div1' 클래스를 갖고 있는 요소의 자식 중 모든 <i> 태그 */
.div1 i {
  color: orange;
}
 

 

-직속 자식(direct children)

/* 'div1' 클래스를 갖고 있는 요소의 직속 자식 중 모든 <i> 태그 */
.div1 > i {
  color: orange;
}

 

-복수 선택

/* 'two' 클래스를 가지고 있는 태그 모두와 'four' 클래스를 가지고 있는 태그 모두 선택 */
.two, .four {
  color: orange;
}

 

-여러 조건 

/* 'outside' 클래스를 갖고 있으면서 'one' 클래스도 갖고 있는 태그 */
.outside.one {
  color: blue;
}
 
/* 'inside' 클래스를 갖고 있으면서 'two' 클래스도 갖고 있는 태그 */
.inside.two {
  color: orange;
}
 

 

-Pseudo-class (가상 클래스) -> :(클론) 사용하여 가상 클래스 선택

 

-> n번째 자식

/* .div1의 자식인 <p> 태그 중 3번째 */
.div1 p:nth-child(3) {
  color: blue;
}
 
/* .div1의 자식인 <p> 태그 중 첫 번째 */
.div1 p:first-child {
  color: red;
}
 
/* .div1의 자식인 <p> 태그 중 마지막 */
.div1 p:last-child {
  color: green;
}
 
/* .div1의 자식 중 마지막 자식이 아닌 <p> 태그 */
.div1 p:not(:last-child) {
  font-size: 150%;
}
 
/* .div1의 자식 중 첫 번째 자식이 아닌 <p> 태그 */
.div1 p:not(:first-child) {
  text-decoration: line-through;
}
 

 

-> 마우스 오버(hover)

h1 {
  color: orange;
}
 
/* 마우스가 <h1> 태그에 올라갔을 때 */
h1:hover {
  color: green;
}

 

2. CSS 상속(부모 요소의 속성들을 자식들한테 넘겨줌 -> div에 속성을 주면 밑에있는 자식들 까지 상속되어 모두 바뀜)

 

-상속되는 속성들 color/ font-family/ font-size/ font-weight/ line-height/ list-style/ text-align/ visibility

-항상 상속되는 것은 아님 (ex) <a>태그에는 color속성 상속 X => 억지로 받아오려면 inherit 값 사용

 

.div2 a {
  color: inherit;
}
 

 

3. CSS 우선 순위 

-순서 : 똑같은 선택자가 나중에 또 나오면, 이전에 나온 스타일을 덮어 쓰게 됨

 

-명시도(specificity)에 따라 우선순위 결정

a.인라인 스타일 (가장 우선순위 높음)

b. 선택자에 id 多 우선 순위 높음

c. 선택자에 class , attribute , pseudo-class 多 우선 순위 높음

d. 그냥 요소(가상요소) 많은 순 

 

 

4. CSS 다양한 단위

-px : 절대적인 값 / 다른 요소의 값에 영향 x

 

-rem : 상대적인 값 / html 태그의 font-size 영향 받음 / 2rem : html 태그의 font-size X2

 

-em : 상대적인 값/ 자기 자신의 font-size 기준/ 자기의 size를 따로 정해주지 않았다면 상위 요소에서 상속받은 값 기준

 

-%(퍼센트) : 상대적인 값 / 어떤 항목에 쓰이냐에 따라 다른 기준 적용 / ex) font-size에서 %사용 시 곱해주는 방식 계산

 

.container {
  font-size: 20px;
  background-color: lime;
}
 
.text {
  font-size: 180%; /* 상위 요소인 container의 font-size * 1.8 = 36px */
  background-color: skyblue;
  margin: 0;
}
 

 

     / margin, padding 단위로 사용 -> 상위 요소 width 기준 계산 , margin-top , padding-bottom 등 상하 속성 조절 시 상위요소 height가 아닌 width 기준으로 계산

.container {
  width: 200px;
  background-color: lime;
}
 
.text {
  padding-left: 30%; /* 상위 요소의 width * 0.3 = 60px */
}
 

 

-참고 : https://webdesign.tutsplus.com/ko/tutorials/comprehensive-guide-when-to-use-em-vs-rem--cms-23984