카일_

Programming/Style Sheet

Programming/Style Sheet

[CSS] Edge와 IE의 input 아이콘 삭제

Microsoft Edge 및 IE의 특별한 입력 필드 아이콘 숨기기 Microsoft Edge 및 이전 버전의 Internet Explorer 브라우저는 사용자 편의성을 위해 텍스트 및 비밀번호 입력 필드에 특별한 아이콘을 기본적으로 제공한다. 하지만 때로는 이러한 아이콘이 디자인이나 사용성 측면에서 방해가 될 수 있다. 아래에는 이 두 아이콘을 숨기는 방법이 설명되어 있다. -ms-clear 아이콘 숨기기 -ms-clear 아이콘은 텍스트 입력 필드()에 문자가 입력되었을 때 나타나며, 입력된 텍스트를 한 번에 지울 수 있는 ‘X’ 아이콘을 표시한다. 이 아이콘을 숨기려면 다음 CSS 코드를 사용한다. input::-ms-clear { display: none; } -ms-reveal 아이콘 숨기기 ..

Programming/Style Sheet

[CSS] BEM 방법론

BEM(Block, Element, Modifier)이란? BEM (Block, Element, Modifier)은 CSS 코드를 구조화하고 조직화하는 방법론이다. 코드의 유지 보수성, 가독성 및 확장성을 향상시키기 위해 명명 규칙 및 CSS 아키텍처에 대한 모듈식 접근 방식을 제공한다. BEM은 러시아 검색 엔진 회사인 Yandex가 소개했으며, 웹 개발자들 사이에서 인기를 얻었다. Yandex Finds everything yandex.com BEM 방법론은 세 가지 핵심 구성 요소로 구성된다. 블록(Block) 블록은 독립적이고 재사용 가능하며 논리적으로 독립된 개체로, 사용자 인터페이스(UI)의 의미 있는 부분을 나타낸다. 블록의 예로는 헤더, 푸터, 버튼, 내비게이션 메뉴가 있다. BEM에서 블..

Programming/Style Sheet

[Sass] 개요 및 설치

Sass(Syntactically Awesome StyleSheets) Sass Sass(Syntactically Awesome StyleSheets) 는 CSS pre-processor(전처리기)로서 CSS의 한계와 단점을 보완하여 보다 가독성이 높고 코드의 재사용에 유리한 CSS를 생성하기 위한 CSS의 확장(extension)이다. CSS의 간결한 문법은 배우기 쉬우며 명확하여 프로젝트 초기에는 문제가 없이 보이지만 프로젝트의 규모가 커지고 수정이 빈번히 발생함에 따라 쉽게 지저분해지고 유지보수도 어려워지는 단점도 가지고 있다. 이러한 CSS의 태생적 한계를 보완하기 위해 Sass는 다음과 같은 추가 기능과 유용한 도구들을 제공한다. 변수의 사용 조건문과 반복문 Import Nesting Mixin..