웹 개발 (3) 썸네일형 리스트형 [Web Game] 달려라 르탄이 웹 게임 만들기 이번 글에서는 스파르타 코딩클럽에서 무료로 제공하는 르탄이 달리기 게임 개발 과정을 기록해보려고 한다. HTML, CSS, JavaScript를 사용해 간단한 게임을 개발하며 웹 개발의 기본기를 다질 수 있는 좋은 기회가 되었다. 개발 도구로는 VS Code를 사용했으며, 기본적인 웹 기술들을 활용해 게임을 구현해 나가는 실습을 해볼 예정이다.이번 프로젝트는 JavaScript로 게임의 동작을 제어하고, CSS를 통해 게임 화면의 스타일을 꾸미며, HTML로 게임의 구조를 구성하는 방식으로 진행된다. 이 과정에서 화면 요소를 움직이게 만드는 방법, 사용자 입력에 반응하는 방법, 스타일과 애니메이션을 적용하는 기법 등을 학습할 수 있었다. HTMLHTML 파일에서는 페이지의 기본적인 레이아웃을 구성하고, .. [CSS] 7장: 효과적인 레이아웃을 위한 CSS 속성 다루기 개요이번 글에서는 웹 페이지 디자인에서 중요한 레이아웃 설계를 다루기 위해 CSS의 핵심 속성들을 살펴본다. 플렉스 박스와 그리드 레이아웃 시스템을 활용해 각각 1차원과 2차원 레이아웃을 설계하는 방법을 배울 것이다. 이를 통해 요소들의 배치와 정렬을 보다 직관적이고 유연하게 다룰 수 있다. 또한, 미디어 쿼리를 사용해 다양한 기기에서 반응형 웹을 구현하는 방법도 알아본다. 이러한 CSS 속성들을 통해 다양한 화면 크기와 해상도에서 최적화된 사용자 경험을 제공하는 웹 페이지를 설계할 수 있을 것이다.플렉스 박스 레이아웃으로 1차원 레이아웃 설계하기플렉스 박스 레이아웃 : 1차원 방식으로 효과적으로 레이아웃을 설계할 수 있도록 고안된 스타일 속성. 플렉스 박스 레이아웃 살펴보기구성 요소 : 주축 (수평축).. [CSS] 5장: CSS 선택자 다루기 개요이번 글에서는 CSS 선택자에 대해 다룰 예정이다. 선택자는 HTML 요소에 스타일을 적용할 때 어떤 요소를 선택할지 지정하는 기능이다. 이 장에서는 기본 선택자부터 시작해 조합 선택자, 가상 요소 선택자, 가상 클래스 선택자, 그리고 다양한 선택자를 조합해 사용하는 방법까지 배우게 된다. 이를 통해 보다 정교하고 효율적으로 스타일을 적용하는 방법을 익힐 수 있을 것이다. 기본 선택자 사용하기전체 선택자*{ /* CSS 코드 */ }HTML에서 사용할 수 있는 모든 요소를 한 번에 선택자로 지정하는 방법.* 기호를 통해 사용된다.h1, p 태그를 비롯해 html, head, title, style, body 태그 등 모든 요소가 선택된다.태그 선택자tagName{ /* CSS 코드 */ }HTML태그.. 이전 1 다음
