🖥️ IT, 컴퓨터/🌐 HTML, CSS, JS12

• [HTML] html 이전 버전 특징 (HTML1~HTML5) HTML의 주요 버전과 그 특징은 다음과 같습니다.1. HTML (1989-1995)최초의 HTML은 Tim Berners-Lee에 의해 개발되었으며, 간단한 문서 작성 및 하이퍼링크를 위한 기본적인 태그만 포함.매우 제한적이며, 웹페이지의 구조와 콘텐츠 표현에 초점을 맞춤.주요 태그:, , , , , , 등.2. HTML 2.0 (1995)IETF (Internet Engineering Task Force)에 의해 표준화.초창기 HTML의 모든 기능을 포함하면서 더 많은 태그와 속성이 추가됨.안정성과 브라우저 간 호환성을 강화.특징:양식 태그 과 입력 요소 , , 추가.테이블 태그 , , 지원.3. HTML 3.2 (1997)W3C (World Wide Web Consortium)에 의해 표준화된.. 🖥️ IT, 컴퓨터/🌐 HTML, CSS, JS 2025. 1. 3.

• [HTML] 개념 정리 11 :: 이미지 맵 <map> <area>태그 HTML 이미지 맵: 및 태그와 속성이미지 맵은 이미지의 특정 영역을 클릭했을 때 다른 페이지로 이동하거나 특정 동작을 수행하도록 설정하는 기능을 제공함. 이를 구현하기 위해 HTML에서는 및 태그를 사용함.1. 이미지 맵의 기본 구조(1) 태그이미지 맵을 정의하며, 하나 이상의 영역()을 포함함.(2) 태그이미지 맵의 특정 클릭 가능한 영역을 정의.(3) usemap 속성이미지 태그()에서 이미지 맵을 연결하기 위해 사용.기본 구조 2. 태그의 주요 속성(1) shape: 영역의 형태rect: 사각형 영역.circle: 원형 영역.poly: 다각형 영역.default: 이미지의 기본 영역.(2) coords: 영역의 좌표영역의 좌표를 픽셀 단위로 정의.형태에 따른 좌표 형식rect: x1.. 🖥️ IT, 컴퓨터/🌐 HTML, CSS, JS 2025. 1. 3.

• [HTML] 개념 정리 10 :: CSS와 JavaScript를 활용한 레이아웃 설정 CSS와 JavaScript를 활용한 레이아웃 설정 방법HTML, CSS, 그리고 JavaScript를 결합하면 동적인 웹 레이아웃을 설계하고 사용자 인터페이스를 향상시킬 수 있음. CSS는 주로 레이아웃 스타일링과 배치를 담당하며, JavaScript는 동적인 동작 및 사용자 상호작용을 처리함.1. CSS를 활용한 레이아웃 설정(1) 플렉스박스(Flexbox)플렉스박스는 유연한 레이아웃 설계를 위한 강력한 CSS 도구로, 행(row)과 열(column) 배치에 적합.예제: 플렉스박스를 사용한 기본 레이아웃 1 2 3(2) 그리드(Grid)CSS 그리드는 복잡한 2D 레이아웃을 쉽게 구성할 수 있음.예제: CSS 그리드 Header Content Sidebar Footer2. JavaScri.. 🖥️ IT, 컴퓨터/🌐 HTML, CSS, JS 2025. 1. 3.

• [HTML] 개념 정리 9 :: 내장프레임 <iframe> 페이지 삽입 및 속성 HTML 태그: 페이지 삽입 및 속성 사용법HTML의 태그는 한 웹페이지 안에 다른 웹페이지를 삽입하는 데 사용됨. 내장 프레임(Inline Frame)이라고도 하며, 독립적인 콘텐츠를 표시하거나 외부 페이지를 통합할 때 유용함.1. 태그 기본 구조기본 문법예제src: 삽입할 웹페이지의 URL.width: 프레임의 가로 크기.height: 프레임의 세로 크기.2. 주요 속성(1) src: 삽입할 페이지 경로src 속성에 삽입할 페이지의 URL을 지정.예제(2) width와 height: 크기 설정width와 height 속성으로 의 크기를 설정. 단위는 픽셀(px) 또는 퍼센트(%)를 사용.예제(3) frameborder: 테두리 표시 여부프레임의 테두리를 표시하거나 숨김.0: 테두리를 숨김.1:.. 🖥️ IT, 컴퓨터/🌐 HTML, CSS, JS 2025. 1. 3.

• [HTML] 개념 정리 8 :: CSS background 활용한 배경 설정 CSS 스타일 속성을 활용한 배경 설정CSS는 배경색과 배경 이미지를 포함한 다양한 스타일 속성을 제공하여 웹페이지의 배경을 세부적으로 설정할 수 있음. CSS의 background 관련 속성들을 사용하면 HTML 태그에 배경을 효과적으로 적용 가능.1. CSS 배경 스타일 속성(1) background-color: 배경색 설정웹페이지 또는 특정 요소의 배경색을 지정.예제(2) background-image: 배경 이미지 설정배경에 이미지를 삽입.예제(3) background-repeat: 이미지 반복 여부이미지의 반복 방식을 지정.repeat: 기본값. 이미지가 가로와 세로로 반복됨.no-repeat: 반복 없이 이미지를 한 번만 표시.repeat-x: 가로 방향으로만 반복.repeat-y: 세로 방.. 🖥️ IT, 컴퓨터/🌐 HTML, CSS, JS 2025. 1. 3.

• [HTML] 개념 정리 7 :: 음악 및 동영상 태그 <audio> <video> <source> HTML5에서 음악 및 동영상 태그HTML5는 멀티미디어 콘텐츠를 웹페이지에 삽입하기 위해 와 태그를 도입함. 이 태그들은 플러그인 없이도 음악과 동영상을 재생할 수 있는 강력한 기능을 제공하며, 다양한 속성을 통해 사용자 경험을 강화할 수 있음.1. 태그: 음악 삽입 태그는 음악이나 음성 파일을 삽입하고 재생하는 데 사용됨.기본 구조 브라우저가 오디오 태그를 지원하지 않습니다.주요 속성src: 오디오 파일 경로.controls: 재생 컨트롤 표시 (재생, 일시정지, 볼륨 조절 등).autoplay: 페이지 로드 시 자동 재생.loop: 재생이 끝난 후 반복 재생.muted: 기본적으로 음소거 상태로 설정.preload: 로드 방식 설정 (auto, metadata, none).예제: 속성 조합 .. 🖥️ IT, 컴퓨터/🌐 HTML, CSS, JS 2025. 1. 3.

• [HTML] 개념 정리 6 :: 테이블 태그<table>와 속성 HTML 테이블 태그: 와 속성 사용법HTML에서 테이블(table)은 데이터를 행(row)과 열(column)로 구성하여 정리된 형태로 보여줌. 태그와 관련 태그 및 속성을 사용하여 테이블을 구성할 수 있음.1. 테이블 태그 기본 구조(1) 주요 태그: 테이블 전체를 정의.: 테이블의 행(row)을 정의.: 테이블 헤더 셀(머리글)을 정의. 기본적으로 텍스트가 굵게 표시되고 중앙 정렬됨.: 테이블 데이터 셀을 정의.: 테이블 제목(캡션)을 추가.(2) 기본 구조 예제 예제 테이블 제목 1 제목 2 내용 1 내용 2 2. 테이블 속성(1) width와 height테이블 또는 셀의 크기를 설정. 단위는 px 또는 %를 사용. 셀 1 셀 2 (2) cel.. 🖥️ IT, 컴퓨터/🌐 HTML, CSS, JS 2025. 1. 3.

• [HTML] 개념 정리 5 :: 이미지 <img> 태그와 속성 HTML 이미지 태그: 태그와 속성 사용법HTML에서 태그는 웹페이지에 이미지를 삽입하는 데 사용됨. 는 독립 태그(Self-closing Tag)로, 닫는 태그가 필요 없음.1. 태그 기본 구조 태그는 이미지를 삽입하기 위해 src와 alt 속성이 필수적으로 사용됨.기본 구조2. 주요 속성(1) src (Source)이미지의 경로를 지정함.로컬 파일: src="images/example.jpg"외부 URL: src="https://example.com/image.jpg"(2) alt (Alternative Text)이미지가 표시되지 않을 때 대신 표시되는 텍스트. 접근성 향상과 SEO 최적화에 중요함.(3) width와 height이미지의 가로(width)와 세로(height) 크기를 픽셀(px).. 🖥️ IT, 컴퓨터/🌐 HTML, CSS, JS 2025. 1. 3.

• [HTML] 개념 정리 4 :: 하이퍼링크 <a> 태그와 속성 HTML 하이퍼링크: 태그와 속성 사용법HTML에서 태그는 하이퍼링크(링크)를 생성하는 데 사용됨. 웹페이지를 연결하거나 외부 리소스를 참조할 때 필수적으로 활용됨.1. 태그 기본 사용법 태그는 href 속성을 통해 링크를 지정함.기본 구조링크 텍스트예제구글로 이동href 속성: 연결하고자 하는 URL 또는 파일 경로를 지정.2. target 속성: 새 창, 현재 창, 프레임 설정target 속성은 링크 클릭 시 페이지가 열리는 방식을 정의함.(1) _blank새 탭 또는 새 창에서 링크를 열 때 사용.새 창에서 열기(2) _self (기본값)현재 탭에서 링크를 열 때 사용.현재 창에서 열기(3) _parent현재 프레임의 부모 프레임에서 링크를 열 때 사용. (프레임 구조에서 사용)부모 프레임에서.. 🖥️ IT, 컴퓨터/🌐 HTML, CSS, JS 2025. 1. 3.

• [HTML] 개념 정리 3 :: CSS로 텍스트 꾸미기 CSS로 글씨 꾸미기: 폰트 크기, 색상, 글꼴 설정 및 스타일링CSS(Cascading Style Sheets)를 사용하면 HTML에서 텍스트의 크기, 색상, 글꼴을 쉽게 설정하고 꾸밀 수 있음. 다양한 CSS 속성을 조합하면 글씨를 더욱 세련되게 표현할 수 있음.1. 폰트 크기 설정 (font-size)font-size 속성을 사용하여 글씨 크기를 설정할 수 있음.단위px: 고정된 픽셀 크기 (예: 16px).%: 부모 요소 기준 비율 (예: 120%).em: 부모 요소의 글씨 크기를 기준으로 한 상대 단위.rem: 루트 요소(html)의 글씨 크기를 기준으로 한 상대 단위.예제16px 크기의 텍스트120% 크기의 텍스트2. 폰트 색상 설정 (color)color 속성을 사용하여 텍스트 색상을 지정할.. 🖥️ IT, 컴퓨터/🌐 HTML, CSS, JS 2025. 1. 3.

• [HTML] 개념 정리 2 :: HTML 문자 태그 HTML 문자 태그 알아보기HTML은 텍스트의 크기와 스타일을 조정하거나 정렬을 설정하는 다양한 태그를 제공함. 이러한 태그를 사용하면 텍스트를 강조하거나 구조화하여 보다 읽기 쉬운 콘텐츠를 만들 수 있음.텍스트 크기 및 스타일 태그1. ~ : 제목 태그에서 까지 제공되며, 숫자가 작을수록 크기가 큼. 웹페이지의 구조를 잡고 중요한 내용을 강조하는 데 사용함.제목 1제목 2제목 3: 가장 큰 제목: 가장 작은 제목2. : 굵은 글씨텍스트를 굵게 표시함. 콘텐츠를 강조할 때 사용함.강조된 텍스트3. : 기울임꼴텍스트를 기울임꼴로 표시함. 특별한 용어, 외국어, 제목 등을 강조할 때 사용.이탤릭 텍스트4. : 밑줄텍스트에 밑줄을 추가함. 추가적인 강조를 위해 사용됨.밑줄 텍스트5. : 아래첨자텍스트를 아래.. 🖥️ IT, 컴퓨터/🌐 HTML, CSS, JS 2025. 1. 3.

• [HTML] 개념 정리 1 :: HTML 기본 태그 이해 HTML 기본 태그 이해하기HTML(HyperText Markup Language)은 웹페이지를 구성하는 기본적인 뼈대를 만드는 마크업 언어임. HTML 태그를 사용하여 웹페이지의 구조와 내용을 정의하고, 브라우저가 이를 읽어들여 화면에 표시함으로써 사용자와 상호작용할 수 있게 만들어줌.HTML 구조HTML 문서는 요소(Element)로 구성되며, 각 요소는 태그(Tag)를 이용해 정의함. 태그는 여는 태그와 닫는 태그로 이루어지며, 이 안에 콘텐츠를 작성함.예시:이것은 문단입니다.: 여는 태그: 닫는 태그이것은 문단입니다.: 콘텐츠마크업 언어란?마크업 언어는 데이터를 태그로 감싸 구조화하거나 의미를 부여하는 데 사용됨. HTML은 웹페이지를 마크업하는 데 특화된 언어로, 다양한 태그를 활용하여 문서의 .. 🖥️ IT, 컴퓨터/🌐 HTML, CSS, JS 2025. 1. 3.