본문 바로가기
반응형

CSS

CSS 방법론 알아보기 CSS 방법론이란? CSS 방법론은 대규모 프로젝트나 팀 작업에서 CSS 코드의 유지보수성, 재사용성, 확장성을 향상시키기 위해 사용되는 일련의 규칙을 의미한다. 이러한 방법론을 사용하면, CSS의 복잡성을 관리하고 코드의 구조를 표준화할 수 있으며, 현재 개발자들이 사용하는 방법론은 각각의 특징과 목적, 원칙을 갖고 있다. CSS 방법론은 그 자체로 독립적인 지침과 원칙을 가지고 있지만, 실제 프로젝트에서는 이러한 방법론을 혼합하거나 조정하여 사용하는 경우도 많기 때문에 하나의 방법론만을 사용해야 하는것이 아니라 프로젝트의 요구사항, 흐름에 때라 맞는 방법론을 사용하는것이 좋다. 주로 사용하는 CSS 방법론 BEM (Block Element Modifier) BEM의 목적은 구조와 의미를 명확하게 나타.. 더보기
SASS(SCSS)에 대해서 알아보자 SASS(SCSS)가 뭘까? Sass(Semantic Awesome Stylesheet)는 CSS를 보다 효율적이고, 강력하게 만드는 CSS 전처리기(CSS Preprocessor)이다. Sass에는 두 가지 주요 문법이 있는데 Sass 스크립트 (Sass Syntax, .sass): 들여쓰기와 개행을 사용하여 CSS의 블록을 구분하고, 세미콜론을 사용하지 않는다. SCSS 스크립트 (Sassy CSS, .scss): CSS 문법과 완전히 호환되는 새로운 문법이며, CSS와 거의 동일하게 보이지만, Sass의 모든 기능을 사용할 수 있다. 여기서 SCSS는 Sass 3.0에서 도입된 새로운 주요 문법이며, CSS와 많이 비슷하여 CSS를 그대로 적용할 수 있기 때문에 대부분의 경우, SCSS 문법을 주로.. 더보기
CSS - 가상 선택자(Pseudo Selectors) 가상 선택자(Pseudo Selectors) CSS의 가상 선택자(Pseudo Selectors)는 문서의 일부분을 선택하는 데 사용된다. 가상 선택자는 주로 문서의 특정 상태를 선택하거나 문서의 구조를 기반으로 선택하는데, 가상 선택자는 일반 선택자와 다르게 실제 HTML 요소에 직접적으로 일치하지 않는 대신 요소의 특정 상태나 위치를 기반으로 적용되므로 문서의 동적 변경에 반응하거나 특정 요소를 선택할 수 있게 해 준다. 가상 선택자는 가상 클래스(pseudo class)와 가상 요소(pseudo element)가 존재한다. 가상 클래스는 요소의 특정 상태를 기반으로 요소를 선택하며 가상 요소는 문서의 특정 부분에 스타일을 적용하도록 설계되어 있지만 그 부분이 실제 HTML에서는 표현되지 않는다. 가.. 더보기
CSS - border 속성과 outline 속성 border 속성과 outline 속성 border border속성은 HTML요소 주위에 테두리를 생성하는 데 사용된다. border는 하나의 속성이 아닌 여러 하위 속성을 결합한 단축 속성이다. 구성 속성 border는 아래 속성을 포함하고 있다. border-width : 테두리의 두께를 지정한다. 값을 px (픽셀), em, rem 등으로 지정할 수 있으며, 미리 정의된 키워드인 thin, medium, thick을 사용할 수도 있다. 기본값 : medium border-style : 테두리의 스타일을 지정한다. 가능한 값은 none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset 등이 있다. 기본값 : none border.. 더보기
CSS 미디어 쿼리 - forced-colors forced-colors CSS 미디어 특성 중 하나로 고대비 모드의 사용 유무에 따라 스타일을 지정할 수 있도록 하는 기능을 가지고 있다. 저시력이거나 특정 색상을 구분하기 어려운 사용자에게 중요한 기능으로 동작할 수 있으며 이런 접근성의 향상은 사용자들에게 더 좋은 웹 경험을 제공하고 서비스를 제공할 수 있게 된다. forced-colors는 사용자가 강제로 시스템 색상을 선택했는지 여부를 감지하도록 디자인 되어있으며, 일부 사용자들은 특정 색상, 특히 고대비 색상 스킴을 사용하여 컨텐츠를 더 잘 볼 수 있게 된다. 고대비 모드란? 사용자의 컴퓨터 시스템에서 제공하는 기능 중 하나로 사용자의 시각적 경험을 향상시키기 위해 화면에 표시되는 색상 대비를 높이는 설정이다. 이 모드는 저시력 사용자나 색상을.. 더보기
CSS media - prefers-contrast prefers-contrast prefers-contrast는 사용자가 시스템 수준에서 높은 대비 모드, 저 대비모드를 선택했는지의 여부를 나타낸다. 사용자의 시스템 설정에 따라 css가 동적으로 적용되도록 웹사이트나 웹 애플리케이션을 조정할 수 있게 해주는 방식으로. 웹 접근성을 향상하는 데 사용될 수 있다. 기능이 생긴 이유 웹 사이트를 이용하는 사용자들 중 시력에 불편함이 있는 사용자나 고령의 사용자 등이 웹사이트를 조금 더 쉽게 읽는 데 도움을 줄 수 있게 하기 위함이다 또한 일부 사용자들은 눈의 피로를 줄이거나 특정 타입의 색안경을 착용하는 등의 이유로 낮은 대비를 선호하는 경우가 생기게 되는데 이러한 부분을 지원하기 위해 prefers-contrast가 생겨나게 되었다. prefers-cont.. 더보기
CSS - Box-shadow, Drop-shadow CSS - Box-shadow, Drop-shadow 개인 프로젝트를 하던 중 내가 보여주려는 콘텐츠에 그림자를 넣어주어 입체감을 주고 그림자를 이용한 효과를 주는 작업을 진행을 하게 됐다. svg 이미지에 그림자를 넣고 마우스 이벤트를 통해 그림자의 진하기와 색상등의 효과를 넣어주어야 했는데 기존에 알고 있던 box-shadow속성을 사용하여 적용하려고 했지만 이미지에 그림자가 적용되는것이 아닌 이미지를 담고 있는 div 태그에 적용이 되는 문제가 발생했다. 구글링이나 여러 속성을 확인해보면서 svg에 직접적으로 그림자를 주게 된다면 효과를 발생시킬 때마다 svg에서 직접 변경이 이루어지기 때문에 만족스럽지 않은 수정이었고 이후 찾았던 속성이 filter에 있는 drop-shadow였다. drop-sh.. 더보기
media query 알아보기 - prefers-reduced-data prefers-reduced-data prefers-reduced-data는 사용자가 데이터 사용량을 줄이길 원할 때 적용할 수 있는 미디어 쿼리이다 사용자가 스마트폰이나 태블릿 같은 기기에서 데이터를 절약하고 싶거나 인터넷 연결 속도가 느린 경우 등에서 유용하게 활용할 수 있는 기능이다 prefers-reduced-data두 가지 값을 가지고 있다 no-preference: 사용자가 데이터 사용량에 대한 선호도를 설정하지 않았음을 나타낸다 reduce : 사용자가 데이터 사용을 최소화하길 원할 때를 나타낸다 이 기능을 이용하게 되면 데이터 사용량을 줄이길 원하는 사용자에게 불필요한 이미지나 비디오를 로드하지 않도록 하거나 배경의 이미지를 로드하지 않고 색상으로 볼 수 있도록 하는 등의 간소한 레이아웃을.. 더보기
반응형

티스토리툴바