그냥, 일단 써내려가자

안녕하세요 무택입니다 :) 오늘 알아볼 기능은 html요소에 클래스 추가하는 함수를 만들어보려고 합니다. 오늘의 기능에서 포인트는 기능을 함수로 만들어서 반복 사용에 편하게 만드는 것입니다. 오늘의 예제 코드 1.HTML/CSS - 글자수가 5를 넘어가면 클래스 추가 글자입력: 2.JS - let title = document.querySelector('#title'); //요소에 클래스 추가하는 함수 function addClass(el, className) { el.classList.add(className); } function removeClass(el, className) { el.classList.remove(className); } function print(){ let prtLang = d..

css에 :hover를 사용해서 hover를 지정하면 반응형 웹에서는 페이지 이동 전에 hover 효과가 나오고 이벤트가 실행됨. 이걸 해결하기 위해서는 미디어쿼리 hover 코드를 사용. 일반 미디어쿼리 사용과 동일하며 아래 코드를 사용하면 됨 @media (hover: hover) { a:hover { color: red; text-decoration: underline; } }

안녕하세요 무택입니다 :) 오늘 알아볼 내용은 HTML을 구성할 때 어떤 식으로 section을 구분하고 콘텐츠 영역을 어떻게 구성할지에 대한 내용입니다. HTML 파일을 많이 만들어보신 분들은 익숙한 내용이지만 처음 접하거나 많이 접하지 않은 분들은 콘텐츠 영역을 어떻게 구성해야 할지 막막할 때가 있습니다. 그런 분들을 위해 내용을 한번 준비해 봤습니다. # 이런 분들이 보면 좋아요 - HTML을 처음 접하시는 분 - 반응형 웹에 대한 기초 지식이 필요하신 분 - 다른 사이트의 contents 영역이 어떻게 구성되는지 궁금하신 분 # 예시 코드 contents div contents div 일반적인 홈페이지의 큰 틀은 이렇습니다. 시맨틱 태그가 활성화되기 시작하면서 div만 사용하던 옛날과는 달리 he..

안녕하세요. 무택입니다 :) 오늘은 비밀번호 보안에 대해 알아보려고 합니다. 날이 갈수록 해킹의 위험도 높아지고 챗GPT같은 생성형 인공지능도 나오고 미래에는 어떻게 흘러갈지 모르는 세상이 되고 있습니다. 이렇게 온라인의 비중이 높아지고 있는 와중에 개인들의 정보 중에 중요한 것은 바로 비밀번호입니다. # 비밀번호 설정 방법 요즘에는 계정을 만들거나 비밀번호를 변경할때 브라우저에서 강력한 비밀번호를 추천해주기도 합니다. (정말 좋은 세상이에요) 하지만 이 기능도 못미더울 수도 있고 정말 확실한 보안을 가진 비밀번호를 설정하고 싶으신 분들이 있을 거예요. 그런 분들을 위해서 제가 찾아본 정보를 바탕으로 비밀번호를 어떻게 설정하면 좋을지에 대해서 정보를 공유하려고 합니다. (보안 이미지) a. 개인정보 활용..

안녕하세요. 무택입니다 :)오늘 알아볼 기능은 포토샵이 저장되지 않는 오류가 생길 때 해결 방법입니다. 저장 안 되는 오류는 많을 텐데 아래의 오류에 해당된다면 간단하게 해결할 수 있으니 보고 따라 해보시길 바랍니다.문제원인포토샵에서 파일을 저장하려고 할 때 위 같은 창이 뜰 때가 있습니다. 파일이 잠겨 있지도 않고 다른 프로그램에서 사용중이지도 않은데 뜰 때가 있어요. 그럴 때는 아래 프로세스를 중지 시켜야 합니다.문제 해결먼저 ‘Ctrl + Shift + ESC’를 눌러서 작업 관리자를 띄워줍니다. 그 후에 백그라운드 프로세스에 ’COM surrogate’라는 작업이 실행중인지 확인하고, 만약에 이 작업이 실행되고 있으면 포토샵 파일이 저장되지 않을때가 있습니다. 이 작업을 중지 시키고 저장하면 해결..

# 언어 버튼 누르면 설정 버튼 나오는 기능 See the Pen toggle로 클래스 추가할때 추가하는 클래스 붙여쓰기 by TytanLee (@TytanLee) on CodePen. # 자바스크립트를 이용해서 css를 추가할때 언어 버튼 클릭 시 언어를 선택하는 버튼들이 나오는 코드를 만들어서 js로 클래스 추가 기능을 넣었고 console에서 클래스가 추가 되었는지 확인까지 했는데 'display:block;'이 적용이 안되는 현상 발견 클론 사이트 들어가서 확인하니 추가할 클래스를 붙여서 쓰는거 확인 css 54번째 줄 'header .rightTab #langUl .langOn' > 처럼 띄어쓰지말고 아래처럼 추가시킬 태그에 클래스 붙여쓰기 'header .rightTab #langUl.lang..

안녕하세요 :) 무택입니다🧔 오늘 알아볼 기능은 og태그입니다. og태그 하면 잘 모르시는 분들이 많을 것 같은데 이게 무엇이냐면, 링크가 SNS에 공유될 때 보여줄 요약 내용을 최적화해서 설정하는 것입니다. Open Graph의 줄임말로 Meta Tag라고 하기도 합니다. 알기 쉽게 이미지로 설명하자면 # 사용하는 이유? 이 태그를 넣으면 문서의 실제 모양과는 상관이 없지만 검색 엔진 최적화 효과가 있고 콘텐츠 홍보에 도움이 되기때문에 사용합니다. 이미지를 보면 아시겠지만 설정된 사이트는 사이트의 이미지가 조금 더 신뢰성이 있어 보이기도 합니다. 이 기능은 페이지가 어떤 내용을 다루고 있는 간접적으로 보여주면서 사용자들의 페이지 방문까지도 유도할 수 있습니다. # 어떻게 사용할까요? 위 코드처럼 사이에..

안녕하세요 :) 무택입니다🧔 오늘 알아볼 기능은 포토샵에서 갑자기 텍스트가 깨져 보일 때 해결 방법입니다. 어느 날 갑자기 설정을 잘못 만져서 텍스트가 깨져 보이는 경우도 있고 처음에 설치할 때 설정을 잘못해서 깨져 보일 때도 있고 다양한 경우에 나타날 수 있는 현상입니다. 그럴 때 어떻게 해결해야 할지 알아봅시다. 포토샵 텍스트 깨지는 현상 해결 텍스트가 깨져보이는 이유는 바로 '안티앨리어싱' 기능이 설정되지 않아서 그렇습니다. 이름을 들어도 뭔지 감이 전혀 잡히지 않는데 이게 어떤 기능이냐 하면 이게 바로 안티앨리어싱 적용 여부 차이입니다. 위에 이미지에서 보이는 것처럼 미적용된 이미지는 계단현상이 발생합니다. 레이어의 표면이 매끄럽게 표현되지 않고 끊긴 것처럼 표현되어 있죠. 안티앨리어싱은 이 계단..

안녕하세요 :) 무택입니다🧔 오늘 알아보려고 하는 기능은 css에서 중요한 animation 기능입니다. 애니메이션은 지금은 웹개발이 다양화되고 전문화되면서 거의 필수라고 봐도 될 정도로 많이 사용되고 있는 기능입니다. 여러 사이트를 돌아다니면서 분석해 보면 트렌드가 동적인 웹사이트로 바뀌면서 정적인 사이트보다 동적인 사이트가 더 사용자 행동을 유도하고 체류시간을 높이는 것 같습니다. # animation 코드의미 - 0. @keyframes : keyframes 설정을 위한 시작 코드 1. animation-name : 어떤 @keyframes을 사용할지 정합니다. 2. animation-duration : 애니메이션의 총시간을 정합니다. 3. animation-timing-function : 애니메이..

안녕하세요 :) 무택입니다🧔 오늘은 구글 애드센스 통과 후기에 대해 남겨보려고 합니다. 구글 애드센스 통과는 저는 잘 몰랐지만 애드고시라고 불릴 정도로 통과를 어렵게 생각하시는 분들이 많더라구요. 그래서 관련 글들도 많은 것 같고 저도 신청하고 통과가 되지 않아서 찾아본 경험을 토대로 누군가는 여기에 관련된 정보를 찾아보지 않을까 해서 제가 생각했을 때의 팁을 남겨드립니다. # 신청할 때 상태 결론부터 말씀드리면 저는 애드센스를 한 번에 통과했습니다. 횟수는 한 번이었지만 기간은 2달 정도 걸린 것 같습니다. 여기에 관련된 내용은 아래에서 남겨드리고, 제가 애드센스를 신청할 때의 블로그 상태는 그리 괜찮은 편이 아니었습니다. 게시글 10개 정도, 일간 방문객은 평균 10명 정도. 많이 들어올 때는 70명..