전체 글58 [CSS] 말줄임 See the Pen 두 줄 말줄임 by jominh (@thatBamm) on CodePen. 말줄임 2023. 7. 7. [CSS] 아이폰 노치 영역 📌노치(Notch)란? 아이폰X 이상부터 위/아래 라운드 영역까지 디스플레이 영역으로 포함하고 있다. 해당 영역을 제외하지 않고 작업 진행 시 웹뷰에서 컨텐츠(Header, Footer, TabBar.. 등)가 가려지거나 짤려 보이는 현상이 발생한다. 📢 노치 대응 방법 노치 영역을 자동으로 계산해 주는 CSS 속성인 env(), constant() 를 사용한다. IOS 11 당시 constant()속성을 제공하였으나, IOS 11.2버전부터 제거되고 env() 속성을 사용한다.(업데이트 되지 않은 경우를 생각하여 둘 다 적용 시켜준다.) //IOS 11버전 padding-top:constant(safe-area-inset-top); padding-right:constant(safe-area-inset-.. 2023. 7. 4. SCSS 문법 (변수) 변수 선언 $변수명 : 변수의 값; 변수 규칙 1. $로 시작 2. 변수 선언 시 해당 문자만 허용 (영문, 숫자, _ , - ) $marginTop : 20px; .item { margin: $marginTop; }; 전역변수와 지역변수 전역변수 : scope 외부에서 선언될 경우 전역으로 사용 가능 margin: $marginTop; .item01 { $marginTop : 20px; }; .item02 { margin: $marginTop; }; 지역변수 : 아래와 같이 scope 내부에서 선언될 경우 외부에서 사용 할 수 없다. .item01 { $marginTop : 20px; margin: $marginTop; }; .item02 { margin: $marginTop; }; 변수를 전역 범위.. 2023. 6. 12. CSS 전처리기란? CSS 전처리기? CSS가 동작하기 전에 사용하는 기능 (웹에서 직접 동작하지 않으므로 표준CSS로 컴파일이 필요) CSS 문법과 유사 하지만 변수, 함수, 상속 등의 Programmatically한 방식과 선택자의 중첩, 다양한 단위의 연산 등을 편리하게 작성 가능 불필요한 선택자(Selector)의 과용과 연산 기능의 한계, 구문(Statement)의 부재 등 프로젝트가 커지면서 복잡해지는 CSS 작업을 쉽게 해주며 가독성과 재사용성을 높여주어 유지보수가 쉬워지게 도와준다. CSS 전처리기 모듈 CSS : Cascading Style Sheets LESS : Leaner Style Sheets SASS : Syntactically Awesome Style Sheets SCSS : Sassy Casca.. 2023. 6. 12. [CSS 속성] appearance 속성 - Form 요소 초기화 📢 appearance 속성 소개 이 속성은 운영체제 및 브라우저에 기본적으로 설정되어 있는 테마를 기반으로 하는 UI 컨트롤의 기본 모양을 제어하는데 사용 See the Pen Untitled by jominh (@thatBamm) on CodePen. 2023. 6. 9. [CSS 선택자] :has() 가상 선택자 📢 :has(선택자) 정의 해당 부모 선택자가 특정 자식 선택자를 가지고 있을 경우 적용 (CSS의 if문 형식) (https://developer.mozilla.org/en-US/docs/Web/CSS/:has) See the Pen Untitled by jominh (@thatBamm) on CodePen. 📢 :has() 와 :not() 조합 어떤 순서로 조합하냐에 따라 결과값이 달라진다. See the Pen [CSS 선택자] :has() , :not() 조합 by jominh (@thatBamm) on CodePen. 📢 브라우저 호환성 2023.06.08 기준 Firefox 계열에서 지원하지 않는다. 출처 : https://caniuse.com/?search=%3Ahas() 2023. 6. 8. 이전 1 ··· 6 7 8 9 10 다음
