YG - 96년생 , 강아지 있음, 개발자 희망

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque pariatur omnis, odit, nisi error expedita, placeat quo sed voluptatem animi sint! Quia tempora maxime ut harum deserunt voluptate laboriosam omnis. Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, magni aliquam. Illum excepturi ab magnam corrupti doloribus architecto autem quae. Facere, minima! Iste ad impedit nobi..

1 2 3 4 5 1 2 3 4 5 1 2 3 4 5 1 2 3 4 5 1 2 3 4 5 .grid { display: grid; grid-auto-rows: 100px; background-color: gray; gap: 5px; height: 100vh; grid-template-columns: repeat(5, 100px); grid-template-rows: repeat(5, 100px); place-content: end center; /* place-content는 grid의 width와는 별개로 grid 자체의 위치를 설정할 수 있다. 수직 , 수평의 순서로 적어야 하며 justify-content align-items를 한번에 쓸 수 있는 단축어이다. */ } .item1 { backgro..

Log In Log Out styles.scss 파일 @import "_variable.scss"; @import "_mixins.scss"; @import "_extends.scss"; a { @extend %button; text-decoration: none; } button { @extend %button; border: none; } _extends.scss 파일 %button { font-family: inherit; border-radius: 7px; font-size: 12px; text-transform: uppercase; padding: 5px 10px; background-color: peru; color: white; font-weight: 500; } extends 의 장점은 스..

auto-fill 1 2 3 4 5 auto-fit 1 2 3 4 5 .grid { display: grid; grid-auto-rows: 100px; gap: 5px; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); /* autofill 의 경우 콘텐츠의 사이즈를 계산하여 column 에 빈 grid의 column 개수를 설정하는 경우이다. */ } .grid2 { display: grid; gap: 5px; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* autofit 의 경우 여백없이 콘텐츠를 stretch 하여 column을 채우는 경우이다. */ grid-auto-ro..

1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4 minmax 적용 전 .grid { display: grid; height: 50vh; gap: 5px; grid-template-columns: repeat(10, 1fr); grid-template-rows: repeat(4, 100px); } .header { background-color: aqua; } .content { background-color: brown; } .nav { background-color: chocolate; } .footer { background-color: darkgreen; } minmax 적용 후 .grid { display: grid; height: 50vh; gap: 5px; grid-template-c..

.grid { display: grid; height: 50vh; gap: 5px; grid-template: "header header header header" 1fr "content content content nav" 2fr "footer footer footer footer" 1fr / 1fr 1fr 1fr 1fr; /* grid template로 한번에 모두 적을 수 있다. grid area 를 모두 설정해준뒤 레이아웃을 정하고 그옆에 1fr 처럼 높이를 설정해주면 된다 맨 마지막에는 가로비율을 어떻게 설정할지도 정해주면 된다 fr-fraction(부분) fraction은 grid에서 사용 가능한 공간을 뜻한다. fr값 비율로 공간을 나눈다. ● grid-template: "(이름)" (row..

.grid { display: grid; grid-template-columns: repeat(4, 200px); grid-template-rows: repeat(4, 200px); gap: 10px; } .header { background-color: aqua; grid-column-start: 1; grid-column-end: 5; } .content { background-color: brown; grid-column-start: 1; grid-column-end: 4; grid-row-start: 2; grid-row-end: 4; } .nav { background-color: chocolate; grid-column-start: 4; grid-column-end: 5; grid-row-st..

html 코드 css 코드 .grid { display: grid; grid-template-columns: 100px repeat(2, 200px) 100px; grid-template-rows: repeat(4, 200px); grid-template-areas: "header header header header" "content content content nav" "content content content nav" "footer footer footer footer"; } .header { background-color: aqua; grid-area: header; } .content { background-color: brown; grid-area: content; } .nav { backg..