HTML & CSS

📌 태그란? 태그는 HTML 문서에 대한 메타데이터를 정의하는 태그입니다. 메타데이터란, 데이터에 대한 데이터로, 문서에 대한 정보를 제공합니다.🔹 태그 사용 목적웹 페이지에 대한 정보를 제공하여 검색 엔진이 페이지를 검색할 때 참고할 수 있게 합니다.페이지의 검색 결과에 영향을 줄 수 있으며, 문자 인코딩, 페이지 설명, 키워드, 작성자 등의 정보를 설정합니다.📝 1. 주요 속성🔸 charset: 문자 인코딩 설정문자 인코딩은 텍스트를 어떻게 표시할지 정하는 방법입니다. HTML 문서에서 한글을 제대로 표시하기 위해서는 UTF-8 인코딩을 사용하는 것이 가장 안전합니다.이 속성은 문자 깨짐을 방지하고, 웹 페이지가 다양한 언어를 정확하게 표시할 수 있도록 합니다.🔸 http-equiv: ..

📌 시맨틱 태그란?시맨틱은 **‘의미론적인’**이라는 뜻을 가지고 있습니다. 시맨틱 태그는 웹 콘텐츠의 의미를 명확히 표현하는 HTML 태그들입니다.시맨틱 태그를 사용하면, 브라우저와 개발자에게 콘텐츠의 목적과 역할을 정확하게 전달할 수 있습니다.🔹 시맨틱 태그의 장점검색엔진 최적화(SEO):시맨틱 태그는 검색엔진이 콘텐츠를 더 잘 이해하고 인덱싱할 수 있게 도와줍니다.웹 접근성 향상:시각 장애가 있는 사용자가 화면 판독기를 사용할 때, 시맨틱 태그는 내용을 쉽게 탐색할 수 있게 합니다.가독성 및 코드 유지보수:코드의 가독성이 좋아지고, 불필요한 컨테이너 태그(예: , )의 사용을 줄여 코드 작성이 편리해집니다.🖥️ 1. 대표적인 시맨틱 태그들🔸 : 독립적인 콘텐츠독립적으로 배치되는 콘텐츠를 정의..

📌 HTML 입력 양식 만들기: 태그 사용법 태그는 웹 페이지에서 사용자 입력을 받기 위해 사용되는 중요한 태그입니다. 이를 통해 사용자가 입력한 데이터를 서버로 전송할 수 있습니다.🔹 태그 기본 구조 action 속성: 사용자가 입력한 데이터를 전송할 서버의 URL을 지정합니다.method 속성: 데이터를 어떤 방식으로 서버에 전송할지 정의합니다. 주로 GET과 POST 방식이 사용됩니다.🖱️ 1. method 속성: GET vs POSTmethod 속성은 데이터를 서버로 전송할 때의 방식을 지정합니다.🔸 GET 방식데이터를 URL에 쿼리 파라미터로 포함하여 서버에 요청을 보냅니다.주로 검색 기능에 사용됩니다.✅ 예시 (GET 방식) 검색사용자가 검색어를 입력하면, query=입력값 ..

📌 HTML에서 다른 입력 태그 사용하기🔹 태그: 드롭다운 메뉴 만들기 태그는 다수의 선택지를 제공하는 드롭다운 메뉴를 생성합니다.각 선택지는 태그로 정의됩니다.value 속성으로 각 옵션에 대한 값을 구별할 수 있습니다.✅ 예시 고양이 강아지 토끼사용자는 드롭다운 메뉴에서 고양이, 강아지, 토끼 중 하나를 선택할 수 있습니다.📝 태그: 여러 줄 텍스트 입력 받기 태그는 한 줄의 텍스트가 아닌 여러 줄의 텍스트를 입력받을 수 있습니다. 태그는 한 줄만 입력받을 수 있지만, 태그는 텍스트 영역을 제공하여 여러 줄의 입력을 받습니다.✅ 예시여기에서 여러 줄을 입력하세요.**rows**와 cols 속성으로 텍스트 영역의 크기를 설정할 수 있습니다.📊 태그: 진척도 표시하기 태그는 작업의 ..

📌 HTML 입력 태그 () 사용법🔹 태그란? 태그는 사용자가 데이터를 입력할 수 있도록 하는 입력 요소입니다.핵심 속성은 type 속성으로, 이 속성을 통해 입력 데이터 유형을 지정할 수 있습니다.✅ 태그 기본 구조type 속성을 사용하여 텍스트, 이메일, 비밀번호, 날짜 등 다양한 데이터를 입력 받을 수 있습니다.📝 1. 텍스트를 입력받는 type들입력받을 데이터의 유형에 따라 type 속성을 설정하면, 같은 텍스트라도 그 목적에 맞게 입력 필드가 달라집니다.🔹 대표적인 type 속성type="text": 일반 텍스트 입력 필드type="email": 이메일 입력 필드type="password": 비밀번호 입력 필드type="search": 검색 입력 필드type="date": 날짜 선택 ..

📌 HTML에서 표 만들기표는 데이터를 행과 열로 나누어 표시하는 중요한 레이아웃 요소입니다. HTML에서 표를 만들 때 사용되는 주요 태그들에 대해 알아보겠습니다.🔹 표 만들기 태그: 표를 생성하는 기본 태그입니다.: 표의 **행(row)**을 나타내는 태그입니다.: 표에서 헤더 셀(제목)을 나타내는 태그입니다.: 표에서 일반 셀(내용)을 나타내는 태그입니다.✅ 기본 구조 예시 학생 정보 이름 나이 학년 김철수 20 3학년 이영희 22 4학년 : 표의 제목을 나타내는 태그로, 기본적으로 가운데 정렬됩니다.📊 표 구조 명확하게 표현하기HTML에서 표의 구조를 보다 명확히 표현하기 위해 , , 태그를 사용할 수 있습니다.🔹 : ..

📌 HTML 목록 만들기HTML에서는 **목록(list)**을 만들어 관련된 항목(item)들을 나열할 수 있습니다. 목록은 크게 두 가지 종류로 나눌 수 있습니다:순서 없는 목록(Unordered List): 항목에 순서가 없고, 보통 점이나 동그라미 기호로 나열됩니다.순서 있는 목록(Ordered List): 항목에 순서가 있으며, 번호가 매겨집니다.🔹 순서 없는 목록 (Unordered List)순서가 중요한 항목이 아닐 때 사용합니다. 태그를 사용하여 목록을 시작하고, 각 항목은 태그로 나열합니다.✅ 예시 고양이 강아지 토끼이 코드는 순서 없는 목록을 생성하며, 각 항목은 점으로 표시됩니다.🔹 순서 있는 목록 (Ordered List)항목에 순서가 중요한 경우 사용하며, 번호가 매겨진..

📌 HTML에서 링크 만들기: a 태그 사용법🔹 링크란 무엇인가?링크는 현재 문서에서 다른 문서로 이동할 수 있는 수단입니다. 사용자는 링크를 클릭하여 웹 페이지 내에서 다른 페이지로 빠르게 이동할 수 있습니다.🔹 a 태그 기본 사용법HTML에서 링크를 만들 때 사용하는 태그는 a 태그입니다.href 속성은 링크의 목적지 URL을 지정하는 데 사용됩니다.✅ 기본 구조여기를 클릭하세요href 속성은 링크를 클릭했을 때 이동할 주소를 설정합니다.a 태그는 사용자가 클릭할 수 있는 링크를 생성합니다.🌐 1. 링크를 새 탭에서 열기: target 속성target 속성을 사용하면 링크를 클릭할 때 새로운 탭에서 열리도록 설정할 수 있습니다.🔹 target="_blank"target="_blank"는 링크..