css 속성

align-items

align-items 속성은 Flex 컨테이너 내의 모든 아이템들의 수직 정렬 방식을 설정합니다. 이 속성은 아이템들을 단일 행(row) 또는 열(column) 내에서 수직 정렬하는 데 사용됩니다.

• flex-start: 아이템들을 컨테이너의 시작 부분에 정렬합니다.
• flex-end: 아이템들을 컨테이너의 끝 부분에 정렬합니다.
• center: 아이템들을 수직 중앙에 정렬합니다.
• baseline: 아이템들을 텍스트의 베이스라인에 정렬합니다.
• stretch: 아이템들을 컨테이너의 높이에 맞게 늘립니다.

align-content

align-content 속성은 여러 행 또는 여러 열로 구성된 Flex 컨테이너 내에서 행 또는 열의 간격과 수직 정렬 방식을 설정합니다. 이 속성은 컨테이너 내의 여러 줄의 아이템들을 조작하는 데 사용됩니다.

• flex-start: 행 또는 열을 컨테이너의 시작 부분에 정렬합니다.
• flex-end: 행 또는 열을 컨테이너의 끝 부분에 정렬합니다.
• center: 행 또는 열을 수직 중앙에 정렬합니다.
• space-between: 아이템들 사이의 간격을 동일하게 조절하여 정렬합니다.
• space-around: 아이템들 주위의 간격을 동일하게 조절하여 정렬합니다.
• space-evenly: 아이템들 주위의 간격을 균등하게 조절하여 정렬합니다.
• stretch: 행 또는 열을 컨테이너의 높이에 맞게 늘립니다.

위 두 속성의 가장 큰 차이는 align-items는 단일 행 또는 열에서 수직 정렬을 담당하고, align-content는 여러 행 또는 여러 열로 구성된 컨테이너의 행 또는 열 간의 수직 정렬을 담당한다는 것입니다. 따라서 align-content 속성은 flex-wrap을 이용해서 여러 행 또는 열이 생성된 후에 적용이 가능합니다.

align-self

각 항목 별로 하나씩 적용하고 싶을 때, 사용하는 속성입니다.

정렬 적용 기준
-content : 여러 열 또는 여러 행
-items : 하나의 열 또는 하나의 행
-self : 하나의 항목에 각각 적용

Reset CSS & Normalize CSS

Reset CSS는 브라우저의 기본 스타일을 완전히 제거하고 초기화하는 스타일시트입니다. 브라우저 간의 기본 스타일 차이로 인해 웹 페이지가 일관성 없이 보일 수 있는 문제를 해결하기 위해 사용됩니다. 예를 들어, 헤딩(Heading) 요소의 크기, 목록 스타일, 여백 등의 스타일을 초기화하여 일관된 디자인을 구현할 수 있습니다.

Reset CSS의 목적은 모든 HTML 요소에 대한 기본 스타일을 제거하고, 개발자가 원하는 스타일을 완전히 커스터마이즈할 수 있는 기반을 제공하는 것입니다. 대표적인 Reset CSS로는 Eric Meyer's Reset, Normalize.css의 Reset 스타일 등이 있습니다.

Normalize CSS는 브라우저 간의 일관성 있는 스타일을 유지하면서 HTML 요소의 기본 스타일을 초기화하는 스타일시트입니다. Normalize CSS는 브라우저 스타일의 차이를 최소화하면서 웹 페이지를 일관성 있게 보이도록 보완하는 데 초점을 둡니다.

Normalize CSS는 HTML5 요소의 스타일을 정의하고, 버튼 스타일, 입력 요소 스타일, 목록 스타일 등을 정규화하여 브라우저 간 차이를 보완합니다. 그리고 웹 페이지가 브라우저에 따라 동일한 모습으로 나타날 수 있도록 돕습니다.

Reset CSS는 브라우저 기본 스타일을 완전히 제거하여 완전한 커스터마이즈를 제공하며, Normalize CSS는 일관성 있는 스타일을 유지하면서 브라우저 간의 스타일 차이를 보완하는 역할을 합니다.

SDK(Software Development Kit)

소프트웨어 개발 도구 모음으로, 개발자들이 특정 플랫폼, 언어, 기술, 프레임워크 등을 활용하여 소프트웨어 애플리케이션을 개발하는 데 도움을 주는 도구 모음입니다. SDK는 필요한 라이브러리, API(응용 프로그램 인터페이스), 문서, 샘플 코드, 디버깅 도구 등을 포함할 수 있습니다.

웹뷰(webview) & Native

WebView

모바일 앱 내에서 웹 페이지를 표시하는 컴포넌트입니다. 쉽게 말해, 앱 안에서 웹 브라우저를 내장하는 것으로, 웹 기술을 사용하여 앱의 일부분을 개발하는 방식입니다. WebView를 사용하면 웹 페이지를 렌더링하고 HTML, CSS, JavaScript를 활용하여 앱의 화면을 구성할 수 있습니다.

웹 기술을 활용하여 웹 개발자들이 빠르게 앱을 개발할 수 있으며, 크로스 플랫폼 호환성이 뛰어나, 한번의 개발로 iOS, Android에 동일한 화면을 구성할 수 있습니다.

Native

최적화된 성능: 특정 플랫폼에 최적화된 코드를 사용하기 때문에 성능이 우수합니다.
네이티브 기능 활용: 각 플랫폼의 고유한 기능을 활용할 수 있습니다.
뛰어난 UI/UX: 각 플랫폼에 맞게 디자인된 UI를 구현할 수 있습니다.

플랫폼 별로 앱을 개발해야 하기 때문에, 개발 시간과 비용이 증가할 수 있습니다. 대신 뛰어난 성능과 고유 기능을 잘 활용할 수 있습니다.