본문 바로가기

IT/css32

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.
css 패딩(padding) 속성 css 패딩(padding) 속성은 콘텐츠와 테두리 사이의 공간을 의미합니다. 패딩 속성을 사용해서 공간의 상하좌우 크기를 조절할 수 있습니다. 단일 값으로 적용하기 apply to all four sides button { padding: 10px; } 상하좌우 동일하게 적용이 됩니다. 수직 수평 적용하기 vertical | horizontal button { padding: 5px 10px; } 첫 번째 값은 상단 하단에 두 번째 값은 좌측 우측에 적용이 됩니다. 상단 좌우 하단 적용하기 top | horizontal | bottom button { padding: 1px 2px 2px; } 첫 번째 값은 상단에 두 번째 값은 좌측 우측에 세 번째 값은 하단에 적용이 됩니다. 상하좌우 각각 적용하기 .. 2023. 3. 22.
css 박스 모델: 테두리에 효과 주기 css 박스 모델은 브라우저 안에 모든 요소를 박스 형태로 구분합니다. 요소의 테두리에 효과를 주기 위해서는 border 속성을 사용해서 테두리의 굵기, 색깔, 스타일을 변경할 수 있습니다. 콘텐츠 기준으로 적용 #one { background-color: red; border-width: 5px; border-color: black; border-style: solid; } 테두리는 기본적으로 콘텐츠를 기준으로 적용이 돼서 기존의 사이즈에 테두리 두께까지 추가가 됩니다. ex) 300*300 -> 310*310 테두리 기준으로 적용 #two { background-color: blue; border-width: 5px; border-color: black; border-style: solid; box-.. 2023. 3. 21.

티스토리툴바