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..

CSS 선택자(Selector)란? 선택자란 말 그대로 선택을 해주는 요소입니다. 이를 통해 특정 요소들을 선택해 스타일을 적용할 수 있게 됩니다. 바로 예제로 들어가보도록 하겠습니다. 복합선택자 일치선택자:: 조건을 만족해야 선택이 됩니다. 선택자가 span.orange인 경우에는 태그가 이면서 orange라는 클래스를 가지고 있어야 적용이 됩니다. 자식선택자:: 자식 요소를 선택합니다. (E > F) :: 꺽쇠(>)가 선택자의 기호로 사용됩니다. 아래 코드는 ul 코드의 자식들(li) 중 orange 클래스를 갖고 있는 선택자만 선택합니다. 후손(하위) 선택자:: 후손 요소를 선택합니다. ( E F ) :: '띄어쓰기'가 선택자의 기호로 사용됩니다. div 코드 안에 있는 모든 태그들 중 orange..

Vertical-align 이란? 먼저, Vertical-align은 인라인 블록 등을 포함한 모든 인라인요소의 수직 정렬을 위해 사용됩니다. 하지만 블록 레벨 요소의 수직 정렬에는 영향을 미치지 않는데요, 여기서 table-cell*의 수직 정렬은 예외라는 점! 아래는 vertical-align관련해 스펙에서 발췌한 내용입니다. Vertical-align 관련 개념들 Strut Strut는 부모 요소의 font-size와 line-height 속성을 상속 받은 width가 0인 가상의 박스라고 볼 수 있는데요. 즉, 이 보이지 않지만 존재하는(!) 상상의 박스의 baseline에 따라 부모 요소 안의 인라인 요소가 수직 정렬됩니다. 이 상상의 박스의 위치를 눈으로 확인하고 싶다면 방법이 있습니다. 부모..