지속가능한 개발 노트:)

javascript와 jQuery를 이용해서 HTML 요소의 텍스트를 변경하는 여러가지 방법이 있습니다. text(), html(), innerText 등이 있죠! 저는 그 중에서도 textContent를 사용해보았습니다. 그리고 단순히 텍스트를 변경하는 것이 아니라 하나의 요소 안에 모든 텍스트가 아닌 특정 단어만 지우고 싶은 경우를 구현해보았습니다. HTML 삽입 미리보기할 수 없는 소스 element.textContent = '내용' 간단하게 사용할 수 있지만, 특정 단어만 지우고 싶기 때문에 contents()를 이용해 요소 안에 텍스트 들을 배열로 만들고, [0]와 같이 배열의 순서를 지정해서 내용을 바꿔주었습니다. 알아두셨다가 다양하게 응용해보세요~ 수정할 내용이나 알려주실 내용 있으시면 댓글..

2022년 12월 7일(수)~9일(금), 3일간 개최했던 if(kakao)dev2022 카카오 개발자 컨퍼런스를 듣고 정리한 내용을 이제야 올리네요 ㅎㅎ 기술섹션 프론트엔드에서 웹 반응성 개선을 주제로 발표하신 내용입니다~ 저의 공부 삼아 올리는 내용이지만, 참고하시면 좋을 거 같아요! 1. 웹 성능이란? 웹에서 성능을 이야기할 때는 로딩 성능을 말한다. 웹 로딩 성능은 링크 클릭 후 사용자가 기본적인 동작을 시작할때까지의 시간을 의미한다. 빠르게 로드되지 않는 페이지는 사용자들은 기다리지 않고 떠나기 때문에 로드 성능을 최적화하는 것은 매우 중요한 일이다. 그러나 웹앱이 점점 복잡해지고, 사용자가 웹 안에서 더 많은 일을 하기 때문에 웹성능의 초점이 로드에서 로드 이후로 이동하기 시작했다. 블로그와 같..

변수(variable)은 데이터를 저장할 수 있는 메모리 공간을 의미하고, 저장된 값은 변경될 수 있죠. 이런 변수를 css에서도 사용할 수 있습니다. 인터넷 익스플로러에는 지원이 되지 않기 때문에 사용을 거의 안했지만, 이제 인터넷 익스플로러가 사라졌으니, 유용하게 사용하기 위해 더 자세히 알아둬야겠습니다 ㅎㅎ 1. css변수 선언 및 사용 변수의 이름을 지정할 때 변수 맨 앞에 --를 붙여줍니다. 그리고 변수를 사용할 때는 var(변수명)으로 호출합니다. /*전역변수 선언*/ :root{ --main-bg:#e7e7e7; } /*지역변수 선언*/ .content{ --content-bg: #000; } /*변수 호출*/ .main{ background:var(--main-bg); } 2. css변수 ..

종종 디자인에 보더에 그라데이션이 들어가는 경우가 있습니다. 배경에 넣는 건 나름 익숙하지만 보더에?! 약간 생소할 때가 있어 정리해보려합니다! 1. 사각형 border (feat. border-image ) HTML 삽입 미리보기할 수 없는 소스 border 속성엔 두께와 solid만 지정하시고, border-image를 이용해 사각형 border에 간단히 그라데이션 줄 수 있습니다. border-image는 요소 주변의 테두리를 이미지로 지정하는 속성으로, url에 이미지 파일을 연결시키거나, 그라데이션을 넣어 줄 수 있습니다. border-image:url(./img/abcd.png); border-image:linear-gradient(to top, #FF6D60, #98D8AA) border-i..

애니메이션을 쉽게 구현할 수 있게 해주는 라이브러리인 gsap!! gsap의 scrollTrigger를 이용하여 각각의 영역에 스크롤이 위치하게 되면 해당 탭메뉴가 On, 벗어나게 되면 Off 되도록 구현해 보았습니다!! 나름 알록달록 꾸며보았습니다ㅎㅎㅎ Home About Work Contact panel-Home panel-About panel-Work panel-Contact .nav-list{position:fixed;top:0;left:0;width:150px;height:auto;background:#fff;} .nav-list .item{display:block;text-decoration:none;color:#000;padding:10px;text-align:center;border:1px..