Web/HTML&CSS
-
이번 포스트에서는 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..
Emmet 필수 사용법이번 포스트에서는 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..
2024.02.28 -
이번 포스트에서는 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..
[css]css 가상 클래스 선택자: :not()과 :has()이번 포스트에서는 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..
2023.03.05 -
마지막으로 살펴볼 @rule은 @forward이다. @forward @forward는 다른 stylesheet에 선언된 mixin, function, variable등을 로딩하는 기능이다. (어디서 많이 본 내용인데??) @use vs @forward 기본적을 @use나 @forward 모두 다른 stylesheet의 내용을 가져와서 사용하기 위해 사용된다. 그럼 차이점은 무엇일까? @use는 사용하는 stylesheet에서 로딩한 다른 모듈을 private 형태로 로딩해서 바로 사용하기 위한 용도이다. 즉 내가 쓰기 위함이다. @forward는 로딩한 다른 모듈을 public 하게 묶어놓은 일종의 중간 단계이다. @forward에서는 로드한 모듈을 사용하지도 못한다. 주요 목적은 @use를 편하게 하기..
[SCSS] 05. At-Rules -06.@forward마지막으로 살펴볼 @rule은 @forward이다. @forward @forward는 다른 stylesheet에 선언된 mixin, function, variable등을 로딩하는 기능이다. (어디서 많이 본 내용인데??) @use vs @forward 기본적을 @use나 @forward 모두 다른 stylesheet의 내용을 가져와서 사용하기 위해 사용된다. 그럼 차이점은 무엇일까? @use는 사용하는 stylesheet에서 로딩한 다른 모듈을 private 형태로 로딩해서 바로 사용하기 위한 용도이다. 즉 내가 쓰기 위함이다. @forward는 로딩한 다른 모듈을 public 하게 묶어놓은 일종의 중간 단계이다. @forward에서는 로드한 모듈을 사용하지도 못한다. 주요 목적은 @use를 편하게 하기..
2022.11.10 -
이번 포스트에서는 모듈의 재사용을 위한 @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 {..
[SCSS] 05. At-Rules -05.@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 {..
2022.11.10 -
이번 포스트에서는 사용자 정의 기능을 모둘화 해서 사용하기 위한 @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] 05. At-Rules -04. 사용자 정의 함수이번 포스트에서는 사용자 정의 기능을 모둘화 해서 사용하기 위한 @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..
2022.10.18 -
이번 포스트에서는 SCSS에서 사용되는 제어문들에 대해서 살펴보자. 조건문 SCSS에서는 일반적으로 프로그래밍에서 상요되는 if, else 문장에 해당하는 at rule이 제공된다. @if @else if @else @if는 조건에 부합되면 처리하기 위한 문장이고 필요 시 @else if, @else 를 추가해서 작성할 수 있다. @if
[SCSS] 05. At-Rules -03. 제어문이번 포스트에서는 SCSS에서 사용되는 제어문들에 대해서 살펴보자. 조건문 SCSS에서는 일반적으로 프로그래밍에서 상요되는 if, else 문장에 해당하는 at rule이 제공된다. @if @else if @else @if는 조건에 부합되면 처리하기 위한 문장이고 필요 시 @else if, @else 를 추가해서 작성할 수 있다. @if
2022.10.06 -
다음으로 살펴볼 rule은 @extend이다. 이녀석은 sass가 주목받게 해준 강력한 rule이다. 그런데 개인적으로 상당히 까다로웠고 여기 저기서 사용을 지양해야한다는 글도 많다. 계륵(鷄肋) 같은 존재인가? 그래도 한번 정리해보자. @extend 용도 @extend는 어떤 클래스가 다른 클래스의 모든 스타일과 함께 고유한 스타일을 가져야 하는 경우에 사용된다. .error { border: 1px #f00; background-color: #fdd; &--serious { @extend .error; border-width: 3px; } } .error, .error--serious { border: 1px #f00; background-color: #fdd; } .error--serious..
[SCSS] 05. At-Rules -02. @extend다음으로 살펴볼 rule은 @extend이다. 이녀석은 sass가 주목받게 해준 강력한 rule이다. 그런데 개인적으로 상당히 까다로웠고 여기 저기서 사용을 지양해야한다는 글도 많다. 계륵(鷄肋) 같은 존재인가? 그래도 한번 정리해보자. @extend 용도 @extend는 어떤 클래스가 다른 클래스의 모든 스타일과 함께 고유한 스타일을 가져야 하는 경우에 사용된다. .error { border: 1px #f00; background-color: #fdd; &--serious { @extend .error; border-width: 3px; } } .error, .error--serious { border: 1px #f00; background-color: #fdd; } .error--serious..
2022.10.04 -
Scss는 @media 등의 기존의 at-rule(@-rule) 외에 새로운 @-rule을 이용해서 기존의 CSS에 편의한 기능을 제공해준다. 이번 포스트에서는 새롭게 추가된 @-rule들에 대해 알아보자. 새롭게 추가된 @-rule들 다음은 SCSS에 새롭게 추가된 @-rule들이다. 작성된 스타일의 재사용 @mixin, @include, @content, @extend 다른 SCSS에서 선언된 mixin, function, variable 들을 로딩하고 여러 css들의 결합 @use, @forward, @import(deprecated) 컴파일 시 발생하는 오류, 경고, 디버그 메시지 활용 @error, @warn, @debug 제어문 @if, @each, @for, @while 기타 @functio..
[SCSS] 05. At-Rules -01. @mixin & @includeScss는 @media 등의 기존의 at-rule(@-rule) 외에 새로운 @-rule을 이용해서 기존의 CSS에 편의한 기능을 제공해준다. 이번 포스트에서는 새롭게 추가된 @-rule들에 대해 알아보자. 새롭게 추가된 @-rule들 다음은 SCSS에 새롭게 추가된 @-rule들이다. 작성된 스타일의 재사용 @mixin, @include, @content, @extend 다른 SCSS에서 선언된 mixin, function, variable 들을 로딩하고 여러 css들의 결합 @use, @forward, @import(deprecated) 컴파일 시 발생하는 오류, 경고, 디버그 메시지 활용 @error, @warn, @debug 제어문 @if, @each, @for, @while 기타 @functio..
2022.09.26