본문 바로가기

IT875

flex-basis, flex-grow, flex-shrink 속성 flex-basis 속성은 주축의 방향을 기준으로 요소들의 크기를 조절할 수 있습니다. flex-grow 속성은 남은 공간이 있을 때 요소들을 비율에 따라 크기를 조절할 수 있습니다. flex-shrink 속성은 요소들이 전체 사이즈를 넘어가는 사이즈를 가질 때 비율에 따라 크기를 줄일 수 있습니다. flex-basis 주축이 row라서 가로크기가 조절됩니다. 주축이 column라서 세로크기가 조절됩니다. flex-grow flex-grow를 전체 요소에 적용해서 비율이 동일하게 적용됩니다. 하나의 요소에 개별적으로 적용할 수 있습니다. flex-shrink 전체 사이즈와 요소들의 사이즈가 작거나 동일하다면 작동하지 않습니다. 요소들의 사이즈가 더 커야 요소를 선택해서 줄일 수 있습니다. flex 적용 .. 2023. 3. 27.
align-content & align-self 속성 align-content와 align-self 속성은 flex-wrap 속성을 사용했을 때 교차 축의 방향에 따라서 행 간격이나 열 간격을 조절할 수 있습니다. align-content 속성은 모든 요소들의 간격을, align-self 속성은 요소들 각각의 간격을 정렬 시킬 수 있습니다. flex-direction이 row면 주축이 좌측에서 우측 교차축이 상단에서 하단이고 flex-direction이 column이면 주축이 상단에서 하단 교차축이 좌측에서 우측입니다. 적용 전 align content 적용 align self 적용 2023. 3. 26.
css align-items 속성 css align-items 속성은 교차 축을 기준으로 요소들이 정렬됩니다. 교차 축은 주축의 방향에 따라서 결정이 되며 기본적으로 주축은 좌측에서 우측 방향 교차 축은 상단에서 하단 방향으로 설정되어 있습니다. 교차 축 상단에서 하단 기준 flex-direction 속성의 값이 row 이므로 주축은 좌측에서 우측이고 교차 축은 상단에서 하단입니다. align-items 속성은 교차축을 기준으로 작동하며 flex-start 값은 시작점으로 정렬해주는 기능이기 때문에 상단에 위치하게 됩니다. flex-direction 속성의 값이 row 이므로 주축은 좌측에서 우측이고 교차 축은 상단에서 하단입니다. align-items 속성은 교차축을 기준으로 작동하며 flex-end 값은 끝점으로 정렬해주는 기능이기 .. 2023. 3. 25.
css flex-warp 속성 css flex-wrap 속성은 주축의 방향에 따라서 교차 축을 기준으로 요소들을 정렬하는 방법입니다. 주축의 방향은 flex-direction 속성으로 변경할 수 있습니다. 주축(MAIN AXIS)이 기본적으로 가로방향이고 교차 축(CROSS AXIS)이 세로방향입니다. 주축을 세로 방향으로 변경하면 교차축이 가로 방향으로 되고 주축을 가로 방향으로 변경하면 교차 축이 세로 방향이 됩니다. 주축 가로 방향 교차 축 세로 방향 요소들을 열 방향으로 정렬시켜 줍니다. 주축 세로 방향 교차 축 가로 방향 요소들을 행 방향으로 정렬시켜 줍니다. 마무리 justify-content 값에 따라서 다양하게 정렬할 수 있고 wrap-reverse를 주면 반대방향으로 정렬이 됩니다. 2023. 3. 24.
css justify-content 속성 css justify-content 속성은 flex-direction 속성의 방향을 기준으로 요소들을 정렬 시킬 수 있습니다. row 방향 flex-start 적용 row 방향 flex end 적용 row 방향 center 적용 row 방향 space-between 적용 바깥쪽 여백을 다 없애고 요소사이를 띄웁니다. row 방향 space-around 적용 요소에 똑같은 면적의 여백을 부여합니다. row 방향 space-evenly 적용 요소와 요소사이 요소와 컨테이너 사이의 동일한 크기의 여백을 주는 방법입니다. 마무리 flex-direction 속성에 column을 주면 세로방향으로 똑같이 적용이 됩니다. 2023. 3. 24.
css flex-direction 속성 flex-direction 속성은 부모 요소가 display flex 일 때 자식 요소들을 좌측에서 우측, 우측에서 좌측, 상단에서 하단, 하단에서 상단 4가지 방향으로 위치 시킬 수 있습니다. 방향을 설정하지 않았을 때 기본값은 좌측에서 우측 뱡향입니다. 좌측에서 우측 우측에서 좌측 상단에서 하단 하단에서 상단 2023. 3. 24.
css 투명도 조절하는 방법 - rgba, opacity css 투명도는 rgba 속성을 사용하면 배경색만 투명하게 할 수 있고 opacity 속성을 사용하면 모든 요소를 투명하게 할 수 있습니다. rgba 속성 #one { width: 50%; height: 50%; background-color: rgba(255, 255, 255, 0.5); } 배경색만 투명하고 글자색은 그대로입니다. rgba의 4번째 값을 통해서 투명도를 조절할 수 있습니다. 값의 범위는 0~1입니다. opacity 속성 #two { width: 50%; height: 50%; background-color: yellow; opacity: 0.5; } 배경색과 글자색 모두 투명하게 변경되었습니다. 값의 범위는 0~1입니다. 2023. 3. 23.
css 단위 - %, em, rem css의 %, em, rem 단위는 기준에 따라서 상대적으로 값을 변경 시킬 수 있습니다. %와 em 단위는 현재 요소의 가장 가까운 부모 요소 기준으로 rem 단위는 최상단 부모 요소 기준으로 적용이 됩니다. % 단위 em 단위 hello world hello는 최상단 부모 요소를 기준으로 16px * 3으로 적용이 돼서 48px이고 world는 article 요소 기준으로 10px * 3으로 적용이 돼서 30px이 됩니다. 그리고 padding, margin에 em 단위를 사용하면 현재 요소의 font-size 기준으로 적용이 됩니다. rem 단위 hello world hello, world 두 요소 모두 최상단 부모 기준으로 16 * 3 이 적용되서 48px이 됩니다. 그리고 padding, mar.. 2023. 3. 23.

티스토리툴바