반응형 분류 전체보기132 Javascript로 알림창 보이기 / 숨기기 (+ 함수로 개선하기) Javascript로 알림창 보이기 / 숨기기 웹 사이트에서 마우스 롤오버를 하면 숨겨져 있던 서브메뉴가 보인다거나, 공지 알림창을 클릭하면 사라지거나 하는 경우는 거의 대부분 Javascript로 CSS의 display 속성 값을 'none' 이나 'block'으로 변경하는 방법을 사용하는 경우가 많습니다. 물론 이와 같은 방법은 알림창 뿐 만이 아니라, 모든 HTML의 엘리먼트 요소들에 적용이 가능합니다. 동작원리도 매우 간단하기 때문에 한번 들여다보고 이해를 해두면, 동적인 UI를 만드는데 아주 훌륭한 기초지식이 되어줄 것입니다. 간단한 HTML / CSS 예제 코드를 통해 함께 살펴보겠습니다. Notice 버튼 .alert-box { background-color: slategray; paddin.. 2023. 1. 15. CSS와 JavaScript로 HTML문서 내 Style 적용하는 방법 비교 CSS와 JavaScript로 HTML문서 내 Style 적용하는 방법 비교 HTML 문서에는 일반적으로 CSS를 이용해서 스타일링을 합니다. CSS는 스타일링을 위한 목적으로 만들어진 마크업 언어이기도 하니까요. 그런데, JavaScript를 이용해서도 HTML 문서를 스타일링 할 수가 있습니다. 왠지 같은 기능을 서로 하는 것 같은데, 그럴만한 이유는 다 존재합니다. 우선은 CSS와 Javascript가 같은 스타일링을 하는 데 있어 어떻게 서로 다른 모습을 띄는 지 살펴봅시다. 아래와 같은 간단한 샘플코드를 준비해보았습니다. JavaScript Stydy 글자 크기 변경하기 글자 크기를 변경하는 스타일링으로 간단하게 비교해보겠습니다. CSS 경우 Javascript의 경우에는 CSS는 font-si.. 2023. 1. 14. VSCode 코드 글자 확대 - Ctrl + Mouse Wheel 줌 세팅하기 VSCode 코드 글자 확대 - Ctrl + Mouse Wheel 세팅하기 업무를 위해서는 이제 듀얼 모니터 사용이 디폴트가 된 시대 같은데요, 얼마 전 구매한 포터블 모니터로 노트북고 함께 작업을 하곤 합니다. 포터블 모니터는 15인치에 해상도가 2560 x 1600 이다보니, 1:1 비율에서 글자가 매우 작게 보이더라구요. 깨알 같은 코드들을 살펴보자니.. 어이쿠 눈이야... 싶습니다. 윈도우에서 디스플레이 배율을 높이는 방법도 존재하지만, 이렇게 하면 디자인 작업할 때는 또 눈대중이 많이 달라지더라구요. 그래서~! VSCode에서 코딩을 할 때만, 가독성을 위해 글자를 키워서 사용하곤 합니다. Ctrl + / Ctrl - 컨트롤키(Ctrl)를 누른 채로 플러스(+) 키를 누르면 화면이 확대되고, 컨.. 2023. 1. 13. CSS 선택자? 우선 '#', '.' 2개만 기억하세요 CSS 선택자(CSS Selector) CSS는 뼈대를 이루는 HTML 문서에 피부(또는 옷)를 입히는 역할을 해줍니다. 예쁘게 꾸며주는 역할을 합니다. 그래서 원하는 곳에 변화를 잘 주려면, 원하는 위치를 잘 콕~ 찝어 내는 게 중요해집니다. 프로그래밍 혹은 코딩이라는 건 결국 컴퓨터를 시켜서 '손 안대고 코를 푸는 것'입니다. 그래서 CSS를 이용해서 스타일링을 할 때에도 '무언가를 선택하는 일'은 매우 중요한 기능이 됩니다. section과 div 사용해서 의미론적으로 구분해보기 누구나 잘 알고 있는 를 이용해서 간단하게 HTML 문서를 마크 업 해보았습니다. 이번에는 section, div를 사용해서 의미론적으로 구분을 해볼 수 있도록 했습니다. 애국가 동해물과 백두산이 마르고 닳도록 하느님이 보.. 2023. 1. 12. 이전 1 ··· 17 18 19 20 21 22 23 ··· 33 다음 반응형
