CSS, Sass 기본적이지만, 가장 중요한 부분

---

새로운 개념

css box model ?

Sass ?

 

---

css box model

 

box-sizing

content-box의 크기를 말하며 크기를 정의하기 위해 width, height가 디폴드 값이 된다.

예를들어 width: 150px, heigh: 300px로 정의해보자.

이 때 content의 크기가 위와 같이 정의가 되고, padding 100px을 넣었을 경우 content-box는 양옆, 위, 아래 각각 100px이 추가되어

width: 150px + 200px = 350px, height: 300px + 200px = 500px이 되는 것이다.

이렇게 하면 레이아웃 구성시 이렇게 따로 계산하게 되면 레이아웃 작성 시 이해하기 어려움 (코드랑 보여지는 부분이 다름)

쉬운 레이아웃을 정의하기 위해서는? box-sizing: border-box

이렇게 하게되면 width, height가 content-box가 아닌 border-box 기준으로 설정이 된다.

padding, border의 영역까지 모두 포함하여 box-sizing이 된다.

즉, 어떤 속성(border, padding)을 주어도 width, height의 영역을 넘을 수 없도록 설정!

 

---

css position

static

디폴드값, 모든 요소들은 static 값을 디폴트로 가지고 있다.

 

relative

normal flow따라 위치,

자기 자신에 상대적으로 위치,

예를들어 top: 10px일 때 원래 있던 자기 자신의 기준으로 10px 아래로 내려간다.

 

absolute

normal flow 벗어나 위치,

가장 가까운 ancestor에 상대적으로 위치한다.

즉, containing block이 어떤 ancestor인지 따라서 달라진다.

예를들어 div > div > p 의 관계로 구성되어 있다고 생각해보자.

p가 absolute 일 때 가장 상위 div는 relative, 다음 div는 static이라고 가정한다.

p: absolute는 div: relative에 상대적으로 위치한다.

만약 relative로 정의된 게 없다면 가장 최상위의 containing block에 위치하게 된다.

 

fixed

normal flow 벗어나 위치,

viewport에 상대적으로 위치한다.

모달 구현에 용이하다.

 

sticky

normal flow따라 위치,

가까운 scrolling ancestor에 상대적으로 위치한다.

fixed와 비슷하지만 스크롤의 위치에 따라서 구현하고 싶을 때 사용한다.

 

---

css units

px, pt, cm, in

절대적인 길이

 

rem, em, %

 

em

부모의 영향을 받는다.

예를들어 div(5em) > span(2em) 일때 span은 2em이 아닌, 부모의 영향을 받아 더 큰 사이즈로 나타난다.

상대적인 길이

 

rem

root em

예를들어 div(5em) > div(3em) > span(2rem) 일때 span은 2em이 아닌 5em의 영향을 받는다.

반응형 ui 구현시 rem으로 구현하면 최상위 부모의 크기의 조정으로 내부 폰트사이즈가 자동으로 조정이 가능하다.

 

vw, vh, vmin, vmax

viewport에 상대적인 길이

 

---

Sass

파일 작성시 button.sass 또는 button.scss 둘다 가능하다.

예를들어 button.sass, font.sass, color.sass import해서 사용할 수 있다.

button.sass가 빌드를 거치면 button.css가 만들어 지는데 이것은 button.sass, font.sass, color.sass 다 합쳐진 하나의 브라우저가 동작할 수 있는 css가 된다. Sass는 브라우저가 읽지 못한다.

 

&

자기 자신을 나타내는 placeholer이다.

반복되는 코드를 제거할 수 있다. (코드양이 줄어든다.)

.reset-button {
&.active {} /* & === .reset-button */
}

& + & {}  /* .reset-button + .reset-button */

 

 

변수도 사용 가능하다.

코드 길이가 짧아진다.

색상 코드보다 색상명의 변수를 사용해서 어떤 색인지 추측이 가능하게 해준다.

$color_red: red; /* $변수명: 값 */

.reset-button {
	color: $color_red; /* 변수 적용 */
}

 

 

별도의 클래스의 정의 없이 하나의 블록안에 여러 CSS를 적용할 수도 있다.

깊이는 하나까지만 설정하는걸 추천, 유지보수의 문제 때문이다.

$color_red: red;

.reset-button {
	&:hover {
    	color: $color_red
    }
    > button {} /* .reset-button 자식의 경우 & 생략 */
}

 

 

@mixins - @include

 

font-style.scss

@mixins font-style-1 { /* 여러가지 스타일을 한꺼번에 뭉침 */
	font-size: 36px;
    line-height: 1.5;
}

 

usage.scss

@import './font-style.scss' /* sass 파일 import */

.button {
	@include font-style-1; /* include로 적용 */
    background: red;
}

 

---

새로 알게된 개념

normal flow: css의 element 배열 흐름

---

css box model: 기본중의 기본이 되는 모델, 다른 모델을 이해하기전 박스 모델을 이해하는것이 중요하다.

---

content-box: element 가 가진 content들의 크기를 content-box가 감싸는 개념이다.

containing block: 어떤 element를 감싸고 있는 개념, 하지만 box model과는 다르다.

---

viewport: 내가 지금 보고 있는 브라우저 스크린 화면

---

preprocessor: 파일을 컴파일 해줌

 

---

앞으로의 방향성

Sass를 이용하면 css가 더욱 간편해질것으로 예상한다. 아직은 문법이 헷갈리지만, 사용해 보지 않은 낯설음이라고 생각하고 앞으로의 개발에 적극적으로 적용해 보면 좋을 것 같다. 특히 속성을 묶는 부분은 공통적으로 콘텐츠별로 공통적인 위치에 적용될 타이틀 같은 곳에 구현을 하면 좋지 않을까? 라는 생각도 들었다. Sass를 실제로 프로젝트에 많이 활용하는지는 알아봐야 할 것 같다. 

 

---

느낀점

css가 쉬운 편이라고 생각했는데, 또한 쉽지 않은 언어인듯 하다. sass는 정말 처음들어보는데, 새로운 문법을 알아가는 재미 느꼈다. 날 새는줄 모르고 공부하며 학습했다. 물론 직접 사용하는게 중요하겠지만, 코드를 이해하는것만으로도 현재 잘 하고 있는 방법이 아닐까 생각이 든다. 기존 css를 응용하는 방법이라 사실 개념 이해에 큰 어려움은 없었고, 두리뭉실하게 알았던 코드의 값을 정확한 사전적이고 전문적인 개념을 적립하는 느낌이 들었다. 그래서 position 같은 경우도 대충 어떻게 적용되는지는 알았지만, 정확한 개념의 인지가 부족하였는데 오늘로써 확실하게 알아간다. 개념을 알고, 예시코드를 보고 그치는 것이 아닌 다른 사람이 프로젝트에서 사용한 코드를 보며 내가 배우고, 쌓인 지식을 활용하여 코드를 해석하는 것도 중요하다고 생각한다. 모든 코드의 해석이 가능한 순간, 나도 모든 코드를 작성할 수 있지 않을까? 하는게 지금 현재 실현중인 내 공부 방향이다. 새로운 언어 습득에 대한 두려움이 사라지고 알아가고, 지식을 쌓는 재미가 생겨서 앞으로도, 이런 감정이 유지가 되길 기도한다. 물론, 가장 쉬운 기본적인 개념이고 쉬운 난이도임도 있겠지만, 높은 난이도를 이해하고 구현이 가능할 때 또한 뿌듯함과 성취감으로 개발 성장에 큰 도움이 되리라 생각한다.