NILGI

See the Pen border and outline by nilgi (@nilgi) on CodePen. border는 크기에 영향을 주지만 outline은 크기에 영향을 주지 않는다. 그래서 똑같은 요소를 줄줄이 나열하고 hover 효과를 쓸 때는 outline을 쓰는 게 편하다 할 수 있겠다.

See the Pen 대각선 줄무늬 배경 by nilgi (@nilgi) on CodePen. background-image: repeating-linear-gradient(-45deg, #5ce0e9 8px, #5ce0e9 16px, #ff8928 16px, #ff8928 24px); deg /* 대각선의 각도, 기울기 */#5ce0e9 8px, #5ce0e9 16px/* 색 시작과 끝 지점, 선 굵기 8px라는 뜻 */#ff8928 16px, #ff8928 24px/* 다음 색의 시작은 16부터 24까지인 굵기 8 */ 색수는 계속 추가하면 된다.

제목이 너무 길다. 넘치는 부분을 '...'으로 표시해 보자. 먼저 F12를 눌러 제목 부분의 크기를 알아내자. 선택 도구 클릭하고 제목에 마우스 가져가면 크기가 나온다. 768px네. 제목 부분의 CSS를 찾아서 위 코드를 추가해 준다.width: 768px; /* 제목을 표시할 최대 크기를 지정해줘야 한다 */white-space: nowrap; /* 지정한 크기보다 길면 줄바꿈이나 공백으로 표시하지 않고 넘치게 표시 */overflow: hidden; /* 넘치는 부분을 안 보이게 한다 */text-overflow: ellipsis; /* 안 보이는 부분을 '...'으로 표시한다 */

See the Pen by nilgi (@nilgi) on CodePen.  • href="URL" : 링크 주소 지정• target : 링크가 열리는 창을 지정   _blank - 새창   _parent - 부모창   _self - 자신의 창   _top - 프레임을 무시하고 전체 화면에 열린다. • 링크 상태link : 방문한적이 없는 링크 상태visited : 방문한 적이 있는 링크 상태hover : 마우스 커서가 링크위에 올라갔을 때 상태focus : 링크에 포커스가 위치해있는 상태active : 마우스를 눌렀다가 놓았을 때

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 색이 변하는 배경 그라디언트 by nilgi (@nilgi) on CodePen.  body {             margin: 0;             height: 100vh;             background: linear-gradient(45deg, #f3efb0, #a8dded, #d9dcef, #ede4e5);             /* 배경 그라디언트 지정 */            background-size: 200% 200%;             animation: gradient 5s ease infinite;            /* 배경색 변하는 애니메이션 지정 5초 */ }         @keyframes gradient {          ..

See the Pen 속성 받기 all by nilgi (@nilgi) on CodePen. • initial 모든 속성을 문서의 최초값으로 초기화• inherit 부모 요소의 속성 받기• unset 부모 속성이 있으면 받고 없으면 초기화

See the Pen linear-gradient를 이용한 배경에 투명도 주기 by nilgi (@nilgi) on CodePen.블로그 꾸미기 놀이 중이다.맘에 안 들어서 여태 만들걸 모두 지워버렸다. 굿~

See the Pen background-attachment by nilgi (@nilgi) on CodePen.background-attachment: 속성scroll; 배경이 페이지와 함께 스크롤. 기본값.fixed; 스크롤하면 배경만 고정.local; 배경이 요소의 내용과 함께 스크롤.initial; 초기값.inherit; 부모요소 속성 받기.

See the Pen CSS [attribute] by nilgi (@nilgi) on CodePen.  [attribute] : '속성명'이 있는 요소 선택-, _, 공백, 조합어 비허용[attribute="value"] : '속성명'과 '속성값'이 있는 요소 선택-, _, 공백, 조합어 비허용[attribute~="value"] : '속성명'을 가지고, '속성값'을 포함하는 요소 선택공백은 허용하고 -, _, 조합어 비허용[attribute*="value"] : '속성명'을 가지고, '속성값'을 포함하는 모든 요소 선택-, _, 공백, 조합어 허용[attribute^="value"] : '속성명'을 가지고, '속성값'으로 시작하는 요소 선택-, _, 공백, 조합어 허용 [attribute|="val..

See the Pen transform: rotate by nilgi (@nilgi) on CodePen. • transform: rotate(값deg); / 마이너스 값 허용

See the Pen tranform: translate by nilgi (@nilgi) on CodePen. • tranform: tranlate(x,y) / 변환: 위치. 위치는 마이너스 값을 허용한다.

See the Pen accent-color 체크, 라디오 버튼 by nilgi (@nilgi) on CodePen. input[type=checkbox] { accent-color: tomato; /* 색 */ } input[type=radio] { accent-color: rgb(30, 144, 255); /* 색 */ } 이런게 있구나. 이쁘군 (◕ᴗ◕✿)

See the Pen text-overdflow by nilgi (@nilgi) on CodePen. • text-overflow: clip; // overflow: hidden 그냥 잘라서 표시 • text-overflow: ellipsis; // 잘리는 끝 부분 '...'(점점점)으로 표시

See the Pen background-clip by nilgi (@nilgi) on CodePen. • background-clip: border-box; / 기본값. 테두리 가장자리까지 • background-clip: padding-box; / 안쪽여백 가장자리까지 • background-clip: content-box; / 컨텐츠만 칠하기 • background-clip: text; / 글자만 -webkit-background-clip: text; color: transparent;

html요소:focus {값;} 양식의 text입력칸을 클릭했을 때 강조 효과를 낸다. See the Pen :focus by nilgi (@nilgi) on CodePen. [입력칸 마우스 클릭] 신기하구먼. focus~focus~^^

See the Pen first-letter by nilgi (@nilgi) on CodePen. ::first-letter는 다음 속성을 줄 수 있다. • font • color • background • margin • padding • border • text-decoration • vertical-align (float이 none일 때) • text-transform • line-height • float • clear

See the Pen text-indent by nilgi (@nilgi) on CodePen. • text-indent: px, %, cm, em... // 마이너스 값 가능