Web's study ! 지선

grow item의 증가 너비 비율을 설정합니다. 숫자가 크면 더 많은 비율의 너비를 갖습니다. item이 가변 너비가 아니거나, 값이 0일 경우 효과가 없습니다. 기본값은 0입니다. flex-grow: 증가너비; 1 2 3 /* css */ .container{ border: 4px solid; display: flex; } .container .item { width: 100px; height:100px; background: tomato; border: 4px dashed red; border-radius: 10px; font-size: 30px; display: flex; justify-content: center; align-items: center; } item1만 1인 경우, item2, i..

order item의 순서를 설정합니다. item에 숫자를 지정하고, 숫자가 클수록 순서가 뒤에 배치됩니다. 음수가 허용되고, order 숫자가 같은 경우에는 HTML상 배치가 우선시 됩니다. default 값은 0으로 order을 정하지 않는 경우에는 HTML상 배치로 작성됩니다. order: 순서; 1 2 3 4 5 6 /* css */ .container{ border: 4px solid; display: flex; } .container .item { width: 100px; height:100px; background: tomato; border: 4px dashed red; border-radius: 10px; font-size: 30px; display: flex; justify-conten..

justify-content: flex로 지정된 container 내부에 있는 item들을 주 축(main-axis)을 기준으로 정렬하는 방법입니다. 방법은 총 5가지로 아래와 같습니다. 1. justify-content: flex-start; (default) 2. justify-content: flex-end; 3. justify-content: center; 4. justify-content: space-between; 5. justify-content: space-around; 하나씩 설명하면서 예제를 보여드리도록 하겠습니다. 우선 기본 HTML과 CSS 입니다. /* CSS */ .container { border: 4px solid; display: flex; justify-content: ;..

align-content: flex로 지정된 container 내부에 있는 item들을 교차 축(cross-axis)을 기준으로 정렬합니다. 주의할 점은 flex-wrap 속성을 통해 item들이 여러 줄이고 여백이 있을 경우만 사용할 수 있습니다. 방법은 총 6가지로 아래와 같습니다. 1. align-content: stretch; (default) 2. align-content: flex-start; 3. align-content: flex-end; 4. align-content: center; 5. align-content: space-between; 6. align-content: space-around; 우선 기본 HTML과 CSS 코드입니다. A B C D E F G /* CSS */ .con..

align-items 교차 축에서 Items들의 정렬 방법을 설정합니다. Item들이 한 줄일 경우 많이 사용합니다. 주의할 점은 Item들이 flex-wrap을 통해 여러 줄(2줄 이상)일 경우에는 align-content 속성이 우선입니다. 따라서 align-items를 사용하려면 align-content 속성을 기본값으로 설정해야 합니다. 1. align-items: stretch; (default) 2. align-items: flex-start; 3. align-items: flex-end; 4. align-items: center; 5. align-items: baseline; - 글자의 문자열에 따라 정렬됨 align-items 는 align-content와는 다르게 각 줄에 따라 움직입니다..

background-attachment nike 공식 홈페이지에 있는 이미지들을 배경으로 놓고 fixed 옵션을 적용해 보았습니다. section { height: 500px; } .section1 { background-image: url("https://static-breeze.nike.co.kr/kr/ko_kr//cmsstatic/structured-content/65250/211102_wlp_p6_bg.jpg"); background-size: auto 100%; background-position: right; background-attachment: fixed; } .section2 { background-image: url("https://static-breeze.nike.co.kr/kr/k..

1. concat concat은 두 배열을 합치고, 기존의 배열은 건드리지 않습니다. const arr1 = [1, 2, 3] const arr2 = [4, 5, 6] const concated = arr1.concat(arr2); console.log('concated: ', concated); console.log('arr1: ', arr1); console.log('arr2: ', arr2); 2. join join은 배열 안에 있는 원소를 문자열로 합쳐주는 기능을 합니다. join 함수의 파라미터는 문자열 사이에 배치됩니다. const array = [1, 2, 3, 4, 5] console.log('join: ', array.join()); console.log('join parameter: '..

1. filter filter는 특정 조건을 만족하는 원소를 찾아서 반환하는 역할을 합니다. const blood_type = [ { id: 1, type: 'A', donation: true, }, { id: 2, text: 'B', donation: true, }, { id: 3, text: 'AB', donation: true, }, { id: 4, text: 'O', donation: false, } ] const need_donation = blood_type.filter(blood => blood.donation); console.log(need_donation); const need_donation = blood_type.filter(blood => blood.type === 'B'); co..