본문 바로가기

전체 글260

(11)CSS_레이아웃_3_Grid-3-원하는 셀에 특정 요소 배치하기_방법1 : 특정요소 셀렉터에 grid-row, grid-column 속성 값 : 시작점 / span 얼만큼 ＃Default 상황 :Div Container > Div Box 5개Container Box : display : grid , grid - template : repeat(4,1fr) / repeat(5,1fr) // 세로 4분할, 가로 5분할최종 셀의 개수 : 20개＃알아야 할 개념 :● 개념1_ grid-line : 1~셀의 개수 (대각선 반대쪽 : -7=셀의 개수 ~ -1 )● 개념2_ 특정 요소를 원하는 셀에 배치 하기○ 그냥 크기 조절은 없이, 옮기기만 2  X 3 칸에 배치만 하고 싶다면, => 특정 요소 셀렉터 CSS 시트에grid-column(가로) : 2 ;grid-row(t세로) : 3 ;○ 배치후, 크기 조절하기2  X 3 칸에 배치 + width : 3칸 ,  height :2칸의.. 2024. 11. 5.
(10)CSS_레이아웃_3_Grid-3-grid-auto-rows/columns ＃Default 상황 :Div Container > Div Box 15개Container Box : display : grid ,  grid-template:    repeat(3, 1fr) /    repeat(3, 1fr);=> 가로 3개 / 세로 3개 만 했기에, 15개 중 , 9개의 셀만 비율에 맞춰져있고, 나머지는 걍 저렇게 내팽개 쳐있다.※그렇다면, 나머지 셀의 px나 비율을 자동으로 적용시킬라면?개념1_ 부모 Box 에 rows/columns 중 한쪽만 셀을 나눴을 경우, 다른 한쪽의 셀 자동 나누기 => grid - auto - rows/columns 속성● 언제 써야함?○ 상황1_ columns/rows 둘 중 한쪽만 셀 나누기 적용되어있을 때, ○  상황2_ 셀나눈 요소 개수보다 부모 .. 2024. 11. 5.
(9)CSS_레이아웃_3_Grid-2-px단위와 fr단위,minmax()메소드,repeat()메소드,셀에 gap 주기 ＃Default 상황 :Div Container > Div Box 5개 (1,2,3,4,5)Container Box : display : grid , grid-template-rows : 100px 300px 100px / grid-template-columns : 200px 200px 100px상황1_ 2-px 단위 vs fr단위● 만약 Container Box의 width : 100% (브라우저 창 기준) 된다면, 창을 축소 확대할때 어떻게 될까셀의 크기는 고정된 px로 설정됐기 때문에, 튀어나온다.따라서 상대적 비율제로 하고싶다면, 맞춤 단위가 존재한다, ●  grid - template : 100px 300px 100 / 200px 200px 100px=>  grid - template : 1fr.. 2024. 11. 5.
(8)CSS_레이아웃_3_Grid-1-grid 속성적용 방법 : grid-template(-columns/rows) + repeat()메소드 1-display : grid + grid-template-columns/rows＃Default 상황 :Div Container > Div Box 5개 (1,2,3,4,5)＃알아야 할 개념 :● 개념1_ display : grid 의 정의부모 Box에 요소들을 쇼핑몰이나, 체스판 마냥 일정한 크기로 판을 나누어 배치하는 속성● 개념2_ display : grid 의 사용방법1 :순서1_ 부모 Box에 display : grid; 적용순서2_ 부모 Box에 가로, 세로 셀 나누기         -  세로 => grid - template - rows : a px, b px, c px .. ;         -  가로 => grid - template - columns  : a px, b px, c px ... 2024. 11. 4.

티스토리툴바