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

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

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

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

HTML 구문:

<title>Page Title</title>


   <h1 id="My-First-Heading">My First Heading</h1>
   <p>My first paragraph.</p>

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

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

Hello, World!

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

프로젝트:

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

    <title>ILUGC</title>

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

    여백:25px;
}
스타일>
머리>

   <div>



<p>출력:</p>

<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173594590044719.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="Day - TML/CSS - Project ILUGC(web page)"></p>
<p><strong>설명:</strong></p>

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

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

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


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

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

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

<p><strong>클래스 선택기와 요소 선택기:</strong></p>

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


          </div>

            
        </div>
</li>
</ol>
</div>

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