CSS Tutorial (7) inheritance and z-index / CSS 시작하기 (7) 마지막 편 상속과 z-index

 

 

 

 

 

챕터 5의 두번째 분량이다.

여기까지의 내용이 마지막 강의 내용이다.

 

강의는 클래스101, 유노코딩 강사님의 프로그래밍 입문자를 위한 CSS 기초이다.

https://class101.net/ko

CLASS101+ | 세상의 모든 클래스를 하나의 구독으로

 

 

 

 

 

 

 

 

 

챕터5. 한 걸음 더 나아가기 - 상호작용, 세부 위치 등 세세한 부분까지 생각하기 (Part2)

 

 

 

 

4강. inherit (상속), initial, unset

 

(1) 상속 (Inheritance)

상속(Inhertiance)이란 하위 요소가 상위 요소의 스타일 속성값을

물려받는 것을 의미한다.

 

html은 기본적으로, 태그가 태그를 포함하는 방식으로 이루어진다.

=> 결과적으로 요소가 요소를 포함하는 구조.

 

즉, 자식 요소로 포함되는 것만으로 부모의 속성을 그대로 물려받을 수 있다.

별다른 코드 추가 없이! 상위요소에 하위요소가 포함된 형태이면,

상위 요소에 값을 적용하면 하위 요소에도 그대로 상속된다.

 

물론, 상속이 된 후에 자식요소에 다른 속성을 따로 지정해주면 

개별적으로 정의된 속성값을 따른다.

상속은 특별히 자식요소에 아무것도 지정되지 않았을때 디폴트로 적용해준다고 보면 된다.

 

또한 상속을 원치 않는다면 inherit키워드를 통해 기본적으로 상속하지 않겠다고

설정할 수도 있다. (하단에서 더 알아볼 예정이다.)

 

 

 

 

*예시코드

ul{

        color: tomato;

}

=> 이렇게 적는 것만으로 리스트의 요소들도 색을 바꿀 수 있다.

(* 일반적으로 ul가 li의 상위요소로 배치되었을 때)

 

 

 

 

 

(2) 모든 속성을 상속 받을 수는 없다.

상속이 가능한 속성들이 있고 상속받을 수 없는 속성들이 있다.

 

- 대표적으로 상속이 가능한 속성들

color, font-family, fon-size, font-weight, text-align, cursor 등

 

- 대표적으로 상속이 안되는 속성들

background-color, background-image, background-repeat,

border, display 등

 

=> 속성별로 상속 여부가 엄청 다르며 알다시피 속성의 종류도 굉장히 많다.

더 많은 정보는 아래 문서를 참고! (inherited? 항목이 상속여부)

https://www.w3.org/TR/CSS21/propidx.html 

 

 

 

 

 

글자색, 글자크기, 폰트는 상속이 되지만

테두리와 width height는 상속이 되지 않는 모습이다.

 

 

 

 

 

자식 요소에 따로 색상값을 지정하면 상속값이 아닌, 개별 속성이 적용된다.

 

 

 

 

 

 

 

 

(3) 공용 키워드

모든 CSS 속성에 사용 가능한 키워드가 있다. (마치 html의 전역 속성처럼)

때문에 이를 '전역 값'이라 표현하기도 한다.

 

 

- 키워드

inherit: 상위 요소로부터 해당 속성의 값을 받아 사용한다.

initial: (브라우저에 지정되어 있는) 해당 속성의 기본값을 요소에 적용한다.

unset: 상속 속성에 대해서는 inherit처럼,

상속되지 않는 속성에 대해서는 initial처럼 적용된다.

( = 상속값 없거나 상속이 안되는 요소면 기본값으로 해주세요. 라는 의미)

 

 

 

 

color: initial

웹브라우저에 설정되어있는 color의 기본 값인 black으로 바꿔준다.

 

border: inherit;

border는 원래 상속되는 속성이 아니다. 하지만 inherit이라 써주면서

상위요소를 상속하도록 설정해주었다.

 

 

 

 

 

color: unset;

border: unset;

color는 상속이 되는 요소이다. 따라서 상위요소에 지정된 color값으로 변한다.

border는 기본적으로 상속이 안되는 요소이다. 그렇게 때문에 unset으로 설정하면

border의 기본값인 테두리없음 상태가 된다.

 

 

 

 

 

 

 

 

| 정리 |

* 상속(inherit)은 하위 요소가 상위 요소의 스타일 속성값을 물려받는 것이다. 

* 상속 가능 여부는 속성마다 다르다.

* 모든 속성에 대해 사용 가능한 키워드 속성값이 있다.

* inherit은 상위 요소로부터 값을 물려받겠다는 의미이다.

* initial은 기본값(초기값)을 사용하겠다는 의미이다.

* unset은 상위 요소로부터 물려받을 수 있으면 물려받고, 그럴 수 없으면

기본값을 사용하겠다는 의미이다.

 

(출처: 유노코딩(클래스 101), 프로그래밍 입문자를 위한 CSS 기초)

 

 

 

 

 

 

 

 

 

 

5강. z-index

 

 

(1) z-index

 

z-index 속성은 요소의 쌓임 순서 (stack oder)를 정의할 수 있다.

(정수값을 지정하여 쌓임 맥락(stacking context)에서의 레벨을 정의하는 방식.

정수 값으로 그 순서를 지정하는데 위치 지정 요소에 대해서만 적용이 가능하다.

 

=> 위치 지정 요소(positioned element)란?

position 속성이 정의되어 있는 요소를 말한다.

 

우리가 앞서 배웠던 relative, absolute, fixed, sticky등이  position 속성에 해당된다.

 

 

 

 

(2) 쌓임 맥락이란?

 

 

 

position을 relative로 4개의 div태그를 만들어보았다.

모두 100px, 100px같은 크기이지만 위치를 50px단위로 띄워놓자 겹쳐버리는 현상이 발생한다.

기본적으로 겹치는 순서는 문서의 일반적인 흐름을 따른다.

결과적으로 먼저 생성된 요소가 나중에 생성된 요소 아래에 깔려 있는 것을 볼 수 있다.

=> 먼저 생성된 요소 위에 나중에 생성된 요소들이 쌓인다.

 

쌓임 순서를 바꾸기 위해서는 z-index라는 속성을 조작해 순서를 임의로 바꿔야 한다.

현재 모든 z-index상태는 auto이다. 

auto는 기본 맥락대로 쌓이는 순서를 의미한다. (디폴트값)

이제 z-index속성을 추가해 쌓임 순서를 바꿔보자!

 

 

 

 

 

 

.클래스명 {z-index: 숫자값;}

z-index 속성값이 클수록 더 위에 위치하게 된다.

값은 0부터 입력 가능하며 반드시 순차적으로 올라가야 하는 것은 아니다.

1, 20, 34 이런식으로 올라가도 상관없다.

z-index의 값이 더 큰 값을 가진 요소일수록 위에 위치해있다는 것이 중요하다.

또한 만약 값이 동일하다면, 다시 일반적인 문서의 흐름에 따라 쌓임 순서가 결정된다.

 

 

 

 

 

 

| 정리 |

* z-index는 요소가 쌓이는 순서를 결정할 수 있다.

* 기본값은 auto이며, 정수값으로 정의한다.

* 정수값은 쌓임 맥락에서의 레벨을 의미하며, 값이 클수록 전면에 표시된다.

 

(출처: 유노코딩(클래스 101), 프로그래밍 입문자를 위한 CSS 기초)

 

 

 

 

 

 

 

 

 

 

 

이 글은 클래스 101, "프로그래밍 입문자를 위한 CSS 기초 (유노코딩)" 강의를

기반으로 작성되었음을 알립니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

이로써 CSS 기본강좌가 끝이 났다.

이틀하고도 반나절이 걸렸다. 분량 자체는 많지는 않지만

실습을 하나씩 따라해보고 내용도 정리해다보니 조금 더 걸린 것 같다.

수업 내용도 너무 어렵지 않고, 쉽게 설명해주셔서

코딩 언어치고 정말 즐겁고 재밌게 배울 수 있었다.

쓸줄 아니면 아는게 아니라는 강사님 말씀대로

꾸준히 연습해보면 좋을 것 같다.