초보 개발자

노마드 코더 css master 과정을 들었다. css로 html을 꾸미는 것 보다는 flex와 grid를사용해서 전체적인 layout을 짜는 방법을 주로 알려주었다. 사실 전에는 grid를 사용하는 방법을 잘 몰랐다. 물론 지금도 완벽하게 알고 있지는 못하지만, 강의를 들으면서 grid의 전반적인 내용을 이해할 수 있었고, 숙제를 하다보면서 조금 조금씩 감을 익힐 수 있었다. 레이아웃을 만들 때 머리속으로 이러 이러한 구도로 만들면 되는건가? 라고 생각할 줄 알게 되었다. 아직 강의를 50%밖에 듣지 못한 상태로 과제를 수행해왔다. 나머지 50%는 실습위주라 좀 더 시간이 있을 때 하나하나 따라해보면서 익혀보려고 한다. 아래는 마지막 과제로 아래의 화면을 클론코딩 하는 것이었다. 그리고 아래는 내가 따..

css를 보다 편리하게 사용하기 위해서 scss를 작성한 뒤 sass를 사용하여 css로 변환을 시킬 수 있다. 즉 scss파일만 작성해서 html에게 보내주면 html은 읽지 못한다. ( scss말고 css를 내놔 ) 그럼 scss를 어떻게 css로 바꾸냐? gulp라는 것을 사용하여 바꿀 수 있다. scss 그렇게 하는게 더 복잡해 보일 거같은데 라는 생각을 할 수도있다. gulp는 파이프를 사용하여 전에 수행된 것을 그대로 인자로 받아서 수행을 하고 다시 다른 파이프로 넘기는 식의 패턴을 사용한다. 먼저 아래와 같이 필요한 모듈을 받아온다. 그리고 routes를 통해 우리가 접근하고자 하는 diretion을 정해 둔다. style이라는 함수가 scss를 css로 변환시켜주는 것이다. 먼저 gulp...

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