riverlee1132의 공책

[바닐라JS] 연산자 기본

1132 — Sat, 19 Jul 2025 22:22:05 +0900

연산자

어떤 값에 특정 작업을 수행하라는 기호(ex: typeof, +, -)

알아두기

true는 false보다 큰 값이다

거듭제곱, 곱하기, 나누기, 나머지 연산자가 더하기, 빼기보다 높다

소괄호가 없다면 ! 연산자는 < 연산자보다 높다

연산자의 우선순위

1) +와 -

+ 연산자를 사용할 때는 숫자보다 문자열이 우선

> '1' + 0;

< 10

- 연산자를 사용할 때는 자료형이 숫자로 형 변환된 후 빼기됨

> '5' - 1;

< 4

2) 더하기보다 곱하기의 우선 순위가 높다 → 더하기를 먼저 하고 싶다면 소괄호()로 감싼다

3) 부동소수점 문제

> 0.1 + 0.2;

< 0.30000000000000004

실수를 정수로 바꿔 계산한 다음 마지막에 다시 실수로 바꿔 해결한다

> (0.1 * 10 - 0.2 * 10) / 10;

< 0.3

4) 비교 연산자 <>

== 양쪽 값이 같은지

=== 양쪽 값이 같은지, 자료형까지 같은지

!= 양쪽 값이 다른지

!== 양쪽 값이 다른지, 자료형까지 다른지

첫 문자가 같은 글자 → 첫 문자를 빼고 나머지를 비교

한쪽에 두 번째 문자가 없는 경우 → 다음 문자가 존재하는 문자열의 값이 더 큼

문자열과 숫자의 크기를 비교할 경우 숫자가 아닌 자료형이 숫자로 형 변환된 후 비교함

5) 문자의 번호 알아보기

문자열.charCodeAt();

6) 논리 연산자

&& 그리고 : 앞의 값이 참이면 뒤의 값을 결과로, 앞의 값이 거짓이면 앞의 값을 결과로

|| 또는 : 앞의 값이 참이면 앞의 값을 결과로, 앞의 값이 거짓이면 뒤의 값을 결과로

! 참을 거짓으로, 거짓을 참으로 만드는 연산자

?? 널 병합 연산자: 앞의 값이 null이나 undefined면 뒤의 값을 결과로, null도 undefined도 아니면 앞의 값을 결과로

> !!'a';

< true

불 값으로 형 변환했을 때 false가 되는 값(거짓인 값)

!!false

!!''

!!0

!!NaN

undefined

null

7) 빈 값

undefined: 값이자 자료형, false와 같지 않다

null: 값이자 자료형, false와 같지 않다, object 버그 있음

undefined와 null은 같지 않다

undefined는 기본 값의 의미가 있지만 null은 아무 것도 없다

welcome

1132 — Thu, 6 Apr 2023 14:27:53 +0900

메인페이지

[php] 기초 내용 메모

1132 — Tue, 21 Mar 2023 11:12:01 +0900

공통

언어에서 문자를 표현하는 기본적인 방법은 '' 또는 "" 안에 문자를 작성하는 것

정수(음수와 양수)는 integer, 산술 연산자(+, -, *, /)는 Arithmetic operator라고 한다

따옴표를 문자로 사용하고 싶다면 백슬래시(\)로 감싼다

모든 프로그램은 시간의 순서대로 실행된다

1. 수업의 목적

PHP를 사용하면 사용자에게는 똑같은 화면이지만, 코드는 훨씬 효율적으로 변한다.

http://111.1.1.1/index.php?id=HTML

http://111.1.1.1/index.php?id=CSS

http://111.1.1.1/index.php?id=JavaScript

index.php라는 하나의 파일로 3개의 웹페이지를 표시한다

?id가 HTML인지, CSS인지, JS인지에 따라서 index.php에서 출력하는 것이 달라진다.

index.php 파일이 데이터를 받아오는 파일에 새 파일을 추가하면 php에 자동으로 반영된다.

PHP 사용 = 효율성, 생산성 향상!

2. PHP 설치

bitnami를 통해 WAMP를 설치 했다면 이미 PHP를 설치한 상태다.

3. PHP의 원리

웹 브라우저 <-> 웹 서버(아파치) <-> php프로그램

코드:

<body>

<?php echo ?>

</body>

파일에서 ?php 는 php 문법이 시작된다는 의미이다

echo는 어떤 형태의 데이터인지 상관 없이 화면에 출력하기 위한 명령

;는 명령 끝

이 내용을 php 프로그램이 해석해서 웹 서버에 돌려주고, 웹 서버는 받은 내용을 브라우저에 출력한다.

html은 정적이며 php는 동적이다.

php 파일 안에 작성은 html 형식으로 틀을 만들고 그 안에 php 문법을 쓴다

4. PHP의 데이터 타입(숫자와 문자)

php는 컴퓨터 프로그래밍 언어이며 프로그래밍 언어를 배우는 이유는 데이터를 어떤 의도에 따라 처리하기 위함이다

기본적으로 php 파일에 데이터를 입력하려면 <?php ?>를 사용한다.

1) 숫자 표현

<?php ?> 안에 아래 내용을 입력한다

출력하기 echo 1; 또는 print(1);

연산하기 echo 1+1;

2) 문자(문자열) 표현 string

따옴표 문자 처리

코드:

<?php echo "Hello \"w\"orld"; ?>

문자의 결합(concatenation operator) dot

코드:

<?php echo "Hello"."world"; ?>

함수를 사용하고 싶다면 echo - 함수 - ("문자") 순서로 작성한다. (예시: 문자 갯수 확인하기)

코드:

<?php echo strlen("Hello world"); ?>

5. 변수(variable)

변수 앞에는 달러($)를 붙인다

코드:

<?php

$a = 10;

echo $a+1;

코드:

<?php

$name = "river";

echo "alphabet a b c d e river f g h i".$name;

출력:

alphabet a b c d e river f g h i

$name의 값을 jellybbi로 바꾸면

출력:

alphabet a b c d e jellybbi f g h i

6. URL 파라미터

모든 소프트웨어들은 그 특성에 따라 입력과 출력이 다르다. php는 데스크탑 어플리케이션을 위한게 아니라 웹 어플리케이션을 위한 언어이다. 브라우저에 뜬 웹 화면 url의 주소에 적혀있는 글자(전세계 공통 규칙)를 활용하여 데이터를 바꿀 수 있다.

url에서 php? 이하 내용은 파라미터라고 부르는 입력값이고 &는 구분자 엔퍼센드

php코드에서는 약속된 특수 변수 $_GET[''];를 사용한다

입력할 값:

address 서울시

name 젤리삐

url주소:

111.0.0.1/parameter.php?name=젤리삐&address=서울시

코드:

안녕하세요. <?php echo $_GET['address']; ?>에 사는 <?php echo $_GET['name']; ?>님

출력:

안녕하세요. 서울시에 사는 젤리삐님

7. 함수

예를 들어 strlen이라는 함수는 작은 프로그램이나 마찬가지이다.

코드:

<?php

$str = "뒷목 아프다";

echo strlen($str);

html에서는 빈행을 입력해도 인식되지 않고 줄바꿈 <br> 태그를 입력해주어야 하지만 php에서는 nl2br 함수를 입력해두면 빈행을 자동으로 줄바꿈을 처리해준다

코드:

<?php

$str = "뒷목 아프다";

echo nl2br($str);

함수 활용

URL의 파라미터 값을 가져오자

코드:

<h2>

<?php

echo $_GET['id'];

</h2>

data 폴더를 만들어 일반 파일로 본문을 넣는다

<?php echo data/id 값에 해당하는 파일의 내용;?>

이 필요하므로

코드:

<h2>

<?php

echo $_GET['id'];

</h2>

<?php

echo

file_get_contents('./data/".$_GET['id']);

https://opentutorials.org/course/3130/19342

이건 이해를 위한 예시고 보안, 규모 문제로 file_get_contents 같은것을 쓰면 안된다

8. 데이터타입2: 불리언과 비교연산자

제어문을 이해하기 위한 필수 선행 정보

문자 string의 데이터 양: 유한

숫자인 integer의 데이터 양: 무한

불리언: 단 두개. true or false

php의 비교연산자: http://php.adamharvey.name/manual/kr/language.operators.comparison.php

유용한 함수 var_dump

이 부분은 영상 봐야함

9. 제어문(조건문, 반복문)

1) 조건문 if / elseif / else if

URL에 ?id값이 없다면 정보A가 나오고 ?id값이 있다면 정보B가 나오도록 만들자

1-1) 형식

if(expr)

참고:

expr 은 expression으로 값이 온다는 의미

코드:

<?php

echo '1<br>';

echo '2<br>';

echo '3<br>';

출력:

2에 불리언 타입(true, false)을 넣어보자

if뒤에 오는 코드가 true라면 첫번째 중괄호를 실행한다

if뒤에 오는 코드가 false라면 else 뒤에 있는 중괄호를 실행한다

-> if 조건문이 제어문인 이유

코드 수정:

<?php

echo '1<br>';

if(false){

echo '2-1<br>';

} else{

echo '2-2<br>';

}

echo '3<br>';

출력:

2-2

1-2) 활용

만약 id 값이 있다면 echo $_GET['id'];

없다면 echo "welcome";

이걸 코드로 바꾼다

코드:

<h2>

<?php

if(){

echo $_GET['id'];

} else {

echo "welcome";

}

</h2>

[바닐라JS] JS가 유저의 행동 여부를 알 수 있는 방법

1132 — Mon, 30 Jan 2023 17:22:10 +0900

* JS : Vanilla Java Script를 사용합니다

컴퓨터는 유저가 버튼을 클릭했다는 것을 인지해야 다음 행동을 연결할 수 있다.

대표적인 HTML의 '클릭'은 input 태그와 button 태그

1. HTML

일반적으로 input 태그가 쓰이는 모양은 아래와 같다

<form>
    <input type="text">텍스트</input>
    <button>버튼</button>
</form>

2. HTML 태그를 JS로 불러오기

HTML 작성 후에는 form 태그 안에 있는 input과 button을 JS로 불러온다.

const loginForm = document.getElementByID("login-form");
const loginInput = loginInform.querySelector("input");
const loginButton = loginForm.querySelector("button");

이제 input 태그에 값을 입력하고 button을 클릭 했을 때 페이지에 출력(console.log)이 되어야 한다.

값을 받아오기 전에 클릭 이벤트에 대한 작업을 먼저 해준다.

3. 이벤트 작업

1) 값을 전송해주는 매개체인 버튼에 Click 이벤트가 발생하는 것이므로

loginButton.addEventListener("click");

2) function 자리를 마련해주자

function onBtnClick(){

}

3)지금까지 입력한 것을 한 파일에 끼워맞춰준다

const loginForm = document.getElementByID("login-form");
const loginInput = loginInform.querySelector("input");
const loginButton = loginForm.querySelector("button");

function onBtnClick(){
}

loginButton.addEventListener("click");

4. 값 받아오기

페이지에서 사용자가 input 태그에 값을 입력한 값이 버튼을 클릭 했을 때 JS로 전달되어야 한다

자리를 마련해두었던 function에 값을 받아오는 코드 하나를 추가한다.

console.log(loginInput.value);

콘솔창을 켜고 input 태그에 값을 입력하면 내가 입력한 내용이 콘솔창에 표시되는 것을 알 수 있다

const loginForm = document.getElementByID("login-form");
const loginInput = loginInform.querySelector("input");
const loginButton = loginForm.querySelector("button");

function onBtnClick(){
	console.log(loginInput.value);
}

loginButton.addEventListener("click");

[CSS] transition

1132 — Tue, 17 Jan 2023 11:54:52 +0900

css transition들은 시작 - 종료까지 특정 속성의 변화만 보여준다.

이 루프(반복)을 시각화하기 위해서는 css animation을 참고

transition-property

css 속성 이름 명시

transition-duration

트랜지션이 일어나는 지속 시간 0.5s ~

trasition-timing-function

중간값을 계산하는 방법을 정의하는 함수 명시

cubic bezier의 4개 꼭짓점으로 정의

ease, linear, step-end, steps(4, end)

트랜지션을 완료 후에 발생하는 이벤트 감지하기 transitioned

propertyName

트랜지션이 완료된 속성의 이름을 나타내는 문자열

이벤트는 자바스크립트에서 element.addEventListener() 메소드로 모니터링

이름.addEventListener("transitioned", updateTransition, true);

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

[바닐라JS] 클릭하면 컬러 변경

1132 — Wed, 4 Jan 2023 16:34:34 +0900

이전에 글자를 바꾸는 실습에 이어, 이번에는 컬러 바꾸는거 도전

글자가 black이었다가 blue로 바뀐다

See the Pen Untitled by riverlee1132 (@riverlee1132) on CodePen.

[CSS] 네이버 블로그에 위젯 달기

1132 — Wed, 4 Jan 2023 15:51:41 +0900

네이버블로그는 꾸미는 기능이 티스토리에 비해 굉장히 제한적이다. 예전보다는 좋아지긴 했는데 여전히 레이아웃에 제한이 많다. 그나마 사용자가 선택할 수 있는 옵션 중에서는 위젯을 붙이는 것 정도 ...

이런 배너를 만들어서 넣었다

관리 > 꾸미기 설정 > 레이아웃 위젯 설정

레이아웃 위젯 설정 가장 아래에 <위젯 직접 등록> 버튼이 있다.

아니 네이버 블로그에 위젯 달 수 있게 된지가 언젠데 아직도 'BETA'를 붙이고 있는건지...ㅋㅋㅋ

클릭하면 팝업창 하나가 뜨는데 그 곳에 작성한 코드를 붙여넣으면 된다.

HTML과 CSS를 입력하면 되는데, CSS를 별도로 입력하는 구조가 아니라서 인라인 구조로 작성한다.

위젯 코드 ↓

See the Pen 네이버 블로그 링크 위젯 by riverlee1132 (@riverlee1132) on CodePen.

[바닐라JS] 클릭하면 텍스트 변경

1132 — Wed, 4 Jan 2023 15:36:20 +0900

HTML

<section id="part">
  <span>안녕하세요</span>
  <button type= "button" id="go">클릭!</button>
</section>

CSS

section{
  text-align:center;
  margin-top: 7%;
}

span{
  font-size: 60px;
  display:block;
}

button{
  width: 60px;
  height: 34px;
  margin-top: 30px;
}

const text = document.querySelector("#part span");
const btn = document.querySelector("#go");

function change(){
  text.innerText = '피카츄입니다'
}

btn.addEventListener("click", function(change){
  if(text.innerText === '안녕하세요'){
    text.innerText = '피카츄입니다';
  } else text.innerText = '안녕하세요';
});

버튼을 클릭하면

안녕하세요 > 피카츄입니다 > 안녕하세요 > 피카츄입니다 .... 반복

화면에서 사용하는 단위

1132 — Wed, 7 Dec 2022 14:40:38 +0900

픽셀
단순히 화면의 크기에 영향을 받는게 아니라 화면의 밀도에 영향을 받는다. 같은 크기의 화면이더라도 화면의 밀도가 높은 화면에서는 오브젝트가 작게, 밀도가 낮은 화면에서는 오브젝트가 크게 보인다.

ppi
1인치당 표시되는 픽셀의 수. 화면 1인치당 픽셀의 수가 높을 수록 밀도가 높고, 픽셀의 수가 적을 수록 밀도가 낮다. 가로 픽셀 수, 세로 픽셀 수를 곱한 '면'이 '해상도'가 된다.
ex: FHD 크기인 1920 x 1080 해상도는 가로 1920픽셀, 세로 1080 픽셀이므로 약 210만 픽셀을 가지고 있다.

즉, 모니터의 해상도가 높아질 수록 내가 디자인한 100px이 작게 보이는 것이다. 우리가 흔히 '고화질 이미지'라고 하는 파일들의 해상도를 보면 가로 2560 이상인 것이 많은데 그만큼 이미지가 표현할 수 있는 픽셀이 많아서 더 세밀한 표현을 할 수 있다는 의미이다. 어도비 일러스트레이터로 새 문서를 만들 때 ppi를 선택하도록 되어 있는데 일러스트레이터 또는 디자이너가 위와 같은 이유 때문에 150ppi, 300ppi로 작업하게 된다.

dp
화면 밀도에 따라 다른 비율로 보이는 픽셀과는 다르게, 동일한 비율로 표시해주는 단위이다. 안드로이드 OS에서 사용한다.

[머티리얼] large screens

1132 — Tue, 6 Dec 2022 14:48:14 +0900

머티리얼 디자인3 스크린 페이지 내용 읽으면서 요약

0. Design for large screens

landscape(가로)와 portrait(세로) 방향의 디바이스를 위한 설계. 레이아웃 그리드를 조정할 때 내용과 요소들을 디바이스의 크기에 맞춰 유동적으로 사용할 수 있는 컬럼으로 나눈다.

1.반응형 레이아웃 그리드

1.1. 컬럼, 거터 그리고 마진

반응형 컬럼 그리드는 body 영역 안에 있는 요소들의 편리한 레이아웃 구조를 위해 컬럼, 거터 그리고 마진으로 만들어졌다. 스크린 크기와 방향에 따른 논리적이고 일관된(logical and consistent) 레이아웃 경험을 만들기 위해 컬럼 그리드에 컴포넌트, 이미지 그리고 텍스트가 정렬된다. body 영역의 크기가 커지거나 줄어들면(grows or shrinks) 그리드 컬럼의 수가 그에 따라 변한다.

1.2. 구분점(breakpoints)

구분점은 반응형 레이아웃 요구사항을 준수하는 스크린의 크기를 정의한다. 머티리얼의 구분점 범위는 레이아웃에 사용된 거터값 뿐만 아니라 컬럼과 마진의 갯수를 고려한다.

Breakpoint range

Portrait

Landscape

Window size class

Columns

Minimum margins

머티리얼 디자인의 대부분 구성요소는 8dp 단위로 크기가 조정되고 나열되므로 일관된 시각적 리듬을 제공한다. Smaller elements, such as icons, can align to a 4dp grid, while typography can fall on a 4dp baseline grid. This allows each line’s typographic baseline to be spaced in increments of 4dp from a neighbor.

2. 레이아웃 구조(anatomy)

큰 화면 레이아웃은 다음 3가지 주요 영역을 포함한다. 내비게이션, 앱 바, body

2.1. 내비게이션

내비게이션에는 drawer 또는 rail과 같은 탐색 목적의 구성요소들이 있다. 내비게이션 영역은 확장시 360dp, 축소시 80dp의 폭을 일정하게 유지한다. 레이아웃의 여백이 48dp 미만이면 탐색 영역에 맞게 본체 영역의 너비가 줄어들 수 있다. (예: 화면 너비 600 - 839dp)

2.2. Body

body 영역은 3가지 파라미터에 따른 크기 조절 값을 사용한다.

Vertical and Horizontal dimensions, Number of columns, Margins

ex: 가장 작은 구분점에서 마진은 16dp 값을 가진다. 레이아웃 크기가 증가하면 body 섹션이 화면 너비에 비례하여 확장되는데 이 때 첫번째 구분점(small; 600dp width)에 도달하면 마진이 32dp로 증가한다. body의 너비가 840dp가 되면 마진은 최대 200dp로 증가한다. 최대 너비에 닿으면, body 영역은 다시 한번 반응하여 수평으로 계속 scale 된다.

2.3. Containment

Containment는 이미지와 캡션 같은 내용을 공유하는 관련 요소들을 연결하는 방법이다. 요소들을 시각적으로 연결하고 관련 없는 요소와 구별하기 위해 경계를 설정하는 그룹핑의 형태이다.

암묵적 및 명시적 containment

각 컨테이너는 텍스트 크기를 쉽게 조정하고 읽을 수 있도록 반응형 치수를 사용한다.

암묵적 containment는 암시적인 boundary 또는 container를 부여하는 내용을 그룹핑한다. 암묵적인 containment를 사용하여 콘텐트를 그룹화하고 여러 요소에 미묘한 결합력을 부여한다.

명시적 containment는 컨테이너의 boundaries를 보여주고 해당 항목을 '탭' 할 수 있음을 보여준다. 또한 무언가를 강조하기 위해서도 쓰인다. 명시적 containment 방법에는 그룹 아웃라인과 elevation 레벨을 추가하는 것을 포함한다.

컨테이너 텍스트

When adapting for large screens, apply fluid container dimensions to components that contain type so, allowing typography to adjust.

컨테이너 속성

컨테이너가 다른 스크린 크기에 맞게 조절되므로 컨테이너의 위치와 정렬을 고려해야 한다. 컨테이너와 그 요소들은 부모 컨테이너의 scale에 따라 좌, 우 또는 중앙으로 정렬될 수 있다. 고정 위치도 가능하다.

컨테이너들은 다른 컨테이너 안에 배치될 수 있다. (body 컨테이너 안에 카드와 캐러샐이 함께 있거나 카드 안에 리스트 아이템이 있는 것처럼)

3. Component adaptation

시각적 presentation에 대한 변화를 묘사한다. (padding, 크기, 레이아웃, 정렬) 또는 다른 구성 요소로 전환하여 디바이스의 크기와 사용 케이스에 적합하게 만든다. (ex: 동일한 요소지만 접은 세로 화면 뷰와 접지 않은 가로 뷰에서 각각 다른 모습을 가진다.)

레이아웃 컨테이너 또는 컴포넌트의 크기를 늘리거나 줄일 때, 그 위치와 정렬이 바뀌는 것을 고려해야 한다. 내부 요소들은 부모 컨테이너의 scale에 따라 왼쪽, 오른쪽 또는 중앙에 모서리에 맞추거나 고정 위치를 가질 수도 있다. (ex: 내비게이션 drawer에 있는 FAB)

* FAB: floating action button

아이콘 버튼의 경우에는 버튼 안에 있는 아이콘과 텍스트 레이블이 서로 고정된 상태로 유지될 수 있고, 버튼이 수평으로 조정될 때 버튼 안에서 중심을 유지할 수 있다.

3.1. Visual presentation

visual presentation은 가장 공통적인 adaptaion 방법이다. 모바일 디바이스의 텍스트 목록은 태블릿과 같은 더 큰 화면에 잘 맞도록 마진, 수직 간격, 밀집도를 조정할 수 있다.

3.2. Component swapping

레이아웃이 화면의 크기에 따라 변경되므로 유사한 기능을 가진 요소를 교환할 수 있다. 이 것이 큰 규모의 변화를 위한 레이아웃을 조정할 수 있게 한다. (ex: 작은 화면에서 큰 화면으로 바뀔 때 기능과 기본 콘텐츠의 노출을 유지하면서 다른 다이얼로그 유형으로 바꿀 수 있다.)

3.3. Component group

구성요소를 교환할 때는 구성요소 그룹 목록에서 기능적으로 동일한지 확인한 후 교환한다.

Component Type

Mobile Option

Tablet and Foldable Option

Laptop Option

4. Canonical layouts

세 가지 표준 레이아웃을 사용하여 공통 요소를 구성할 수 있다. 각 레이아웃은 공통 사례와 구성 요소를 고려하여 앱이 화면 크기와 구분점에 맞추는 방법을 해결한다.

4.1. 목록 세부 정보 보기(List-detail view) 레이아웃

사례

문자 메시지 + 대화
파일 브라우저 + 폴더 열기
뮤지컬 아티스트 + 앨범 상세

목록 세부 정보 보기는 콘텐츠를 검색하고 세부 정보를 빠르게 보는 것에 적합하고 정보 계층(information hierarchies)을 지원한다. 두 개의 컬럼을 사용하는데 한 컬럼은 목록 또는 아이템 그룹을 위한 것이고 다른 하나는 상세 보기를 위한 영역이다. 두 영역을 나눌 때 작은 창의 크기에서는 동일한 비율을 사용하고, 큰 창 크기에서는 비대칭 비율로 나눌 수 있다.

Breakpoint range(dp)

Portrait

List detail

Landscape

List detail

폴더블 디바이스에서 세로 방향으로 전환할 때는 하나의 열을 사용하여 작은 화면 차원에서 콘텐츠가 편안하게 흐르도록 하는 것이 좋다.

4.2. 보조 패널(Supporting panel) 레이아웃

보조 패널은 스크린 확장을 위한 한 방법이다. primary와 secondary focal points가 동일한 중요성을 가지므로 목록 세부 정보 보기 레이아웃과는 다르다. 이 레이아웃은 seamless hinge 디바이스에 적합하다.

사례

생산성
문서 편집 및 주석 달기
콘텐츠 및 미디어 검색

보조 패널 레이아웃은 focus panel 그리고 supporting panel의 관계성을 만든다. 이 레이아웃은 화면의 3분의 2를 컨테이너에 사용하고 남은 공간에 보조 패널을 놓아 짝을 이룬다. 더 작은 디스플레이에서는 supporting panel이 focus panel 아래에 위치할 수 있다.

4.3. Feed 레이아웃

Feed는 새소식과 소셜 콘텐츠의 공통적인 레이아웃이다. feed는 그리드 컴포지션을 사용하여 콘텐츠의 탐색과 검색을 활성화한다. 피드 레이아웃은 카드 및 목록을 활용하여 다른 콘텐츠를 표시할 수 있다. 뉴스나 사진과 같은 콘텐츠 중심의 경험을 지원한다. 카드, 목록 및 배너와 같은 구성 요소는 앱의 콘텐츠에 대해 여러 접근 방법을 제공한다. 또한 다양한 비율과 크기를 가진 콘텐츠들을 담기에 충분히 유연한 레이아웃이다. 피드 레이아웃은 모든 디바이스 방향에 잘 작동한다.