일 - TML/CSS - 프로젝트 ILUGC(웹페이지)-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

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

Patricia Arquette

Jan 04, 2025 am 07:11 AM

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="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173594590044719.jpg" class="lazy" 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픽셀의 여백을 추가합니다.