1. HTML 태그
1. HTML 태그의 정의
HTML 태그는 웹 페이지를 구성하는 요소를 정의하고 구조화하는 데 사용되는 코드의 기본 단위입니다. 태그는 일반적으로
<태그명>과 같은 형태로 작성되며, 웹 브라우저는 이를 해석하여 화면에 콘텐츠를 적절히 표시합니다. HTML 태그는 콘텐츠의 유형, 구조, 의미를 나타내는 데 중요한 역할을 합니다.HTML 태그는 두 가지 유형으로 나눌 수 있습니다:
- 시작 태그와 종료 태그가 있는 태그: 대부분의 HTML 요소는 시작 태그와 종료 태그 쌍으로 구성됩니다.
- 예:
<p>Paragraph text here</p> - 여기서
<p>는 시작 태그,</p>는 종료 태그이며, 그 사이에 들어가는 텍스트가 해당 요소의 내용입니다.
- 자체 종료 태그: 일부 HTML 태그는 종료 태그 없이도 완전한 요소로 간주됩니다. 이러한 태그는 빈 요소를 나타내며, 보통 닫을 때
/를 포함합니다. - 예:
<img src="image.jpg" alt="Description of image" /> <img />태그는 이미지 요소를 정의하며, 내용이 없기 때문에 자체 종료 태그로 작성됩니다.
태그의 구성 요소
HTML 태그는 일반적으로 다음과 같은 구성 요소를 포함합니다:
- 태그 이름: 요소의 종류를 나타냅니다. 예를 들어,
p,h1,div등이 있습니다.
- 속성(attribute): 태그에 추가 정보를 제공합니다. 속성은
name="value"형식으로 지정됩니다. - 예:
<a href="https://www.example.com">Link text</a>에서href는 링크의 대상 URL을 지정하는 속성입니다.
- 내용(content): 태그가 감싸고 있는 텍스트나 다른 HTML 요소를 의미합니다.
예시
html코드 복사
<a href="https://www.example.com" target="_blank">Visit Example</a>위 코드에서:
<a>는 앵커(anchor) 태그로, 링크를 생성합니다.
href는 링크할 URL을 지정하는 속성입니다.
target="_blank"는 링크를 새 탭에서 열도록 지정하는 속성입니다.
"Visit Example"은 링크에 표시되는 텍스트입니다.
</a>는 앵커 태그의 종료를 나타냅니다.
이와 같이 HTML 태그는 웹 페이지의 구조를 정의하고, 브라우저가 페이지를 올바르게 표시하도록 돕습니다.
2. HTML 인라인(inline) 요소와 블록(block) 요소
인라인 요소 (Inline Elements)
- 특징: 인라인 요소는 콘텐츠를 줄바꿈 없이 같은 줄에 배치합니다. 이러한 요소는 다른 인라인 요소나 텍스트와 함께 한 줄에 배치될 수 있습니다.
- 용도: 주로 텍스트의 일부분을 감싸서 스타일을 적용하거나 특정 동작을 지정할 때 사용됩니다.
- 예시:
<a>,<span>,<strong>,<em>,<img>등이 있습니다.
html코드 복사
<p>Visit <a href="https://www.example.com">this link</a> for more information.</p>
위 예시에서
<a> 태그는 인라인 요소로, 링크 텍스트를 감쌉니다. 이 링크는 텍스트와 같은 줄에 표시됩니다.블록 요소 (Block Elements)
- 특징: 블록 요소는 화면에서 항상 새 줄에서 시작하며, 전체 가로 너비를 차지합니다. 따라서 블록 요소는 기본적으로 줄바꿈을 생성합니다.
- 용도: 주로 레이아웃 구조를 정의하고 콘텐츠를 섹션으로 나눌 때 사용됩니다.
- 예시:
<div>,<p>,<h1>~<h6>,<ul>,<li>,<section>,<article>등이 있습니다.
html코드 복사
<div>
<h1>Welcome to My Website</h1>
<p>This is a paragraph of text.</p>
</div>
위 예시에서
<div>, <h1>, <p>는 모두 블록 요소로, 각 요소는 새 줄에서 시작하며 화면의 전체 너비를 차지합니다.인라인 요소와 블록 요소의 차이점
- 레이아웃:
- 인라인 요소는 다른 인라인 요소들과 함께 한 줄에 표시됩니다.
- 블록 요소는 새로운 줄에서 시작하며, 가로로 가능한 모든 공간을 차지합니다.
- 사용 용도:
- 인라인 요소는 텍스트 내에서 특정 부분을 강조하거나 링크를 설정할 때 사용됩니다.
- 블록 요소는 섹션, 단락, 레이아웃 등을 정의할 때 사용됩니다.
이 두 가지 요소를 적절히 활용하면 웹 페이지의 구조와 레이아웃을 효과적으로 구성할 수 있습니다.
3. HTML class
HTML에서
CSS에서
class는 요소에 스타일을 적용하거나 특정 동작을 지정하기 위해 사용되는 속성입니다. class 속성은 CSS 및 JavaScript에서 해당 요소를 식별하고 스타일을 정의하거나 스크립트를 적용하는 데 사용됩니다.class 속성의 사용 방법
class 속성은 다음과 같이 사용됩니다:html코드 복사
<div class="example-class">This is a div with a class.</div>
여기서
class="example-class"는 해당 <div> 요소에 example-class라는 클래스를 지정합니다.CSS에서 class 사용
클래스를 사용하여 특정 스타일을 적용할 수 있습니다. CSS에서 클래스는
.(점)으로 시작합니다.예를 들어,
example-class라는 클래스를 사용하는 모든 요소에 특정 스타일을 적용하려면 다음과 같이 작성할 수 있습니다:css코드 복사
.example-class {
color: blue;
font-size: 20px;
}
위 CSS 코드는
example-class가 적용된 모든 요소의 텍스트를 파란색으로, 글자 크기를 20픽셀로 지정합니다.클래스와 ID의 차이
- 클래스 (
class): 여러 요소에 동일한 클래스를 적용할 수 있습니다. 예를 들어, 여러 단락에 동일한 스타일을 적용할 때 유용합니다.
- 아이디 (
id): HTML 문서에서 각 요소에 고유해야 하며, 하나의 요소에만 적용할 수 있습니다. 일반적으로 특정 요소를 명확하게 식별할 때 사용됩니다.
요약
- class: HTML 요소에 스타일이나 동작을 지정하기 위해 사용되는 속성.
- CSS:
.(점)을 사용해 클래스를 정의하고, 해당 클래스가 지정된 모든 요소에 스타일을 적용할 수 있습니다.
이를 통해 다양한 요소에 일관된 스타일을 적용하거나 특정 동작을 정의할 수 있습니다.
4. data-set
dataset은 HTML 요소의 data-* 속성에 저장된 사용자 정의 데이터를 JavaScript에서 쉽게 접근할 수 있게 해주는 속성입니다. HTML5에서 도입된 data-* 속성은 특정 요소에 커스텀 데이터를 저장할 수 있는 방법을 제공합니다.data-* 속성
HTML에서
data-* 속성은 다음과 같이 사용됩니다:html코드 복사
<div id="myDiv" data-user-id="12345" data-role="admin">Hello, User!</div>
위 예시에서
data-user-id="12345"와 data-role="admin"는 myDiv 요소에 저장된 사용자 정의 데이터입니다. 이 데이터는 HTML 요소 내에서 특정 정보를 보관하는 데 유용합니다.JavaScript에서 dataset 접근하기
JavaScript에서
data-* 속성에 접근하기 위해 dataset 속성을 사용할 수 있습니다. dataset은 DOM 요소의 모든 data-* 속성에 대한 접근을 제공합니다.javascript코드 복사
const myDiv = document.getElementById('myDiv');
// data-user-id 속성에 접근
const userId = myDiv.dataset.userId; // "12345"
// data-role 속성에 접근
const role = myDiv.dataset.role; // "admin"
console.log(userId); // 12345
console.log(role); // admin
data-user-id속성은myDiv.dataset.userId로 접근합니다.data-다음에 오는 부분이 camelCase로 변환됩니다.
data-role속성은myDiv.dataset.role로 접근합니다.
dataset 속성의 특징
- 자동 변환:
data-*속성 이름은 camelCase로 자동 변환됩니다. 예를 들어,data-user-id는userId로,data-user-name은userName으로 변환됩니다.
- 읽기 및 쓰기:
dataset을 통해 속성 값을 읽을 수 있을 뿐만 아니라, 새로운 값을 할당하여 쓸 수도 있습니다.
데이터 설정 및 수정
dataset을 사용하면 요소의 data-* 속성을 쉽게 수정할 수 있습니다.javascript코드 복사
// 데이터 설정
myDiv.dataset.userId = "67890";
// 새로운 데이터 속성 추가
myDiv.dataset.newAttribute = "newValue";
console.log(myDiv.dataset.userId); // 67890
console.log(myDiv.dataset.newAttribute); // newValue
활용 사례
dataset은 주로 다음과 같은 경우에 유용합니다:- 임시 데이터 저장: 요소에 직접 정보를 저장할 수 있어, JavaScript 코드에서 쉽게 접근 가능.
- 프로그래밍 로직 제어: 요소에 특정 상태나 설정 값을 저장하여 JavaScript 로직을 제어하는 데 사용.
- 디버깅 및 개발: 개발 중에 요소에 관련된 메타데이터를 저장하고 활용.
요약
- dataset: HTML 요소의
data-*속성에 접근하기 위한 JavaScript 속성.
- data- 속성: HTML5에서 사용자 정의 데이터를 저장하기 위해 도입된 속성.
- 접근 방법:
dataset.propertyName을 통해data-*속성에 접근하고 수정할 수 있음.
5. Semantic HTML
Semantic HTML은 HTML 요소를 사용해 콘텐츠의 의미와 구조를 명확히 전달하는 것을 의미합니다. 이러한 요소들은 자신의 목적을 명확하게 설명하여 코드가 개발자와 브라우저 모두에게 더 잘 이해되도록 도와줍니다.
주요 시맨틱 요소
<header>: 페이지나 섹션의 헤더 부분을 정의합니다.
<nav>: 내비게이션 링크를 포함합니다.
<section>: 독립적인 섹션을 나타냅니다.
<article>: 블로그 포스트처럼 독립적으로 배포할 수 있는 콘텐츠를 나타냅니다.
<aside>: 주요 콘텐츠와 관련된 부가 정보를 담습니다, 예를 들어 사이드바.
<footer>: 페이지나 섹션의 바닥글을 정의합니다.
<main>: 문서의 주요 콘텐츠를 나타냅니다.
시맨틱 HTML의 장점
- 접근성 향상: 스크린 리더 같은 보조 기술이 콘텐츠를 더 잘 이해할 수 있도록 돕습니다.
- SEO 향상: 검색 엔진이 콘텐츠를 더 잘 해석하고 순위를 매길 수 있게 합니다.
- 코드 가독성 향상: 개발자가 콘텐츠의 구조와 목적을 더 쉽게 파악할 수 있습니다.
Share article
