본문 바로가기

전체 글1017

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.
css display 속성 - inline, block, inline-block, none css display 속성은 요소가 공간을 어떻게 차지할 것 인지를 나타내며 inline, block, inline-block, none을 사용할 수 있습니다. 각각의 속성 값에 따라서 width, height, padding, margin의 적용 여부가 달라집니다. lnline 특징 span { background-color: aqua; width: 500px; height: 500px; padding: 10px; margin: 10px; } inline은 다른 요소를 밀어내지 않고 콘텐츠의 크기만큼 공간을 차지합니다. width, height는 적용이 되지 않고 padding은 적용이 되지만 공간을 차지하지 않고 margin은 좌우만 적용이 되고 상하는 적용이 되지 않습니다. 참고로 span은 기본적.. 2023. 3. 23.
css 마진(margin) 속성 css 마진(margin) 속성은 콘텐츠 각 요소의 테두리 간의 간격을 의미합니다. 마진 속성을 사용해서 각 요소의 테두리를 기준으로 상하좌우 간격을 조절할 수 있습니다. 단일 값으로 적용하기 apply to all four sizes button { margin: 10px; } 상하좌우 동일하게 적용이 됩니다. 수직 수평 적용하기 vertical | horizontal button { margin: 5px 10px; } 첫 번째 값은 상단 하단에 두 번째 값은 좌측 우측에 적용이 됩니다. 상단 좌우 하단 적용하기 top | horizontal | bottom button { margin: 1px 2px 2px; } 첫 번째 값은 상단에 두 번째 값은 좌측 우측에 세 번째 값은 하단에 적용됩니다. 상하좌.. 2023. 3. 22.

티스토리툴바