zuryeong의 개발 블로그

1. SVG란

스케일러블 벡터 그래픽스(Scalable Vector Graphics, SVG)는 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식으로, 1999년 W3C(World Wide Web Consortium)의 주도하에 개발된 오픈 표준의 벡터 그래픽 파일 형식이다. SVG 형식의 이미지와 그 작동은 XML 텍스트 파일들로 정의 되어 검색화·목록화·스크립트화가 가능하며 필요하다면 압축도 가능하다.

2. SVG  vs  PNG

3. SVG 태그

<svg width="가로영역" height="세로영역">
	SVG그래픽
    ...
</svg>

SVG는 컨테이너로 묶음을 의미한다. 내부에 그래픽을 담기 위한 그릇과 같은 태그다. 

4. 모양 요소의 종류

SVG에는 개발자가 사용할 수 있는 몇 가지 요소가 미리 지정되어 있다.

   1) 사각형 : <rect>

   2) 원 : <circle>

<svg
  version="1.1"
  baseProfile="full"
  width="300"
  height="200"
  xmlns="http://www.w3.org/2000/svg">
  <rect width="100%" height="100%" fill="black" />
  <circle cx="150" cy="100" r="90" fill="blue" />
</svg>

   3) 타원 : <ellipse>

   4) 선 : <line>

   5) 다각선 : <polyline>

   6) 다각형 : <polygon>

   7) 패스 : <path>

5. 장점

   1) 웹사이트 로딩 속도가 빠르다
SVG는 XML코드이기 때문에 파일의 크기가 작다. 사용 사례에 따라서 SVG는 60%에서 80%정도의 대역폭을 절감한다고 한다. SVG는 HTML파일에 작성이 될 수 있기때문에 외부 이미지를 가져오기 위해서 HTTP request를 할 필요가 없다.

   2) 어떤 크기에서든 재활용이 가능 (Future Proof) 
SVG는 크기에 따라 이미지가 왜곡되거나 품질이 떨어져 보이지 않는다. 그렇기 때문에 하드웨어 해상도가 높은 디바이스에서도 품질 저하없이 볼 수 있다.

   3) SEO 친화적이다
XML코드에는 키워드, 설명, 링크 등이 포함될 수 있다. 그래서 해당 콘텐츠를 검색 엔진에서 더 쉽게 인실할 수 있도록 할 수 있다.

   4) 개발 효율 증대 효과
디자이너가 Figma, Sketch 등에서 디자인한 작업물들을 SVG로 내보내거나, 직접 개발자가 SVG로 다운받을 수도 있어 번거로운 작업을 줄일 수 있다.

5) CSS로 디자인 수정이 가능하다
개발자는 SVG파일을 코드로 직접 변경할 수 있기때문에 디자이너에게 재요청 및 기다릴 필요가 없어지고 디자이너는 이미지를 수정할 필요가 없다.

6. 단점

   1) 너무 복잡한 SVG는 비효율적일 수 있다
많은 모양, 색상, 그라디언트를 포함하여서 파일 크기가 JPG나 PNG 보다 커지는 경우가 종종 있기 때문에 단점이 될 수 있다.

   2) 최적화
다양한 편집툴에서 내보내진 SVG 파일에는 중복되고 쓸모없는 정보가 많이 포함되어 있다. 예를 들어, 편집기의 메타 데이터, 주석, 숨겨진 요소가 있다. 최적화 되지 않은 경우에는 PNG보다 파일 크기가 커질 수 있기때문에 최적화를 할 수 있는 도구의 도움을 받는 것이 좋을 수 있다.

1. display

1-1 block

1-2 inline

1-3 inline-block

1-4 none

2. position에 대해 설명하라

2-1 static

2-2 relative

2-3 fixed

2-4 absolute

3. float가 어떻게 작동하는가

4. flexbox나 grid 스펙을 사용해본적이 있나

4-1 flexbox를 사용하는 이유가 무엇인가

4-2 grid를 사용하는 이유가 무엇인가

5. 이미지 태그를 스타일로 대처하는 법

6. 반응형 웹의 3요소

7. css selector가 어떠한 원리로 동작하나

8. 반응형 웹과 적응형 웹에 대해 설명하라

9. px, em에 대해 설명하라

9-1 절대단위

9-2 상대단위

9-3 px

9-4 em

9-5 ex

9-6 %

9-7 pt

10. cs 적용 우선순위

11. css-in-js에 대해서 설명하라

12. css 전처리기(css preprocessors)를 사용해본적 있는가

12-1 사용해봤다면 장점과 단점

13. padding과 margin의 차이가 무엇인가

13-1 dadding에 대하여

13-2 margin에 대하여

1. DOCTYPE

1-1 DOCTYPE에 대해 설명하시오

1-2 meta 태그에 대해 알고있는가

1-3 meta 태그의 요소에 대해서 아는대로 말하라

2. 웹 표준 및 웹 접근성

2-1 웹 표준이란

2-2 HTML5에서 추가된 내용이 있는가

2-3 웹 접근성이란

2-4 웹 접근성에 맞는 마크업 예시 몇가지 말해보라

2-5 시멘틱 태그란 무엇인가. 왜 사용하는가

2-6 텍스트 관련 태그

2-7 SEO란 무엇인가

2-8 button 태그의 default type은 무엇인가

2-9 section 태그와 article 태그의 차이점

2-10 크로스 브라우징이란 무엇인가

3. 그 외

3-1 이미지 크기가 클 경우 렌더링 속도가 느려질텐데 이를 개선하기 위한 방법

3-2 UI란 무엇인지 설명하라

4. SVG

4-1 SVG란 무엇인가

4-2 SVG 장단점

4-3 SVG내부 도형에 대해 아는게 있는가

1. 리액트는 라이브러리인가 프레임워크인가

2. virtural DOM에 대해서 아는가

3. 리액트의 랜더링에 대해 아닌그

4. 리액트 파이버에 대해 아는가

5. 리액트 파이버 트리

6. 리액트 파이버와 DOM, Virtural DOM의 관계

7. 렌더 단계와 커밋 단계에 대해 아는가

8. React에서 함수 컴포넌트와 클래스 컴포넌트의 차이

9. 리액트에서 함수형 컴포넌트라고 부르지 않고 함수 컴포너트라고 부르는 이유가 무엇인가

10. props와 state의 차이

11. props가컴포넌트 간에 전달받는 것이라고 했는데 자식에서 부모로도 전달할 수 있는가

12. flux에 대해 아는가

13. 리덕스에 대해 아는가

14. 리덕스의 기본 원칙은

15. 리액트에서 state의 불변성을 유지하라는 말이 있는데 이에 대해 설명하라

16. 리듀서 내부에서 불변성을 지키는 이유는? 전개 연산자의 단점을 해결할 수 있는 방법은 무엇인가

17. 리액트 사용시에 부수효과로 인해 생기는 문제점이 있다면

18. 컴포넌트의 라이프 사이클 메서드

19. hooks의 종류

20. useMemo와 useCallback의 차이를 아는가

21. 리액트에서 setState는 비동기 동작인가 동기 동작인가

22. setState가 비동기 동작을 취했을 때 얻을 수 있는 이점은 무엇인가

23. useLayoutEffect는 무엇인가

24. 리액트의 성능 개선 방법에 대해 설명하라

25. 컴포넌트에서 이벤트를 실행시키기 위해서는 어떻게 핸들링 해야 하는가

26. spa가 무엇인가

27. ssr이 무엇인가

28. seo가 무엇인가

29. 서버 사이드 렌더링을 지원하기 위한 리액트 api를 알고 있는가

30. 하이드레이션에 대해 알고 있는가

31. next의 렌더링 수행 방식

32. next를 쓴 이유

33. next를 구성하는 기본 설정 파일에 대해 알고 있는가

34. 사전 렌더링을 위해 사용해본 함수가 있는가

35. suspense가 무엇인가. suspense로 가능한 것은 어떤 것들이 있는가

36. 웹 성능 최적화

37. lcp가 무엇인가

38. fcp가 무엇인가

39. controlled pattern에 대해 아는가

40. uncontrolled pattern에 대해 아는가

1. React란

React(리액트)는 전 세계에서 Node.js 다음으로 인기 있는 웹 개발 기술이다. 2023년 기준으로 전 세계 웹 개발자의 40.58%가 리액트를 사용하고 있다. 페이스북, 인스타그램은 무론 에어비앤비, 넷플릭스, 트위터 등 수많은 기업이 채택했다.

React는 2013년 메타(전 페이스북)가 오픈소스로 공개한 프론트엔드 JavaScript 라이브러리이다. 라이브러리는 특정 기능을 수행하는 코드들의 집합으로 개발 시 필요한 기능을 직접 호출해서 사용 할 수 있는데, 리액트는 복잡한 U도 '컴포넌트'라는 작은 단위 기반으로 단순하게 개발할 수 있고 다른 라이브러리나 프레임워크도 함께 활용하기 쉽다. 이런 장점 덕분에 프론트엔드 개발 분야에서 대세가 되었다.

2. React 특징

리액트는 데이터가 변할 때마다 화면을 새로 띄우는 대신, 필요한 곳만 업데이트해주는 형식이다.

'가상 DOM(Document Object Model)' 이라는 개념이 이를 가능케 한다. DOM은 HTML 문서를 브라우저가 이해할 수 있도록 만든 자료구조다. DOM에 변화가 생기면 브라우저는 이 변화를 반영하기 위해 계속 연산을 하게 되는데, 변화가 많으면 그만큼 연산량도 많아지므로 전체적으로 효율이 떨어진다.

가상 DOM은 실제 DOM보다 가벼운 복제품이다. 데이터에 변화가 생겼을 때 브라우저와 연결된 실제 DOM에 입력하는 대신 가상 DOM에 먼저 입력하고 가상 DOM과 기존 DOM을 비교해 최소한의 부분만 찾아 업데이트하는 원리다.

덕분에 빠른 로딩 속도와 반응성 높은 UI를 구현할 수 있게 되었다. 데이터 규모가 클수록, 데이터 변경이 많을수록 리액트는 더 큰 힘을 발휘한다.

3. 장점

   1) 개발 생산성이 높다

리액트는 '컴포넌트'라는 작은 코드조각을 기본 단위로 UI를 구성하는데, 화면에 구성되는 요소들을 하나하나 개발하지 않고 반복되는 것들은 컴포턴트를 재사용해 생산성을 높일 수 있다. 레고를 조립할 때 단순한 블록으로 수많은 형태를 완성하는 형식과 비슷하다. 오류가 생겼을 때도 전체 페이지를 수정하는 대신 해당 컴포넌트만 수정하면 되기 때문에 해결하기 쉽다

   2) 입문자도 쉽게 흥미를 느낄 수 있다

프론트엔드 개발은 보이는 영역의 웹 화면을 설계하기 때문에 입문 개발자도 쉽게 흥미를 느낄 수 있다. 전체적인 레이아웃, 배치, 디자인, 고객과의 상호작용까지 직접 구현할 수 있기 때문에 서비스에 기여하는 바가 명확하게 눈에 보인다.

   3) 사용하는 기업이 많다

전 세계 65만 개 프론트엔드 채용 공고를 분석한 결과, 리액트 채용 공고는 약 35만 5000개 정도로 압도적인 1위를 차지했다. 국내 기업만을 분석한 통계는 없지만 쿠팡, 11번가, 티몬, 오피지지, 카카오페이 등 수많은 기업에서 프론트엔드 개발에 리액트를 사용하고 있다.

   4) Flux와 Redux

리액트는 Flux 아키텍처와 Redux를 통해 데이터를 체계적으로 관리할 수 있다. Redux는 단일 상태 트리를 사용하여 애플리케이션의 전체 상태를 관리하고, Flux아키텍처는 데이터 플로우를 단방향으로 유지한다. 데이터를 한 곳에서 관리하기 문에 실수도 줄이고, 데이터 흐름도 쉽게볼 수 있다.

4. React와 함께 학습하면 좋은 언어와 프레임워크

   1) TypeScript  :  오류를 줄이고 개발 생산성 향상

타입스크립트는 JavaScript의 확장버전으로, 정적 타입 시스템을 제공한다. 정적 타입 시스템은 코드 작성 중 발생할 수 있는 오류를 줄이고 유지 보수를 쉽게 만든다.

타입스크립트를 함께 사용하면 코드의 가독성도 높일 수 있다. 코드의 의도를 보다 명확하게 표현할 수 있기 때문에 코드의 구조를 변경하는 작업도 더욱 수월하고 빠르게 이뤄진다.

   2) Nest,js  :  리액트 문법 그대로 리액트의 단점을 보완

리액트 CSR(Client Side Rendering)방식으로 동작한다. CSR은 서버에서 데이터를 보내 브라우저에서 페이지를 만드는 방식이다. CSR은 기본 구조 상 SEO(검색 엔진 최적화)에서 불리하다는 단점ㅁ이 있는데, 이를 보완하는 것이 Nes.js이다.

Nest.js는 리액트 문법을 그대로 사용하면서 SSR(Server Side Rendering) 방식으로 작동하는 프레임워크이다. SSR은 서버가 페이지를 만들어 브라우저에게 전달한다. 검색엔진이 이미 서버에서 만들어진 정보들을 가져올 수 있기 때문에 SEO에 유리하다. 이외에도 리액트 개발을 보다 효율적으로 만들어주는 다양한 장점을 지니고 있다.

Flutter는 Google에서 개발 및 지원하는 오픈소스 프레임워크다.

프론트엔드 & 풀스택 개발자는 Flutter를 사용해 다수의 플랫폼에 대한 애플리케이션의 사용자 인터페이스(UI)를 단일 코드 베이스로 구축할 수 있도록 지원한다.

2018년 출시 이후 Flutter는 iOS, Android, Web, MacOS, Linux 여섯가지 플랫폼에 대한 애플리케이션 개발을 지원한다.

1. Flutter의 주요 특징

1) 프러터는 모든 사람이 아름답고, 좋은 성능을 가진 모바일 앱을 만들 수 있도록 제공하는 모바일 SDK이며 Dart로 구성되었다.

2) Dart는 구글이 만든 언어로 자바스크립트로 컴파일할 수 있다

3) Dart는 빠르며, 엄격한 형식을 지원하고 배우기 쉽다

4) 플러터는 네이티브 디바이스 코드로 컴파일되므로 다른 크로스 플랫폼 기술보다 성능이 뛰어나다

5) 또한 Dart의 JIT, 플러터의 리로드 덕분에 최상의 개발자 경험을 제공한다

6) 플러터는 훌륭한 성능의 크로스 플랫폼 앱을 빨리 만들어야 하는 사람에게 적합하다. 하지만 두 개의 네이티브 팀을 이미 보유한 큰 회사는 플러터가 좋은 선택이 아닐 수 있다.

7) 플러터의 모든 것은 위젯이다

8) 여러 작은 위젯을 조립해 위젯 트리를 완성하며 UI를 만든다

9) 위젯은 크게 상태가 없는 위젯과 상태가 있는 위젯으로 분류된다

10) 플러터는 위젯 생명주기 메서드, 특별한 State 객체 등 상태 관리 도구를 제공한다

2. Flutter 주요 개념

1) 플러터는 리액티브다

2) 모든 것은 위젯이다

3) state 객체는 오래 살아남으며 종종 재사용된다

4) 위젯의 제약은 부고가 서술한

3. Flutter 장점

   1) 통합 개발 환경 지원

Flutter는 다양한 Editor(Android Studio, VS Code 등등)를 사용하여 빌드가 가능하다. Android Studio는 Flutter Inspector와 Flutter Outline이라는 개발 도구를 추가적으로 지원해준다. VS code 에서는 간단하게 Extension 으로 Flutter를 설치하여 Flutter를 사용할 수 있다.

   2) 성능 문제 해결

기존 React Native 혹은 Hybrid App의 경우 네이티브 브릿지를 통한 통신이 불가피했다. 하지만 Flutter는 직접 컴파일되서 Render를 직접 하기때문에 성능이 빠르다. 애니메이션 속도가 60프레임은 가뿐히 넘어서는 것이 기존 크로스 플랫폼시장의 주류였던 React Native와 Flutter를 비교하는 많은 글들에서 Flutter를 내세우는 부분이다.

   3) 머티리얼 디자인과 쿠퍼티노

Flutter는 Androd와 iOS의 대표 디자인 가이드를 기본적으로 제공한다. 구글의 머티리얼 디자인(Material Design)의 홈페이지에는 이미 Flutter가 포함되어 있고 가이드만 제공하는 것 뿐만아니라 Flutter 프로젝트에 바로 추가하여 사용할 수 있는 패키지도 제공한다. 안드로이드와 iOS에서 같은 머티리얼 디자인을 사용하더라도 플랫폼에 따라 다르게 출력되는 부분을 각각 디자인 가이드에 맞게 화면을 그린다. iOS앱을 개발하는 경우 iOS특유의 디자인 시스템인 쿠퍼티노(Cupertino) 위젯을 제공한다. 그렇기에 선택의 폭이 정해져 있기 때문에 어떤 UI 라이브러리를 사용할 것인지 고민 할 필요가 없습니다만 이건 장점이자 단점이 될수도 있다.

   4) Dart를 사용하지만 Native 코드도 사용
앞서 Dart를 사용한다고 했지만 결국엔 크로스 플랫폼이기에 해당 OS에 최적화된 앱을 만들려면 Native 코드를 사용할수밖에 없고 Dart와 섞어서 사용한다. 즉, Dart만 사용하는것이 아니라 Android면 Kotlin, iOS면 Swift도 사용한다. 이는 기존의 Native 코드를 사용한 개발자라면 장점이 된다.

4. 단점

   1) Native API를 Dart에서 직접 호출 불가하다.
특별히 심하게 문제가 되진 않지만 외부 플러그인을 써야한다.

   2) Code Pushing
코드를 고치려면 새 버전을 배포해야 한다.
React Native, Cordova, Ionic 에선 이미 지원 중 이다.

   3) Air BNB Lotti 사용 불가하다.
Android, iOS, React-Native만 지원하고 Flutter는 지원하지 않는다.

   4) C/C++ 라이브러리 호출이 안된다.
NDK C/C++ 라이브러리 호출이 Dart에서 안된다. 외부 플러그인을 써야하고, 원하는 플러그인이 없다면 만들어야 하는 번거로움이 있다.

   5) 지원되는 플러그인이 부족하다.
어플을 생성할 때, Webview, Map 등 플러그인은 필요하다. 하지만 Flutter의 이러한 플러그인들은 전부 0.4, 0.3 등등 1.0을 넘는 버전을 보기가 힘들다. 따라서 지속적으로 업데이트가 되고있고, 업데이트가 될때마다 다시 붙이고 테스트해보는 것은 번거로운 일이 될 것이다.

   6) 아직까진 국내에 개발관련 자료가 많이 없다.
Android, iOS Native는 나온지 오래되서 자료가 많다보니 문제해결이 쉽지만, 국내엔 아직까진 자료가 많다고 할수가 없어 이슈 상황 발생시 자료 찾기가 어렵다. 또한, Flutter 개발자들도 그렇게 많은 편이 아니기에 도움을 구하기도 어느정도 힘이 다.

Flutter의 상태관리의 종류에는

1. StateFul

2. ValueListenable

3. Getx

4. Provider

5. Bloc

6. Cubit

7. Riverpod

8. Mobx

Bloc은 플러터의 상태관리를 도와주는 패키지로써 bloc 외에도 상태관리 패키지를 사용하지 않는 것까지 포함해서 8정도가 있다.

   1) 상태 (state)

앱 내부의 데이터라고 할 수 있다. 유저가 어떤 행동을 취했을 때 내부에서 변하는 데이터를 상태라고 한다.

   2) 상태관리 (state management)

간단한 to do 앱의 경우 미들웨어가 필요 없을테지만, 앱의 덩어리가 조금 더 커지면 setSate만으로는 상태 관리하는데 어려움이 있을 것이다. 이 때문에 따로 상태를 관리할 수 있는 미들웨어 (여기선 bloc)이 필요하다.

1. bloc 패턴이란

bloc(Business LOgic Component)패턴은 상태 변화에 있어 UI와 Business Logic을 분리하는데 사용되는 디자인 패턴이다.

bloc은 "simple", "powerful", "testable"을 핵심가치로 개발되었다.

   1) simple  :  이해하기 쉽고, 다양한 수준의 개발자가 사용할 수 있게 하기 위해

   2) powerful  : 어플리케이션을 작은 단위의 컴포넌트로 나눠주어 멋지고 복잡한 애플리케이션 개발을 돕기 위해

   3) testable  :  어플리케이션의 모든 부분을 쉽게 테스트할 수 있게 하여 코드에 확신을 가지고 개발을 진행할 수 있게

                         하기 위해

2. Bloc을 사용하는 이유

   1) 뷰 영역과 비즈니스 영역을 쉽게 구분할 수 있다.

뷰 영역은 화면 UI부분을 뜻하며 사용자의 액션을 받아 이벤트를 발생시키는 영역을 말한다. 비즈니스 영역은 사용자의 입력에 따라 여러가지 기능(회원가입, 검색 등)을 수행하게 되는데 사용자들은 대부분 어떤 과정을 통해 기느을 수행하는지 알 필요 없다. 사용자의 요청을 빠르게 수행하기 위해 로직을 작성하게 되는 부분을 비즈니스 영역이라고 말한다.

뷰와 비즈니스 영역은 서로 상호작용하게 되어 결과를 도출해 주는 집합체가 하나의 서비스가 되는 것이다.

   2) 테스트하기 쉽고(TDD), 재사용을 가능하게 해 준다.

TDD 개발 방법론 적용 시 bloc적용은 특정 비즈니스 로직 부분만 유닛 테스트  ->  리펙토링 반복 개발을 수월하게 해준다

   3) 이벤트 트레킹을 통합적으로 관리할 수 있다.

BlocObserver라는 게 있어서 이를 통하여 이벤트 트레킹을 통합적으로 관리할 수 있게 된다. 

   4) 통일된 코드 베이스로 일할 수 있다.

룰이 정해져 있기 때문에 개발자들끼리동일한 개발 패턴을 다르게 되어있다. 때문에 업무 효율이 올라간다.

   5) UI와 Business Logic을 분리함으로서 유지보수하기 좋은 구조로 설계할 수 있다.

UI입장에서는 데이터가 처리되는 과정을 알 필요가 없다. 단지 필요한 데이터를 요청하고 그 결과만을 가지고서 화면에 맞게 표시해주는 역할에만 충실하면 된다.

하지만  UI처리 코드와 Business Logic이 같이 섞여 있는 코드라면 복잡성은 높아지고 유지보수도 힘들어진다. 추가로 사이드 이팩트 오류가 발생할 확률도 높아진다.

   6) 분리된 코드는 상태관리되기 때문에 UI에 있어 변경된 부분만 다시 그려주거나 상태만 변경해줌으로써 앱은 빠른 성능이 보장된다

이렇게 상태관리가 되어 있지 않은 앱은 불필요한 UI 다시 그리기 처리, 상태체크 등 작업이 발생됨으로써 그만큼 좋은 성능을 낼 순 없다

# 반응형 웹 개요

1. 반응형 웹이란, 기기나 브라우저의 크기에 맞게 구성이나 크기를 변경해가며 반응하는 웹문서 또는 이를 시용하는 기법을 뜻한다.

2. 반응형 웹사이트에서 가장 핵심이 되는 키워드는 "가변성"이다

3. 기기에 따라 다른 화면 크기에 대응하기 위해 웹문서에 viewpoint 속성에 대한 마크업을 추가해야 한다

# 상대단위 em, rem

1. 절대 길이 단위인 px(픽셀)은 어떤 상황에서도 동일한 값을 유지하므로, 가변성이 없다

2. em과 rem은 박스에서 텍스트 크기를 조정할 때 사용하는 상대 단위이다

3. em은 부모 요소의 글꼴 크기를, rem은 루트 요소의 글꼴 크기를 의미한다

4. em으로 여백 크기(pading과 margin)를 정할 때는 자기 자신의 글자 크기를 기준으로 한다

# 뷰포트 단위 vw, vh, vmin, vmax

1. 뷰포트 크기를 기반으로 크기를 계산하는 가변 단위들이 있다

2. vw는 뷰포트 너비의 100분의 1 크기를 뜻한다

3. wh는 뷰포트 높이의 100분의 1 크기를 뜻한다

4. vmin은 뷰포트 높이와 너비 중 작은 쪽의 100분의 1 크기를 뜻한다

5. vmax는 뷰포트 높이와 너비 중 큰 쪽의 100분의 1 크기를 뜻한다

# 가변 레이아웃 (가변 그리드)

1. 비율 계산 기반으로 변화하는 가변 레이아웃에는 %단위가 주로 사용된다

2. %단위는 백분율 값으로, 부모 요소와의 상대적 크기를 지정한다

3. 너비와 여백은 부모 요소와의 상대적 크기를 지정한다

4. 높이는 부모 요소의 높이에 비례해 계산된다

5. 글자 크기는 부모 요소의 글자 크기에 비례해 계산된다

# CSS 함수 개념과 calc()

1. 함수한 주어진 인수에 따라 정해지는 값을 일컫는 표현이다

2. CSS의 함수는 괄호 안에 인수를 전달하면, 인수에 따른 결과값을 속성에 적용하는 방식으로 동작한다

3. calc()를 이용하면 계산식의 결과를 속성값으로 지정할 수 있다

# 미디어 쿼리

1. 미디어쿼리는 미디어 타입을 인식하고, 콘텐츠를 읽어들이거나 기기나 브라우저의 물리적 속성을 감지할 수 있는 유용한 장치이다

2. 미디어 타입과 조건문(쿼리)로 구성된다

3. 다양한 미디어 타입과 조건을 지정할 수 있다

4. 화면(screen)의 너비(width)를 조건으로 사용하는 경우가 가장 많다

# 가변 이미지

1. 이미지 요소에도 상대 단위 em, vw, % 등을 사용할 수 있다

2. 브라우저에서 이미지는 기본적으로 비율을 유지한다

3. 이미지가 원본보다 커지면 이미지 품질이 떨어질 수 있다

4. max-width 속성은 요소의 최대 너비 제한을 정할 수 있는 속성이다

5. picture와 source 요소는 이미지를 미디어 조건에 맞게 선택적으로 불러올 수 있는 요소이