css 상속, cascading, 레이아웃, box-sizing, 마진겹침, 포지션

상속

상속은 부모 엘리먼트의 속성을 자식 엘리먼트가 물려받는 것을 의미한다.

하지만 모든 속성이 상속받는것은 아니다. 상속되면 별로 좋지않은 속성이 있기 때문이다.

상속되는지 아닌지 볼 수 있는 사이트

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

CASCADING

하나의 태그에 여러 css효과가 중첩되었을 때 

우선순위

0. !important

1. style attribute

2. id selecter

3. class selecter

4. tag selecter

순위가 내려갈수록 더 포괄적인 범위이다.

레이아웃

인라인 vs 블럭레밸

인라인 : 화면 전체(한줄)를 사용하는 태그이다.

블럭레밸 : 화면의 일부(자기크기만큼)를 차지하는 태그이다.

style태그에서 아래의 속성으로 속성을 바꿀 수 있다.

ex) display : inline;

ex) display : block;

박스모델(중요) - 부피감 위치 여백

padding : 내용 테두리 사이의 여백

margin : 태그와 태그사이 

border

width

height

box-sizing

엘리먼트의 크기를 정하는 기준은 컨텐츠(내용)이였는대, border(태두리)의 크기가 반영되지

않아서 사이즈를 지정하는대 어려움이 많았다.

box-sizing : border-box; 를 주면 엘리먼트의 크기를 설정할 때 border의 크기도 포함하여

원하는 사이즈를 지정하기 더 편해졌다.

*{

box-sizing : border-box;

} 

를 하면 모든 태그에 효과가 적용된다.

마진겹침 현상

1. 마진이 두개가 겹친다면 큰 마진이 적용이 된다.

2. 부모 자식 엘리먼트 사이에 아무런 시각적요소가 없을 때 부모의 마진값과 자식의 마진값중 큰 값이 자식의 마진값으로 사용된다.

3. 위, 아래 엘리먼트들이 있을 때 위의 시각적 요소가 없어지면 위, 아래 중 마진이 큰 쪽이 아래쪽의 마진으로 사용된다.

포지션

엘리먼트의 위치를 정하는 속성 포지션 4가지

1. static(기본값) : 움직이지 않는다.

2. relative : 부모의 엘리먼트를 기준으로 상대적으로 움직인다.

3. absoulte : 자식이라면 static이 아닌 부모가 나올때까지 거슬러 올라가 해당하는 부모의 위치를 기준으로하여 좌표를 지정한다.

4.fixed : 스크롤을 움직여도 지정된 위치에 고정된다.