HTML5(43)
-
[HTML5] <src> 와 <href> 뭐가 다를까?
2속성 모두 HTML에서 링크나 리소스를 참조할 때 사용하는 속성입니다.두 속성 모두 경로를 지정하는 역할을 하지만, 사용하는 요소와 목적이 다릅니다. src (Source)src 속성은 이미지, 비디오, 오디오, 프레임 등과 같은 외부 리소스를 포함할 때 사용됩니다.해당 요소가 로드될 때 실제 콘텐츠를 가져올 위치를 지정합니다. 예1 : 이미지(img) src="image.jpg"는 이미지를 가져올 파일 경로를 지정합니다.alt="설명"은 이미지를 불러오지 못할 때 보여줄 대체 텍스트입니다. 예2 : 비디오(video) src="video.mp4"는 비디오 파일의 경로를 지정합니다.controls 속성은 재생, 일시 정지 등의 비디오 컨트롤을 보여줍니다. 예3 : 스크립트(script) src="sc..
2024.06.27 -
[HTML5] 홈페이지 소개 <header>
Welcome to Our Website Home About Contact - 요소는 페이지 제목에 대한 요소와 요소 내의 탐색 메뉴를 포함하는 소개 콘텐츠를 포함합니다. - 내에서 요소는 페이지의 기본 제목을 나타내며 필수적인 콘텐츠와 컨텍스트를 제공합니다. - 요소 내에 포함된 탐색 메뉴는 순서가 지정되지 않은 목록()과 다른 섹션에 대한 앵커 링크()가 포함된 목록 항목()으로 구성됩니다.요소는 웹 문서 내에 구조화되고 의미 있는 계층 구조를 생성하여 문서 또는 섹션의 시작을 나타내는 데 도움이 됩니다. 웹 페이지의 여러 부분을 깔끔하게 분리하는 동시에 접근성, 검색 엔진 최적화 및 ..
2023.10.04 -
[HTML5] 목록을 만들어 주는 <ol>and</ol>, <li>and</li>
`` 요소는 순서 있는 목록(ordered list)을 생성하는 데 사용됩니다. 순서 있는 목록은 각 항목이 번호 또는 다른 순서 지시자(예: 알파벳, 로마 숫자)로 표시되며 항목 간에 순서가 중요한 경우에 사용됩니다. 아래는 `` 요소의 기본 사용법 및 주요 특징을 설명한 예제입니다: 첫 번째 항목 두 번째 항목 세 번째 항목 HTML 삽입 미리보기할 수 없는 소스 위의 코드에서 `` 요소는 순서 있는 목록을 시작하며 `` (list item) 요소는 각 항목을 정의합니다. 브라우저는 목록 항목을 자동으로 번호로 표시할 것입니다. `` 요소의 몇 가지 중요한 특징은 다음과 같습니다: 1. 자동 번호링: `` 요소의 자식 `` 요소는 자동으로 숫자로 번호가 매겨집니다. 기본값은 1부터 시작하며 순서대로 ..
2023.10.03 -
[HTML5] 문장을 하나의 단락으로 만들어 주는 <p>and</p>
`` 요소를 사용하여 텍스트 단락을 정의합니다. 웹페이지의 텍스트 콘텐츠를 구조화하고 서식을 지정하기 위해 가장 기본적이고 일반적으로 사용되는 블록 수준 요소 중 하나입니다. `` 요소를 사용하는 방법은 다음과 같습니다. 텍스트 단락입니다. `` 요소에 대해 이해해야 할 주요 사항: 1. 블록 수준 요소: ``는 블록 수준 요소입니다. 즉, 콘텐츠에 대한 블록 수준 컨테이너를 생성한다는 의미입니다. 블록 수준 요소는 일반적으로 새 줄에서 시작하여 상위 컨테이너의 전체 너비로 확장됩니다. 2. 텍스트 콘텐츠: `` 요소의 주요 목적은 텍스트 콘텐츠를 포함하고 형식을 지정하는 것입니다. 이를 사용하여 일관된 단위를 형성하는 문장이나 텍스트 그룹인 단락을 만들 수 있습니다. 3. 공백 처리: 브라우저는 단락 ..
2023.10.03 -
[HTML5] 드롭다운 메뉴 <select><option value="option1">옵션1</option></select>
"select" 요소라고 불리는 드롭다운 메뉴를 통해 사용자가 사전 정의된 옵션 목록에서 하나의 옵션을 선택할 수 있습니다. 이러한 유형의 입력은 사용자가 여러 선택 사항 중에서 단일 항목을 선택해야 하는 양식에서 일반적으로 사용됩니다. 드롭다운 메뉴를 만드는 방법은 다음과 같습니다. 빨간색 녹색 파란색 1. : `` 요소는 드롭다운 메뉴의 컨테이너입니다. 선택 가능한 옵션 목록을 정의합니다. `` 요소에 속성을 추가하여 해당 동작과 모양을 맞춤설정할 수 있습니다. 2. : `` 요소는 드롭다운 메뉴 내의 개별 항목입니다. 각 ``은 사용자가 선택할 수 있는 선택 사항을 나타냅니다. `value` 속성은 양식이 제출될 때 서버로 전송되는 각 옵션과 관련된 값을 지정합니다. `` 태그 내의 텍스트는 드롭다..
2023.10.01 -
[HTML5] 나이(숫자) 입력 양식 폼 <type="number">
"나이"입력 양식은 "이메일" 이나 "번호"와 같은 특정 양식 입력 유형은 없습니다. 그러나 `type="number"`가 포함된 일반 `` 요소를 사용하여 사용자의 연령을 수집하기 위한 양식 필드를 생성할 수 있으며 허용되는 최소 및 최대 연령 값을 지정하는 속성을 추가할 수 있습니다. `` 요소를 사용하여 연령 입력 필드에 명확한 라벨을 제공할 수도 있습니다. 다음은 HTML5 양식에서 연령 입력 필드를 생성하는 방법에 대한 예입니다. Your Age: Submit 1. : `` 요소는 양식에 대한 컨테이너를 만드는 데 사용됩니다. 이는 모든 양식 요소를 포함하고 제출 시 양식 데이터가 전송되어야 하는 위치를 정의합니다. 2. : `` 요소는 입력 필드에 대한 텍스트 레이블을 제공하여 어떤 유형의 정..
2023.10.01