일 -HTML 및 CSS-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

일 -HTML 및 CSS

Mary-Kate Olsen

Jan 03, 2025 pm 08:54 PM

HTML:
HTML은 Hyper Text Markup Language의 약자입니다.
HTML은 웹 페이지를 만드는 데 사용되는 표준 언어입니다.
태그 또는 요소 시스템을 사용하여 웹페이지의 구조를 정의합니다.

CSS:

CSS는 캐스케이딩 스타일 시트(Cascading Style Sheets)를 나타냅니다.
HTML로 작성된 웹페이지의 레이아웃 스타일과 형식을 지정하는 데 사용됩니다.
색상, 글꼴, 간격, 위치 지정, 반응형 디자인 등을 제어합니다.
CSS를 사용하면 구조(HTML)를 디자인(스타일)에서 분리할 수 있어 웹사이트를 더 쉽게 유지 관리하고 더 유연하게 만들 수 있습니다.

JS:
Js는 JavaScript의 약자입니다.
웹 브라우저 내에서 동적 및 대화형 효과를 만드는 데 사용되는 프로그래밍 언어입니다.
HTML이 페이지를 구성하고 CSS 스타일을 지정하는 반면 JavaScript는 페이지와의 상호 작용을 활성화하고 콘텐츠를 동적으로 수정할 수 있습니다.

HTML:
HTML은 웹 콘텐츠의 구조와 의미를 정의하는 텍스트 기반 언어입니다.

Day -HTML ans CSS

독립형 태그:
HTML에서 독립형 태그는 닫는 태그가 필요하지 않은 HTML 요소를 나타냅니다. 이는 자동으로 닫히는 태그 또는 공백 요소라고도 합니다.

예:

<br>
<hr>
<input>

구조 태그:
태그는 일반적으로 여는 태그와 닫는 태그의 쌍으로 구성됩니다.

예:

요소:
요소는 웹페이지의 구성 요소이며 문서의 다양한 유형의 콘텐츠와 구조를 나타냅니다.

HTML 요소의 구성 요소:

Opening Tag: The starting part of the element that defines the type of content that follows.
    Example:<p>, </p><h1>, <div>, <img  alt="일 -HTML 및 CSS" >

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: , , </div>

Attributes (Optional): Additional properties that provide extra information about the element. Attributes are added inside the opening tag.
    Example:>
</h1><p><strong>Example:</strong><br>
</p>

<pre class="brush:php;toolbar:false">

    <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>


   <div>



<p><strong>Explanation of the HTML Structure:</strong><br>
</p>

<pre class="brush:php;toolbar:false">: Root element of the HTML document.
        : Contains metadata for the page, including the title and styles.
        :Contains the content visible on the page.

    Inside the :
        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.

</style>
</title>

div:
요소는 다른 요소를 그룹화하고 스타일이나 레이아웃 속성을 적용하는 데 사용되는 블록 수준 컨테이너입니다.

클래스 선택기:

클래스 선택기는 특정 클래스 속성을 가진 요소를 선택하고 스타일을 지정하는 데 사용됩니다. CSS에서 가장 일반적으로 사용되는 선택자 중 하나입니다. 클래스 선택기는 점(.)과 클래스 이름으로 정의됩니다.

구문:

.classname {

}

요소 선택기:

요소 선택기(유형 선택기라고도 함)는 태그 이름을 기준으로 HTML 요소를 선택하고 스타일을 지정하는 데 사용됩니다. 문서에 있는 특정 HTML 요소 유형의 모든 인스턴스에 스타일을 적용할 수 있습니다.

구문:

element {

}

여백:

CSS의 여백 속성은 요소 외부에 공간을 만드는 데 사용됩니다.

구문:

element {
  margin: value;
}

패딩:

CSS의 패딩 속성은 요소 내부, 콘텐츠와 테두리 사이에 공간을 만드는 데 사용됩니다.

구문:

element {
  padding: value;
}

위 내용은 일 -HTML 및 CSS의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

@keyframes CSS : 가장 많이 사용되는 트릭May 08, 2025 am 12:13 AM

@keyframesispopularduetoitstativerstatility 및 powerincreatingsmoothcssanimations.keytricksinclude : 1) states 사이에 moothtransitionsbettites, 2) 애니메이션 multiplepropertiessimultory, 3) vendorPixesforBrowsercompatibility, 4) 빗질을 사용하여

CSS 카운터 : 자동 번호 매기기에 대한 포괄적 인 안내서May 07, 2025 pm 03:45 PM

csScounterSearedTomanageAutomaticNumberingInberingInwebDesigns.1) 1) theCanbeusedfortablestoffContents, ListItems 및 CustomNumbering.2) AdvancedUsesInSinestedNumberingsystems.3) CreativeUseNvolvecust를 CreativeSinvolecust.4) CreativeSinvolvecust

스크롤 구동 애니메이션을 사용한 현대 스크롤 그림자May 07, 2025 am 10:34 AM

특히 모바일 장치에 스크롤 그림자를 사용하는 것은 Chris가 이전에 다룬 미묘한 UX입니다. Geoff는 애니메이션 타임 라인 속성을 사용하는 새로운 접근 방식을 다루었습니다. 또 다른 방법이 있습니다.

이미지 맵 재 방문May 07, 2025 am 09:40 AM

빠른 새로 고침을 통해 실행합시다. 이미지 맵은 html 3.2로 돌아가는데, 먼저 서버 측 맵과 클라이언트 측지 맵은 맵 및 영역 요소를 사용하여 이미지를 통해 클릭 가능한 영역을 정의했습니다.

DEVS 상태 : 모든 개발자를위한 설문 조사May 07, 2025 am 09:30 AM

Devs State Survey는 이제 참여에 개방되어 있으며, 이전 설문 조사와 달리 코드, 직장, 건강, 취미 등을 제외한 모든 것을 포함합니다.

CSS 그리드는 무엇입니까?Apr 30, 2025 pm 03:21 PM

CSS 그리드는 복잡하고 반응이 좋은 웹 레이아웃을 만드는 강력한 도구입니다. 디자인을 단순화하고 접근성을 향상 시키며 이전 방법보다 더 많은 제어를 제공합니다.

CSS Flexbox 란 무엇입니까?Apr 30, 2025 pm 03:20 PM

기사는 반응 형 설계에서 공간의 효율적인 정렬 및 분포를위한 레이아웃 방법 인 CSS Flexbox에 대해 설명합니다. Flexbox 사용을 설명하고 CSS 그리드와 비교하고 브라우저 지원 세부 사항을 설명합니다.

CSS를 사용하여 웹 사이트를 반응하게 만드는 방법은 무엇입니까?Apr 30, 2025 pm 03:19 PM

이 기사는 Viewport Meta 태그, 유연한 그리드, 유체 미디어, 미디어 쿼리 및 상대 장치를 포함하여 CSS를 사용하여 반응 형 웹 사이트를 만드는 기술에 대해 설명합니다. 또한 CSS 그리드 및 Flexbox를 함께 사용하여 CSS 프레임 워크를 권장합니다.

See all articles