라인을 잘 기억해주셔야합니다.그리드에 다루면서 라인에 대해서 설명했던 것을 기억하시나요? 아이템의 경우 어느 공간을 어느 정도 차지할 것인가 표시하는 것이 주로 사용하는 기능이기 때문에 라인을 기억해주는 것이 중요합니다. 해당 코드를 실행하면 아래와 같은 자주 보던 형태를 만들 수 있습니다. 코드를 보시면 grid-auto-rows를 설정해 놨기 때문에 칸이 모자라면 row를 1fr 크기로 만들게 됩니다. 이제 이 기본형태를 통해서 아이템을 여러 셀을 차지하도록 해보겠습니다.grid-column과 grid-row를 통해서 차지하는 공간 늘리기위의 상자는 column에 4개의 선이 있고, row에는 3개의 선이 있습니다. 그래서 시작선과 종료선을 값으로 주면 해당 선에 맞게 공간을 차지하게 됩니다. 변화가..
css flex 박스에서 아이템을 옮기는 속성들을 생각해보세요.주축 방향으로 옮기는 것은 justify-content, 교차축 방향으로 옮기는 것은 align-items 입니다. grid에서도 이와 같은 속성들이 있습니다. 하지만 차이점도 있죠. flexbox는 방향을 설정하는 것에 따라 주축이 달라지기 때문에, 당연히 그에 따라 옮기는 방향이 달라지지만 그리드에서는 justify-content는 항상 가로축으로 이동하고, align-content는 세로축으로 이동시킵니다. 또 그리드가 좀 더 세분화되어 있습니다. justify-items와 align-items 등 아이템들에게 적용되는 속성들도 있습니다.justify-content, align-content 더 알아보기fr과 같은 단위는 유동적입니다. ..
grid를 선언하는 방법그리드가 무엇인 지, 또 플렉스박스와 비교하는 포스팅을 작성할 때 그리드를 선언하는 방법과 트랙을 선언하는 코드를 작성했었습니다. 여기서 잠깐 다시 짚어보고 진행하도록 하겠습니다. display의 값으로 grid를 주는 것이 그리드를 선언하는 방법이고, grid-template-rows와 grid-template-columns로 트랙을 선언할 수 있다고 했습니다. 그럼 형태에 일단은 트랙에 의해 생겨난 "그리드 셀"에 아이템(자식 엘리먼트)들을 하나씩 놓아둔다고 했었습니다. 이까지 기억나시나요? 트랙은 여러가지의 값을 줄 수 있습니다. 지금은 픽셀을 주었지만 그리드에서 사용할 수 있는 새로운 단위인 fr을 다루고 속성들을 다뤄보도록 하겠습니다.새로운 속성 "fr" 배워보기 픽셀은 ..
형태를 변화시킬 때 사용하는 속성은?css에서 형태를 변화시킬 때 사용하는 속성은 제목에서도 알 수 있듯이 transform입니다. 보통 rotate를 자주 사용하는데 이 뿐만 아니라 확대하는 scale과, 기울이는 skew 도 있습니다. rotate 말고는 거의 사용할 일이 없는 속성이죠. 가장 많이 사용하는 실용적인 예를 들어본다면 홈페이지에서 햄버거 아이콘을 만들 때 라던가 화살표를 돌릴 때 사용합니다.햄버거 아이콘 만들어 보기백스페이스와 엔터사이에 \가있는데 컨트롤을 누른 채 이것을 누르면 가느다란 선이 나옵니다. span 태그 사이에 넣은 값은 이 값을 3개 넣은 것입니다. 그리고 이 엘리먼트를 90도로 돌리면 홈페이지 어디에서나 사용하는 햄버거 아이콘을 만들 수 있습니다.transform-or..
그리드는 무엇이고, 어떨 때 사용될까요?grid는 display 속성의 값 중 하나입니다. 레이아웃을 짜는데 사용되기 위해 만들어졌습니다. .container {display: grid;} 위와 같은 형태로 선언하기만 하면 쉽게 사용할 수 있습니다. 왜 그리드가 만들어졌고, 레이아웃을 짜는데 사용하기 좋다고 할까요? 그러한 대답은 css의 flexbox와의 비교를 통해서 더 쉽고, 정확하게 알 수 있습니다. 이번 포스팅은 flex 박스와의 비교를 통해서 그리드에 대해서 좀 더 알아보고 미리 알아두셔야 할 용어와 개념들을 설명해보겠습니다. 그리고 그 다음에 그리드가 주어지는 부모에는 어떤 속성들이 따라오는지, 또 자식 엘리먼트에는 어떤 속성들을 줄 수 있는 지를 이어서 포스팅하도록 하겠습니다.flexbox..
간단한 게임으로 배워보는 css의 flex와 gridcss의 flex와 grid를 배워볼 수 있는 간단한 게임을 소개하겠습니다. Flexbox Froggy 바로가기 Grid Garden 바로가기 간단한 게임들로 css flex와 grid를 배워볼수도 있고, 이미 배웠던 분들은 귀엽게(?) 복습할 수 있습니다. 플렉스 박스의 경우 코드를 작성하는 곳 밑에 setting 키를 통해서 난이도를 조절할 수 있습니다. 당근을 키우고 개구리도 도와주세요.Flexbox Froggy 코드보기이 부분부터는 미리보지 마시고, 링크를 타고 간 후 한번 해본 뒤에 보시는 것을 추천드립니다. 난이도가 어려울 수 있는 부분에 대한 해설을 포스팅했습니다. 마지막 단계의 모습입니다. 개구리와 같은 색의 연잎으로 개구리를 보내야 합니..
css의 overflow를 써야할 때컨텐츠가 블록 속성이 엘리먼트 박스를 넘을 때 overflow 속성을 어떻게 할 지 고민해야 합니다. 스크롤을 생기게 하거나 또는 엘리먼트 박스를 넘은 컨텐츠를 숨길 수 있고 상황에 맞게 필요한 것을 선택해야 합니다. 일단 너비와 높이가 길이가 정해져 있어야 overflow를 정할 일이 생기기 때문에 100px씩으로 고정했습니다. 해당 코드를 실행해보시면 아래와 같은 형태가 됩니다. 왼쪽부터 visible, scroll, hidden의 값을 준 형태입니다. visible은 상자를 넘어서 나오게되고, 스크롤은 스크롤이 생기며, 히든은 최대한 표현하고 나머지는 숨기게 됩니다. 직관적으로 이해되시나요? 높이값을 주지 않으면 컨텐츠가 생성하는 높이가 증가함에 따라 엘리먼트 박..
filter()란?filter라는 이름에서 알 수 있듯이 배열 속에서 필요한 것들만 남길 수 있게 해줍니다. 물론 이런 상황은 for문을 통해서 처리될 수 있습니다. const len3 = []; const arr = ["lemon", "candy", "hot", "pie"]; for(let i=0; iconst beverage = [ {name: "아메리카노", price: 3700}, {name: "카페라떼", price: 4200}, {name: "쟈스민", price: 3000}, {name: "프라푸치노", price: 5100}, {name: "카페모카", price: 4400} ]; 음료에 대한 정보가 담긴 배열입니다. 이 배열을 예시로 filter 메소드를 사용해보겠습니다. 제 카드 잔액이..
새로 추가된 배열 메소드인 mapmap은 배열을 변형합니다. 전체를 바꾸기도 하고, 조건에 따라서 부분만 바꾸기도 합니다. 반복문 등을 이용하지 않고도 간단하게 새로운 배열을 만들 수 있습니다. 얼마나 편리한 지 코드로 확인해볼까요? const num = [2, 4, 6, 8, 10]; const num1 = num.map(x => x+1); num이란 배열엔 짝수가 들어있습니다. 다 홀수가 들어있는 배열을 만들려면 어떻게 해야할까요? num 배열의 요소에 1씩을 더하면 홀수가 됩니다. map은 콜백함수를 받습니다. 콜백함수는 매개변수로 현재의 값, 현재 인덱스, 배열 전체를 받습니다. num1을 확인하면 [3, 5, 7, 9 ,11]이라는 배열이 들어있는 것을 볼 수 있습니다. map은 사본을 반환하며..
배열이란?배열은 순서를 가진 객체입니다. 간단히 말하자면 여러가지 데이터들을 인덱스라는 순서로 저장해두는 것이 배열입니다. const arr = [1, "name", 5, "age", 17.2]; arr[0]; // 1 arr[1]; // "name" 대괄호 안에 인덱스를 넣으면 저장된 데이터를 알 수 있었습니다. 오늘은 배열 내에서 필요한 데이터를 찾는 방법을 알아보겠습니다.indexOf / lastIndexOfindexOf는 찾고자 하는 값과 정확히 일치하는 첫 번째 요소의 인덱스를 반환합니다. 코드를 통해 알아보겠습니다. arr.indexOf(1) // 0이 나옴 arr.indexOf("age") // 3이 나옴 첫 번째 요소의 인덱스라고 적었듯이 만약 똑같은 값이 여러개 들어있다면 맨 처음의 값의..