CSS basics

box-sizing : ( content-box (defualt) / border-box )

--subject-font: 32px;font-size: var(subject-font);

border-box 는 box size를 결정할 때 border까지 합한다. 즉, padding 과 border를 모두 포함한다. 기본값인 content-box는 컨텐츠만 지정한다.

 

position : ( static / absolute (default) / relative )

static은 기본값으로 아무런 효과 없다. relative 는 원래 있던 자리를 기준으로 이동한다. absolute 는 근접한 부모 중에 기본값인 static이 아닌 부모의 기준에서 움직인다. 중간에 position: relative 인 부모가 없으면 결국엔 body를 기준으로 위치가 결정된다. 

position : ( sticky / fixed )  

position 이 static / relative / sticky 이면 그 안에 들어 있는 박스 안 ㅇㅇㅇㅇㅇㅇㅇㅇ에서 변경이 일어나게 되고 position 이 absolute 이면 들어있는 근접한 부모 박스들 중에 static이 아닌 박스에 위치변경이 일어나고 fixed 의 경우에는 들어있는 박스와 상관없이 그냥 viewport 에서 포지션 변경이 일어난다. 

sticky를 사용할 때는 top과 left 같은 포지션을 지정해줘야한다.

 

---

custom properties

CSS 역시 Javascript와 마찬가지로 특정 변수에 값을 부여하여 반복적으로 사용되는 코드를 간결하게 작성할 수 있다.

변수를 선언할 때는 "--[변수명]: [변수값];" 으로 선언하고 사용할 때는 "property : var(변수명); " 으로 작성하면 된다.

--subject-font: 32px;
// subject-font 라는 변수에 32px 이라는 값을 선언

font-size: var(--subject-font);
// font-size의 value값으로 --subject-font 변수에 저장된 값을 할당

이렇게 custom 된 property 들은 변수가 선언된 것의 모든 자식요소에 접근이 가능하다.

따라서 보통 가장 상위 컨테이너인 root 에 변수를 선언하여 모든 요소들이 접근할 수 있도록 한다.

 

:root {
	--subject-font: 32px;
    }

 

data attribute

HTML5 에서 추가된 기능으로 HTML 태그 자체에서 제공하는 속성들 뿐만 아니라 원하는 데이터를 DOM, 즉 HTML 요소에 추가할 수 있다.

 

<div data-index="1" data-display-name="coding"></div>
<div data-index="2" data-display-name="developing"></div>

// 임의로 div에 data-index, data-display-name 이라는 data attribute 를 선언하고 각각 특정 값을 부여

<style>

[data-display='coding'] {
	background-color:red;
}

</style>

두개의 div 중 data-display 값이 coding 인 첫번째 div의 background-color 만을 red로 변경하였다.