코딩하는 김딸기

Grid로 만드는 범용 Wrapper Layout Class /*변수*/:root{  --wrapper-width:960px;  --wrapper-padding:20px;}/* Layouts */.l_wrapper {  max-width: var(--wrapper-width);  margin: 0 auto;  padding: 0 var(--wrapper-padding);} .l_grid_wrapper{  display: grid;  grid-template-columns:   [start]     minmax(var(--wrapper-padding), 1fr)   [wrapper-start]     minmax(0, var(--wrapper-width))   [wrapper-end]     minmax(..

html 마크업 설정DOCTYPE html>html>  head>    title>Coffeetitle>    link rel="preconnect" href="https://fonts.googleapis.com">    link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>    link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">    link rel="stylesheet" href="style.css">  head>  body>    div class="conta..

컨텐츠가 그리드의 컨테이너 블록보다 커 튀어나갈 경우=>overflow:hidden; / overflow: scroll 사용 =>혹은 minmax사용!          /*2개의 칼럼 예약-min-width:0 초기화하는 기법=>그리드 콘태아너에서의 안전성 확보        min-width: auto가 되면 컨텐츠의 크기때문에 부모의 크기가 커지므로 이를 방지하기 위해 0으로 만듦 */        grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);        grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) 1. grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);이 코드는 ..

그리드-> 부모 요소에서 템플릿을 지정하는 것 auto ->column기준에서, 내부컨텐츠 너비+stretch(컨텐츠 제외하고 가용공간을 n등분)1fr -> 그리드 커테이너 너비 기준에서 내부 컨텐츠 관계없이 비율로 책정( 컨텐츠 포함해 무조건 n등분)  1. grid-template-columns역할: 그리드의 열의 크기와 개수를 명시적으로 정의합니다..container {    display: grid;    grid-template-columns: 100px 200px 1fr;}해석:이 예제에서 .container는 3개의 열을 가진 그리드 컨테이너입니다.첫 번째 열의 너비는 100px로 고정되어 있습니다.두 번째 열의 너비는 200px로 고정되어 있습니다.세 번째 열은 1fr로 설정되어 있으며, ..

CSS 변수 /*css variable*/:root{    /* Color */    /* CSS Variable을 활용하여 색상 정보 체계적 관리 */    --color-white:#fff;/*팔레트 설정해 특정 색깔 등록*/    --color-gray-50:#999;    --color-gray-80:#222;    --color-gray-90: rgb( var(--color-gray-90-rgb) / 1 );     /* rgb 별도 작성 */    --color-gray-90-rgb: 17 17 17; /* #111 */    --color-black:#000;    --color--red: #FF2E00;     /* Fonts */    --font-en:'arial';    --font-..

frog예제 복습DOCTYPE html>html>    head>        title>My Bucket Liststitle>        link rel="stylesheet" href="teststyle.css">    head>    body>        div class="playground">            div class="frog">frogdiv>            div class="frog">frogdiv>            div class="frog">frogdiv>            div class="frog">frogdiv>            div class="frog">frogdiv>                    div>    body>html>body..

positionposition 속성은 웹 페이지 요소의 위치를 제어하는 데 사용됩니다. 이 속성은 요소의 배치 방식을 결정하고, 구체적인 위치 지정이 가능하게 합니다. position: static초기값: 모든 요소는 기본적으로 position: static 상태입니다. 이 경우, 요소는 문서 흐름에 따라 배치되며, 좌표 속성(top, right, bottom, left)을 사용할 수 없습니다. position: relative기본 흐름 유지: position: relative는 요소를 자연스러운 문서 흐름내 배치하되, top, right, bottom, left 속성을 사용해 그 위치를 조정(offset)할 수 있게 합니다. 요소가 원래 차지하고 있던 공간은 그대로 유지되며, 다른 요소들은 영향을 받지..

flex-direction  flex-direction속성으로 Flex Container의 동작 방식을 바꿀 수 있습니다.Flex Container요소는 기본적으로 메인축 (Main Axis)과 교차축 (Cross Axis)로 이루어져 있습니다.위와 같은 값을 이용하여 이 메인축과 교차축의 작동 방식을 바꿉니다.flex-direction: row: 왼쪽에서 오른쪽으로의 방향성을 가지고 있습니다. Flex Items요소들이 가로로 배치 됩니다. (direction속성에 영향)flex-direction: row-reverse: row값의 반대, 일반적으로 오른쪽에서 왼쪽의 흐름으로 배치됩니다.flex-direction: column: 메인축 방향이 위에서 아래로 바뀌게 됩니다. 이에 맞춰 교차축 방향도 바뀌..