본문 바로가기
728x90

CSS3

[CSS] CSS, SCSS, SASS CSS 파일에서 변수를 정의하는 방법div.css:root { --div-color: red; }div { background-color: var(--div-color); }CSS 작성에 있어 Sass만이 방법인 건 아니긴 합니다. css 파일 안에서 함수를 사용할 순 없지만css 여러 내장 함수를 지원하고 있다.calc(): 계산을 수행하는 함수로, 길이, 너비, 위치 등을 계산할 때 사용됩니다. 예를 들어, width: calc(100% - 20px)요소의 너비를 화면 너비의 100%에서 20px을 뺀 값으로 설정합니다.rgb(): RGB 색상을 생성하는 함수로, 빨간색, 초록색, 파란색 값을 사용하여 색상을 지정합니다. 예를 들어, background-color: rgb(255, 0, 0);는 .. 2024. 1. 23.
[CSS] hover style 효과 삭제하기 :hover:not(.class) See the Pen Untitled by 우세림 (@yrrzbplw-the-builder) on CodePen. css 문법이라 sass 에서도 가능하다.export const Button = styled.button` background-color: #ccc; &:focus:not(.empty) { background-colo: #0090ff; }; &:hover:not(.empty) { background-colo: #0090ff; } &.user_button:not(.empty) { background-colo: #0090ff; }`; 2024. 1. 2.
[CSS] 레이아웃을 배치 (lex, grid, gap) 개요UX 레이아웃을 배치할 때 사용하는 스타일 종류를 알아보자.반응형 웹에서 위, 아래, 좌, 우 여백을 주는 방법에 대하여 알아보자  flexhttps://developer.mozilla.org/en-US/docs/Web/CSS/flexdisplay: flex;flex-wrap: nowrap;  grid https://developer.mozilla.org/en-US/docs/Web/CSS/griddisplay: grid;grid-auto-flow: column;grid-template-columns: repeat(4, 1fr);grid 스타일 문법grid-template-rows: {row1의 높이} {row2의 높이} {...} ...grid-template-columns: {column1의 너비}.. 2023. 12. 18.
728x90

티스토리툴바