HTML / CSS - 고급 2편

MJ·2022년 1월 11일

HTML/CSS 정리

목록 보기

10/14

* scss : css에 Preprocessor(전처리언어)

scss를 사용하는 이유

1. 호환성: 모든 버전의 CSS와 완벽하게 호환된다.

2. 기능성: 다양한 기능을 제공하고, 거의 모든 면에서 뛰어나다.

3. 안정성: 오랜 기간 적극적인 지원 아래 관리되어 왔다.

4. 인지도: 업계에서 인정받고 있으며, 많이 사용되고 있다.

5. 신뢰도: 거대 커뮤니티의 지원 아래 개발되고 있다.

6.확장성: Sass 기반의 프레임워크가 다수 존재한다.
.SCSS와 .SASS 차이
SASS는 괄호를 사용하지 않고 들여쓰기를 사용
SCSS
$main-color : red;
.main-box {
color : $main-color; /* main-color : red */
}
SASS
$sub-color : blue;
.sub-box
	color : $sub-color; /* main-color : blue */     
사용법 (VSCode를 사용)

1. VSC 좌측 탭에서 확장 아이콘 클릭

2. 검색창에 sass 검색

3. Live Sass Compiler (v5.0.0 이상) 설치

4. 작업 폴더를 VSC에서 열고 좌측 탐색기에서 새파일 > 작업할파일명.scss 생성

5. VSC 하단에 Watch Sass 클릭

6. 자동으로 css와 css.map 파일 생성

7. scss에 스타일링

8. html에 <head>에 <link>를 사용하여 제작된 .css 파일 링크
SCSS 문법 1 : 값을 저장해놓고 쓰는 "변수"
많은곳에서 사용하는 공통적인 값을 변수에 넣으면 유지보수(수정과 관리)에 편리한 장점을 가지고 있다.
ex)
css
$main-color : #2a4cb2;
$sub-color : #4a6b8c;
$main-font-size : 16px;
$main-width : 100%;
.box {
  width: $main-width;
  background-color: $main-color;
  color: $sub-color;
  font-size: $main-font-size;
}
ㅤ
SCSS 문법 2 : "사칙연산"
단위를 맞춰서 계산에 유용한 장점을 가지고 있다.
ex)
css
$main-font-size : 16px;
.box {
font-size : $main-font-size + 2px; /* css에서는 18px로 변환 */
width : (100px * 2); /* 200px */
height :(300px / 3); /* 300px */
}
ㅤ
SCSS 문법 3 : "Nesting"
관련있는 class를 묶을 때 Nesting을 사용하여 가독성 있게 코드를 개선
ex)
css
.header {
    ul {
        width : 100%;
    } /* .header ul {} 과 동일 */
    li {
        color : black;
    } /* .header li {} 와 동일 */
} 
ex) pseudo-class 사용방법
css
.header {
    :hover {
        width : 100%;
    } /* .header :hover {} 과 동일 */
    &:hover {
        color : black;
    } /* .header:hover {} 와 동일 */
} 
ㅤ
SCSS 문법 4 : @extend
변수처럼 선언하여 이미 존재하는 클래스를 확장한다.
% : 임시클래스, 클래스로 컴파일하지 않을때 사용하는 기호
ex)
css
%box {
width:100%;
height:50%;
padding:20px;
} /* .box 처럼 ".클래스명"도 가능하다 */
.box-red {
@extend %btn;
background-color : red;
}
ㅤ
SCSS 문법 4 : @mixin
코드를 한단어로 축약
@minin 작명() { } : 함수처럼 속성의 긴 코드를 단축
@include 작명() : @mixin 작명() 불러옴
ex) 1. 기본형
css
@minxin h-font(){
	font-size; 30px;
	letter-spacing: 1px;
}
h2{
	@include h-font()
}
ex) 2. @minin 작명1($작명2, $작명3) { } : 긴 코드를 가변적으로 만들고, 속성값에 변수를 넣을 때 사용
css
@minxin h-font($fs, $ls){
	font-size; fs;
	letter-spacing: ls;
}
h2{
	@include h-font(30px, -1px)
} /* h2 { font-size:30px; letter-spacing:-1px } 이 된다. */
ex) 3. @minin 작명1($작명2, $작명3) { } : 긴 코드를 가변적으로 만들고, 속성에 변수를 넣을 때 사용
css
@minxin h-font($fs, $arg2){
	font-size; fs;
	#{ $arg2 }: -1px;
}
h2{
	@include h-font(30px, width)
} /* h2 { font-size:30px; widht:-1px } 이 된다. */
ㅤ
SCSS 문법 5 : @use와 언더바 파일
@use 'reset.css'; = @import 'reset.css';와 동일하다
@import의 단점 :
1. 기본 css에서도 @import를 사용하여 혼란을 초래할 수 있다.
2. 같은 파일을 여러번 import 하면 코드 충돌과 중복 코드로 인해 컴파일 속도가 느려질 수 있다.
3. 모든 변수와 함수가 전역으로 관리되기 때문에 같은 이름의 변수나 함수를 사용하면 먼저 선언된 것들이 무시된다.
4. 어디서 가져온 변수 or 함수인지 직관적으로 알 수 없다.
@use의 장점 :

1. 혼란을 피할 수 있다.

2. 모듈시스템과 동일하게 동작하기 때문에 컴파일 중에 단 한번만 improt된다.

3. 사용하면 모듈 별로 별도의 namespace를 가지기 때문에 각 변수와 함수는 독립적으로 사용된다.

4. 변수나 함수를 사용할때는 namespace.function()과 같이 사용하기 때문에 어디서 가져온 요소인지 직관적으로 알 수 있다.

ex)

css
@use 'reset.css'; /* 기존 파일에 전부 사용할 수 있다. */
ex) 2. _(언더바)를 이용한 첨부용 파일로 작명

css
@use '_reset.css'; /* 컴파일 하지 않고 첨부용으로 사용할 수 있다. */

* :root : 전역 css 변수

:root는 전역 CSS 변수 선언에 유용하게 사용할 수 있습니다.
사용법
1. css 상단에 :root로 변수를 선언
css
 :root {
 --main-color : red;
 }
2. 사용할 셀렉터에 var()를 사용하여 변수 삽입
css
.box { 
background-color : var(--main-color); /* 배경색이 red로 속성 부여 */
}
css 사칙연산
calc() 함수를 사용하여 속성값을 사칙연산
사용법
css
.box {
width: calc(100% - 1em);
font-size : calc(20px - 4px) /* font-size : 16px */
}
:root(전역CSS변수) 와 calc() 계산식 함수 동시에 사용
사용법
1. :root로 전역변수 선언
:root {
--main-width: 100%;
}
2. 셀렉터에 계산식 함수 사용
.box {
width : calc(var(--main-width) - 20%);
}

* 참고자료

https://penguingoon.tistory.com/275
https://codingapple.com/course/html-basics/
https://developer.mozilla.org/ko/docs/Web/CSS/:root
https://blog.naver.com/pink_candy02/222347151036

A fancy web like a rose

이전 포스트

HTML / CSS - 고급 1편

다음 포스트

HTML / CSS - 고급 2편

HTML/CSS 정리

* scss : css에 Preprocessor(전처리언어)

scss를 사용하는 이유

1. 호환성: 모든 버전의 CSS와 완벽하게 호환된다.

2. 기능성: 다양한 기능을 제공하고, 거의 모든 면에서 뛰어나다.

3. 안정성: 오랜 기간 적극적인 지원 아래 관리되어 왔다.

4. 인지도: 업계에서 인정받고 있으며, 많이 사용되고 있다.

5. 신뢰도: 거대 커뮤니티의 지원 아래 개발되고 있다.

6.확장성: Sass 기반의 프레임워크가 다수 존재한다.

.SCSS와 .SASS 차이

SCSS

SASS

사용법 (VSCode를 사용)

1. VSC 좌측 탭에서 확장 아이콘 클릭

2. 검색창에 sass 검색

3. Live Sass Compiler (v5.0.0 이상) 설치

4. 작업 폴더를 VSC에서 열고 좌측 탐색기에서 새파일 > 작업할파일명.scss 생성

5. VSC 하단에 Watch Sass 클릭

6. 자동으로 css와 css.map 파일 생성

7. scss에 스타일링

8. html에 <head>에 <link>를 사용하여 제작된 .css 파일 링크

SCSS 문법 1 : 값을 저장해놓고 쓰는 "변수"

ex)

css

SCSS 문법 2 : "사칙연산"

ex)

css

SCSS 문법 3 : "Nesting"

ex)

css

ex) pseudo-class 사용방법

css

SCSS 문법 4 : @extend

변수처럼 선언하여 이미 존재하는 클래스를 확장한다.

% : 임시클래스, 클래스로 컴파일하지 않을때 사용하는 기호

ex)

css

SCSS 문법 4 : @mixin

코드를 한단어로 축약

@minin 작명() { } : 함수처럼 속성의 긴 코드를 단축

@include 작명() : @mixin 작명() 불러옴

ex) 1. 기본형

css

ex) 2. @minin 작명1($작명2, $작명3) { } : 긴 코드를 가변적으로 만들고, 속성값에 변수를 넣을 때 사용

css

ex) 3. @minin 작명1($작명2, $작명3) { } : 긴 코드를 가변적으로 만들고, 속성에 변수를 넣을 때 사용

css

SCSS 문법 5 : @use와 언더바 파일

@use 'reset.css'; = @import 'reset.css';와 동일하다

@import의 단점 :

1. 기본 css에서도 @import를 사용하여 혼란을 초래할 수 있다.

2. 같은 파일을 여러번 import 하면 코드 충돌과 중복 코드로 인해 컴파일 속도가 느려질 수 있다.

3. 모든 변수와 함수가 전역으로 관리되기 때문에 같은 이름의 변수나 함수를 사용하면 먼저 선언된 것들이 무시된다.

4. 어디서 가져온 변수 or 함수인지 직관적으로 알 수 없다.

@use의 장점 :

1. 혼란을 피할 수 있다.

2. 모듈시스템과 동일하게 동작하기 때문에 컴파일 중에 단 한번만 improt된다.

3. 사용하면 모듈 별로 별도의 namespace를 가지기 때문에 각 변수와 함수는 독립적으로 사용된다.

4. 변수나 함수를 사용할때는 namespace.function()과 같이 사용하기 때문에 어디서 가져온 요소인지 직관적으로 알 수 있다.

ex)

css

ex) 2. _(언더바)를 이용한 첨부용 파일로 작명

css

* :root : 전역 css 변수

:root는 전역 CSS 변수 선언에 유용하게 사용할 수 있습니다.

사용법

1. css 상단에 :root로 변수를 선언

css

2. 사용할 셀렉터에 var()를 사용하여 변수 삽입

css

css 사칙연산

calc() 함수를 사용하여 속성값을 사칙연산

사용법

css

:root(전역CSS변수) 와 calc() 계산식 함수 동시에 사용

사용법

1. :root로 전역변수 선언

2. 셀렉터에 계산식 함수 사용

* 참고자료

3. Live Sass Compiler `(v5.0.0 이상)` 설치

6. 자동으로 `css와 css.map` 파일 생성

8. `html에 <head>에 <link>를 사용하여 제작된 .css 파일 링크`

`calc()` 함수를 사용하여 속성값을 사칙연산