FrontEnd/CSS (18) 썸네일형 리스트형 #18. CSS - background-attachment: fixed 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.. #17. CSS - Keyframes Keyframes 2개 이사의 애니메이션 중간 상태를 지정합니다. @keyframes 애니메이션이름 { 0% { 속성: 값; } 50% { 속성: 값; } 100% { 속성: 값; } } 1 /* CSS */ .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; } .item:hover { animation: my-animation 3s infinite alternate; } @keyframes my-animation{ 0.. #16. CSS - Flex items 속성 :: shrink shrink container가 감소할 때 item이 감소하는 비율을 설정하니다. 숫자가 크면 더 많은 너비가 감소합니다. grow와 마찬가지로 item이 가변 너비가 아니거나, 값이 0일 경우 효과가 없습니다. 기본값은 1입니다. flex-shrink: 감소너비; 현재 너비가 100px인 두 개의 item A와 B가 있다고 가정해보겠습니다. 각각 아이템에 flex-shrink를 2, 1로 주도록 하겠습니다. 만약 container의 너비를 30px만큼 줄이면 item A와 item B의 크기는 어떻게 계산이 될까요? 먼저 너비를 계산하기 전에 item A와 item B의 비율을 계산해야합니다. item A의 너비 * item A의 shrink : item B의 너비 * item B의 shrink ite.. #15. CSS - Flex items 속성 :: grow 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.. #14. CSS - Flex items 속성 :: order 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.. #13. CSS 정렬방법 flex :: align-items 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와는 다르게 각 줄에 따라 움직입니다.. #12. CSS 정렬방법 flex :: align-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.. #11. CSS 정렬방법 flex :: justify-content 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: ;.. #10. CSS 상속 (Inherit) / 강제 상속 상속(Inherit) 부모요소를 자동으로 자식요소에 상속되도록 하는 요소들이 있습니다. 이것들은 주로 텍스트와 관련된 요소들입니다. font(font-size, font-weight, font-style, font-family), color, text-align, text-indent, text-decoration 등등 원피스 해적 The Roger Pirates The Red Hair Pirates The Rocks Pirates 해군 Sengoku the Buddha Kizaru /* css */ .Onepiece { color: red; } 강제상속 상속되지 않는 속성(값)도 inherit이라는 값을 사용하여 '부모'에서 '자식'으로 강제 상속시킬 수 있습니다. '자식'을 제외한 ' 후손'에게는 적.. #9. CSS 선택자(Selector) - 가상 요소 선택자 가상 요소 선택자(Pseudo-Elements Selectors) css를 통해서 html에 가상의 요소를 생성해서 제공할 수 있습니다. :가상클래스 ::가상요소클래스 before:: E요소 내부의 앞에, 내용(content)을 삽입합니다. (E::before) 1 2 3 4 5 6 7 8 9 10 /* css */ ul li::before { content: "숫자"; } before의 속성인 content만을 꾸며줄 수 있는데 이는 before 태그 안에 입력하면 됩니다. /* css */ ul { font-size: 40px; } ul li::before { content: "숫자"; font-weight: bold; color: red; margin-right: 10px; } after:: E요소.. 이전 1 2 다음
