HTML 13일차-기타정보(em,rem 중요!!)

1. box-sizing

content-box : 대상태그를 기준으로 입력해둔 width,height 값이 대상에 고정되고 padding ,border 값에 따라 전체 가로 세로 값이 늘어난다.

boder-box : 대상태그를 기준으로 입력해둔 width,height 값이 전체에 고정 padding,boder 값에 따라 대상의 가로세로 값이 줄어든다.

2. 고정값 과 유동값

일반적으로 고정값인 px를 사용하여 크기의 값을 정하여 고정시킨다.

유동값은 %를 사용하여 크기가 유동적으로 변경되는데 기준이 되는 크기 값은 웹사이트의 가로 해상도 이다.

감싸고있는 태그에 가로값이 정해져있다면 유동적으로 변하며 감싸고 있는 태그 역시 %로 가로 값이 들어가 있어야 한다.

세로값은 세로값이 정확하게 정해져있지 않다면 적용이 안됨

2-1 font의 고정값과 유동값

font 역시 px를 사용하여 그크기가 고정되어있지만 % 를 사용하여 웹사이트의 가로길이에 따라 대상 태그의 font값의 %만큼 값이 변한다.

​

rem html 선택자에 넣어준 font-size X 입력한 rem 값 (1rem=최상위 폰트의 px값 ex. 최상위 폰트가 14px=1rem 0.5rem=7px)

em 바로 상위태그의 font-size X 입력한 em 값 (1em=상위 폰트의 px값 ex. 상위 폰트가 14px=1em 0.5em=7px)

*반응형에서 중요!!!!*

3.background:linear-gradient

background:linear-gradient 속성을 사용하여 배경에 그라데이션 효과를 줄 수 있다 background:linear-gradient (각도deg , 시작색, 종료색) 의 형식으로 속성값을 넣어주면 된다.

4.background-repeat:round

배경이미지를 가로값 세로값에 맞게 줄이거나 늘려주는 속성