CSS란?

Cascading Style Sheet 의 약자로 마크업 언어가 실제로 표시되는 방법을 기술하는 스타일 언어이다.
여기서 Cascading 은 폭포라는 뜻으로 위에서 아래로 순서대로 내려가는 형상으로 상속을 의미한다.

CSS 작성 방법

selector {
	property: value;
},

CSS의 특징

Inheritance
Inheritance 은 상속이라는 뜻으로 자식 Element 는 기본적으로 부모 Element 의 Property 를 이어받는다.

Overriding
Overriding 은 덮어쓰기라는 뜻으로 부모 Element 의 상속에서 벗어나 자식 Element 의 독립적인 Property 를 적용할 수 있다.

css 는 정해진 우선순위 규칙에 따라 Overriding 되는 속성이 있고,
그 예로는 아래 코드와 같이 선택자 내에서 가장 마지막에 작성된 Property 가 적용되는 경우가 있다.

div {
  width:100px;
  height:100px;
  background-color: red;
  width:150px;
},

Property 작성 순서

가독성과 협업을 위해 Property 작성 순서는 정해놓고 작성하는 것이 좋다.
추천하는 방식은 아래와 같다.

div {
	box-sizing:
    position:
    display:
    margin:
    border:
    padding:
    width:
    height:
    background:
    font-style:
    font-size:
    font-weight:
    color:
    line-height:
    font-family:
    text-align:
    overflow:
    z-index:
},

자주 사용되는 Properties

Box-sizing

div {
	box-sizing: border-box;
    box-sizing: content-box; (default)
},

• border-box
  width 와 height 의 적용 범위가 border + padding + contents
• content-box
  width 와 height 의 적용 범위가 contents

position

div { 
	position: static (default);
    position: relative;
    position: absolute;
    position: fixed;
    position: sticky;
},

• static
  top, right, bottom, left, z-index Properties 의 영향을 받지 않는다.
• relative
  자신의 원래 위치를 기준으로 Position 을 지정한다.
• absolute
  부모 Element 를 기준으로 Position 을 지정한다.
• fixed
  보이는 화면의 특정 위치에 Position 을 고정시킨다.
• sticky
  특정 시점부터 fixed 가 된다.

display

div {
	display: block;
    display: inline;
    display: inline-block;
    display: flex;
    display: none;
},

• block
  위에서 아래로 block 을 쌓듯이 쌓이는 모습을 생각하면 된다. 부모를 기준으로 가로 공간을 모두 차지한다.
• inline
  Contents 크기만큼 공간을 차지하며, 왼쪽에서 오른쪽으로 쌓인다.
  (참고로 HTML Tag 간에 개행이 있으면 임의의 여백이 생긴다!!)
• inline-block
  가로 공간이 충분하면 inline, 가로 공간이 충분하지 않으면 block 속성을 띈다.
• flex
  flex 요소가 적용된 자식 Element 들을 inline 처럼 정렬하는데,
  추가 property 를 통해 간격을 자유롭게 조절가능하다.
• none
  보이지 않게 한고 자리를 차지하지도 않는다.

font-weight

div {
    font-weight: 300;
	font-weight: 400;
	font-weight: 500;
    font-weight: 700;
    font-weight: 900;
}.

• 300(thin)
• 400(normal)
• 500(medium)
• 700(bold)
• 900(extra bold)

참고로 font 별로 지원하는 weight 가 각각 다르다. 400 과 700 만 모든 font 에서 지원한다.

text-align

div {
	text-align: left;
    text-align: center;
    text-align: right;
},

• left: text 왼쪽 정렬
• center: text 가운데 정렬
• right: text 오른쪽 정렬

overflow

div { 
	overflow: visible
	overflow: auto
	overflow: scroll
	overflow: hidden
},

• visible: Contents 가 Box 영역을 넘쳐도 그냥 보여준다.
• scroll: 스크롤 바를 형성해준다. (넘치든, 안 넘치든 둘 다)
• auto: Contents 가 Box 크기를 넘치면 스크롤 바를 형성해준다.
• hidden: Contents 가 Box 크기를 넘치는 부분은 보여주지 않는다.

z-index

.div1 {
	z-index:0;
},
.div2 {
	z-index:1;
},

모든 Elements 에는 쌓임 맥락이 있다.
나중에 작성된 Element 가 우선순위를 갖고 상단에 쌓인다.
이처럼 박스가 겹쳐서 레이아웃될 경우, 쌓이는 우선순위를 결정해준다.
z-index 값이 높을수록 상단으로 올라온다.
z-index 의 default 값은 0 이다.

CSS 선택자

CSS 의 선택자에는 크게 5가지 종류가 존재한다.

• 기본 선택자
• 그룹 선택자
• 결합자
• 가상 Class
• 가상 Element

기본 선택자

• \* : 전체
• tag : 태그
• .class : 클래스
• #id : 아이디
• attr : 특성

그룹 선택자

• ,

결합자

• (공백) : 자손
• > : 자식
• ~ : 일반 형제, 뒤따르는 형제
• + : 인접 형제

가상 Class

• :hover : 마우스 hover 상태
• :focus : 클릭 후에도 focus 유지
• :focus-visible : 클릭 후에는 focus 해제
• :active : clicking 상태
• :checked : check 된 상태
• :disabled : 사용불가 상태
• :not(:가상 class) : ~상태가 아닐 경우
• :first-child : 첫번째 자식
• :last-child : 마지막 자식
• :nth-child(n) : n번째 자식 (1~n)
• :only-child : 자식이 하나일 때만 적용

가상 Element

-::before : Contents 앞에
-::after : Contents 뒤에
-::placeholder : input 창 내의 표시자

예제

input[type="checkbox"]:checked + label {
	color:blue;
},

• 
• 

단축 속성

유형 1. Value 값 단축 (여백 속성)

div {
  padding: 10px;					/*1=2=3=4*/
  padding: 10px 5px;				/*1=3|2=4*/
  padding: 10px 5px 15px;			/*1|2=4|3*/
  padding: 10px 5px 15px 20px;		/*1|2|3|4*/
},

div {
  margin: 0 auto;					/*1=3|2=4*/
},

유형 2. 파생 Property (테두리 속성)

div {
	border: 1px solid #000;

    border-width: 1px;
    border-style: solid;
    border-color: #0000
},

보통 font 속성의 경우, 가독성을 위해 단축해서 사용하기보다 풀어서 쓰는 경우가 많다.

CSS Emmet

emmet cheat sheet 사이트 를 참고하자.