# grid
TIL W1.D.5
2023.03.16일(목) 드디어 첫 주가 끝났다. 5일 동안 이렇게 많은 내용을 배울 수 있다니.. 여태 뭐하고 살았지?ㅋㅋ 블록체인에 대한 개념을 배우는 건 마치 철학을 배우는 듯한 느낌이 드는 건 왜인지 모르겠지만 너무 재밌다!!!😂😂😂 블록체인 수업 시간
학습 요약 - HTML/CSS 정리 1
학습 정리 기록용! visual studio code 자동완성 및 단축키 / style속성 우선순위 / 폰트 단위 px, em, rem / grid 사용법
230224_TIL
flex1차원적 구조비교적 작은 단위에 적합기획의 변경 가능성이 있는 경우에 적합grid2차원적 구조큰 규모에 적합반응형 디자인을 효율적으로 구현display: grid grid-templategrid-template-rows(행) : 1fr 2fr 200pxgrid
Grid
flex는 1차원적인 구조 를 가지고 있다.row 혹은 column 중 택1 하여 배치 방향을 결정할 수 있다.반면 grid는 2차원적인 구조를 가지고 있다.row와 column 방향의 배치 방식을 동시에 설정할 수 있다.1\. 요소의 속성을 grid로 변경한다.gri
스터디 관리 프로젝트 - grid layout + font 적용
전체적인 UI 자체가 구획으로 나뉘어져 있다는 생각이 들어, grid layout이 제일 먼저 떠올랐다. 처음 적용해보는 것이라 어려웠지만.... 일단 해보고 수정해야지!처음엔 이렇게 시작했다.이제 각각을 컴포넌트로 수정해주고크게는 container, grid로 감싸주
[보충] CSS - grid
두 방향(가로-세로) 레이아웃 시스템 (2차원)flex와 비슷하지만 더 복합적인 레이아웃 표현 가능하다. 부모요소 container 에 설정해주는 요소 display: grid 컨테이너가 주변요소들과 어떻게 어울어질지에 대한 결정grid-template-rows 행의
[CSS] grid
📌 grid개념정리 아이템을 자유자재로 배치할 수 있는 css layout에는 flex와 grid가 있다. 아이템을 그리드 형태로 배치할때나 웹사이트 구조 전체를 그리드 형태로 잡을 수 있다. 📍 grid에 적용 > grid-template-columns gri
TIL / CSS 기초 : 단위(px, em, rem), CSS 레이아웃 구성 방법(flex, grid), font-face
< 2023.02.17 TIL > 1. 단위 - px, em, rem 2. CSS 레이아웃 구성 방법 - flex, grid 3. font-face
다크 모드에 색상이 바뀌는 계산기 만들기 [HTML/CSS 3]
오늘은 HTML과 CSS로 라이트/다크 모드에 따라 색상이 바뀌는 계산기를 만들어 보겠습니다!
230213 팀프로젝트 5
으아아오늘은 힘냈다...ui가 변경된 부분이 flex가 아닌 grid로 나누는게 편한 디자인이라서 좀 걱정이긴하지만... 14일에 댓글 기능과 함께 찾아보기로 했다.아마 사이드바처럼 나누는 느낌으로 한다면 좀 괜찮지 않을까 싶긴한데...자신은 없다...ㅎㅜㅜ그래도 데드
fr(fraction) CSS - grid 정리
CSS - grid 공부중에, 1fr단위가 많이 나오던데, 헷갈려서 정리를 해보고자 한다.먼저 내가알던 %를 구현해보면4개 div블럭을 꽉채워 넣고싶으면, 4 / 100 = 25로 각 width값을 25로 넣어주면 된다.그러나, 매번 계산해아되는 귀찮음이 있다.또한,
grid로 나눈 레이아웃 활용하기
css에서 grid로 만들어진 칸마다 이름을 지정해줄 수 있다.1.html에서 나눌 부분들을 작성하여 class 속성을 준다.2.css에서 grid-template-areas 속성을 입력하여 이름을 지정해준다.주의할 점은 속성의 맨 뒤에만 세미콜론을 입력한다.css에서
레이아웃 만들기 - Grid
웹 브라우저에서 레이아웃 만드는데는 여러가지 방법이 있다.Grid는 이제까지 나온 방법들 중 가장 최신의 방법이다.html에서 class 속성을 부여한다.css에서 girdbox에 grid 속성을 부여한다.그리고 이어서 그리드를 나눠주는 속성을 부여한다.여기서 나오는
[css] 캐러셀..인데 이제 큐카드 넘기는 느낌을 얹은
스킬부분 레이아웃에 대해 고민을 많이했다.대충 키워드만 나열해보자면1\. 전구2\. 리본3\. horizontal4\. 카드카드는 awwward 구경하다 발견한 아래 홈페이지를 감탄하면서 보다가 시도!https://chainzoku.io/드롭다운? 뭐라해야할지