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..

[JavaScirpt] 자바스크립트로 오늘 날짜 출력하기 2021. 7. 17. 자바스크립트로 오늘 날짜 출력하기 전광판처럼 오늘의 날짜를 안내해야하거나 현재의 시간을 출력해야 할 때, 윈도우의 기본 날짜 출력값을 가져올 수 있는 자바스크립트입니다. 사용방법은 매우 간단하며, 스크립트 소스를 가져오고 적용하고자 하는 위치에 HTML을 작성하면 됩니다. let today = new Date(); let year = today.getFullYear(); // 년도 let month = today.getMonth() + 1; // 월 let date = today.getDate(); // 날짜 document.write('오늘의 날짜 : ' + year + '년 ' + month + '월 ' + date + '일') 출력한 값

[JavaScript] 팝업 창 오늘 그만 보기 2021. 7. 17. 오늘 그만 보기 팝업창 구현하기 오늘의 쿠키를 읽고 페이지 재방문 시에 팝업창을 다시 열지 않게 하는 버튼을 작동하게 하는 자바스크립트 소스입니다. 해당 부분에 HTML을 작성하고 별도의 CSS를 설정한 후, 자바스크립트로 팝업창을 연동할 수 있습니다. HTML 팝업 이미지 또는 내용(컨텐츠) /* 닫기버튼*/ 닫기 JavaScript //====================================================================== //자바스크립트 팝업 버튼 작동 //====================================================================== App.TopPop.init(); var App = new Object(); Ap..

[jQuery] Create Customizable Scalable Math Graphs With jQuery smartGraph(스마트 그래프) 2021. 7. 17. 스마트 그래프 smartGraph is a powerful jQuery plugin that allows developers to draw dynamic, responsive, draggable, vector-shaped, infinitely scalable graphs using JavaScript and HTML5 canvas. Useful in math app to generate graphs and diagrams representing data or values in an organized manner, such as graph of a function. How to use it: 1. To get started, include jQuery JavaScript library and the sma..