AD JB Toolbox 01

카테고리: CSS

css reference opacity 01

CSS / Reference / opacity

opacity의 문법과 주요 값, 실제 적용 조건을 설명합니다. 첫 박스에서는 흰 글자도 함께 흐려지고 두 번째 박스에서는 배경만 뒤의 색과 섞입니다.

css reference text shadow 05

CSS / Reference / text-shadow

text-shadow의 문법과 주요 값, 실제 적용 조건을 설명합니다. 첫 예문의 글자 오른쪽 아래에 흐린 그림자가 보이고 두 번째 예문에는 없습니다.

css reference box shadow 01

CSS / Reference / box-shadow

box-shadow의 문법과 주요 값, 실제 적용 조건을 설명합니다. 첫 박스는 오른쪽 아래로 흐린 그림자가 생기고 두 번째 박스는 안쪽에 색 띠가 생깁니다.

css reference background clip 01

CSS / Reference / background-clip

background-clip의 문법과 주요 값, 실제 적용 조건을 설명합니다. 점선 테두리의 틈과 안쪽 여백을 보세요.

css reference font weight 01

CSS / Reference / font-weight

font-weight의 문법과 주요 값, 실제 적용 조건을 설명합니다. 일반 굵기와 굵은 글자를 비교합니다.

css reference font style 02

CSS / Reference / font-style

font-style의 문법과 주요 값, 실제 적용 조건을 설명합니다. 동일한 글꼴에서 italic과 oblique의 형태를 비교합니다.

css reference font size 02

CSS / Reference / font-size

font-size의 문법과 주요 값, 실제 적용 조건을 설명합니다. 첫 번째 예문은 부모의 20px를 기준으로 30px가 됩니다.

css reference box sizing 03

CSS / Reference / box-sizing

box-sizing의 문법과 주요 값, 실제 적용 조건을 설명합니다. 첫 박스의 전체 너비는 200 + 40 + 10 = 250px입니다.

링크의 여러 상태와 키보드 초점 테두리를 색으로 구분한 일러스트

CSS / Tutorial / 링크 꾸미는 방법

CSS로 링크의 기본·방문·마우스·활성 상태를 구분하고, 키보드 초점까지 보이게 만드는 방법을 설명합니다. 밑줄과 색 대비를 유지하면서 직접 확인할 수 있는 예제를 제공합니다.

css reference content 01

CSS / Reference / content

content의 문법과 주요 값, 실제 적용 조건을 설명합니다. 첫 예문 앞뒤에 문자열이 생성되고 data-label 값이 뒤에 표시됩니다.