본문 바로가기

728x90

SMALL

Mark Up/HTML10

[HTML5]HTML의 글로벌 속성: 요소를 더 유연하게 다루는 방법 HTML은 요소(element)라는 구성 요소로 이루어져 있으며, 이러한 HTML의 요소를 더 유연하게 다룰 수 있도록 도와주는 것이 바로 글로벌 속성(Global Attributes)입니다.≣ 목차글로벌 속성이란❓주요 글로벌 속성🌍글로벌 속성의 활용 예시🗺️글로벌 속성의 주의사항⚠️핵심 내용👀글로벌 속성이란❓ 글로벌 속성은 모든 HTML 요소에서 사용할 수 있는 속성으로, 해당 요소의 특성을 정의하거나 추가 정보를 제공하는 데 사용됩니다. 이러한 속성들은 어떤 요소에서도 사용할 수 있으며, 각 요소마다 고유한 기능을 부여할 수 있습니다. 주요 글로벌 속성🌍id: 요소에 고유한 식별자를 부여하는 속성입니다. CSS나 JavaScript에서 해당 요소를 선택할 때 사용됩니다.class: 하나 이상의.. 2024. 5. 25.

[HTML5]HTML 시맨틱 태그: 웹페이지의 의미 부여와 구조화 웹의 발전과 함께 HTML5부터 시맨틱 태그의 개념이 도입되었습니다. 시맨틱 태그는 웹 페이지의 의미를 부여하고 구조화하여 검색 엔진 최적화(SEO)나 웹 접근성을 향상하는 데 중요한 역할을 합니다.≣ 목차HTML 시맨틱 태그란❓주요 HTML 시맨틱 태그🏠실제 활용🖼️시맨틱 태그의 장단점😊😔핵심 내용👀HTML 시맨틱 태그란❓ 시맨틱 태그는 단순히 스타일을 지정하는 것이 아니라 콘텐츠의 의미를 명확하게 나타내는 HTML 태그입니다. 이는 기존의 비시맨틱 태그와 구분됩니다. 예를 들어, 와 은 구조화를 위한 일반적인 컨테이너로 사용되지만, , , 등의 시맨틱 태그는 각각 웹 페이지의 머리말, 네비게이션, 바닥글 등의 의미를 부여합니다.주요 HTML 시맨틱 태그🏠: 웹 페이지의 머리말을 정의합니다.. 2024. 5. 25.

[HTML5]HTML 멀티미디어: audio, video 활용법 HTML 멀티미디어 요소인 이미지(image), 오디오(audio), 비디오(video)를 활용하면 웹 페이지를 더 생동감 있고 매력적으로 만들 수 있습니다. 이번 포스팅에서는 HTML을 사용하여 멀티미디어 콘텐츠를 삽입하고 활용하는 방법을 자세히 알아보겠습니다.≣ 목차audio 태그🔊video 태그🎬source 태그⭐핵심 내용👀👇 이미지 태그 ()는 아래 포스팅에서 내용을 확인해 주세요👇""[HTML5]HTML A 태그와 이미지 태그≣ 목차a 태그👆이미지 태그📸핵심 내용👀 웹 페이지를 구성할 때, 이미지는 시각적 요소를 통해 사용자에게 강한 인상을 남기고, 링크는 다양한 페이지를 연결하여 사용자 경험을 향상시킵creativevista.tistory.comaudio 태그🔊 오디오 태그 (.. 2024. 5. 24.

[HTML5]쉽고 간편한 HTML Table 만들기: 초보자도 할 수 있는 완벽 가이드 HTML Table은 웹 페이지에서 데이터를 체계적으로 표시하는 데 사용됩니다. 이번 포스팅에서는 HTML 표를 만드는 기본 방법부터 다양한 속성과 스타일링 기법, 그리고 접근성 향상 방법을 소개하겠습니다.≣ 목차HTML Table의 기본 구조🏠머리글과 본문 구분: , , 태그 🌈열 그룹화: , 태그⭐ HTML Table 셀 병합하기: colspan과 rowspan⭐HTML 표 스타일링🏰웹 접근성 고려🍀핵심 내용👀HTML Table의 구조🏠HTML table은 웹 페이지에서 데이터를 체계적으로 표시하는 데 사용되는 중요한 요소입니다.기본적으로 태그로 시작하고, 표의 행(row), 열(column), 머리글(header) 등으로 구성됩니다. 각 요소는 HTML 태그로 정의됩니다. 아래에서 .. 2024. 5. 23.

[HTML5]HTML form 완벽 가이드: form 관련 태그, 필수 속성부터 고급 활용까지 HTML 폼은 사용자 입력을 서버로 전달하는 웹 애플리케이션의 핵심 요소입니다. 이번 포스팅에서는 form 태그와 관련된 다양한 속성과 태그를 종합적으로 이해하고 활용해 보겠습니다.≣ 목차form 태그🎁input 태그와 주요 속성✨label 태그🔖fieldset와 legend 태그🎨textarea 태그📑select, option, optgroup 태그✅button 태그👆form 관련 태그의 추가 속성🌈form 태그 예제🪂핵심 내용👀form 태그🎁form 태그는 사용자 입력을 서버로 보내기 위한 컨테이너입니다.form 태그 기본 문법 form 태그의 주요 속성action 속성: 데이터를 보낼 URL을 지정합니다. 예를 들어, 는 데이터를 /submit 경로로 보냅니다.method 속성.. 2024. 5. 22.

[HTML5]HTML 목록 태그 ol, ul, dl 태그 HTML의 ul, ol, dl 목록 태그를 활용하여 웹 페이지의 구조를 체계화하고 정보를 시각적으로 구분하는 방법을 소개합니다. 목록 태그를 이용하여 웹 페이지의 가독성을 향상시키고, 사용자가 필요한 정보를 쉽게 탐색할 수 있는 방법에 대해 알아봅니다 ≣ 목차순서가 있는 목록 🔢순서가 없는 목록 🔀정의 목록 📚중첩 목록🧾스타일링 목록📝핵심 내용👀 순서가 있는 목록 🔢ol 태그란? 태그는 HTML에서 순서가 있는 목록을 정의하는 데 사용됩니다. 이 태그를 사용하면 목록 항목들이 번호가 매겨진 순서대로 나열됩니다. 주로 웹 페이지에서 순차적인 단계, 순위를 나타내는 목록 등을 표현할 때 사용됩니다.일반적으로 태그 안에는 태그들이 포함되며, 각 태그는 목록의 각 항목을 나타냅니다.ol 태그 예.. 2024. 5. 21.

[HTML5]HTML 공간 분할 태그 span과 div 태그 웹 페이지의 레이아웃을 구성하고 내용을 그룹화하는 데는 HTML의 span 태그와 div 태그가 사용됩니다. span과 div 태그의 활용법과 차이점에 대해 자세히 알아보겠습니다.≣ 목차span 태그🎁div 태그📦span과 div 태그의 차이점💕핵심 내용👀span 태그와 div 태그의 주요 특징인 인라인 속성과 블록 속성에 관한 내용은 아래 포스팅을 참고해 주세요👀" "[CSS3]CSS 박스 모델 마스터하기: 기초부터 실전까지CSS 박스 모델은 가장 기본적이면서도 중요한 개념 중 하나입니다. HTML 요소는 모두 하나의 박스로 표현되며, 이 박스는 콘텐츠(content), 패딩(padding), 테두리(border), 마진(margin)으로 구성됩니다. 이creativevista.tistory... 2024. 5. 21.

[HTML5]HTML A 태그와 이미지 태그 웹 페이지를 구성할 때, 이미지는 시각적 요소를 통해 사용자에게 강한 인상을 남기고, 링크는 다양한 페이지를 연결하여 사용자 경험을 향상시킵니다. 이번 포스팅에서는 이러한 중요한 역할을 담당하는 HTML의 두 가지 기본 태그인 태그와 태그에 대해 알아보겠습니다.≣ 목차a 태그👆이미지 태그📸핵심 내용👀 a 태그👆a 태그는 HTML 문서에서 링크를 생성하는 데 사용되며, 다른 웹 페이지, 동일한 페이지의 특정 위치, 파일 등으로 이동할 수 있는 하이퍼링크를 만들어줍니다. "A"는 "Anchor"의 약자로, 링크를 클릭하면 브라우저 내에서 바로 전환되며, 기본적으로는 글자색이나 밑줄, 손 모양의 커서와 같은 기본 스타일이 적용됩니다. a 태그는 다음과 같이 구성됩니다:링크 텍스트href 속성: 링크의.. 2024. 5. 17.

[HTML5]HTML 텍스트 관련 태그 텍스트는 웹페이지에서 가장 기본적인 요소 중 하나이며, HTML에서는 텍스트를 다루는 다양한 태그를 제공합니다. 이번 글에서는 HTML의 주요 텍스트 관련 태그를 소개하고 설명하겠습니다.≣ 목차제목 태그(Heading Tag)🤠단락 태그(Paragraph Tag)👥줄 바꿈 태그(Link Break Tag)🏃‍♀️수평 줄 태그(Horizontal Rule Tag)📏인용문 태그(Blockquote Tag), (q Tag)📖키보드 값 그대로 표현 태그(Preformatted Text Tag)👩‍💻강조 태그(Inline Tag)와 중요 부분 강조 태그(Mark Tag)✨스타일 지정 태그(Span Tag)👒동아시아 글자 표현 태그(Ruby Tag)👙취소선 및 밑줄 태그(Strike Through .. 2024. 5. 15.

[HTML5]HTML: 웹 페이지의 기반을 이루는 핵심 HTML은Hyper Text Markup Language의 약자로, 웹 페이지를 작성하기 위한 기본적인 구조와 내용을 정의하는마크업 언어입니다. HTML은 웹 페이지를 구성하는 요소들을 정의하고 이를 웹 브라우저가 해석하여 사용자에게 보여줍니다. 이 글에서는 HTML의 기본 개념과 구조, 그리고 HTML 문서의 주요 특징에 대해 알아보겠습니다.≣ 목차HTML의 기본 개념😎HTML의 기본 구성 요소🎁HTML의 기본 구조🏠HTML의 특징⭐핵심 내용👀1. HTML의 기본 개념😎HTML은 웹 페이지를 구성하는 요소들을 태그(tag)라는 특별한 표식을 사용하여 표현합니다. 이 태그들은 웹 브라우저에게 특정 요소의 역할과 의미를 알려주는 역할을 합니다. HTML은 문서의 구조를 정의하고, 텍스트의 형식을 .. 2024. 5. 13.

이전 1 다음

728x90

티스토리툴바