data life

아이템 그룹 세로 정렬 : align-content .container { align-content: stretch; align-content: start; align-content: center; align-content: end; align-content: space-between; align-content: space-around; align-content: space-evenly; } 1️⃣ stretch HTML 삽입 미리보기할 수 없는 소스 2️⃣ start HTML 삽입 미리보기할 수 없는 소스 3️⃣ center HTML 삽입 미리보기할 수 없는 소스 4️⃣ end HTML 삽입 미리보기할 수 없는 소스 5️⃣ space-between HTML 삽입 미리보기할 수 없는 소스 6️⃣ spac..

세로 방향 : align-items .container { align-items: stretch; /*default*/ align-items: start; align-items: center; align-items: end; } 1️⃣ stretch HTML 삽입 미리보기할 수 없는 소스 2️⃣ start HTML 삽입 미리보기할 수 없는 소스 3️⃣ center HTML 삽입 미리보기할 수 없는 소스 4️⃣ end HTML 삽입 미리보기할 수 없는 소스 가로 방향 : justify-items .container { justify-items: stretch; /*default*/ justify-items: start; justify-items: center; justify-items: end; } 1️⃣..

grid 각 셀의 영역 지정 grid-column-start grid-column-end grid-column grid-row-start grid-row-end grid-row Grid 아이템(item)에 적용하는 속성으로, 각 셀의 영역을 지정 Grid 라인 번호를 이용해서 column과 row의 범위를 결정 .grid { display: grid; gap: 10px; grid-template-columns: repeat(4, 100px); grid-template-rows: repeat(4, 100px); } .header { grid-column-start: 1; grid-column-end: 5; /*grid-column: 1 / 5;*/ /*grid-column: 1 / -1;*/ } .cont..

영역 이름으로 그리드 정의 각 영역(Grid Area)에 이름을 붙이고, 그 이름을 이용해서 배치하는 방법 .container { display: grid; grid-template-columns: repeat(4, 200px); grid-template-rows: 100px repeat(2, 200px) 100px; grid-template-areas: "header header header header" "content content content nav" ". . . ." "footer footer footer footer"; } HTML 삽입 미리보기할 수 없는 소스 빈칸은 마침표(.) 나 “none”을 사용하면 되고, 마침표의 개수는 여러개를 써도 됨! ⭐️ 중요 ⭐️ >> 해당 아이템 요소에 ..

Grid 간격 생성 column-gap row-gap gap >> Grid cell 사이에 간격을 만들어 줌 .container { row-gap: 10px; /* row의 간격을 10px로 */ column-gap: 20px; /* column의 간격을 20px로 */ gap : 10px 20px; /* row 10px, column 20px */ } HTML 삽입 미리보기할 수 없는 소스

flex : 한번에 한 방향의 레이아웃 (1차원) grid : 한번에 두 방향(가로,세로) 레이아웃 (2차원) Grid flex보다 복잡한 레이아웃 표현이 가능 기본 구성 Grid Container(그리드 컨테이너) : Grid의 전체 영역 Grid Item(그리드 아이템) : Grid Container의 자식 영역 1 2 3 4 5 6 7 8 9 Grid 적용하기 .container { display:grid; } Grid 형태 grid-template-columns gird-template-rows 직접 크기 설정 / auto .container { display:grid; grid-template-columns:auto auto auto; grid-template-rows: 20px 40px 60p..

flex-grow 남는 행의 여백을 나눠서 채우는 방법으로 flex-grow 속성이 적용되지 않거나 속성 값이 0 인 경우 레이아웃 너비보다 item들의 너비 합이 더 작으면 아이템 우측 끝에 여백이 남게 된다. HTML 1 2 3 css .flex_box{ display: flex; flex-wrap: nowrap; gap: 0; padding: 10px; background-color: #e8e8e8; } .item{ min-height: 150px; flex-basis: 100px; } .item:nth-child(1){ background-color:beige; } .item:nth-child(2){ background-color: yellowgreen; } .item:nth-child(3){ b..

align-self HTML 1 2 3 CSS .page { width: 220px; height: 300px; border: 3.5px solid gray; display: flex; align-items: flex-start; color : white; } .page div { flex: 1; justify-content: center; border: 2px solid gray; } .page div:nth-child(2) { align-self: center; } HTML 삽입 미리보기할 수 없는 소스 order >> 플렉스 또는 그리드 컨테이너 안에서 현재 요소의 배치 순서를 지정 >> default 값 = 0 >> 음수값을 지정할 경우 default값보다 앞에 위치 HTML 삽입 미리보기할 수 ..

Position 문서 상 요소를 배치하는 방법을 지정함 position : static(default) position : fixed 뷰포트 기준으로 위치 설정 웹 페이지를 스크롤하여도 항상 같은 곳에 위치 position : relative : element가 처음 놓인 자리에서 상하좌우로 움직임 position : absolute relative한 부모를 찾을 때, 부모 기준 relative한 부모를 못 찾을 경우, body 기준

데이터 타입 원시 타입 number string boolean undefined null symbol 객체 타입 객체 함수 배열 등 원시 타입 1 . 숫자 타입 var integer = 10; // 정수 var double = 10.12; // 실수 var negative = -20; // 음의 정수 C나 JAVA의 경우, 정수와 실수를 구분하여 int, long, float, double과 같이 다양한 숫자 타입을 제공하는 반면 자바스크립트는 하나의 숫자 타입만 존재한다. 정수, 실수, 2진수, 8진수, 16진수 리터럴은 모두 메모리에 배정밀도 64bit 부동소수점 형식의 2진수로 저장되는데 자바스크립트는 2진수, 8진수, 16진수를 표현하기 위한 데이터 타입을 제공하지 않기 때문이다. 이 값을 참조하..