이번 포스트에서는 CSS 우선순위에 대해 살펴보자.  CSS 우선순위 Cascading Style SheetCSS는 Cacading Style Sheet의 약자이다. Cascade의 사전적 의미는 '작은 폭포' 같은 것이고 CSS에서의 의미는 상위에서 하위로 단계적으로 적용된다는 의미일 것이다.웹 문서의 태그들은 서로 포함 관계에 있다. 이때 자식 요소에서는 별도로 스타일을 지정하지 않으면 부모 요소의 스타일 속성을 그대로 물려 받는다. 예를 들어 에 글자색이나 글꼴을 지정하면 그 스타일은 하위 태그에 영향을 준다. 문제는 요소들이 계층적으로 사용되다 보니 하위에 있는 요소들에서는 상위에서 흘러들어오는 스타일이 중복될 수밖에 없다. 이처럼 웹 요소에 둘 이상의 스타일이 적용될 때 우선 순위에 따라 적..

그동안 modal 창이 필요할 때 부트스트랩을 자주 사용했었는데 이제(2022년? ㅎ) html의 기본 태그에도 modal 역할을 수행하는 녀석이 생겼다. 이름 하여    hello dialog?dialog는 단순히 써볼 수 있는데 dialog를 보여주기 위해서는 open 속성을 사용하면 된다. 안녕 난 다이어로그야!dialog의 기본 display는 none인데 open 상태일 경우는 block으로 변경된다. (미리 css 처리가 되어있고 이때 내부적으로는 HTMLDialogElement.show() 함수가 동작한다.)position 속성은 absolute를 가지므로 top, left 등의 속성으로 위치를 제어하기 용이하다. 기본적으로는 가운데 상단에 배치된다. 이벤트를 이용한 dialog 제어간단..

이번 포스트에서는 HTML 코드 작성시 코딩 속도에 날개를 달아줄 Emmet의 필수 사용법에 대해 알아보자. Emmet - the essential toolkit for web developers Emmet은 HTML 태그 작성을 매우 빠르게 할 수 있게 도와주는 도구이다. https://emmet.io/ Emmet — the essential toolkit for web-developers Emmet — the essential toolkit for web-developers Emmet is a plugin for many popular text editors which greatly improves HTML & CSS workflow: Demo | @@@ tooltip: Type CSS-like ab..

이번 포스트에서는 CSS 선택자 level 4에 소개된 :not()과 :has() 선택자를 사용해보자. :not(x) https://developer.mozilla.org/en-US/docs/Web/CSS/:not 의미와 사용법 :not(x)는 x에 부합하지 않은 요소를 선택하기 위한 선택자이다. p:not(.classy) { color: red; } body :not(p) { color: green; } Some text. Some other text. One more text 만약 위와 같이 CSS가 적용된 HTML이 있다면 결과는 아래와 같다. 브라우저 호환성 :not()은 현재 사용되는 대부분의 브라우저에서 무리 없이 사용 가능하다. :has(x) https://developer.mozilla.o..

마지막으로 살펴볼 @rule은 @forward이다. @forward @forward는 다른 stylesheet에 선언된 mixin, function, variable등을 로딩하는 기능이다. (어디서 많이 본 내용인데??) @use vs @forward 기본적을 @use나 @forward 모두 다른 stylesheet의 내용을 가져와서 사용하기 위해 사용된다. 그럼 차이점은 무엇일까? @use는 사용하는 stylesheet에서 로딩한 다른 모듈을 private 형태로 로딩해서 바로 사용하기 위한 용도이다. 즉 내가 쓰기 위함이다. @forward는 로딩한 다른 모듈을 public 하게 묶어놓은 일종의 중간 단계이다. @forward에서는 로드한 모듈을 사용하지도 못한다. 주요 목적은 @use를 편하게 하기..

이번 포스트에서는 모듈의 재사용을 위한 @use 룰의 사용법에 대해 알아보자. @use는 크게 2가지 용법으로 사용된다. 여러 stylesheet에 선언된 css들을 하나로 합쳐서 사용할 때 @use의 첫 번째 용도는 여러 stylesheet에 선언된 css들을 하나로 합쳐서 사용하는 경우이다. basic 경로에 미리 작성된 _code.scss와 _lists.scss 파일이 있다고 생각해보자. 그리고 이 2개의 파일은 06_use.scss에서 사용하려는 경우 @use가 사용된다. _code.scss와 _lists.scss는 모두 순수하게 css 로만 구성되어있다. 이를 가져오는 use.scss의 결과는 다음과 같다. code { padding: 0.25em; line-height: 0; } ul,ol {..

이번 포스트에서는 사용자 정의 기능을 모둘화 해서 사용하기 위한 @function에 대해 살펴보자. 사용자 정의 함수의 작성 @function @function은 사용자 정의의 기능을 모듈화하여 재사용하기 위한 용도로 사용된다. 기본적인 작성법은 아래와 같다. @function () { // 실행문 작성 @return value; } 일반적을 sass의 @function은 함수 동작의 결과를 받아서 사용하는 용도로 많이 사용되는데 함수에서 값을 반환하는 경우는 @return을 사용한다. @function pow($base, $exponent) { $result: 1; @for $i from 1 through $exponent { $result: $result * $base; } @return $resul..

이번 포스트에서는 SCSS에서 사용되는 제어문들에 대해서 살펴보자. 조건문 SCSS에서는 일반적으로 프로그래밍에서 상요되는 if, else 문장에 해당하는 at rule이 제공된다. @if @else if @else @if는 조건에 부합되면 처리하기 위한 문장이고 필요 시 @else if, @else 를 추가해서 작성할 수 있다. @if