그냥, 일단 써내려가자

안녕하세요 무택입니다 :) 오늘 알아볼 내용은 자바스크립트 기능 끄기입니다. 인터넷을 돌아다니다 보면 복사 금지라든가 오른쪽 마우스 클릭 금지, 드래그 금지 등 여러 가지 제한이 걸린 사이트들이 많은데 이런 제한들을 무시하고 기능을 사용할 수 있게 해주는 방법입니다. 자바스크립트 기능 끄기 1. 오른쪽 상단 점 세 개 메뉴 클릭 - 도구 더보기 - 개발자 도구 혹은 'F12' 누르기 2. 오른쪽 상단에 톱니바퀴 아이콘 클릭 3. Preferences에서 스크롤을 쭉 내리면 Debugger에 'Disable JavaScript' 체크 그러면 현재 사이트의 자바스크립트 기능이 작동하지 않으면서 제한 걸린 기능들을 사용할 수 있게 됩니다. 다만 보통 기능에 제한을 걸어둔 사이트들은 저작권에 예민한 사이트들이기..

See the Pen Untitled by TytanLee (@TytanLee) on CodePen. 코드에 대한 설명은 같이 나와있고 지켜야할 점은 - 부모 : perspective 설정 - 자식 : transform-style: preserve-3d 설정 - 손자 : 효과 구현 요소 위 양식을 지켜야 한다. 참고 블로그 : Web Club , nykim

안녕하세요 무택입니다 :) 오늘 알아보려고 하는 기능은 퍼블리싱하는데 시간 절약을 도와주는 animate 라이브러리를 알아보려고 합니다. 퍼블리싱하는 데 있어서 정적인 웹보다 동적인 웹이 UX에 있어서 더 좋은 환경이라는 건 많은 분들이 알고 계실 겁니다. 그런 동적인 웹을 만드는 데 있어서 많은 도움을 주는 라이브러리니까 아래 설명을 보고 활용해 보면 좋을 것 같습니다😉 Animate 라이브러리란? animate 라이브러리는 다양한 모션을 템플릿 형식으로 만들어서 웹사이트 퍼블리싱 할 때 쉽게 모션을 넣게 해주는 라이브러리입니다. 해외에서 만든 모션들이기 때문에 국내 페이지 개발에 사용할만한 모션이 많지는 않지만 적절한 상황에 넣으면 좋은 효과를 낼 수 있는 모션들이 많아서 퍼블리싱하면서 적절한 상황에..

HTML - 다운로드 바로가기 CSS - body { text-align: center; padding: 40px; } .btn a:hover .arrow::after { left: 6px; } .btn .btnTxt { display: inline-block; position: relative; padding: 10px 28px 10px 20px; color: #fff; background-color: #00cc00; border-radius: 8px; } .btn .btnTxt span { color: #a3f2a3; } .arrow { position: relative; } .arrow::after { position: absolute; left: 4px; top: 6px; content: ''; ..

안녕하세요 무택입니다 :) 오늘 알아볼 기능은 CSS의 홀수, 짝수 선택자 기능입니다. css를 작성하다 보면 짝수 항목에만 효과를 줘야 될 때가 더러 있습니다. 이럴 때 사용하면 좋은 코드로 상황에 따라 활용성이 많다고 생각합니다. # 한장 요약 # code - 코드 예제 See the Pen [css]홀수, 짝수 선택자 by TytanLee (@TytanLee) on CodePen. # 다른 코드 홀수 선택자는 :nth-child(1n) 짝수 선택자는 :nth-child(2n) 도 마찬가지로 적용이 되니 상황에 따라 사용하시면 됩니다.

안녕하세요 무택입니다 :) 오늘 알아볼 기능은 박스 안에서 텍스트가 올라오는 기능입니다. 최근 웹사이트에 사용되는걸 자주 보는 기능인데 말로 설명하는 것보다 아래에서 사례를 바로 알아봅시다. 기능을 적용하려면 animate 라이브러리 사용법을 기본적으로 알아야합니다. 코드 예제 See the Pen 박스 안에서 텍스트 올라오기(animate라이브러리) + txt stroke/txt fill by TytanLee (@TytanLee) on CodePen. HTML - M. Cloud Bridge CSS - *{ padding: 0; margin: 0; font-family: 'Prompt'; } div{ overflow: hidden; } h1{ font-size: 84px; line-height:1; t..

안녕하세요 무택입니다 :) 오늘 알아볼 기능은 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..

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