[Frontend] Javascript 원버튼 다크모드
📌 들어가며 저번엔 버튼을 2개(야간/주간) 만들었다. 이번엔 원버튼으로, 하나의 버튼이 상태를 토글하도록 개선한다. 1. 원버튼 토글 <input id="night_day" type="button" value="night" onclick=" var target = document.querySelector('body'); ...
easydong
[Frontend] Javascript로 다크모드 만들기
📌 들어가며 이번 글에서는 버튼 2개(야간/주간 모드)를 만들어, JavaScript로 웹페이지의 배경·글자색을 바꿔본다. HTML(구조)·CSS(디자인)에 이어 JS(동작)를 더하는 것이다. 1. 버튼으로 색 바꾸기 <!-- night 버튼 --> <input type="button" value="night" onclick=...
[Frontend] HTML 태그들
📌 들어가며 이번 글에서는 HTML의 기본 태그들을 다룬다. 프론트엔드는 결과물을 바로 눈으로 확인할 수 있어 또 다른 재미가 있다. 1. 기본 구조 <!DOCTYPE html> <!-- HTML5 선언 --> <head> <meta charset="UTF-8"> <...
[Frontend] CSS로 웹페이지 만들기
📌 들어가며 이번 글에서는 CSS를 적극 활용해 드롭다운 메뉴바를 만든다. 평소엔 최상위 메뉴만 보이다가, 마우스를 올리면 하위 메뉴가 펼쳐지는 구조다. 1. 전체 골격 (HTML) <div id="container"> <header> <div id="logo"><a href="ind...
[Frontend] CSS 웹페이지 꾸미기
📌 들어가며 이번 글에서는 저번에 만든 웹페이지에 JS 슬라이드쇼와 CSS 탭 메뉴를 추가해 그럴듯하게 완성한다. 전체 코드는 길지만, 핵심 부분 위주로 살펴본다. 페이지 구조 한눈에 보기 container ├─ header (로고 + 드롭다운 메뉴) ├─ slideShow (JS 슬라이드쇼 + prev/next 버튼) ├─ conte...
[Frontend] CSS style
📌 들어가며 HTML을 대충 마치고 이번엔 CSS를 살짝 배웠다. HTML로 만든 구조에 스타일(디자인)을 입히는 것이 CSS다. 1. 왜 CSS가 필요한가? 링크 3개에 색을 주고 싶다면 각각에 style을 넣으면 된다. 하지만 링크가 수백~수천 개인 대형 사이트라면? 일일이 다는 건 비효율적이다. 이때 CSS로 한 번에 스타일을 적용한다....
[Frontend] CSS 그리드(grid)
📌 들어가며 이번 글에서는 2차원 레이아웃 도구인 CSS Grid와, 화면 크기에 반응하는 미디어 쿼리로 웹페이지를 다듬어본다. 레이아웃에 초점을 맞춘다. 1. 선택자 우선순위 — class vs id .saw { color: gray; } /* class → 온점(.) */ #active { color: purple; } /...
[Frontend] 부트스트랩
📌 들어가며 이번 글에서는 Bootstrap의 무료 템플릿을 가져와 내 웹페이지를 꾸며본다. Bootstrap이란? 미리 만들어진 CSS·JS 컴포넌트(네비게이션 바, 버튼, 그리드 등)를 제공하는 프론트엔드 프레임워크. 복잡한 CSS를 직접 짜지 않고도 세련된 UI를 빠르게 만들 수 있다. 1. 템플릿 가져오기 Bootstrap 홈...
[이산수학] 집합과 논리
📌 들어가며 이번 글에서는 인공지능을 위한 기초수학 중 이산수학(Discrete Math)의 집합·명제·논리를 정리한다. 이산(discrete): 별개의, 개별적인, 분리된. 이런 이산적 수학 구조를 연구하는 학문이 이산수학이며, 인공지능의 기초가 된다. 1. 집합 (Set) 집합: 여러 원소(element)의 모임. 중복된 원...
[이산수학] 함수 수열 관계
📌 들어가며 이번 글에서는 수학의 꽃인 함수·수열·관계를 정리한다. 1. 함수 (f: A → B) 함수: 집합 A의 모든 원소에 대해 집합 B의 원소가 하나씩 대응되는 관계. f: A → B(“A에서 B로 가는 함수 f”). A의 각 원소는 한 번만 대응해야 한다(두 갈래 금지). 용어 정의 ...