본문 바로가기

전체 글234

(13)CSS_레이아웃_3_Grid-3-2-비트코인_프로젝트 : grid-area,grid-template-areas를 사용하는 궁극적인 이유 ※ 연습문제  :  ● 문제 조건 : 앞에서 배운 포지션, 플렉스박스, 그리고 그리드를 사용해서 요소들을 위 스크린샷처럼 배치해 보세요. 필요하면 태그를 추가하면서 정렬하셔도 좋습니다. 이번 레슨에서는 포지션, 플렉스박스, 그리드를 사용해서 사이트 전체를 배치해 보는 것이 목표이니까 세세한 여백이나 크기는 다르더라도 괜찮습니다. ● 해결 방법 (핵심만) :○ 과정1 : 구조 파악부모Box(main) 내의 컨텐츠 3개 : Section.prices Box , Section.assets Box, Section.order Box○ 과정2 : grid-area와 grid-template로 푸는 이유와 전략이유 :★ 저렇게 빈공간이 있는 구부정한 구조에 grid-area와 grid-template로 푸는 것이 .. 2024. 11. 5.
(12)CSS_레이아웃_3_Grid-3-원하는 셀에 특정 요소 배치하기_방법2 : 각 요소에 이름을 붙여, 셀에 기입하여 배치 : grid-area 속성, grid-template-areas : "~~" ; ＃알아야 할 개념 :● 개념_ grid - area , grid-template-areas 사용법순서1_ : 부모 Box 내 모든 요소들을 " grid-area : 이름 ; " 으로 각 요소의 이름 붙이기순서2 _ : 요소에 전부 이름을 지정했다면, 부모 Box에 grid-template-areas = "요소 1x1 이름 요소 1x2 이름2 ...""요소 2x1 이름 요소 2x2 이름2 ...".."요소 nx1 이름1 요소 nx2 이름2 ..." ;문법으로 속성값 대입한다.○ Ex1 _ 순서1 : 요소들 이름 지정     - red.Box 셀렉터 => grid-area : R; //요소이름을 R로 지정      -  green.Box 셀렉터 => grid-area : G //요소이름을 G로 지정     .. 2024. 11. 5.
(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.

티스토리툴바