본문 바로가기
반응형

html21

[웹 디자인] 6일차: HTML5 시멘틱 요소 HTML5 시멘틱 요소란?HTML5 시멘틱 요소는 문서의 구조와 의미를 명확하게 정의하는 데 사용됩니다. 이러한 요소들은 검색 엔진 최적화(SEO)와 접근성을 향상시키는 데 중요한 역할을 합니다.주요 HTML5 시멘틱 요소문서나 섹션의 머리글을 정의합니다.로고, 네비게이션 메뉴, 검색 창 등이 포함될 수 있습니다.예제: 사이트 제목 홈 소개 연락처  문서나 섹션의 바닥글을 정의합니다.저작권 정보, 연락처 정보, 사이트맵 등이 포함될 수 있습니다.예제: © 2024 회사 이름. All rights reserved. 네비게이션 링크를 정의합니다.주요 네비게이션 메뉴를 그룹화하는 데 사용됩니다.예제: 홈 서비스 블로그 연락처 .. 2024. 8. 6.
[웹 디자인] 5일차: HTML 폼과 입력 요소 HTML 폼HTML 폼은 사용자로부터 입력을 받아 서버로 전송하는 데 사용됩니다. 폼은 다양한 입력 요소를 포함하며, 사용자가 데이터를 입력하고 제출할 수 있게 합니다.폼 요소: 폼을 정의하는 요소입니다.action: 폼 데이터를 제출할 URL을 지정합니다.method: 폼 데이터를 전송하는 HTTP 메서드를 지정합니다 (GET 또는 POST).예제: 입력 요소입력 요소는 폼 내에서 사용자로부터 데이터를 입력받는 다양한 방법을 제공합니다.텍스트 입력: 단일 행 텍스트 입력 필드를 정의합니다.: 암호 입력 필드를 정의합니다. 입력한 텍스트가 숨겨집니다.: 이메일 주소를 입력받는 필드를 정의합니다. 이메일 형식을 검증합니다.: URL을 입력받는 필드를 정의합니다. URL 형식을 검증합니다.예제: 이름: .. 2024. 8. 5.
[웹 디자인] 4일차: HTML 링크와 이미지 링크HTML에서 링크는 사용자가 다른 페이지나 리소스로 이동할 수 있도록 합니다. 링크는 요소를 사용하여 정의됩니다.하이퍼링크: 앵커 태그로, 링크를 정의하는 요소입니다.href: 하이퍼링크 참조 속성으로, 이동할 URL을 지정합니다.예제:Example Website링크의 다양한 속성target: 링크를 클릭할 때 열리는 방법을 지정합니다._self: 현재 창에서 열림 (기본값)_blank: 새 창이나 새 탭에서 열림_parent: 부모 프레임에서 열림_top: 최상위 프레임에서 열림예제:Open in new tabtitle: 링크에 대한 추가 정보를 제공합니다. 사용자가 링크 위에 마우스를 올렸을 때 툴팁으로 표시됩니다.예제:Example Website링크 텍스트와 이미지텍스트 링크: 링크 텍스트로 .. 2024. 8. 4.
[웹 디자인] 3일차: HTML 리스트와 테이블 리스트리스트는 HTML에서 항목의 집합을 정의하는 데 사용됩니다. HTML에는 세 가지 주요 리스트 유형이 있습니다: 순서 있는 리스트, 순서 없는 리스트, 설명 리스트입니다.순서 있는 리스트순서 있는 리스트는 항목이 특정 순서로 나열될 때 사용됩니다. 각 항목은 자동으로 번호가 매겨집니다.: 순서 있는 리스트를 정의하는 요소입니다.: 리스트 항목을 정의하는 요소입니다.예제: 첫 번째 항목 두 번째 항목 세 번째 항목순서 없는 리스트순서 없는 리스트는 항목이 특정 순서에 상관없이 나열될 때 사용됩니다. 각 항목은 기본적으로 점이나 원으로 표시됩니다.: 순서 없는 리스트를 정의하는 요소입니다.: 리스트 항목을 정의하는 요소입니다.예제: 첫 번째 항목 두 번째 항목 세 번째 항목설명 리스트설명 리.. 2024. 8. 3.
[웹 디자인] 2일차: HTML 텍스트 관련 요소 HTML 텍스트 관련 요소HTML에는 다양한 텍스트 관련 요소가 있습니다. 이 요소들은 문서의 제목, 단락, 강조, 인용문 등을 정의하는 데 사용됩니다.제목 요소HTML에는 여섯 가지 수준의 제목 요소가 있습니다. 제목 요소는 문서의 구조를 정의하고, 검색 엔진 최적화(SEO)에도 중요한 역할을 합니다.: 최상위 제목 요소. 일반적으로 문서나 섹션의 주요 제목으로 사용됩니다.: 두 번째 수준의 제목 요소.: 세 번째 수준의 제목 요소.: 네 번째 수준의 제목 요소.: 다섯 번째 수준의 제목 요소.: 여섯 번째 수준의 제목 요소. 일반적으로 가장 낮은 중요도를 가집니다.예제:제목 1제목 2제목 3제목 4제목 5제목 6단락 요소단락 요소는 일반적인 텍스트 블록을 정의합니다.: 단락을 정의하는 요소입니다.예제.. 2024. 8. 2.
[웹 디자인] 1일차: HTML 소개 및 기본 구조 HTML이란 무엇인가?HTML(하이퍼텍스트 마크업 언어)은 웹 페이지를 작성하는 데 사용되는 마크업 언어입니다. 웹 페이지의 구조를 정의하고 콘텐츠를 표시하는 데 사용됩니다. HTML은 태그를 사용하여 문서의 각 부분을 나타냅니다.HTML의 역사1991년: 팀 버너스 리(Tim Berners-Lee)가 처음으로 HTML을 제안하고 개발1995년: HTML 2.0 표준이 발표됨1997년: HTML 3.2 및 HTML 4.0 표준이 발표됨2014년: HTML5 표준이 발표되어 현재까지 사용됨기본 문서 구조HTML 문서는 기본적으로 다음과 같은 구조를 가집니다: Hello, World! This is a simple HTML document.: 문서 타입 선언으로, HTML5 문서임을 나타냅니다.: HTM.. 2024. 8. 1.
[웹디자인] 목차 HTML과 CSS를 사용하여 웹 디자인을 학습하는 30일 과정을 제안합니다. 이 과정은 기초부터 심화 주제, 반응형 디자인 및 실전 프로젝트까지 포함하여 단계별로 학습할 수 있도록 구성했습니다. 웹 디자인 학습1. HTML 소개 및 기본 구조: HTML의 역사, 기본 문서 구조, 요소 및 속성2. 텍스트 관련 요소: 제목, 단락, 강조, 인용문3. 리스트와 테이블: 순서 있는 리스트, 순서 없는 리스트, 테이블 구조 및 속성4. 링크와 이미지: 하이퍼링크, 이미지 삽입 및 속성5. 폼과 입력 요소: 폼 태그, 입력 요소, 버튼, 폼 속성6. HTML5 시맨틱 요소: header, footer, nav, section, article, aside 등7. 멀티미디어 요소: 오디오, 비디오, 캔버스 요소8. .. 2024. 6. 21.
[포트폴리오 페이지] 5단계: 스타일링 및 레이아웃 개선 5단계: 스타일링 및 레이아웃 개선5.1 전체적인 레이아웃과 스타일링 개선styles.css 파일에서 전체적인 스타일링을 개선합니다.styles.css (수정된 부분)body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f0f0f0; /* 배경색을 설정합니다. */}header { background-color: #333; color: #fff; padding: 1em 0; text-align: center; position: sticky; /* 스크롤 시에도 상단에 고정됩니다. */ top: 0; z-index: 1000; /* 다른 요소보다 위에 표시됩.. 2024. 6. 16.
[포트폴리오 페이지] 4단계: Contact 섹션 추가 4단계: Contact 섹션 추가4.1 Contact 섹션 HTML 작성index.html 파일에서 Contact 섹션에 내용을 추가합니다.index.html (수정된 부분) Contact Send 4.2 Contact 섹션 스타일링styles.css 파일에서 Contact 섹션에 스타일을 추가합니다.styles.css (추가된 부분)#contact { background-color: #f9f9f9; /* 배경색을 설정합니다. */ padding: 2em; /* 패딩을 설정합니다. */ margin-top: 2em; /* 상단 여백을 설정합니다. */ border-radius: 8px; /* 모서리를 둥글게 만.. 2024. 6. 16.
[포트폴리오 페이지] 3단계: Projects 섹션 추가 3단계: Projects 섹션 추가3.1 Projects 섹션 HTML 작성index.html 파일에서 Projects 섹션에 내용을 추가합니다.index.html (수정된 부분) Projects Project 1 Description of project 1 View Project Project 2 Description of project 2 View Project Project 3 Description of project 3 View Projec.. 2024. 6. 16.
반응형

티스토리툴바