일 -HTML 및 CSS
- Mary-Kate Olsen원래의
- 2025-01-03 20:54:45290검색
HTML:
HTML은 Hyper Text Markup Language의 약자입니다.
HTML은 웹 페이지를 만드는 데 사용되는 표준 언어입니다.
태그 또는 요소 시스템을 사용하여 웹페이지의 구조를 정의합니다.
CSS:
CSS는 캐스케이딩 스타일 시트(Cascading Style Sheets)를 나타냅니다.
HTML로 작성된 웹페이지의 레이아웃 스타일과 형식을 지정하는 데 사용됩니다.
색상, 글꼴, 간격, 위치 지정, 반응형 디자인 등을 제어합니다.
CSS를 사용하면 구조(HTML)를 디자인(스타일)에서 분리할 수 있어 웹사이트를 더 쉽게 유지 관리하고 더 유연하게 만들 수 있습니다.
JS:
Js는 JavaScript의 약자입니다.
웹 브라우저 내에서 동적 및 대화형 효과를 만드는 데 사용되는 프로그래밍 언어입니다.
HTML이 페이지를 구성하고 CSS 스타일을 지정하는 반면 JavaScript는 페이지와의 상호 작용을 활성화하고 콘텐츠를 동적으로 수정할 수 있습니다.
HTML:
HTML은 웹 콘텐츠의 구조와 의미를 정의하는 텍스트 기반 언어입니다.
독립형 태그:
HTML에서 독립형 태그는 닫는 태그가 필요하지 않은 HTML 요소를 나타냅니다. 이는 자동으로 닫히는 태그 또는 공백 요소라고도 합니다.
예:
<br> <hr> <input>
구조 태그:
태그는 일반적으로 여는 태그와 닫는 태그의 쌍으로 구성됩니다.
예:
<html> <head> <body>
요소:
요소는 웹페이지의 구성 요소이며 문서의 다양한 유형의 콘텐츠와 구조를 나타냅니다.
HTML 요소의 구성 요소:
Opening Tag: The starting part of the element that defines the type of content that follows.
Example:<p>, <h1>, <div>, <img>
Content: The content placed between the opening and closing tags (if applicable). This could be text, images, links, or other elements.
Example: This is a paragraph.
Closing Tag: The closing part of the element that indicates the end of the element. It is the same as the opening tag, but with a forward slash (/) before the tag name.
Example: </p>, </h1>, </div>
Attributes (Optional): Additional properties that provide extra information about the element. Attributes are added inside the opening tag.
Example:>
<p><strong>Example:</strong><br>
</p>
<pre class="brush:php;toolbar:false"><html>
<head>
<title>ILUGC</title>
<style>
.container{
border:1px solid;
height:200%;
width:85%;
margin:auto;
}
.header h4{
text-transform: uppercase;
color:#e22d30;
border-top:1px solid green;
width: fit-content;
padding-top:10px;
}
.header{
margin:25px;
}
</style>
</head>
<body>
<div>
<p><strong>Explanation of the HTML Structure:</strong><br>
</p>
<pre class="brush:php;toolbar:false"><html>: Root element of the HTML document.
<head>: Contains metadata for the page, including the title and styles.
<body>:Contains the content visible on the page.
Inside the <head>:
The <title> tag gives the webpage its title when viewed in the browser tab.
The <style> tag contains the internal CSS to style the page.
Inside the <body>:
.container:A container div with a class container that holds all the page elements.
It's styled with a border, height, width, and centered using margin:auto.
.header: A section that contains the main title (<h1>) and a subtitle (<h4>) about the ILUGC group.
The h4 tag is styled with uppercase letters, a red color, a border on top, and some padding.
navbar: This seems to be a placeholder for a navigation bar.
layout: A section for the main content layout, with two subsections:
mainLayout: Likely for the main content area.
sideLayout: Likely for a sidebar or additional content.
footer: Placeholder for the footer section.
div:
요소는 다른 요소를 그룹화하고 스타일이나 레이아웃 속성을 적용하는 데 사용되는 블록 수준 컨테이너입니다.
클래스 선택기:
클래스 선택기는 특정 클래스 속성을 가진 요소를 선택하고 스타일을 지정하는 데 사용됩니다. CSS에서 가장 일반적으로 사용되는 선택자 중 하나입니다. 클래스 선택기는 점(.)과 클래스 이름으로 정의됩니다.
구문:
.classname {
}
요소 선택기:
요소 선택기(유형 선택기라고도 함)는 태그 이름을 기준으로 HTML 요소를 선택하고 스타일을 지정하는 데 사용됩니다. 문서에 있는 특정 HTML 요소 유형의 모든 인스턴스에 스타일을 적용할 수 있습니다.
구문:
element {
}
여백:
CSS의 여백 속성은 요소 외부에 공간을 만드는 데 사용됩니다.
구문:
element {
margin: value;
}
패딩:
CSS의 패딩 속성은 요소 내부, 콘텐츠와 테두리 사이에 공간을 만드는 데 사용됩니다.
구문:
element {
padding: value;
}
위 내용은 일 -HTML 및 CSS의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!