# grid

272개의 포스트
post-thumbnail

Grid 정리

img{min-width: 50%; max-width: 80%;} Grid란? >복잡한 레이아웃을 간단하게 만들 수 있는 2차원 레이아웃 모델. 그리드 레이아웃은 웹 페이지의 레이아웃을 효과적으로 구성하기 위한 강력한 도구로, 요소들을 행과 열의 그리드로 정렬할

2023년 11월 21일
·
0개의 댓글
·

✏️ [학습 블로깅] CSS 강의 2. Grid (2)

💭 오늘은 이전 포스트 Grid Container Properties에 이어 Grid Item Properties에 대해 알아보겠습니다. 📌 Grid Item Properties ✏️ grid-row-start 및 grid-row-end 그리드 항목이 수직 축

2023년 11월 19일
·
0개의 댓글
·

✏️ [학습 블로깅] CSS 강의 2. Grid (1)

오늘은 CSS 강의의 두번째 시간 Grid에 대해 알아보겠습니다. 내용이 많아서, grid container properties와 grid item properties를 두개의 글로 나눠야 할것 같습니다. 오늘은 grid container properties에 대해 알

2023년 11월 16일
·
0개의 댓글
·

CSS Grid 개념 정리

1. Grid란? 2. Grid 속성 정리

2023년 11월 16일
·
0개의 댓글
·

Grid-Layout (부모요소 속성)

출처: 드림코딩 유튜브 이곳에 예제 코드를 쳐보며 개념을 하나하나 알아보자

2023년 11월 13일
·
0개의 댓글
·

CSS layout grid

본 목적과 다르게 테이블로 레이아웃을 만들던 시대.여백을 투명한 GIF 이미지로 만듬.테이블 border을 0으로 두고 이미지와 텍스트를 넣어서 배치여러장의 HTMl 페이지를 '프레임'을 사용하여 한 페이지에 결합해 레이아웃을 만듬float, clear, positio

2023년 11월 7일
·
0개의 댓글
·

프론트엔드 데브코스 TIL #DAY35

> 📚 23.11.06 > * Grid * Transform * Columns * Filter * CSS nesting과 &(Ampersand)

2023년 11월 6일
·
0개의 댓글
·

CSS grid 정리 및 flex와 차이점

요소의 속성을 grid로 변경https://velog.velcdn.com/images/yaejin9503/post/2e235827-a26b-423b-9e48-37eb22f81994/image.pnggrid의 행의 개수 및 크기를 지정할 수 있다.fr❓funct

2023년 11월 6일
·
0개의 댓글
·

프론트엔드 데브코스 TIL #DAY34

> 📚 23.11.03 > * Float * Position * Flex * Grid

2023년 11월 5일
·
0개의 댓글
·

flex vs grid

Flexbox: 주로 단일 축(행 또는 열)을 따라 아이템을 배치하는 데 사용됩니다. 주로 리스트, 메뉴, 사이드바와 같은 요소들을 정렬할 때 유용합니다.Grid: 2차원 그리드로 요소를 배치할 수 있으며, 행과 열을 모두 제어할 수 있습니다. 레이아웃을 더 복잡하게

2023년 10월 30일
·
0개의 댓글
·
post-thumbnail

(CSS) Grid란?

grid에 대해서 알아보자! (속성정리)

2023년 10월 26일
·
0개의 댓글
·

TIL 23.10.25

이번 개인과제때 나는 colums를 1fr씩 5개로 강제로 할당하여 코드를 작성했다.반면 해설강의에서는 좀 더 반응형에 가깝게 하는 방법을 배울 수 있었다.이렇게 코드를 작성할 경우 브라우저 화면의 크기에 맞게 카드 갯수를 조절할 수 있다.html parser가 문서를

2023년 10월 25일
·
0개의 댓글
·
post-thumbnail

1. Grid란?

Flex는 한 방향 레이아웃 시스템 이다. (1차원)Grid는 두 방향(가로-세로) 레이아웃 시스템 이다. (2차원)플렉스박스를 display: flex; 으로 선언하여 썼던 것처럼, 그리드도 display:grid;를 선언해서 쓸 수 있다.일단 컨테이너가 될 요소에게

2023년 10월 20일
·
0개의 댓글
·

반응형 Grid에서 Javascript를 사용하여 row(행), column(열) 개수 구하는 방법

반응형 Grid에서 Javascript를 사용하여 row(행), column(열) 개수 구하는 방법

2023년 10월 18일
·
0개의 댓글
·

CSS Grid 레이아웃

간단한 Grid 레이아웃 만들기 Grid 레이아웃은 말그대로 격자를 만드는 레이아웃이다. 부모에 display : grid를 주면 자식 들은 전부 격자처럼 진열된다. grid-template-columns는 격자의 열 너비와 갯수 grid-template-row

2023년 10월 10일
·
0개의 댓글
·

tailwind css grid

업로드중..

2023년 10월 5일
·
0개의 댓글
·
post-thumbnail

[Nexacro | 넥사크로] 삼항연산자로 조건별 grid displaytype 설정하기

조건 ? 'true일경우' : 'false일경우'컬럼명은 따옴표 없이 그냥 작성displaymode에 해당하는 것은 따옴표로 써야함normal : 일반none : 없음!

2023년 9월 30일
·
0개의 댓글
·
post-thumbnail

[넥사크로 | Nexacro] grid 폭 크기 자동 맞추기

grid properties-action - autofitsize : col로 설정

2023년 9월 30일
·
0개의 댓글
·
post-thumbnail

[Nexacro | 넥사크로] Grid 컬럼 형식 | 이벤트 설정

body-row1-text에서 표현식 선택 후 currow+1calendarcontrol : 날짜 입력이 필요한 경우date : 날짜만 보여주는 경우(입력x)데이터셋.getCount("컬럼명")grid에 바인딩된 데이터셋에 이벤트 설정

2023년 9월 30일
·
0개의 댓글
·
post-thumbnail

[넥사크로 | Nexacro] Grid에서 0 표시하기 | 소수점이하 버리기

text : nexacro.floor(값,자리수)소수점 이하일경우 자리수를 0으로 설정

2023년 9월 30일
·
0개의 댓글
·