본문 바로가기

📁 [4] 개발자 정보 & 코드 노트/HTML15

HTML 기초 강의 15편: 고급 HTML5 기능과 최신 API 1. 지오로케이션(Geolocation) API지오로케이션 API를 사용하면 사용자의 위치 정보를 얻을 수 있습니다. 이 기능은 지도, 위치 기반 서비스 등에 사용되며, 사용자의 동의를 필요로 합니다.사용 예제if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition, showError);} else { console.log("Geolocation is not supported by this browser.");}function showPosition(position) { const latitude = position.coords.latitude; const longitude = position.. 2024. 11. 15.
HTML 기초 강의 14편: 로컬 스토리지와 세션 스토리지 1. 웹 저장소(Web Storage)란?웹 저장소는 HTML5에서 추가된 기능으로, 사용자 브라우저에 데이터를 저장할 수 있게 합니다. 웹 저장소는 주로 로컬 스토리지와 세션 스토리지로 나뉘며, 두 방식 모두 쿠키보다 많은 데이터를 저장할 수 있고, 서버로 데이터를 전송하지 않습니다.로컬 스토리지(Local Storage): 브라우저에 영구적으로 저장되며, 브라우저를 종료해도 데이터가 남아 있습니다.세션 스토리지(Session Storage): 세션이 유지되는 동안만 저장되며, 탭이나 창을 닫으면 데이터가 삭제됩니다.2. 로컬 스토리지 사용하기로컬 스토리지는 localStorage 객체를 사용하여 접근하며, 주로 setItem, getItem, removeItem, clear 메서드로 데이터를 관리합니.. 2024. 11. 14.
HTML 기초 강의 13편: 캔버스(Canvas)로 그래픽 그리기 1. 캔버스 기본 구조 태그는 그래픽을 표시하는 영역을 제공합니다. 단순히 만 사용하면 빈 영역이 나타나며, 여기에 JavaScript로 그래픽을 그리게 됩니다. id: 캔버스를 JavaScript에서 식별하기 위해 사용됩니다.width와 height: 캔버스의 너비와 높이를 설정합니다. 기본 값은 300x150입니다.2. 캔버스 시작하기JavaScript에서 캔버스를 다루기 위해 먼저 **2D 드로잉 컨텍스트(context)**를 생성해야 합니다. 드로잉 컨텍스트는 그래픽을 그리기 위한 다양한 메서드를 제공합니다.드로잉 컨텍스트 생성하기const canvas = document.getElementById('myCanvas');const ctx = canvas.getContext('2d');  3. 기본.. 2024. 11. 13.
HTML 기초 강의 12편: SEO 기초와 HTML 최적화 1. SEO(검색 엔진 최적화)란?SEO(Search Engine Optimization)는 웹 페이지가 검색 엔진 결과에서 더 높은 순위에 노출되도록 돕는 최적화 작업입니다. SEO를 통해 웹 페이지의 트래픽을 높일 수 있으며, 특히 검색 결과 상위에 노출될 가능성이 커집니다. HTML에서 SEO를 위해 할 수 있는 작업들은 다음과 같습니다. 2. 메타 태그(Meta Tag)메타 태그는 페이지의 메타데이터를 제공하며, 주로 HTML SEO 최적화 기초 SEO란 무엇인가? SEO는 검색 엔진 최적화를 뜻합니다. 웹 페이지가 검색 엔진 상위에 노출되도록 최적화하는 작업입니다. .. 2024. 11. 12.
HTML 기초 강의 11편: 웹 접근성(Accessibility) 기초와 ARIA 태그 1. 웹 접근성이란?웹 접근성(Accessibility)은 모든 사용자, 특히 장애가 있는 사용자들이 웹 콘텐츠를 쉽게 이용할 수 있도록 웹 페이지를 설계하는 것을 의미합니다. 접근성 좋은 웹 사이트는 시각, 청각, 운동 능력이 제한된 사용자들도 쉽게 사용할 수 있습니다. 접근성을 높이면 더 많은 사람들이 웹 사이트를 이용할 수 있으며, SEO에도 긍정적인 영향을 줍니다. 2. 접근성 향상을 위한 HTML 태그와 속성1) alt 속성이미지 태그의 alt 속성은 이미지가 표시되지 않을 때 대체 텍스트를 제공합니다. 화면 읽기 장치는 alt 속성을 읽어 이미지의 내용을 전달하므로 시각 장애인을 위해 꼭 추가하는 것이 좋습니다.2) label 태그label 태그는 입력 필드에 레이블을 제공하며, 화면 읽기 장.. 2024. 11. 11.
HTML 기초 강의 10편: 이미지, 비디오, 오디오 삽입하기 1. 이미지 삽입하기: 태그이미지는 태그를 사용하여 삽입하며, 주요 속성으로 src, alt, width, height 등이 있습니다. 태그는 닫는 태그가 없는 단일 태그입니다. src: 이미지 파일의 경로를 지정합니다.alt: 이미지를 표시할 수 없는 경우 대신 표시할 텍스트로, 웹 접근성에도 중요합니다.width, height: 이미지의 너비와 높이를 픽셀(px) 또는 퍼센트(%)로 설정합니다.예제: 이미지 삽입 2. 비디오 삽입하기: 태그HTML5에서는 태그를 사용하여 비디오를 직접 삽입할 수 있습니다. 태그로 다양한 형식의 비디오 파일을 추가하여 호환성을 높일 수 있습니다. 지원하지 않는 브라우저에서는 이 텍스트가 표시됩니다.controls: 재생, 일시 정지, 볼륨.. 2024. 11. 10.
HTML 기초 강의 9편: 폼 유효성 검사(Validation) 1. HTML5 기본 유효성 검사HTML5는 기본적인 폼 유효성 검사를 위한 속성을 제공하므로 간단한 폼에서는 JavaScript 없이도 데이터 형식을 확인할 수 있습니다. 주요 HTML5 유효성 검사 속성들을 살펴보겠습니다.1) requiredrequired 속성을 사용하면 필수 입력 필드로 설정할 수 있습니다. 사용자가 입력하지 않으면 폼이 제출되지 않습니다.사용자 이름:2) min과 max숫자 또는 날짜 입력에 최소값과 최대값을 설정하여 유효성 검사를 할 수 있습니다.비밀번호:3) minlength와 maxlength문자열 길이에 대한 최소/최대 길이를 설정할 수 있습니다.비밀번호:4) pattern정규식을 사용해 특정 패턴에 맞는 문자열만 입력받도록 할 수 있습니다. 예를 들어, 전화번호 형식을 .. 2024. 11. 9.
HTML 기초 강의 8편: HTML5 시맨틱 태그로 웹 구조 개선하기 1. 시맨틱 태그란?시맨틱 태그는 콘텐츠의 의미와 역할을 표현하는 HTML 태그입니다. 일반적인 , 과는 다르게, 시맨틱 태그를 사용하면 해당 영역의 의미가 명확해지므로, 웹 접근성과 SEO(검색 엔진 최적화)에 긍정적인 영향을 줍니다. 2. 주요 시맨틱 태그와 역할1) 웹사이트 이름 Home Services Contact 소개 우리 웹사이트에 오신 것을 환영합니다. 서비스 웹 개발 최신 기술로.. 2024. 11. 8.
HTML 기초 강의 7편: 테이블로 데이터 정리하기 1. HTML 테이블 기본 구조HTML에서 테이블은 태그로 시작하며, 각 행은 , 각 셀은 태그를 사용하여 만듭니다. 제목 셀은 태그를 사용해 강조할 수 있습니다. 이름 나이 직업 홍길동 30 개발자 김철수 25 디자이너  : 테이블 전체를 감싸는 태그: 테이블의 행을 나타내는 태그: 테이블 헤더 셀(굵은 글씨)로, 각 열의 제목을 설정: 테이블 데이터 셀로, 각 행의 데이터를 표시2. 테이블 속성1) borderborder 속성은 테이블의 테두리를 설정하며, 각 셀의 구분을 명확하게 해줍니다.  2) cellpadding와 cellspaci.. 2024. 11. 7.
HTML 기초 강의 6편: 폼과 입력 필드 1. HTML 폼 기본 구조HTML 폼은 태그를 사용하여 정의되며, 서버로 데이터를 전송할 수 있습니다. 폼은 주로 입력 필드와 전송 버튼으로 구성됩니다.  action: 데이터를 전송할 서버의 URL을 지정합니다.method: 데이터를 전송하는 방법으로 get 또는 post를 사용할 수 있습니다.get: URL에 데이터를 추가해 전송 (주로 검색에 사용)post: URL에 데이터가 표시되지 않으며 보안이 필요한 데이터 전송에 사용2. 기본 입력 필드HTML 폼에는 다양한 입력 필드가 있습니다. 각각의 필드는 type 속성으로 구분되며, 입력의 유형에 따라 다르게 동작합니다.1) 텍스트 입력 (type="text")사용자가 텍스트를 입력할 수 있는 필드입니다.이름: 2) 비밀번호 입력 (type=.. 2024. 11. 6.
HTML 기초 강의 5편: 반응형 웹 디자인과 미디어 쿼리 1. 반응형 웹 디자인이란?반응형 웹 디자인은 데스크톱, 태블릿, 모바일 등 다양한 디바이스 화면 크기에 따라 자동으로 레이아웃을 조정하는 웹 디자인 기법입니다. 화면 크기에 맞는 콘텐츠 배치로 사용자 경험을 최적화할 수 있습니다. 2. CSS 미디어 쿼리(Media Query)CSS 미디어 쿼리는 특정 조건에 따라 CSS 스타일을 적용할 수 있게 해 줍니다. 주로 화면 너비를 기준으로 스타일을 조정하며, 다양한 디바이스에 맞춰 스타일을 적용할 때 유용합니다.기본 구문미디어 쿼리는 @media 규칙을 사용해 적용합니다. 예를 들어, 화면 너비가 600px 이하일 때 스타일을 변경하고 싶다면 다음과 같이 작성합니다. @media (max-width: 600px) { /* 600px 이하에서 적용할 스.. 2024. 11. 5.
HTML 기초 강의 4편: CSS 레이아웃(Flexbox와 Grid)으로 웹 페이지 구성하기 1. CSS 레이아웃 개요CSS 레이아웃을 사용하면 HTML 요소들을 화면에 배치하고, 다양한 디스플레이 환경에서 반응형 웹 페이지를 구성할 수 있습니다. 주요 레이아웃 방식으로 Flexbox와 Grid가 있으며, 각 방법을 사용하여 콘텐츠를 쉽게 정렬할 수 있습니다. 2. Flexbox 레이아웃Flexbox는 1차원 레이아웃 시스템으로, 행 또는 열 방향으로 요소를 배치하고 정렬하는 데 유용합니다.Flexbox 기본 설정먼저, display: flex; 속성을 사용해 Flex 컨테이너를 설정한 다음, 하위 요소들을 배치할 수 있습니다. .container { display: flex; /* Flex 컨테이너 설정 */ justify-content: center; /* 가로 정렬: 가운데 */.. 2024. 11. 4.
HTML 기초 강의 3편: CSS로 웹 페이지 스타일링하기 1. CSS 소개CSS(Cascading Style Sheets)는 HTML 요소의 스타일을 정의하는 언어입니다. HTML이 웹 페이지의 구조를 정의한다면, CSS는 그 구조의 시각적 디자인을 설정합니다. CSS는 크게 인라인 스타일, 내부 스타일, 외부 스타일 시트 세 가지 방식으로 적용할 수 있습니다. 2. CSS 기본 적용 방식1) 인라인 스타일HTML 태그 내 style 속성을 사용하여 스타일을 지정합니다. 소규모 스타일에 적합합니다.이 문장은 파란색이고, 글씨 크기는 20px입니다.2) 내부 스타일 시트HTML 문서의 내부 스타일 시트로 스타일 적용 3) 외부 스타일 시트별도의 .css 파일에 스타일을 작성하고, HTML 문서에서 태그로 불러옵니다. 여러 HTML 파일에 동일한 스타일을.. 2024. 11. 3.
HTML 기초 강의 2편: 리스트, 테이블, 폼 태그로 웹 구성하기 1. 리스트 태그 (List Tags)리스트 태그는 항목들을 나열할 때 사용합니다. HTML에서는 순서가 있는 리스트와 순서가 없는 리스트 두 가지가 있습니다.순서가 없는 리스트 (, )순서가 없는 리스트는 태그로 감싸고, 각 항목은 태그로 작성합니다. HTML CSS JavaScript순서가 있는 리스트 (, )순서가 있는 리스트는 태그를 사용합니다. HTML 배우기 CSS 배우기 JavaScript 배우기2. 테이블 태그 (Table Tags)데이터를 표로 정리할 때 테이블 태그를 사용합니다. 테이블은 , , , 태그로 구성됩니다. 이름 나이 직업 홍길동 30 개발자.. 2024. 11. 2.
HTML 기초 강의 1편: 웹 페이지 기본 구조와 태그 HTML 기초 강의 1편: 웹 페이지 기본 구조와 태그HTML은 웹 페이지의 구조를 정의하는 마크업 언어입니다. 이번 강의에서는 HTML의 기본 구조와 자주 사용하는 태그들에 대해 설명합니다. 1. HTML 기본 구조HTML 문서는 선언으로 시작하고, 전체 구조는 ,   : HTML5 문서임을 선언합니다. : HTML 문서의 루트 요소입니다. HTML 기초 강의 1편 HTML은 웹 페이지의 구조를 정의하는 언어입니다. 다양한 태그를 사용해 페이지를 구성합니다. HTML 태그 예시 아래는 HTML에서 자주 사용하는 태그입니다. 링크 예제 OpenAI 사이트 방문 이미지 예제 단락 예제 이것은 하나의 단락입니다.  간단한 용어 정리태그(Tag).. 2024. 11. 1.

티스토리툴바