HTML에서 <head>요소는 제목, 스타일시트, 및 웹 페이지 자체에 표시되지 않는 기타 데이터와 같은 문서에 대한 정보 및 메타데이터를 위한 컨터네이너이다. 여는 <html>태그와 닫는 <html1> 태그 사이에 있는 html문서의 헤드 섹션에 배치 된다.
다음은 HTML 문서에서 <head> 요소를 사용하는 방법에 대한 예는 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<title>My Webpage</title>
<meta charset="UTF-8">
<meta name="description" content="This is my webpage.">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Welcome to my webpage!</h1>
<p>This is the content of my webpage.</p>
</body>
</html>이 예에서 <head> 요소에는 문서의 제목, 문자, 인코딩, 웹페이지 설명 및 외부 스타일 시트에 대한 링크가 포함되어 있다. 이러한 요소는 웹 브라우저 및 검색 엔진에 문서 및 문서 표시 방법에 대한 정보를 제공해준다.
CSS(Casecading Style Sheets)란?
CSS는 HTML 또는 XML로 작성문서의 표시를 설명하는 데 사용되는 스타일 시트 언어이다. 이를 통해 웹개발자는 문서의 안내와구축을 통해 웹 사이트의 형태를 유지 관리하고 업데이트하기가 더욱 쉬워진다.
CSS는 다음을 포하여 웹 페이지 모양의 다양한 측면을 제어할 수 있다.
- 요소의 레이아웃 및 위치 탐지
- 워드프레스 스타일, 크기 및 색상
- 배경 색상 및 이미지
- 가로 및 그림자 상자
- 애니메이션 및 전환
CSS는 특정 HTML 요소에 적용되는 규칙을 정의하여 작동한다. 이러한 규칙은 외부에서 정의할 수 있다.
<Style> 꼬리표가 그 대표적인 예이다.
또한, CSS는 브라우저에서 로드해야 하는 HTML 코드의 양을 줄여웹 페이지의 성능을 최적화하는 데 도움이 될 수 있다.이것은 더 빠른 페이지 로드 시간과 더 나은 사용자 경험으로 이어질 수 있다. 전반적으로 CSS는 웹사이트의 모양과 기능을 크게 향상시킬 수 있는 웹 개발자를 위한 도구라고 할 수 있다.
여기에서 말하는 <style>꼬리표는 다음과 같은 내용을 담는다.
태그 <Style>는 개별 HTML 페이지의 CSS 스타일을 정의하는 데 사용하는 HTML 요소이다. 일반적으로 HTML 문서의 섹션 내에 배치되며 <head> 페이지 내의 특정 HTML요소에 스타일을 적용하는 데 사용된다.
태그 <Style>에는 선택기, 속성 및 값을 포함하여 유효한 css 코드가 포함될 수 있다. 브라우저가 태그를 만나면 <Style> css 코드를 읽고 정의된 스타일을 페이지 내의 해당 HTML 요소에 적용한다.
<Style> HTML 문서에서 태그를 사용하는 방법은 다음과 같다.
<!DOCTYPE html>
<html>
<head>
<title>My Webpage</title>
<style>
h1 {
color: red;
font-size: 24px;
}
p {
color: blue;
font-size: 16px;
}
</style>
</head>
<body>
<h1>Welcome to my webpage!</h1>
<p>This is the content of my webpage.</p>
</body>
</html>이 예에서 태그에는 요소 <Style>의 스타일을 정의한 CSS코드가 포함되어 있다. 속성은 텍스트 색상을 설정하는 데 사용되며 속성은 글꼴 크기를 설정하는 데 사용된다.
<h1>, <p> color, font-size가 그 예이다. 그리고 브라우저가 이 HTML 문서를 렌더링할 때 정의된 스타일을 해당 HTML 요소에 적용하여 빨간색 h1제목과 파란색 단락 텍스트를 생성한다.
그리고 <h1>은 html에서 사용하는 것으로 그 예시는 다음과 같다.
<!DOCTYPE html>
<html>
<head>
<title>My Webpage</title>
</head>
<body>
<h1>Welcome to my webpage!</h1>
<p>This is the content of my webpage.</p>
</body>
</html>예시는 제가 사용하고 있는 style이며, 다음과 같다.
<h2 style="position: relative; padding-left: 20px;">
<span style="position: absolute; top: 0; left: 0; bottom: 0; width: 5px; background-color: blue;"></span>
Subheading Text
</h2><Style>과 <h1>과는 서로 다른 2가지 정도의 차이점이 존재한다.
<Style>은 html 페이지의 css 스타일을 정의하는 데 사용되는 html이며, 일반적으로 html문서의 <head> 섹션에 배치되며 html 문서의 <head>섹션에 배치되며 html 요소가 페이지에 표시되는 방식을 정희하는 css코드를 포함한다.
<h1>은 페이지에서 최상위 제목을 정의하는 데 사용되는 html 요소이다. 페이지의 주요 주제나 주제를 나타내는 데 사용되며 일반적으로 페이지의 다른 텍스트보다 큰 글꼴 크기로 표시된다.
스타일과 h1의 차이점은 스탕일은 페이지에서 html 요소의 시각적 모양을 정의하는 데 사용되는 반면 h1은 페이지 콘텐츠의 의미론적 의미를 정의하는 데 사용된다는 것이다.
즉, 스타일은 콘텐츠의 모양을 정의하는 데 사용되고 h1은 콘텐츠의 의미를 정의하는 데 사용된다고 할 수 있다.
또한, 예를 들어 <style>요소는 페이지의 모든 <h1> 제목이 특정 색상의 크고 굵은 글꼴로 표시되도록 정의하는 데 사용할 수 있다. 제목의 시각적 모양을 정의한다.
반면 <h1> 요소 자체는 그 안에 있는 콘텐츠가 의미를 나타내는 페이지의 최상위 제목임을 정의하는 데 사용된다.
CSS에서 Style이란?
위에서 설명한 바로 이해를 하면 결국 CSS에서 '스타일'은 HTML 요소가 웹 페이지에 표시되는 방식을 나타내는 하위개념이다. CSS(Cascading Style Sheet)는 html 또는 xml 문서의 표시를 설명하는 데 사용되는 스타일 시트 언어이다. 이를 통해 웹 개발자는 글꼴 크기 및 스타일, 색상, 레이아웃 및 기타 시각적 속성을 포함하여 개별 html 요소 또는 요소 그룹에 대한 스타일을 정의할 수 있다.
style 속성은 html 요소에 대한 인라인 스타일을 정의하는 데 사용할 수 있는 css의 하위 개념을 말한다. 이는 스타일 규칙이 별도의 스타일 시트에 정의되지 않고 요소에 직접 적용됨을 의미한다.
<p style="color: red; font-size: 18px;">This text is red and 18px.</p>위 예시는 style 속성 <p> 요소 내의 텍스트가 18픽셀의 글꼴 크기와 빨간색으로 표시되도록 정의하는 데 사용된다. style 속성은 인라인 스타일을 정의하는 데 유용할 수 있지만 일반적으로 외부 스타일시트를 대신 사용하는 것이 가장 좋은 방법으로 간주하고 있다. 이렇게 웹 페이지의 프레젠테이션을 해당 콘텐츠와 분리하여 사이트의 모양을 유지 관리하고 업데이트하기가 더 쉽다는 장점이 존재한다.
참고로 html에서 <p>의 요소는 텍스트 단락으로 정의하는 데 사용된다. 여는 "<p>" 태그는 단락의 시작을 나타내고 닫는 "</p>태그는 단락의 끝을 나타낸다.
예를 들어 고양이에 대한 단락을 작성하려는 경우 다음과 같이 "<p>"태그를 사용할 수 있다.
예)
<p> 고양이는 전 세계적으로 인기 있는 애완 동물이다. 그들은 민첩성, 독립성 및 장난기 많은 성격으로 유명하다. 고양이는 그리고 다정하고 좋은 친구가 되기 때문에 많은 사람들이 고양이를 좋아한다.</p>
이렇게 웹 페이지에 작성되면 웹에서는 "고양이는 전 세계적으로 인기 있는 애완 동물이다. 그들은 민첩성, 독립성 및 장난기 많은 성격으로 유명하다. 고양이는 그리고 다정하고 좋은 친구가 되기 때문에 많은 사람들이 고양이를 좋아한다." 라고 입력된다.
'IT' 카테고리의 다른 글
| PG 결제 서비스에 대한 이해, 결제 서비스에 대해 알아보자(웹훅, API 폴링이란) (2) | 2023.12.20 |
|---|---|
| 아이패드 프로4세대 M2칩 11인치 찐 회사에서 업무를 하기위해 구매한 찐텐 실구매 후기(feat. 안사고 못베길껄) (2) | 2023.05.20 |
| 네트워크 계층 이해를 통한 ARP Spoofing 이해하기 (0) | 2023.03.17 |
| IP Spoofing 공격 방법 및 공격 탐지하는 방법 (0) | 2023.03.14 |
| AD HOC(애드훅) 네트워크에 대해서 알아보자(정의, 특징, 프로토콜, 네트워크 7계층, L1, L2, L3, L4, L5, L6, L7이란?) (0) | 2023.03.10 |
