CSS SVG/CSS Loader 예제 2021. 7. 17. CSS SVG/CSS Loader SVG로 구현할 수 있는 CSS 로더, 티스토리 에디터에서는 적용한 HTML과 CSS 가 실시간 구현되지는 않지만, 콘텐츠에 적용할 수 있다는 것만으로도 매우 좋은 장점을 가지고 있다. 자주 사용하지는 않겠지만, 필요한 요소에 사이즈 정도를 조절하여 구현하면 굉장히 예쁘게 사용할 수 있을 것 같은 SVG 로더다. 딱히, 단점이라고 할 필요는 없지만 HTML 편집 상태에서 텍스트를 작성해야 하기 때문이, 일반적인 웹 에디터에서 글을 쓸 때와는 확실히 느낌이 다른 것 같다. 해당 로더의 제작자는 Loader SVG/CSS by Bidji (@Bidji)이며(This loader uses the changing colours to give the impression of ro..

[CSS] 이미지 애니메이션 효과 적용하기(Keyframe) 2021. 7. 17. 이미지 키프레임 애니메이션 효과[CSS] - animista.net 짧게 정리하는 유용한 사이트, CSS 키프레임 속성을 통해서 이미지에 애니메이션 효과를 줄 수 있다. 마우스 오버를 할 경우 이미지를 확대하게 하거나 플립(뒤집다) 효과를 줄 수도 있고, 여러 가지 효과들이 많이 있다. 사이트가 무거워지는 것이 싫어서 애니메이션 효과는 가급적 지양하는 편인데, 잘만 사용하면 굉장히 생동감 넘치는 사이트를 만들 수 있다. 정말 유용하며, 다양한 효과를 제공한다. 어디까지나 이미지 뿐만 아니라 텍스트에도 적용이 가능하고 어떻게 구성하느냐에 따라서 다양하게 활용할 수 있을 것이다. 예를 들면, 로고 같은 곳에다가 적용해도 참 예쁘게 적용이 가능할 것이라고 생각된다. 참조 CSS 애니메이션 사용하기 - CSS:..

[CSS] Font-Smoothing 안티앨리어싱 속성 2021. 7. 17. Font-Smoothing 웹폰트를 적용할 때, Font-Smoothing 속성의 안티앨리어싱 속성을 적용하면 폰트가 더욱 부드럽게 보일 수 있다. 하지만, 반대로 이야기하면 선명함은 떨어질 수 있다는 얘기다. 따라서, 폰트를 선명하게 하고 싶다면 안티앨리어싱을 적용하는 것이 오히려 역효과일 수 있다. 힌팅이 떨어지는 폰트거나, 뭉개지는 폰트에 안티앨리어싱 효과를 적용하면 훨씬 부드럽고 포토샵으로 디자인 한 것처럼 적용된 글꼴을 적용할 수 있을 것이다. 다만, Font-Smoothing 속성 자체가 Webkit 기반의 Safari와 Chrome에서만 사용이 가능하기 때문에, 브라우징 호환 문제가 있을 수 있다. 속성 적용 방법은 아래와 같이 선언합니다. -webkit-font-smoothing: anti..

CSS 선택자 :nth-child() 사용법 2021. 7. 17. CSS 선택자 :nth-child() 사용법 :nth-child( an+b ) :nth-child() 속성은 정말 유용하다. 웹사이트나 스킨을 디자인할 때, 내가 원하는 요소에만 CSS를 편하게 적용할 수 있게 해 준다. 여러 가지 적용방법이 있지만, 그중에서 가장 유용한 속성 중에 하나를 설명하고자 한다. :nth-child()와 :nth-last-child()는 특정 순서에 있는 요소를 선택할 때 사용하는 선택자 :nth-child()는 앞에서부터 세고, :nth-last-child()는 뒤에서부터 셀 수 있다. 이 중에서 :nth-child()로도 선택자로 충분히 자유롭게 활용할 수 있다. first나 last 사용법도 있지만, 여기서는 홀수와 배수 또는 특정요소를 의도하여 선택하고자 한다. :nt..

Border CSS 테두리 속성 반복 적용하는 방법 2021. 7. 17. Border CSS 테두리 속성 반복 적용하는 방법 똑같은 텍스쳐를 border값에 부여하고 싶다면 어떻게 하면 될까, 배경이 아닌 두꺼운 선에 적용하면서 작은 이미지 텍스쳐가 반복해서 나오길 바란다면 border-image-repeat 태그를 적용하면 된다. 자세한 사용방법은 이곳에서 확인할 수 있다. 가장 간단한 사용방법으로는 정사각형을 기준으로 할 때, 모든 타일을 일정한 간격으로 채우는 속성 값은 아래와 같다. 어떤 텍스쳐를 어떻게 적용하느냐에 따라 테두리의 느낌이 달라진다. border-image-repeat: round; 하지만, border의 가로와 세로값이 다를 경우에는 별도의 숫자를 지정해줘서 각각 가로와 세로에 적용될 타일의 개수를 지정해줘야 한다. 이 경우에는 round [n, n] ..

유튜브 모바일 반응형 CSS 적용방법 및 과정 2021. 7. 17. 유튜브 모바일 반응형 이미지보다는 글로 설명해도 충분할 것 같고 각 사이트마다 적용방법이나 코드가 조금씩 다를 수 있으므로, 수시로 개발자 도구를 활용해서 점차 수정해나갈 것을 권장합니다. 유튜브 웹소스를 가져와서 적용시키거나 HTML편집기를 통해서 유튜브 영상을 노출시키고자 할 때, PC버전에서는 정상적으로 작동하지만 모바일에서는 레이아웃이 깨지는 경우가 많습니다. 이를 통해서 컨테이너 또는 블록(DIV)을 만들고 그 공간에 아래와 같은 소스를 적용시켜서 모바일 사이즈를 조절할 수 있었습니다. .video-container { text-align: center; position: relative; padding-bottom: 56.25%; padding-top: 300px; height: 0; over..

[CSS] 유령처럼 서서히 나타나는 텍스트 2021. 7. 17. See the Pen Haunted Text by Fabrice Lejeune (@fabricelejeune) on CodePen. [CSS] 유령처럼 서서히 나타나는 텍스트 유령처럼 나타나는 CSS, 한번 적용을 해보려다가 생각보다 대작업이 될 것 같아서 이렇게 페이지에만 적용을 시켜서 사용하는 것이 낫겠다. 주로 메인화면에 적용하면 좋을 것 같고 쉬운 코드로 분위기를 나타낼 수 있을 것 같다. 생각보다 사용방법은 단순해 보이는데, 위의 assets에서 조금 복잡하게 적용이 되어 있어서 나의 사이트에서 적용을 하려면 코드를 약간 수정해서 사용해야겠다. 자바스크립트는 별도의 파일로 임폴트해서 적용을 시키는 것이 나을 것 같고, CSS의 경우 각 웹사이트별로 커스텀 마이징을 해야 할 것만 같다.

[CSS] 밑줄 표시 효과 Underline hover effect 2021. 7. 17. See the Pen PooerOj by CreativeStudio (@creativestudiocss) on CodePen. background-image: linear-gradient(transparent calc(100% - 3px), #000 3px) background-repeat: no-repeat background-size: 0% 100% transition: background-size 0.8s color: #000 &.yellow background-image: linear-gradient(transparent 60%, #F8CD07 40%) &:hover background-size: 100% 100% 위와 같은 방식 또는 코드펜 방식으로 매우 쉽게 적용할 수 있는 밑줄 CSS 호버 ..

[CSS] 배경이미지 위에 점 패턴 이미지 2021. 7. 17. 배경 이미지 위에 점 패턴 이미지 제작방법 정리 배경이미지를 훨씬 세련되게 만들어주는 배경 이미지 위에 점 패턴 이미지 커버를 씌우는 방법이다. 워드프레스를 할 때는 커버 이미지에 기본적인 기능이 있어서 매우 쉽게 구현을 했는데, 티스토리 내에서도 다른 배경 이미지를 멋있게 표현하고 싶었는데, 관련 기능이 없었다. 있는 게 오히려 이상하겠다 싶었다. 예전에 점 패턴과 더불어 다양한 패턴 이미지를 저장하고 있었으나, 최근 컴퓨터를 포맷하면서 패턴 이미지가 삭제되어 버렸다. 그래서 인터넷에서 관련 점 패턴을 찾아보았으나 찾지 못하고 직접 포토샵으로 픽셀작업을 했다. 점 패턴의 경우, 일부로 Opacity를 별도로 지정해주지 않으면 굉장히 이미지가 이상할 수 있으므로 픽셀 패턴 이미지를 만들면서 함께 Opac..