[3주차] 3. CSS의 실습 환경과 상속 & 우선순위 & 단위

 

상속(inheritance)

- 조상요소로부터 하위요소로 css 명령들이 상속될 수도 있다.

- 상속은 모든 css 속성에 적용되는 것은 아니다.

- css의 특정한 속성들은 부모요소, 조상요소에 지정하는 것만으로도 그 안에 있는 하위요소에도 영향을 끼칠 수 있다.

- 부모요소 값이 무엇이던간에 자식요소는 부모의 값을 그대로 물려받아서 사용해라

 

1. 상속이 되는 속성(대부분 텍스트를 다룬다.)

- font 글자( font-size 글자 크기, font-weight 글자 두께, font-style 글자 기울기, font-height 줄 높이, font-family 폰트 설정)

- color 글자 색상

- text-align 글자 정렬

- text-indent 글자 들여쓰기

- text-decoration 글자 밑줄

- letter-spacing

- opacity

 

2. 강제 상속

- 강제적으로 필요에 의해서 부모요소, 조상요소 갖고 있는 원래는 상속되지 않는 특정한 속성을 자식요소, 후손요소에게 강제적으로 상속할 수 있는 개념

- 자식요소에 css로 부모요소부터 받을 속성: inherit; 이라고 적는다.

-  inherit을 통해서 부모요소의 속성이 무엇이든 간에 상속 받을 수 있게 한다.

---

우선순위

- 브라우저가 정하는 규칙

- 전체>태그>클래스>아이디 순서를 기억해야 하는 이유

- 점수 계산을 잘 할 수 있어야 한다.

 

1. 우선순위 결정 방법

: 같은 요소가 여러 선언의 대상이 될 경우 어떤 선언의 css 속성(property)을 우선적으로(하나만 적용해야하니까) 적용할지 결정하는 방법

- 명시도: 여러가지 선언 부분에 특정한 점수(명시도 점수) 부여되는데 그걸 계산해서 점수가 가장 높은 선언이 적용

- 선언 순서: 점수가 같을 경우 결과적으로 가장 나중에 해석한 코드가 해석됨

- 중요도: 상속을 통해서 적용되는 속성은 간접적으로 받은 것이기 때문에 기본적으로 우선 순위가 떨어진다.  

-> !important 키워드가 특정 부분에 붙어있을 경우 무조건 그것만 적용된다.

 

2. 가장 중요(!important)

- 중요도라는 개념으로 보며 모든 선언을 무시하고 가장 우선으로 한다.

- 무한대의 점수를 가지고 있다.

 

3. 인라인 선언방식(style attribute)

- 인라인 선언방식은 html의 style 속성을 이용해서 선택자 없이 바로 css를 집어넣는 방식

- 점수는 1000점

- 점수가 쓸데없이 높아서 유지보수하는데 제약이 많을 수 있다.

 

4. 아이디(ID selector)

- 점수 100점(고유해서 높은 편)

- html에서 고유한 요소 찾을 때 사용

 

5. 클래스(class selector)

- 아이디 선택자보다는 점수가 낮다

- 점수는 10점

- 가상 클래스 선택자도 포함된다.(부정 선택자 not은 점수로 계산하지 않는다.)

 

6. 태그(type selector)

- 점수는 1점

- 가상 요소는 태그와 동일하므로 가상 요소 선택자도 포함

 

7. 전체(universal selector)

- *

- 점수는 0점

 

8. 상속(css inheritance)

- 점수를 아예 계산하지 않는다

- 점수 0점보다 낮은 개념이라 생각하면 됨

---

실습환경

CSS reset

- 기본적으로 브라우저가 갖고 있는 css style 초기화

- 다양한 브라우저에서 나오는 모양들이 다를 수 있어서 만들고자 하는 모양을 각 브라우저에서 동일하게 나타내야 하기 때문에 초기화를 해야 한다.

1. body 태그가 가지고 있는 여백을 초기화

body {

  padding: 0;

  margin: 0;

}

2. reset.css 라이브러리

- https://www.jsdelivr.com/package/npm/reset-css

- rest-min.css(reset.css)을 copy html 해서 main.css를 가져오는 link 태그 보다 앞에 작성해야 한다.(main.css보다 먼저 호출되어야 하기 때문)

- 기존 브라우저가 갖고 있던 모든 기본 style을 초기화 가능

 

Codepen

- code pen 들어가서 pen 들어가기

- change view를 통해 원하는 view로 수정 가능

- html영역은 body로 감싸져 있다고 가정하고 코딩하면 됨

- js와 css도 연결되어 있다고 생각하면 됨

- 매번 개발환경을 세팅할 필요가 없다.

- 콘솔도 하단 콘솔 버튼 통해 확인 가능

- 보고 싶은 탭(html, css, js)부분을 더블클릭하면 영역이 넓어짐

- css 탭의 톱니바퀴 버튼 클릭 후 css base 부분의 reset 부분 선택 후 save&close 하면 reset.css가 적용이 됨

- 왼쪽 상단 연필 클릭시 타이틀 변경 가능

 

Emmet 문법

- html과 css를 좀 더 편리하게 작성할 수 있는 방법

- 복잡한 문법을 손쉽게 작성할 때 사용

- 원래는 emmet plugin을 설치해야 하지만 많은 에디터들은 emmet 문법을 이미 내장하고 있어 설치하지 않아도 됨

- 최소한의 코딩을 사용해서 코드를 작성할 수 있다.

 

1. html에서의 사용

- html에서 .클래스별칭 + tab키 하면 <div class=”클래스별칭”></div> 만들어짐

- 작성하고자하는 태그.클래스별칭 + tab키 <태그 class=”클래스별칭”></태그>

- 태그 이름 + tab 키로 태그를 일일이 작성하지 않고 쉽게 만들 수 있다.

- > 작성법 : 부모요소>자식요소

- 예제

.container>ul.list>li.list-item*10>a{list$}

이렇게 작성하고 tab키 누르면

 <div class="container"> contatiner 클래스를 가지고 있는 div 태그

    <ul class="list"> list 클래스를 가지고 있는 ul 태그

       list-item클래스의 li 태그 10개가 있고 그 안에 a태그가 들어있다.

       a 태그는 list1부터 list10까지의 숫자를 보유하고 있다.

      <li class="list-item"><a href="">list1</a></li>

      <li class="list-item"><a href="">list2</a></li>

      <li class="list-item"><a href="">list3</a></li>

      <li class="list-item"><a href="">list4</a></li>

      <li class="list-item"><a href="">list5</a></li>

      <li class="list-item"><a href="">list6</a></li>

      <li class="list-item"><a href="">list7</a></li>

      <li class="list-item"><a href="">list8</a></li>

      <li class="list-item"><a href="">list9</a></li>

      <li class="list-item"><a href="">list10</a></li>

    </ul>

  </div>

 

2. css에서의 사용

- w:100 + tab키 하면 width:100px; , h:100% + tab키 하면 height:100%;

---

CSS 단위

1. px

-해상도에 따른 상대 단위라 부를 수 있다.(해상도에 따라 변화될 수 있다.)

- 화면에 정확한 픽셀 단위로 절대적으로 고정하는 개념이라 이해하면 된다.

 

2. %

- 상대적으로 부모요소 사이즈에 영향을 받음

- 부모요소 사이즈를 기준으로 %를 작성

 

3. em

- 자기 자신의 폰트 사이즈(크기)에 영향을 받음

- 현재 자기 자신이 가지고 있는 폰트사이즈에 영향을 받는다.

 

4. rem(route em)

- 중간단계를 건너뛰고 최종 단계인 가장 조상요소인 html 태그에 지정된 폰트 사이즈에만 영향을 받는다.

- 장점: html 태그에 폰트 사이즈를 지정해놓고 body태그에 다른 폰트사이즈로 지정해놓아도 html에 지정해놓은 폰트사이즈에 영향이 가지 않으면서 rem 단위를 온전하게 사용할 수 있다

 

5. vw(viewport의 가로너비 비율), vh(viewport의 세로너비 비율)

- viewport: 브라우저에 보이는 화면 전체

- 백분율로 사용 ex)50vw는 viewport의 절반

- viewport 크기에 따라 사이즈 변화

 

6. vmin(viewport의 최소너비), vmax(viewport의 최대 너비)

- 그때그때마다 기준으로 하는 사이즈가 다름

- vmax : 현재 더 긴 사이즈의 너비를 백분율로 계산 ex) 50vmax는 더 긴 viewport 너비의절반

- vmin : 현재 더 짧은 사이즈의 너비를 백분율로 계산

---

CSS 속성

- 기본 값이 존재

- 해당하는 기본 값을 안다면 명시할 필요가 없어진다.

1. width

- 요소의 가로 너비 설정

- 기본 값 auto: 블록요소의 경우 브라우저가 너비를 계산시 가로사이즈는 100%로 인식 그러나 s인라인요소의 경우 가로 사이즈가 0에서 출발

- px, em, cm 등 단위 지정 가능

 

2. height

- 요소의 세로 너비 설정

- 기본값 auto: 브라우저가 너비를 계산 세로사이즈는 0에서 출발

- px, em, cm 등 단위 지정 가능

 

3. max-width

- 요소가 가질 수 있는 최대 가로 너비

- 속성 값으로 단위와 auto 사용 가능

- 기본값은 none(최대로 늘어날 수 있다.)

 

4. min-width

- 요소는 지정된 최소 가로 너비보다 더 작아질 수 없다.

- 얼마만큼 작아질 수 있느냐

- 속성 값으로 단위와 auto 사용 가능

- 가장 작아질 수 있는 최소의 너비를 가질 수 있기 때문에 기본 값으로 0으로 지정

 

5. max-height

- 요소는 지정된 최대 세로 너비보다 더 커질 수 없다.

- 속성 값으로 단위와 auto 사용 가능

- 기본값은 none(최대로 늘어날 수 있다.)

 

6. min-height

- 요소는 지정된 최소 세로 너비보다 더 작아질 수 없다

- - 속성 값으로 단위와 auto 사용 가능

- 가장 작아질 수 있는 최소의 너비를 가질 수 있기 때문에 기본 값으로 0으로 지정

---

Tips

- css에서 body*{ } 는 html의 body 태그에 해당하는 모든 요소들을 선택

- 인라인 요소는 가로 세로 값을 기본적으로 가질 수 없는 대신 텍스트를 다루는 데 특화되어 있다.