HTML, CSS, JavaScript 16

01 HTML 개요, 기본 구문 및 구조_5. 입력 요소로 간단한 양식 만들기

● 다양한 유형의 입력 요소 및 용도(텍스트, 이메일, 비밀번호 등) - 텍스트 입력: 사용자가 한 줄의 텍스트를 입력할 수 있습니다. 이 유형의 입력은 일반적으로 이름, 이메일 주소 및 전화번호와 같은 항목에 사용됩니다. - 비밀번호 입력 : 텍스트 입력과 유사하나 사용자가 입력함에 따라 텍스트가 마스킹(숨김)되어 비밀번호나 기타 민감한 정보를 다른 사람에게 보이지 않고 입력할 수 있습니다. - 이메일 입력: 사용자가 이메일 주소를 입력할 수 있습니다. 이 유형의 입력에는 입력한 값이 올바른 형식의 이메일 주소인지 확인하는 유효성 검사가 포함될 수 있습니다. - 숫자 입력: 사용자가 숫자를 입력할 수 있습니다. 이 유형의 입력에는 입력한 값이 지정된 범위 내의 숫자인지 확인하는 유효성 검사가 포함될 수..

01 HTML 개요, 기본 구문 및 구조_4. 이미지 작업

● img 요소를 사용하여 페이지에 이미지를 추가하는 방법 HTML을 사용하여 웹 페이지에 이미지를 추가하려면 요소를 사용할 수 있습니다. 사용 방법의 예는 다음과 같습니다. src 속성은 표시하려는 이미지의 URL 또는 파일 경로를 지정합니다. 'alt' 속성은 이미지에 대한 설명을 제공하며, 이는 화면 판독기에 유용하거나 이미지 로드에 실패한 경우에 유용합니다. 또한 요소에 추가 속성을 추가하여 width, height 및 style과 같은 이미지 표시 방식을 맞춤설정할 수 있습니다. 이 예에서 width 및 height 속성은 이미지의 크기를 설정하고 style 속성은 이미지 주위에 테두리를 추가합니다. src 속성이 유효한 이미지 파일을 가리켜야 한다는 점에 유의하는 것이 중요합니다. 웹 페이지에..

01 HTML 개요, 기본 구문 및 구조_3. 블록 수준 요소와 인라인 요소

● 블록 수준 요소는 컨테이너의 전체 너비를 차지하고 요소 앞뒤에 새 줄을 만듭니다. HTML에서 블록 수준 요소는 웹 페이지에서 단락, 제목 및 목록과 같은 더 큰 구조를 만드는 데 사용됩니다. 블록 수준 요소는 요소 뒤에 새 줄을 만들고 기본적으로 부모 컨테이너의 전체 너비를 차지하는 요소로 정의됩니다. 블록 수준 요소의 몇 가지 예는 다음과 같습니다. - : 스타일 또는 기능 목적을 위해 다른 요소를 함께 그룹화하는 데 사용됩니다. - : 텍스트의 단락을 정의하는 데 사용됩니다. - ~ : 다양한 수준의 제목을 정의하는 데 사용됩니다. - 및 : 순서가 없는 목록과 순서가 있는 목록을 각각 정의하는 데 사용됩니다. - : 테이블을 정의할 때 사용합니다. 블록 수준 요소는 다른 블록 수준 요소 내에 ..

01 HTML 개요, 기본 구문 및 구조_2. HTML 요소

● 제목의 종류와 적절하게 사용하는 방법 HTML에는 (가장 중요)에서 (가장 중요하지 않음)까지 6단계의 제목 요소가 있습니다. 이러한 요소는 웹 페이지 콘텐츠의 구조와 계층 구조를 정의하는 데 사용됩니다. 요소는 페이지의 기본 제목(일반적으로 기사 제목 또는 기본 주제)에 사용되어야 합니다. 그런 다음 주요 섹션의 경우 및 해당 주요 섹션 내의 하위 섹션의 경우 와 같은 하위 수준 제목 요소를 사용하여 하위 제목을 추가할 수 있습니다. 제목을 적절하게 사용하고 페이지 전체에서 일관되게 사용하는 것이 중요합니다. 제목은 문체 목적으로만 사용되는 것이 아니라 사용되는 섹션의 내용을 정확하게 설명해야 합니다. 또한 전체 페이지의 기본 제목이므로 페이지당 하나의 요소만 사용하는 것이 중요합니다. 제목을 올바..

01 HTML 개요, 기본 구문 및 구조_1. HTML 문서의 기본 구조 이해

● doctype 선언과 목적 doctype 선언은 문서에서 사용 중인 HTML 버전을 지정하는 데 사용됩니다. 이 선언은 브라우저에 문서의 HTML 코드를 해석하는 방법을 알려줍니다. doctype 선언은 HTML 문서에서 태그 앞에 가장 먼저 와야 합니다. 이는 HTML 태그가 아니라 브라우저에 지정된 버전의 HTML을 사용하도록 지시하는 명령어입니다. 예를 들어 HTML5 문서의 doctype은 간단합니다: 이는 문서가 HTML5 표준을 사용하고 있음을 브라우저에 알려줍니다. 다른 버전의 HTML에는 다른 독타입 선언이 있습니다. 올바른 문서 유형을 사용하는 것이 중요한 이유는 문서가 여러 브라우저에서 올바르게 해석되고 표시되도록 하기 때문입니다. 문서 유형 선언이 없으면 브라우저에서 문서가 사용 ..

[HTML, CSS, JavaScript] 학습 로드맵_by ChatGPT

- 1-5일차: HTML 소개 ● 1일: HTML 개요, 기본 구문 및 구조 ● 2일: 제목, 단락 및 링크 작업 ● 3일차: 목록, 표, 양식 만들기 ● 4일차: Box 모델 및 레이아웃 이해 ● 5일차: 복습 및 연습 연습 - 6-10일차: CSS 소개 ● 6일차: CSS, 선택자 및 속성 개요 ● 7일차: 색상, 텍스트 및 글꼴 작업 ● 8일차: CSS, 위치 및 표시 속성을 사용한 레이아웃 ● 9일차: 반응형 디자인 작업, 미디어 쿼리 ● 10일차: 검토 및 연습 연습 - 11-20일: 중급 HTML 및 CSS ● 11일차: 시맨틱 HTML, 접근성 및 SEO ● 12일차: 고급 CSS, 그래디언트 및 애니메이션 ● 13일차: Flexbox 및 Grid 레이아웃 이해 ● 14일차: 반응형 웹 페이..

반응형