본문 바로가기
반응형

전체 글209

[HTML] canvas 태그 (그래픽 이미지 그리기) 목 차HTML 태그란?주요 특징기본 사용법 태그 속성Javascript로 캔버스에 그림 그리기사각형 그리기선 그리기원 그리기텍스트 그리기이미지 삽입애니메이션 만들기 태그와 태그의 차이점 HTML 태그란? 태그는 JavaScript를 사용하여 그래픽을 그릴 수 있는 영역을 제공하는 HTML 요소입니다. 이를 활용하여 도형, 이미지, 애니메이션, 게임 그래픽 등을 직접 화면에 그릴 수 있습니다.  주요 특징 태그 자체는 아무런 그래픽을 제공하지 않으며, JavaScript를 사용해 그림을 그려야 함.2D 그래픽 (CanvasRenderingContext2D) 또는 3D 그래픽 (WebGLRenderingContext)을 지원.벡터 그래픽이 아니라 비트맵 기반 → 확대하면 픽셀이 깨질 수 있음.HTM.. 2025. 2. 8.
[HTML] button 태그 목 차HTML 태그란?주요 특징기본 사용법 태그의 속성type (버튼의 동작 지정)disabled (버튼 비활성화)name과 value (form 데이터 전송 시 사용)버튼 안에 다양한 요소 포함 가능버튼 스타일링 (CSS 활용)버튼 크기와 색상 변경hover (마우스 올릴 때) 효과 추가버튼 아이콘 추가 (FontAwesome 사용)Javascript와 함께 사용버튼 클릭 이벤트 추가버튼 클릭 시 요소 변경 태그와 차이점 HTML 태그란? 태그는 클릭할 수 있는 버튼을 생성하는 HTML 요소입니다. 이 버튼을 클릭하면 특정 동작(이벤트)을 실행할 수 있으며, 폼 제출, JavaScript 실행, 링크 이동 등 다양한 기능을 수행할 수 있습니다.  주요 특징 내용을 포함할 수 있는 태그 → 버튼 .. 2025. 2. 7.
[HTML] br 태그 (줄바꿈) 목 차HTML 태그란?주요 특징 태그 사용 예제기본 사용주소 입력시 줄바꿈 적용노래 가사 표시하기 태그와 태그의 차이점 태그 사용시 하지 말아야 할 것 HTML 태그란? (Break Line) 태그는 줄바꿈(line break)을 삽입하는 태그입니다. 즉, 문장을 강제로 다음 줄로 이동시키고 싶을 때 사용합니다.  주요 특징 단독 태그(Self-closing tag) → 은 종료 태그()가 필요 없음.인라인 요소(Inline Element) → 문장 내에서 줄바꿈을 적용할 때 사용됨.CSS 없이도 줄바꿈 효과 제공 → 태그처럼 블록을 나누지 않고도 줄바꿈 가능.   태그 사용 예제💡 기본 사용 태그가 삽입된 위치에서 줄바꿈이 적용됩니다.첫 번째 줄입니다.이제 두 번째 줄입니다.출력 결과:첫 번.. 2025. 2. 7.
[HTML] body 태그 목 차HTML 태그란?주요 특징기본 구조 태그의 속성CSS를 이용한 스타일링배경색 변경배경 이미지 추가텍스트 스타일 변경Javascript와 함께 사용onload 이벤트 활용 (페이지가 로드될 때 사용)onunload 이벤트 활용 (페이지가 닫힐 때 사용) 태그와 안녕하세요! 이것은 HTML 문서의 본문입니다.※ 안의 내용만 브라우저에서 표시됩니다.   태그의 속성속성설명 background (구식 속성) 배경 이미지 설정 (CSS에서 background-image 사용 권장) bgcolor (구식 속성) 배경색 지정 (CSS에서 background-color 사용 권장) text (구식 속성) 본문 텍스트 색상 설정 (CSS에서 color 사용 권장) link (구식 속성) 하이퍼링크.. 2025. 2. 7.
[HTML] blockquote 태그 (긴 인용문) 목 차HTML 태그란?주요 특징사용 예시기본적인 사용출처 (cite 속성) 포함하기출처를 화면에 표시하기 (cite 태그 사용) 태그의 속성 태그와 태그의 차이점 HTML 태그란? 태그는 긴 인용문을 표시할 때 사용됩니다. 즉, 다른 출처에서 가져온 내용을 인용할 때 사용하며, 브라우저는 기본적으로 들여쓰기를 적용하여 인용문임을 강조합니다.  주요 특징 긴 인용문에 사용한두 단어가 아닌 여러 문장 이상의 긴 인용문을 포함할 때 를 사용합니다. 짧은 인용문은 태그를 사용하는 것이 적절합니다. 자동 들여쓰기 효과대부분의 브라우저는 를 사용하면 좌우 여백을 추가하여 들여쓰기 효과를 적용합니다.CSS를 이용해 스타일을 조정할 수 있습니다. 출처(cite 속성) 추가 가능cite 속성을 사용하면 인용.. 2025. 2. 6.
[HTML] bdo 태그 (강제 문자 정렬) 목 차HTML 태그란?주요 특징사용 예시텍스트 방향 반전시키기 태그와 태그의 비교 HTML 태그란? (Bi-Directional Override) 태그는 텍스트의 기본 읽기 방향을 강제로 변경할 때 사용됩니다. 즉, LTR(왼쪽 → 오른쪽) 언어와 RTL(오른쪽 → 왼쪽) 언어가 섞여 있을 때 강제로 특정 방향을 적용합니다.  주요 특징 강제적으로 텍스트 방향 변경 (dir 속성 필수)기본적으로 웹페이지의 텍스트 방향은 HTML 문서의 dir 속성(ltr 또는 rtl)을 따름.하지만 태그를 사용하면 해당 부분만 의도적으로 방향을 변경할 수 있음. 다국어 콘텐츠에서 유용함아랍어, 히브리어 등 RTL 언어를 LTR로 표시하거나, 반대로 영어를 RTL로 표시할 때 사용 가능. dir 속성이 필수 속.. 2025. 2. 6.
[HTML] bdi 태그 (문자 정렬 문제 해결) 목 차HTML 태그란?주요 특징사용 예시 없이 RTL 텍스트 사용 (문제 발생) 태그 사용 (문제 해결) 태그와 태그의 비교 HTML 태그란? (Bi-Directional Isolation) 태그는 양방향(Bi-Directional, Bidi) 텍스트를 독립적으로 표시하기 위해 사용됩니다. 즉, 다른 언어의 텍스트 방향이 섞일 때 원래 문장의 방향을 유지하면서 해당 부분만 올바르게 정렬하도록 합니다.  주요 특징 양방향 텍스트의 혼합 표시 문제 해결 LTR(Left-To-Right, 왼쪽에서 오른쪽) 언어(영어, 한국어)와 RTL(Right-To-Left, 오른쪽에서 왼쪽) 언어(아랍어, 히브리어)가 섞일 때 발생하는 텍스트 정렬 문제를 방지합니다. 자동으로 텍스트 방향을 감지 안의 텍스트 방향이 .. 2025. 2. 5.
[HTML] base 태그 (상대 경로, 절대 경로) 목 차HTML 태그란?주요 특징사용 예시기본 URL 설정 (href)기본 대상 설정 (target) 태그의 속성 태그 사용시 주의 사항 태그와 절대 경로 vs 상대 경로 비교 HTML 태그란? 태그는 HTML 문서에서 기본 URL(기본 주소)과 기본 대상(target)을 설정하는 역할을 합니다. 이를 통해 문서 내의 상대 경로 링크와 리소스(이미지, CSS, JavaScript 등)의 기본 경로를 지정할 수 있습니다.  주요 특징 기본 URL 설정 (href 속성 사용)문서 내 상대 경로 링크의 기본 주소를 정의합니다.페이지에 있는 모든 상대 URL 링크(href, src 등)가 에 설정된 경로를 기준으로 해석됩니다. 기본 대상(target) 설정 (target 속성 사용)문서의 모든 하이퍼링크.. 2025. 2. 5.
[HTML] b 태그 (모르면 안되는 내용 정리) 목 차HTML 태그란? 태그 특징 및 역할 요약사용 예시기본적인 태그 사용 태그와의 차이 태그와 태그 비교CSS로 태그 대신 스타일링 하는 방법 HTML 태그란? 태그는 텍스트를 굵게 (bold) 표시하는 데 사용됩니다. 하지만 단순한 시각적 효과만 제공하며, 문맥적 중요성을 의미하지는 않습니다.   태그 특징 및 역할 요약텍스트를 굵게 표시 태그는 해당 텍스트를 시각적으로 강조하여 굵게 보이도록 합니다.하지만 의미론적인 강조(중요성, 강한 강조 등)를 나타내지는 않습니다.CSS 없이 기본적으로 적용됨 태그를 사용하면 별도의 CSS 없이도 글자가 굵게 표시됩니다.기본적으로 font-weight: bold; 스타일이 적용됩니다.중요한 정보 전달을 위한 용도 X 태그는 단순한 스타일링 용도로 사용되며.. 2025. 2. 4.
구글 애드센스 사이트 추가하고 통합 관리하기 목 차구글 애드센스 사이트 추가 방법구글 애드센스 광고 코드 적용하기 구글 애드센스 사이트 추가 방법수익형 블로그나 사이트를 운영하면서 구글 애드센스 계정을 어떻게 해야 할지 고민이 되실 겁니다.구글 애드센스는 여러 사이트를 등록하고 통합해서 관리할 수 있기 때문에 간단하게 사이트 추가하고 심사만 통과한다면 문제없이 사용하실 수 있습니다.어렵지 않으니 천천히 따라해 보세요.  구글 애드센스에 접속한 후에 [사이트] 메뉴에 들어가 주세요.해당 페이지에 들어가면 [새 사이트] 버튼이 보이실 겁니다.  등록하고 싶은 웹사이트 주소를 입력하는 창이 나타납니다.사이트 주소를 입력해 주세요.  티스토리 블로그의 경우에는 티스토리에서 설정을 완료하라는 문구를 확인할 수 있습니다.티스토리 블로그 관리자 페이지에 돌아가.. 2025. 1. 24.
반응형