See the Pen filter by nilgi (@nilgi) on CodePen. • grayscale(%) : 흑백화 • blur(px) : 흐림 • brightness(%) : 밝기 • contrast(%) : 대비 • drop-shadow(x, y, 흐림, 색) : 그림자 • hue-rotate(deg) : 색조 i• nvert(%) : 반전 • opacity(%) : 불투명 • saturate(%) : 채도 • sepia(%) : 세피아 ※ 두 가지 이상 효과 조합 가능.

See the Pen filter: brightness by nilgi (@nilgi) on CodePen. CSS로 이미지 밝기를 조절하는 방법은 다양합니다. 아마 백그라운드 색을 opacity 하는걸 가장 많이 사용할 것 같습니다. 그것보다 조금 더 편한 방법은 filter: brightnes를 사용하면 됩니다. filter: brightnes(50%); // 어둡게 filter: brightnes(100%); // 원본 filter: brightnes(150%); // 밝게 % 단위를 써도 되고 opacity처럼 숫자 1을 기준으로 써도 됩니다.

See the Pen hr style by nilgi (@nilgi) on CodePen. • hr은 css에서 border 이용해서 꾸미면 된다. • border-bottom은 자세히 보면 이중선으로 나온다. border만 쓰거나 border-top을 쓰자. • border-radius로 모서리를 둥글게 만들면 된다.

See the Pen grid를 이용 sns 공유 버튼 by nilgi (@nilgi) on CodePen. display: grid; // grid 정의 grid-template-columns: 25% 25% 25% 25%; // 4개의 요소 크기를 25%로 똑같이 한다. grid-column-gap: 2px; // 요소 간격 트위터 // 글자대신 를 넣어도 된다. - - - [웹코딩 배우기/· CSS] - 반응형 레이아웃을 좀 더 쉽게 - display: grid; 반응형 레이아웃을 좀 더 쉽게 - display: grid; See the Pen display: grid by nilgi (@nilgi) on CodePen. display: grid; // 사용하면 반응형 페이지를 쉽게 만들수 있다. ..

See the Pen word-spacing by nilgi (@nilgi) on CodePen. 마이너스 값을 사용할 수 있습니다.

See the Pen letter-spacing by nilgi (@nilgi) on CodePen. 마이너스 값을 쓸 수 있습니다.

See the Pen text-decoration by nilgi (@nilgi) on CodePen. • 위치 text-decoration-line: none; text-decoration-line: overline; text-decoration-line: line-through; text-decoration-line: underline; text-decoration-line: overline underline; text-decoration-line: overline line-through underline; • 색 text-decoration-color: red; text-decoration-color: rgb(30, 144, 255); • 모양 text-decoration-style: solid; ..

See the Pen vertical-align by nilgi (@nilgi) on CodePen. vertical-align: baseline; vertical-align: sub; vertical-align: super; vertical-align: top; vertical-align: middle; vertical-align: bottom; vertical-align: text-bottom; vertical-align: 28px; vertical-align: -28px;

See the Pen 배경 그라디언트 by nilgi (@nilgi) on CodePen. .g1 {background-image: linear-gradient(0deg, red, white);} .g2 {background-image: linear-gradient(45deg, red, white);} .g3 {background-image: linear-gradient(90deg, red, white);} .g4 {background-image: linear-gradient(180deg, red, white);} .g5 {background-image:-webkit-linear-gradient(left top, blue, white);} .g6 {background-image:-webkit-linear..

See the Pen 메뉴바 스크롤 특정위치 고정 by nilgi (@nilgi) on CodePen. position: sticky; /* 특정 위치에 멈춤 */ top: 5px; /* 위에서 5px 떨어진 곳에 */