[모던 웹] CSS 상속 이해 / CSS media query와 반응형 레이아웃

CSS 상속

 

p태그의 color프로퍼티값은 span태그에도 적용됨

h1 태그의 border프로퍼티 값은 span태그에 저굥ㅇ되지 않음

=> p에만 적용한 프로퍼티가 span만 써도 자동으로 상속되어 적용이 된다는 점.

 

상속이 되는 property

상속이 안되는 property가 있는데 구분이 필요함

 

상속가능: text-align, line-height(상하), color, font, visibility, opacity

상숙불가: width, height, margin, padding, border, display, box-sizing, background

 

강제 상속이라는 것도 있음. 아래와 같이 가능

span {

border: inherit;

}

 

CSS media query와 반응형 레이아웃

 

기존에는 부트스트랩 프레임워크로 하거나, 퍼블리셔가 구현함

하지만, 최근에는 웹퍼블리셔가 없고 UX디자이너가 스케치등의 UI툴로 구현하는 경우가 많아지고 있음.

=> 이러한 UI디자인 툴로 작업한 결과물을 기바능로 개발자가 직접 반응형까지 구현하며 개발해야하는 경우가 많아짐

 

적응형 웹 vs 반응형 웹

 

적응형 -> url 앞에 m. ~~로 어떤 디바이스에서 적용하는지 판단하고 환경에 따라 다른 페이지를 보여주는 것

ex. m.naver.com  

 

반응형 -> 모바일, PC, 타블렛 등 다양한 사이트가 있어서 요즘엔 해상도에 따라 그냥 자동으로 최적화해서 보여주도록 된 것

 

Pixel 과 ViewPort

viewport 화면상의 표시 영역을 의미

 

- 사용자가 보기 편한 폰트크기 12~16px 이나, 스마트폰의 viertual viewport를 980px로 해놓는다면, 웹페이지에 따라서는 폰트가 매우작게 표시될 수 있음

 

=> meta viewport설정으로 해결가능

viewport에 원하는 너비를 넣으면 해당 너비에 맞게 웹브라우저가 웹페이지를 표시함

해당 태그가 없다면 대부분의 스마트폰에서 디폴트로 설정해놓은 980px에 맞게 웹페이지가 표시됨

 

 

 

 

출처

풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2] -