[JavaScript] mini-project : counter program

귀여운 숫자 세기 프로그램을 만들었다! 아래는 개발 순서이다. 1. html로 숫자(countLabel), 버튼 3개(decreaseBtn, resetBtn, increaseBtn) 만들기2. css로 위치 수정하기 (버튼은 아래로 나열, 숫자는 가운데 위로)3. javascript로 기능 구현 이렇게만 했는데 조금 아쉬워서, 색깔과 폰트, 일부 기능을 추가했다.1. 색깔을 수정하기 위해 여러개의 div를 추가하여 구역을 분할해 색깔과 padding, margin을 다듬었다.2. 무료 저작권 폰트 사이트 '눈누'를 사용하여 픽셀 느낌의 폰트를 추가해주었다.3. javascript를 통해 'increase'버튼을 누르면 숫자가 살짝 튀어오르고, 반대로 'decrease' 버튼을 누르면 숫자가 살짝 내려가..

• format_list_bulleted Languages/JavaScript
• · 2025. 8. 22.

[CSS] CSS 중급 문법 : 5. 미디어 쿼리 Media Queries

Responsive Web Design✅ 반응형 웹사이트(Responsive Website)의 필요성 :사용자는 웹사이트를 휴대폰, 태블릿, 컴퓨터, TV 모니터 등 다양한 기기에서 접속한다.이때 기기마다 화면 크기가 크게 다르기 때문에, 웹사이트는 화면 크기에 따라 콘텐츠를 재배치하고 크기를 조정해야 한다. 만약 웹사이트가 기기 크기에 맞게 반응하지 않는다면, 특히 작은 화면(예: 스마트폰)에서는 화면이 깨져 보이거나 아예 내용을 읽을 수 없게 된다. 이처럼 화면 크기에 따라 레이아웃이 자동으로 변하는 웹사이트를 반응형 웹사이트(Responsive Website) 라고 한다. View Meat Tag✅ Viewport 란? :Viewport는 사용자가 실제로 볼 수 있는 영역을 의미기기에 따라 달라지..

• format_list_bulleted Languages/HTML&CSS
• · 2025. 8. 19.

[CSS] CSS 중급 문법 : 4. 성분 크기 조절 Sizing Elements

Relative Measurements✅ 반응형 디자인(Responsivie Design) :현대에는 데스크탑, 스마트폰, 태블릿 등 다양한 기기에서 웹사이트를 이용한다. 하지만 기기마다 화면 크기가 다르다는 점이 웹 개발자에게 문제를 일으킨다.해결책은 반응형 디자인(Responsive Design) 이다. 반응형 디자인이란, 웹사이트가 상황에 따라 자동으로 크기와 배치를 조정하여, 모든 화면 크기에서 가독성과 시각적 일관성을 유지하는 것을 의미한다.조정 기준은 다음과 같다:웹사이트 내 다른 콘텐츠의 크기화면 크기 (뷰포트 크기) ✅ 픽셀 단위(px)의 한계 :px → 고정값(Fixed Value)예: width: 500px; height: 100px;문제점: 화면 크기가 변하면 콘텐츠가 너무 작아지거나..

• format_list_bulleted Languages/HTML&CSS
• · 2025. 8. 16.

[CSS] CSS 중급 문법 : 3. 전환 Transition

CSS Transitions✅ CSS 전환(Transitions) 개요웹사이트가 표시된 후 요소의 시각적 모습은 여러 이유로 변경될 수 있다. 예를 들어,링크 위에 마우스를 올렸을 때 색상이나 모양이 바뀜창 크기를 조절했을 때 레이아웃이 변경됨스크롤 시 일부 요소가 사라지고 다른 요소가 나타남이러한 변화는 상태 변화(State Change) 이며, CSS Transition을 사용하면 이러한 변화가 부드럽게 진행되도록 제어할 수 있다. ✅ Transition으로 제어할 수 있는 요소어떤 CSS 속성을 전환할지 (transition-property)전환이 지속되는 시간 (transition-duration)전환이 시작되기 전 대기 시간 (transition-delay)전환의 가속도 곡선 (transiti..

• format_list_bulleted Languages/HTML&CSS
• · 2025. 8. 16.

[CSS] CSS 중급 문법 : 2. 그리드 Grids

Introduction to Grids✅ CSS로 레이아웃을 구성하는 다양한 방법웹페이지의 요소를 배치하는 방식에는 정답이 없다.콘텐츠의 종류와 목적에 따라 다양한 스타일링 기법이 필요하다.지금까지 배운 Box Model, Display, Positioning, Flexbox는 단일 축(one-dimensional) 기준으로 효율적인 배치를 도와주었다. ✅ CSS Grid란?CSS Grid는 보다 강력하고 유연한 2차원 레이아웃 시스템이다.비교 항목FlexboxCSS Grid레이아웃 방향1차원 (row 또는 column)2차원 (row + column)사용 목적아이템 정렬에 초점전체 레이아웃 설계에 적합Flexbox는 요소 간 정렬과 비율 조정에 강하고,Grid는 페이지 전체 구조를 디자인하는 데 유리..

• format_list_bulleted Languages/HTML&CSS
• · 2025. 8. 12.

[CSS] CSS 중급 문법 : 1. Flex박스로 만드는 레이아웃 Layout with Flexbox

What is Flexbox?Flexbox 레이아웃은 두 가지 주요 구성 요소로 이루어진다:Flex Container: 플렉스 아이템을 포함하는 부모 요소Flex Items: 플렉스 컨테이너의 자식 요소들플렉스 아이템은 반드시 플렉스 컨테이너의 '직속 자식 요소' 여야 한다는 점이 중요하다.플렉스 컨테이너로 지정하려면 해당 요소의 display 속성을 flex 또는 inline-flex로 설정하면 된다. Flexbox에는 컨테이너에 적용하는 속성과 아이템에 적용하는 속성이 구분되어 있다. 아래는 주요 속성 목록이다: 컨테이너에 적용하는 속성justify-content : 주 축(main axis) 방향 정렬align-items : 교차 축(cross axis) 방향 정렬flex-direction : 주 ..

• format_list_bulleted Languages/HTML&CSS
• · 2025. 8. 8.