본문 바로가기
반응형
[HTML] Semantic Tag Semantic Tag- Semantic 요소는 div나 span과 달리 자체로 의미를 가지고 있는 요소HTML5에 추가된 의미 요소header헤더를 정의. 헤더는 도입부에 해당하는 콘텐츠(content)를 가지고 있는 부분을 의미nav내비게이션을 의미. HTML 문서 사이를 탐색할 수 있는 링크(link)의 집합을 정의main주요 콘텐츠를 정의aside페이지 부분 이외의 콘텐츠 정의. 주로 사이드에 공간에 위치section본문의 여러 내용을 포함하는 공간을 의미. 제목을 가지고 전체적인 내용과 관련이 있는 콘텐츠들의 집합을 의미article독립적인 하나의 기사 부분을 정의figure, figcaptionfigure는 그래픽과 비디오 등의 독립적인 콘텐츠를 정의할 떄 사용. figcaption은 figu.. 2024. 8. 2.
[HTML] Head Tag Head Tag- : 메타데이터를 포함하기 위한 요소. 메타데이터 이외의 요소를 포함해서는 안 됨- : 문서의 제목을 정의. 브라우저 탭에 표시문서 제목- - : 외부 리소스와의 연계 정보 정의. HTML과 외부 CSS 파일 연계에 사용- - : description, keywords, author 등 메타데이터 정의. 브라우저, 검색엔진에 사용. charset은 브라우저가 사용할 문자셋 정의  +) 버전별 문자셋 정의 +) 문자셋 종류1. ASCII : 가장 처음 만들어진 문자셋으로, 인터넷에서 사용할 수 있는 127개의 영문자와 숫자로 이루어져 있습니다.2. ANSI : 윈도우즈에서 만든 문자셋으로, 총 256개의 문자 코드를 지원합니다.3. ISO-8859-1 : 256개.. 2024. 8. 2.
[HTML] HTML5 기본 문법 요소 구성- HTML5 요소는 시작 태그, 종료 태그 그리고 태그 사이의 내용으로 구성content- Tag: 태그 이름. 소문자를 추천- attr: 속성명- value: 속성값. 큰 따옴표로 감싸기를 추천- content: 내용빈 요소- 빈 요소의 경우 내용과 종료 태그가 없음: br, hr, img, input, link, meta요소의 속성-  HTML5 속성은 요소의 성질, 특징을 정의하는 명세. 요소에 추가적 정보를 제공. 시작 태그에 위치하며 이름과 값의 쌍으로 존재id유일한 식별자(id)를 요소에 지정. 중복 지정이 불가class스타일시트에 정의된 class를 요소에 지정. 중복 지정이 가능hiddencss의 hidden과는 다르게 의미상으로도 브라우저에 노출되지 않음background배경을.. 2024. 8. 2.
[HTML] HTML5 기본 구조 HTML 기본 구조- HTML5 문서는 으로 시작하여 문서 형식(document type)을 HTML5로 지정- HTML document는 과  사이에 기술- HTML document는 요소들의 집합으로 구성. 요소들의 중첩을 통한 정보 구조화. 들여쓰기로 구분-  사이에는 document title, 외부 파일의 참조, 메타데이터의 설정 등이 위치. 해당 정보들은 브라우저에 표시되지 않음- 웹브라우저에 출력되는 모든 요소는 와  사이에 위치 - : 문서 형식 정의(DTD)는 현재 문서가 HTML5 문서임을 명시. 문서의 최상위에 위치하고 대소문자 구별하지 않음- : H.. 2024. 8. 2.
[HTML5] HTML5 개요 HTML- HTML은 HyperText Markup Language의 약어로 웹 페이지를 기술하기 위한 Markup Language- 웹 페이지의 내용과 구조를 담당하는 언어로 HTML Tag를 통해 정보를 구조화- HTML5는 웹 상에서 콘텐츠(content)를 구성하고 보여주기 위한 HTML 언어의 최신 표준 권고안HTML5 특징1. 멀티미디어: 플래시와 같은 플러그인의 도움없이 비디오 및 오디오 기능을 자체적으로 지원2. 그래픽: SVG, 캔버스를 사용한 2차원 그래픽과 CSS3, WebGL을 사용한 3차원 그래픽을 지원3. 통신: 이전의 HTML은 단방향 통신만이 가능하였으나 HTML5는 서버와의 소켓 통신을 지원하므로 서버와의 양방향 통신이 가능4. 디바이스 접근: 카메라, 동작센서 등의 하드웨.. 2024. 8. 2.
[C++로 배우는 게임 엔진 개발] Day 16: 2D 조명과 그림자 효과 2D 조명과 그림자 효과오늘은 OpenGL과 GLSL을 사용하여 2D 조명과 그림자 효과를 구현하는 방법을 학습하겠습니다. 이를 통해 게임 그래픽을 더욱 현실감 있게 만들 수 있습니다.1. 조명 효과의 개요조명 효과는 물체의 밝기와 색상을 변경하여 현실적인 느낌을 주는 그래픽 기법입니다. 2D 게임에서는 주로 점광원(Point Light)을 사용하여 조명 효과를 구현합니다.2. GLSL 쉐이더 수정조명 효과를 구현하기 위해 기존의 버텍스 쉐이더와 프래그먼트 쉐이더를 수정하겠습니다. 버텍스 쉐이더shaders/vertex_shader.glsl 파일을 다음과 같이 수정합니다.#version 330 corelayout(location = 0) in vec3 aPos;layout(location = 1) in .. 2024. 8. 1.
[C++로 배우는 게임 엔진 개발] Day 17: 입자 시스템 구현 입자 시스템 구현오늘은 OpenGL과 GLSL을 사용하여 입자 시스템을 구현하고, 다양한 시각 효과를 만드는 방법을 학습하겠습니다. 입자 시스템은 폭발, 연기, 불꽃, 눈, 비 등 다양한 시각 효과를 표현하는 데 사용됩니다.1. 입자 시스템의 개요입자 시스템은 작은 입자들로 구성되어 특정한 규칙에 따라 움직이는 시스템입니다. 각 입자는 위치, 속도, 색상 등의 속성을 가지며, 시간에 따라 변화합니다.2. 입자 클래스 설계먼저 입자를 관리하기 위한 Particle 클래스를 설계합니다. 헤더 파일 작성include/Particle.h 파일을 생성하고 다음과 같이 작성합니다.#ifndef PARTICLE_H#define PARTICLE_H#include struct Particle { glm::vec3 .. 2024. 8. 1.
[C++로 배우는 게임 엔진 개발] Day 18: 간단한 UI 시스템 구현 간단한 UI 시스템 구현오늘은 OpenGL과 SDL_ttf를 사용하여 간단한 UI 시스템을 구현하고, 게임 내에서 텍스트와 버튼 같은 UI 요소를 만드는 방법을 학습하겠습니다.1. SDL_ttf 설치 및 설정먼저 SDL_ttf 라이브러리를 설치하고 프로젝트에 설정합니다. CMakeLists.txt 수정CMakeLists.txt 파일에 SDL_ttf 라이브러리를 추가합니다.cmake_minimum_required(VERSION 3.10)# 프로젝트 이름과 버전 설정project(GameEngine VERSION 1.0)# C++ 표준 설정set(CMAKE_CXX_STANDARD 17)set(CMAKE_CXX_STANDARD_REQUIRED True)# 헤더 파일 디렉토리 포함include_directori.. 2024. 8. 1.
[C++로 배우는 게임 엔진 개발] Day 19: 스크립팅 시스템 기초 (Lua) 스크립팅 시스템 기초 (Lua)오늘은 Lua를 사용하여 스크립팅 시스템을 구현하고, 게임 로직을 스크립트로 작성하는 방법을 학습하겠습니다. 스크립팅 시스템을 통해 게임 로직을 유연하게 변경하고, 확장할 수 있습니다.1. Lua 설치 및 설정먼저 Lua를 설치하고 프로젝트에 설정합니다. Lua 다운로드 및 설치Lua 공식 웹사이트에서 Lua 바이너리 파일을 다운로드합니다.다운로드한 파일을 프로젝트 디렉토리로 이동합니다.CMakeLists.txt 수정CMakeLists.txt 파일에 Lua 라이브러리를 추가합니다.cmake_minimum_required(VERSION 3.10)# 프로젝트 이름과 버전 설정project(GameEngine VERSION 1.0)# C++ 표준 설정set(CMAKE_CXX_ST.. 2024. 8. 1.
[C++로 배우는 게임 엔진 개발] Day 20: 리소스 관리 시스템 구현 리소스 관리 시스템 구현오늘은 게임 엔진에서 사용할 리소스(텍스처, 사운드, 폰트 등)를 효율적으로 관리하기 위한 리소스 관리 시스템을 구현하겠습니다. 리소스 관리 시스템은 리소스의 로드, 캐싱, 해제를 담당하여 메모리 사용을 최적화하고 성능을 향상시킵니다.1. 리소스 관리 시스템 설계리소스 관리 시스템을 설계하고, 텍스처를 관리하는 TextureManager 클래스를 구현합니다. 헤더 파일 작성include/TextureManager.h 파일을 생성하고 다음과 같이 작성합니다.#ifndef TEXTUREMANAGER_H#define TEXTUREMANAGER_H#include #include #include #include class TextureManager {public: static Text.. 2024. 8. 1.
반응형

티스토리툴바