집 >웹 프론트엔드 >CSS 튜토리얼 >일 - TML/CSS - 프로젝트 ILUGC(웹페이지)

일 - TML/CSS - 프로젝트 ILUGC(웹페이지)

Patricia Arquette원래의: 2025-01-04 07:11:34829검색

HTML:

HTML은 Hyper Text Markup Language의 약자입니다
HTML은 웹 페이지 작성을 위한 표준 마크업 언어입니다
HTML은 웹 페이지의 구조를 설명합니다
HTML은 일련의 요소로 구성됩니다
HTML 요소는 브라우저에 콘텐츠 표시 방법을 알려줍니다
HTML 요소는 "이것은 제목입니다", "이것은 단락입니다", "이것은 링크입니다" 등과 같은 콘텐츠에 레이블을 지정합니다.

참조 - https://www.w3schools.com/Html/html_intro.asp

CSS:

캐스케이딩 스타일 시트(CSS)는 HTML로 작성된 문서의 표현을 설명하는 데 사용되는 스타일시트 언어입니다.
CSS는 요소가 화면, 종이, 음성 또는 기타 미디어에서 어떻게 렌더링되어야 하는지 설명합니다.

참조 - https://developer.mozilla.org/en-US/docs/Web/CSS

Day - TML/CSS - Project ILUGC(web page)

HTML/CSS와 자바스크립트의 차이점

-->HTML/CSS - 정적 페이지 - 수동으로 업데이트하지 않는 한 콘텐츠는 로드될 때마다 동일하게 유지됩니다.
-->자바스크립트 - 동적 페이지 - 페이지는 버튼 클릭, 양식 제출, 마우스 이동 등의 사용자 작업에 응답할 수 있습니다.

HTML 구문:

<html>
<head>
<title>Page Title</title>
</head>
<body>
   <h1>My First Heading</h1>
   <p>My first paragraph.</p>
</body>
</html>

-->확장자(.html)로 파일을 저장한 후 더블클릭하여 프로그램을 실행하세요.

Day - TML/CSS - Project ILUGC(web page)

HTML 요소:
HTML에서 요소는 일반적으로 시작과 끝을 정의하기 위해 여는 태그와 닫는 태그를 사용하여 묶습니다.
--> 여는 태그 : HTML 요소의 시작을 표시합니다.
--> 닫는 태그 : 요소 이름 앞에 슬래시를 사용하여 HTML 요소의 끝을 표시합니다.
예:

Hello, World!

독립형 태그: HTML의 독립형 태그(자체 닫는 태그라고도 함)는 열기와 닫기 사이에 내용이 없으므로 닫기 태그가 필요하지 않은 요소입니다. 태그를 지정하세요.
Ex-
- break:줄 바꿈을 삽입하는 데 사용됩니다

프로젝트:

ILUGC 웹 페이지 레이아웃 준비 중:(https://ilugc.in/)

<html>
<머리>
    <title>ILUGC</title>
<스타일>
.컨테이너{
    테두리:1px 솔리드;
    높이:200%;
    너비:85%;
    여백:자동;
}
.헤더 h4{
    텍스트 변환: 대문자;
    색상:#e22d30;
    테두리 상단:1px 단색 녹색;
    너비: 내용에 맞게;
    패딩 상단:10px;
}
.헤더{

    여백:25px;
}
</스타일>
</머리>
<본문>
   <div>



<p>출력:</p>

<p><img src="https://img.php.cn/upload/article/000/000/000/173594590044719.jpg" alt="Day - TML/CSS - Project ILUGC(web page)"></p><p><strong>설명:</strong></p>

<ol>
<li>
<html>: HTML 문서의 루트 요소입니다.</li>
<li>
<head>: 문서에 대한 메타데이터와 리소스를 포함합니다.</li>
<li>
<제목>: 브라우저 탭에 표시되는 웹페이지의 제목을 설정합니다.</li>
<li>
<style>: HTML 문서 스타일을 지정하기 위해 CSS를 포함합니다.</li>
</ol>

.container: 컨테이너 div의 스타일을 지정합니다.
a) 테두리: 1픽셀 실선;: 1픽셀 실선 테두리를 추가합니다.
b) 높이: 200%;: 높이를 뷰포트 높이의 두 배로 설정합니다.
c) width: 85%;: 너비를 뷰포트 너비의 85%로 설정합니다.
d) margin: auto;: 컨테이너를 수평으로 중앙에 배치합니다.
.header h4:
.header 클래스 내부 요소:
a) text-transform: 대문자;: 텍스트를 대문자로 변환합니다.
b) color: #e22d30;: 텍스트 색상을 특정 빨간색 음영으로 설정합니다.
c) border-top: 1px 단색 녹색;: 녹색 상단 테두리를 추가합니다.
d) width: fit-content;: 콘텐츠에 맞게 요소 너비를 축소합니다.
e) padding-top: 10px;: 텍스트 위에 10픽셀의 패딩을 추가합니다.
.header: 헤더 div의 스타일을 지정합니다.
a) margin: 25px;: 헤더 주위에 25픽셀의 여백을 추가합니다.

: 웹페이지에 표시되는 모든 콘텐츠를 포함합니다.
: 콘텐츠를 그룹화하고 스타일을 지정하기 위한 컨테이너 요소입니다.
: 웹페이지의 주요 제목을 나타냅니다.
:
보다 덜 중요한 부제목을 나타냅니다.

속성:
속성은 일반적으로 이름-값 쌍의 형태로 HTML 요소에 대한 추가 정보를 제공합니다.
예: `

패딩:
패딩은 요소의 내용과 테두리 사이의 공간입니다. 콘텐츠 주위에 내부 여백을 만들어 콘텐츠를 요소 가장자리에서 밀어냅니다.

여백:
여백은 요소를 다른 요소와 구분하는 요소 테두리 외부의 공간입니다. 요소 사이의 외부 공간을 정의하여 요소 주위에 거리를 만듭니다.

클래스 선택기와 요소 선택기:

클래스 선택기는 마침표(.)와 클래스 이름을 사용하여 특정 클래스 속성이 있는 HTML 요소를 대상으로 합니다.
요소 선택기는 태그 이름으로 HTML 요소를 직접 타겟팅합니다

위 내용은 일 - TML/CSS - 프로젝트 ILUGC(웹페이지)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

JavaScript css html Static define for require auto break double using class internal Attribute this display margin padding border viewport transform https Other

성명：

이전 기사：도움이 필요해요!!!다음 기사：도움이 필요해요!!!

일 - TML/CSS - 프로젝트 ILUGC(웹페이지)

HTML:

CSS:

프로젝트:

: 웹페이지의 주요 제목을 나타냅니다.

:

보다 덜 중요한 부제목을 나타냅니다.

관련 기사