728x90 반응형 Frontend/Styles6 CSS 확장 / Sass에만 존재하는 기능이 CSS에 통합 되다 ! 개요스타일 개발을 효율적으로 할 수 있게 지원해주는 기능이 많다는 것은 많은 사람들이 Sass를 사용하게 만들었습니다. 하지만 여전히 Sass를 설치하고 컴파일하는 과정이 존재한다는 것은 대체 가능한 도구를 찾게 되는 이유 중 하나입니다. 아직까지 Sass 고유 기능rem으로 변환하는 함수와 믹스인(Mixins)반복문 CSS 확장 기능1. 변수 지정CSS에서도 Sass와 유사한 방식으로 변수를 정의할 수 있습니다. 중요한 차이점은 Sass 변수는 전처리기 컨텍스트 내에서만 존재하지만, CSS 변수는 브라우저에서 사용될 수 있으며 자바스크립트를 통해 동적으로 덮어쓸 수도 있다는 점이 다르다.:root { --button-padding: 10px 20px; --button-bg-color: #007b.. 2025. 2. 12. CSS 단위 비교: px, em, rem 차이점과 올바른 사용법 CSS 길이 단위pxemrem px웹에서 가장 일반적으로 사용되는 단위이론적으로 화면의 1픽셀렌더링된 값이 변하지 않는 고정된 단위 empx단위와 다르게 상위 요소의 글꼴 크기를 기준으로 하는 상대적인 단위1em 단위는 현재 글꼴 크기의 높이와 같으며 기본값은 약 16pxem 단위는 비례적으로 크기가 조정되므로 상위 요소의 글꼴 크기에 영향을 받는다. rem“root em”의 줄임말rem 단위는 글꼴 크기에 비례한다는 점에서 em 단위와 비슷하지만 루트 요소(HTML 요소)만을 사용하여 글꼴 크기를 계산rem 단위는 글꼴 크기 조정 기능을 제공하지만 상위 글꼴 크기의 영향을 받지 않는다. em, rem 적합한 사용 기준보통 글꼴 크기 조정에 필요한 제어 수준과 예측 가능성에 따라 em 단위와 rem 단위.. 2024. 5. 30. CSS 기본과 SCSS, SASS 처럼 CSS 작성하기 CSS웹 페이지의 스타일(모양과 느낌)을 지정하는 언어CSS 적용하는 방법// 인라인스타일 속성 powderblue 색상// 내부 스타일시트// 외부 스타일시트 파일 가져오기 안녕하세요 선택자 (Selector)HTML 요소를 HTML 요소를 선택하고 스타일을 적용하기 위해 사용하는 구문/* 선택자: p */p { color: blue;}/* 선택자: .highlight */.highlight { background-color: yellow;} 선택자 종류종류설명예시태그 선택자태그 이름 그대로 지정div, p, ul클래스 선택자class 속성 값을 기준으로 선택.menu, .active아이디 선택자id 속성 값을 기준으로 선택#header, #loginBtn속성 선택자특정 속성을 가진 요소 선택[t.. 2024. 1. 23. Reset CSS vs Normalize CSS: 크로스 브라우징을 위한 스타일 초기화 방법 배경별도 HTML 스타일을 적용하지 않아도 스타일이 적용된것을 본적이 있다.이는 브라우저가 기본적으로 HTML태그에 대해 적용하는 margin, padding, font-size 등이 있기 때문이다. 하지만 여기서 각 브라우저마다 기본적으로 적용되는 스타일이 다르다는 문제가 발생한다.동일한 코드여도 브라우저마자 스타일이 다르게 표출되어 사용자로 하여금 좋은 경험을 쌓기 어렵다. 이러한 점을 해결하기 위해 등장한 것이 Reset CSS 와 Normalize CSS 이다. Reset CSS, Normalize CSS 사용하는 이유스타일 일관성 유지라는 목표를 가진다. Reset CSS브라우저가 HTML 태그에 적용하는 모든 스타일을 '초기화'하는 역할브라우저간에 스타일을 최소화하고, 개발자가 직접.. 2024. 1. 12. CSS 스타일 제거하기 :hover 효과 삭제 방법 :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 레이아웃 배치: flex, 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. 이전 1 다음 728x90 반응형
