본문 바로가기
728x90

frontend/HTML, CSS7

[CSS] 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 vs rem 이해하기 CSS 길이 단위pxemrem px웹에서 가장 일반적으로 사용되는 단위이론적으로 화면의 1픽셀렌더링된 값이 변하지 않는 고정된 단위 empx단위와 다르게 상위 요소의 글꼴 크기를 기준으로 하는 상대적인 단위1em 단위는 현재 글꼴 크기의 높이와 같으며 기본값은 약 16pxem 단위는 비례적으로 크기가 조정되므로 상위 요소의 글꼴 크기에 영향을 받는다. rem“root em”의 줄임말rem 단위는 글꼴 크기에 비례한다는 점에서 em 단위와 비슷하지만 루트 요소(HTML 요소)만을 사용하여 글꼴 크기를 계산rem 단위는 글꼴 크기 조정 기능을 제공하지만 상위 글꼴 크기의 영향을 받지 않는다. em, rem 적합한 사용 기준보통 글꼴 크기 조정에 필요한 제어 수준과 예측 가능성에 따라 em 단위와 rem 단위.. 2024. 5. 30.
[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.
[HTML] HTML5기반 동영상 플레이어 HTML(Hyper Text Markup Language)는 웹 문서를 만들 때 사용하는 프로그래밍 언어HTML5 : 마크업 랭귀지(HTML)의 문법적(syntactic) 버전뿐만 아니라 새로운 DOM API 스펙을 포함하는 것 웹 표준 동영상 플레이어Flash Player가 공식적으로 중단되면서 HTML5 플레이어는 새로운 산업표준이 되었다. 및 요소의 기능을 강화하여 추가 플러그인을 사용하지 않고도 웹페이지 또는 애플리케이션에서 직접 콘텐츠를 스트리밍할 수 있다.브라우저 자체에서 지원되는 기능이기 때문에 별도의 외부 라이브러리나 플러그인이 필요하지 않다.사용이 간편하며, 가볍고 특별한 설정이나 스타일링이 필요없다. 1. VideoJShttps://videojs.com/HTML5 표준 동영상 플레이어를.. 2024. 1. 23.
[CSS] 브라우저 스타일 처리 - Reset CSS와 Normalize CSS를 사용한 크로스 브라우징 배경별도 HTML 스타일을 적용하지 않아도 스타일이 적용된것을 본적이 있다.이는 브라우저가 기본적으로  HTML태그에 대해 적용하는 margin, padding, font-size 등이 있기 때문이다. 하지만 여기서 각 브라우저마다 기본적으로 적용되는 스타일이 다르다는 문제가 발생한다.동일한 코드여도 브라우저마자 스타일이 다르게 표출되어 사용자로 하여금 좋은 경험을 쌓기 어렵다. 이러한 점을 해결하기 위해 등장한 것이 Reset CSS 와 Normalize CSS 이다.     Reset CSS, Normalize CSS 사용하는 이유스타일 일관성 유지라는 목표를 가진다.  Reset CSS브라우저가 HTML 태그에 적용하는 모든 스타일을 '초기화'하는 역할브라우저간에 스타일을 최소화하고, 개발자가 직접.. 2024. 1. 12.
[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

티스토리툴바