본문 바로가기
반응형
[HTML] 링크/목록/표 링크- hyperlink는 문서에서 문서로 연결을 의미. HTML에서 link는 hyperlink를 의미- : 하이퍼링크를 의미- href: 이동하고자 하는 파일의 위치나 url 경로절대 URL웹사이트 URL (href=”http://www.example.com/default.html”)상대 URL자신의 위치를 기준으로한 대상의 URL (href=”html/default.html”)fragment identifier페이지 내의 특정 id를 갖는 요소에의 링크 (href=”#top”)메일mailto:scripthref=”javascript:alert(‘Hello’);”- target: 링크를 클릭했을 때 윈도우를 어떻게 오픈할 지를 지정_blank링크로 연결된 문서를 새 창이나 새 탭에서 오픈._self링.. 2024. 8. 2.
[HTML] HTML5 텍스트 요소 제목- ~ : 제목을 표시본문- : 단락을 표시. 단락이란 내용상 끊어서 구분할 수 있는 하나하나의 부분을 의미. 태그 내에서 작성된 여러 번의 띄어쓰기와 줄 나누기는 오직 하나의 띄어쓰기로만 표현- : break line을 사용하여 줄 나누기- : 작성된 텍스트의 모든 띄어쓰기와 줄 나누기는 웹 브라우저에 그대로 표현- : 수평 가로 구분선 표시. 단란을 나누거나 내용상의 구분을 표현글자 형식- : 텍스트를 굵게 표현- : 텍스트를 굵게 표현. 중요하다는 의미 포함- : 이탤릭체 표현- : 이탤릭체 표현. 중요하다는 의미 포함- : small text를 표시- : 하이라이팅 효과 표현- : 삭제 효과. 텍스트 중앙에 가로줄을 만들어 마치 텍스트를 지운 것과 같은 효과- : 삽입 효과. 텍스트 밑에 가.. 2024. 8. 2.
[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.
반응형

티스토리툴바