초보 개발자

minmax minmax는 grid-template-cloums와 row에 줄 수 있는 옵션이다. colmun에 minmax를 사용하여 최소값은 100px 최대값은 1fr로 주었다. 이렇게 했을 경우 브라우저의 창이 커지면 커질수록 column의 크기는 정비례되고, 작아지면 작아지는데 100px이하로는 작아지지 않고, 가로로 스크롤이 생긴다. 브라우저를 줄였을 때 100px이하로는 내려가지 않음 row도 마찬가지로 똑같이 줄 수 있다. 이 경우에는 grid-box에 height값을 주지 않으면 적용이 안된다. 그 이유는 기본 값이 없기 때문 auto-fill, auto-fit auto-fill과 auto-fit의 차이점에 대해서 알아보자 아래와 같은 화면이 나타난다. grid-tempate-columns..

grid-box안에 item을 20개 만들어 두고 grid는 3 x 3으로 9칸만 정의해보자 그럼 나머지 11칸은 어떻게 될까? 나머지 11개는 아래(row)로 추가가 된다. 이 때 column은 적용이 되지만 row는 적용이 되지 않는다. 이때 grid-auto-rows라는걸 사용하면 된다. 즉 우리가 만든 grid보다 더 많은 content가 들어온다면 우리가 따로 rows를 추가로 지정해주지 않아도 자동으로줘서 row를 생성하는 것이다. 잘 적용된 것을 확인할 수가 있다. row크기는 처음 지정해준 크기와 다르게하면 다르게 나타나기에 같은 값으로 지정해 주는 것이 좋다. 곰곰이 생각해보면 굳이 따로 rows를 지정해주지 않아도 상관없을 것 같기도 하다?? 즉 grid-template-rows를 주지..

align-items, justify-items, place-items 복습 아래와 같이 gird-box를 column 100px 4개 row 100px 4개로 구성한 뒤 자식들을 구성해보자 기본 width, height를 주지 않았는데 가득 차 있는 이유는 기본값이 stratch이기 때문이다. 여기서 자식 div들의 내용물을 한번에 관여하고 싶을 때는 부모에서 align-items와 justify-items를 사용하면 된다. 아래의 두줄을 추가하면 내용물들이 가운데에 와있을 것이다. place-items를사용하면 저 두개를 하나로 합칠 수 있다. 첫번째에 align-items, 두번째에 justify-items가 들어온다. align-self, justify-self, place-self 저기서 모든 ..

fr fr는 픽셀이나 %와 같은 측정 단위이다. 그리고 이건 사용 가능한 공간을 뜻한다. 만약 부모 div의 width값이 500px이라면 grid-template-columns : 1fr 1fr 1fr 1fr로 준 경우에 500을 4등분 하게 되는 것이다. 우리가 이전까지 100px이렇게 px단위로 지정해주어왔다.이는 작아보일 지 모르지만 컴퓨터가아닌 핸드폰에서 100px은 엄청 크기 때문에 fr을 사용하여 적절히 표시해줘야할 필요성이 있다. grid-tempate 전에 우리가 사용했던 방식은 grid-template-columns : repeat(4,100px) grid-template-rows : repeat(4,100px) grid-template-areas = "header header head..

grid-template-areas 먼저 html를 보면 4개의 div 태그가 존재한다. 각 태그에는 header, nav, main, footer 클래스가 존재한다. 분명 각 하나씩만 존재한다. 당연하겠지만 이 html이 존재하지 않으면 여러 grid-template-area에 집어 넣을 수 없다. 나는 html에는 아무것도 적지 않고 단순히 css에서만 정의하면 되는줄 알았다. father class를 보면 grid-template-columns 4개와 rows 4개를 repeat를 사용하여 준 것을 볼 수 있다. 즉 16칸이 생긴 것이다. 좀더 아래를 보면 grid-template-areas라는 것을 사용하는 것을 볼 수 있는데 이건 우리가 만든 column과 row들을 원하는 곳에 배치할 수 있도..

Box Shadow CSS Generator | CSSmatic Box Shadow CSS Generator | CSSmatic CSSmatic is a non-profit project, made by developers for developers Are you a web developer? Would you like to collaborate on CSSMatic? www.cssmatic.com

flex를 사용하면 나누고 정렬하는 것은 쉽게 되어지는데 격자형태의 grid는 만들기 힘들다. 따라서 이렇게 구획을 나누기 위해서 grid라는 것이 나오게 되었다. grid역시 flex-box처럼 father 요소에서 display : grid를 해주면 된다. 그리고 grid design은 대부분 father에서 해야한다. father에 grid-template-columns: 20px 30px 40px 50px ; 이렇게 자신이 원하는 column의 수와 px까지 정할 수 있다. 나는 3개의 child를 두고 하였기에 마지막 50px 한칸이 빈채로 남아있다. 250px씩 3칸의 column을 만들고 column-gap과 low-gap을 주면 아래와같이 이쁘게 잘 나오게 된다. 이때 column-gap과..

UsercreationForm을 사용하면 알아서 이걸 실행시켜주는데 나는 아직 저 Form 사용법을 모르기 때문에 password_validator라는 모듈만 불러와서 우리가 만든 signup form에 적용시켜주려고한다. password_validator란 우리가 10자이상 적어야 하거나, 너무 단순하거나, 숫자로만 이루어져있거나할 때 django가 error메시지를 보내서 사용자에게 제대로 작성하라고 하는 것이다. clean_password method안에 이거 딱 한줄만 추가해주었다. password_validation 모듈안에 우리가 사용할 validate_password이다. 첫번째인자로 password를 받고, 두번째인자로 user을 받는 것 같다. 근데 기본값이 None이길래 안줘도되는건가?..