Illie

개요 포트폴리오의 계절이 왔다 잘 몰랐는데, filter을 사용하니 글이나 이미지, 모든게 돋보인다 Lorem Ipsum과의 반대이다 개념 흐림 효과나 색상 변형 등 그래픽 효과를 주기 위해 CSS에 적용한다 보통 필터는 이미지, 배경, 테두리, 렌더링을 조정할 때 쓰인다 블러 효과 (blur) 가우시안 블러를 적용할 수 있다(뿌옇게) 값이 클수록 이미지가 흐려진다 filter: blur(5px); brightness() 이미지의 명암을 준다 0%는 검은색이고 100%일 경우 이미지가 그대로 유지된다 filter: brightness(0.4); contrast() 이미지의 대비를 조정한다 0%인 경우 회색 이미지가 되고 100%인 경우 이미지가 더 유지된다 100%보다 큰 값도 허용되며, 이때는 대비가..

개요 코딩을 하기 전에, HTML을 먼저 채워야 하는 순간이 온다 예를 들면 대략의 디자인을 보려고 글씨를 먼저 채워넣는다던지, 아무 글씨나 채워넣고 구성만 맞춰보고 싶던지.. 그럴 때 쓰는 것이다 즉, 아무 의미가 없는 긴 글이 필요할 때 쓰는 거다 사용법 아주 쉽다 vs code를 켜고 lorem을 친 후 엔터를 치면 나온다! lorem (+ enter) 자세한 사용법 '+ 엔터' 는 그냥 엔터를 치는 거다 어찌 설명을 해야 편할지 몰라서 그냥 저렇게 적으니 너그럽게 이해 바란다 lorem + 엔터 -> 한 단락의 더미 텍스트(아무말 대잔치) 작성 lorem5 + 엔터 = lorem(숫자) + 엔터 -> 단어 수 만큼 더미 텍스트(아무말 대잔치) 작성 lorem*5 + 엔터 = lorem*(숫자) ..

속성 값 뒤에 !important 를 붙인 속성 HTML에서 style을 직접 지정한 속성 #id 로 지정한 속성 .클래스, :추상클래스 로 지정한 속성 태그이름 으로 지정한 속성 상위 객체에 의해 상속된 속성

한 줄 효과 .ellipsis1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 두 줄 효과 .ellipsis2 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } 세 줄 효과 .ellipsis3 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }

개요 a 태그를 쓰지 않아도 링크를 걸 수 있는데, 그 방법 중 하나가 onclick을 사용하는 것이다 현재 창에서 링크 이동 버튼 새 창에서 링크 이동 버튼 맨날 사용할 때마다 찾아봐야해서 귀찮았는데 이참에 정리해야겠다

box-sizing: content-box; (기본) 콘텐츠 영역만 포함되고 여백과 테두리는 포함되지 않음 box-sizing: border-box; 바깥 여백은 포함하지 않음

속는 셈 치고 들어가보자 믿는 자에게 축복이 내린다. https://huemint.com/back-gradient-2/