(CSS3)root 변수

root 변수

• :root를 통해 사용함

• 변수를 만들어서 스타일을 관리하는 가상요소

:root{

--penguin-color: #00F;

}

div{

color: var(--penguin-color);

}

• var를 통해 정의하여, 사용할 수 있음

• text-align: justify; 양쪽정렬, 텍스트의 왼쪽과 오른쪽 끝에 맞게 줄을 채울 때 사용

• text-style: italic; 이탈릭하게 쓰기, 기울이기형태로 나오며, <em>태그 이용해도 됨

• text-decoration: line-through; 글자 가운데에 선긋기, <s>태그 이용해도 됨

• <hr>태그: 해당하는 요소의 크기만한 줄을 그음, 주제 분리나 내용 분리에 분리선으로 사용, 닫는 태그를 사용할 필요 없음

• box-shadow: offset-x, offset-y, optional, color; 박스에 그림자 효과를 넣는 것임, offset-x(수평 그림자 길이를 설정함), offset-y(수직 그림자 길이를 설정함), blur-radius(optional, 흐릿한 곡면), spread-radius(optional, 퍼진 곡면) 등의 효과로 구성되어 있음