csmoon1010의 SW 블로그

CSS _ 상속과 우선순위, CSS Selector, CSS 기본 Style (부스트코스) 본문

웹/프론트엔드

CSS _ 상속과 우선순위, CSS Selector, CSS 기본 Style (부스트코스)

csmoon1010 2021. 1. 11. 20:02

1. 상속과 우선순위

(1) 상속

상위의 스타일을 하위에서도 쓰도록 하는 것 

= 상위에 적용하면 자식들도 함께 적용됨

→ 재사용 측면에서 유용하게 사용

 

- 디버깅에서 상속 확인 : inherited from~으로 나타남

-배치와 관련된 속성(box-model / border, padding...)은 제외

 

 

(2) 우선순위(CSS Specificity)

최종적으로 '경쟁'에 의해서 적절한 스타일이 반영 = 캐스캐이딩

 

① 선언방식 : inline > internal = external

② 선택자 : id > class > element

 

<예시 1> id, class, element

<div id = "a" class = "b" >
    text...
</div>
#a {
    color : red;
}
.b {
    color : blue;
}
div{
    color : green;
}

⇨ id에 해당하는 red가 적용

 

<예시2> 동일한 선택자. 구체성이 다름.

body > span{
    color : red;
}
span{
    color : blue;
}

⇨ 구체적인 선택자가 우선 : red가 선택

 

<예시3> 모든 것이 동일

span{
    color : red;
}
span{
    color : blue;
}

⇨ 나중 선언이 우선 : blue가 선택

 

 

 

 

 

 

 

 

2. CSS Selector

HTML의 요소를 tag, id, class html 태그 속성들을 통해 쉽게 찾아주는 방법 (태그들의 상하관계)

 

(1) 기본선택자

- tag : tag 이름 그대로 사용 → 모든 tag에 적용

- class : .class로 사용 → 그룹핑하여 같은 클래스를 가진 tag에 적용

- id : #id로 사용 → css에서는 id가진 것들 모두 적용 but 원래 용도는 특정 하나의 tag에 적용

(+α > 자바스크립트에서는 여러개에 쓰여도 하나에만 적용 - 쿼리selector)

 

 

<예시1> id, class 선택자와 tag를 함께 쓰는 경우도 있음

div.myclassname{
    color : red;
}
span#myspan{
    color : blue;
}

 

<예시2> 콤마를 기준으로 여러개에 대해 지정 가능 

h1, span, div#id {
    color : red;
}

<예시3> 공백을 기준으로 하위 요소 선택 (바로 자식이 아니여도 해당)

#id span{
    color : red;
}

**바로 자식인 경우는 > 이용

 

 

(2) 자식 선택

 

<n번째 자식요소>

- E:nth-child(n) : 부모의 n번째 자식이면서 E인 요소 (E는 생략 가능)

- E:nth-of-type(n) : 부모의 E인 요소 중 n번째 요소 

- :first-child : 부모 안의 모든 요소 중 첫번째 요소

- :last-child : 부모 안의 모든 요소 중 마지막 요소

- E:first-of-type : 부모 내 E인 요소 중 첫번째 요소

- E:last-of-type : 부모 내 E인 요소 중 마지막 요소

 

 

 

 

 

 

 

 

 

3. CSS 기본 Style 변경하기

: color, background-color, font-family, font-size 등등

 

(1) font-size

- 1em : 상위 element의 font-size를 기준으로 결정 (default = 16px)

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    body > div {
      font-size:16px;
      background-color: #ff0;
      font-family:"Gulim";
    }
    
    .myspan {
      color : #f00;
      font-size:2em;
    }
  </style>
</head>
<body>
  <div>
    <span class="myspan">my text is upper!</span>
  </div>
</body>
</html>

⇨ body > div의 font-size가  16px이였으므로, myspan class의 2em = 32px

 

 

(2) font-family

- 웹폰트 : 브라우저에서 기본 제공하지 않는 폰트를 웹으로부터 다운로드 받아서 사용할 수 있는 방법

(장점 : 다양성 / 단점 : 다운로드에 시간 소요)

 

 

 

 

 

[참고사항]

**specificity : developer.mozilla.org/en-US/docs/Web/CSS/Specificity

**CSS Selector cheatseat : gist.github.com/magicznyleszek/809a69dd05e1d5f12d01

 

www.boostcourse.org/web316/joinLectures/12943

 

웹 프로그래밍(풀스택)

부스트코스 무료 강의

www.boostcourse.org

 

'웹 > 프론트엔드' 카테고리의 다른 글

HTML_부스트코스  (0) 2020.12.29
JavaScript Ajax _ 생활코딩  (0) 2020.11.11
JavaScript (3) _ 생활코딩  (0) 2020.04.25
JavaScript (2) _ 생활코딩  (0) 2020.04.24
JavaScript (1) _ 생활코딩  (0) 2020.04.21
'웹/프론트엔드' Related Articles more
Comments