HTML 설정 CSS

HTML 설정 CSS

CSS는 웹 디자인 및 개발에 있어서 매우 중요한 기술입니다. CSS(Cascading Style Sheets)는 HTML 문서의 스타일과 레이아웃을 설명하는 방법을 제공합니다.

CSS를 사용하면 웹 디자이너가 HTML 문서 요소의 모양과 레이아웃을 쉽게 제어할 수 있습니다. CSS는 HTML에서 스타일 정의를 분리함으로써 웹 페이지를 더 쉽게 유지하고 수정할 수 있도록 해줍니다.

이 기사에서는 HTML 문서의 스타일과 레이아웃을 제어하기 위해 CSS를 설정하는 방법에 대해 설명합니다.

HTML 문서에 CSS 추가

HTML 문서에 CSS 스타일을 추가하려면 몇 가지 방법이 있습니다. 다음은 그 중 일부입니다.

인라인 스타일 시트: HTML 요소의 "style" 속성을 사용하여 다음과 같이 스타일을 정의합니다.

1b22da5c00054267283a947e13f033b0이 단락은 빨간색입니다. 94b3e26ee717c64999d7867364b1b4a3

이 방법은 소수의 스타일에 적합하지만 모든 요소에 반복적인 스타일링이 필요하기 때문에 대규모 웹사이트에는 적합하지 않습니다. 게다가 유지관리도 쉽지 않습니다.

내부 스타일 시트: 93f0f5c25f18dab9d176bd4f6de5d30e 태그 내부의 c9ccee2e6ea535a969eb3f532ad9fe89에 CSS 스타일을 배치하세요. 예:

93f0f5c25f18dab9d176bd4f6de5d30e

<style>
    p {
        color: red;
    }
</style>

9c3bca370b5104690d9ef395f2c5f8d1

이 방법을 사용하면 동일한 문서에 여러 스타일을 설정하고 전체 페이지에 대한 스타일을 제어할 수 있습니다. 그러나 여러 페이지에서 동일한 스타일을 사용해야 하는 경우 각 페이지에 스타일을 복사하여 붙여넣어야 합니다.

외부 스타일 시트: HTML 문서의 2cdf5bf648cf2f33323966d7f58a7f3f 태그를 사용하여 외부 CSS 파일을 참조하세요. 예:

93f0f5c25f18dab9d176bd4f6de5d30e

<link rel="stylesheet" type="text/css" href="styles.css">

9c3bca370b5104690d9ef395f2c5f8d1

이 시나리오에서는 모든 스타일이 단일 CSS 파일에 저장되며 여러 페이지에서 공유할 수 있습니다. 이 방법은 가장 일반적으로 사용되며 유지 관리가 쉽습니다.

CSS 선택기

CSS 선택기는 특정 요소를 선택하는 데 사용되는 패턴입니다. 다음을 포함하여 다양한 선택기가 있습니다.

요소 선택기: 특정 요소를 선택합니다. 예를 들어, 모든 p 요소를 선택하려면:

p {

color: red;

}

ID 선택기: 지정된 ID를 가진 요소를 선택합니다. 예를 들어 ID가 "header"인 요소를 선택하려면:

header {

background-color: gray;

}

클래스 선택기: 지정된 클래스가 있는 요소를 선택합니다. 예를 들어 "intro" 클래스가 있는 모든 요소를 ​​선택합니다.

.intro {

font-style: italic;

}

복합 선택기: 두 개 이상의 단순 선택기로 구성됩니다. 예를 들어 클래스가 "intro"이고 p 요소인 모든 요소를 ​​선택하려면:

p.intro {

font-style: italic;

}

CSS Layout

CSS를 사용하면 HTML 문서에서 요소의 위치와 크기를 제어할 수 있습니다. 다음은 가장 일반적으로 사용되는 CSS 레이아웃 속성 중 일부입니다.

위치: 요소를 "절대", "상대" 또는 "고정" 위치로 설정하려면 위치 속성을 사용하세요.

위치: 절대;
위치: 고정;

Float: 요소를 왼쪽이나 오른쪽으로 띄우려면 float 속성을 사용하세요.

float: 왼쪽;

float: 오른쪽;

Display: 요소가 표시되는 방식을 제어하려면 예: 블록 수준 요소 또는 인라인 요소:

display: block;

display: inline;

Box 모델: 패딩, 여백 및 테두리 속성을 사용하여 요소의 크기와 위치 제어:

padding: 10px; 여백: 10px;

테두리: 1px 단색 검정;

반응형 웹 디자인

반응형 웹 디자인은 여러 장치에서 액세스할 수 있는 웹 사이트를 만드는 데 사용되는 기술입니다. CSS 미디어 쿼리(미디어 쿼리)를 사용하면 다양한 장치 크기와 방향에 따라 웹사이트 레이아웃을 최적화할 수 있습니다.

예를 들어 다음은 기기 너비가 600px 미만일 때 레이아웃을 변경하는 간단한 반응형 디자인입니다.

@media screen 및 (max-width: 600px) {

body {

background-color: lightblue;

}

# header {

background-color: gray;

}

#nav {

width: 100%;

}

#nav ul {

display: block;
margin: 0;
padding: 0;

}

#nav li {

margin: 0;
padding: 0;
border-bottom: 1px solid white;

}

}

Summary

CSS는 스타일을 설명하는 방법을 제공하는 매우 중요한 기술입니다. HTML 문서의 레이아웃. HTML 문서에 CSS 스타일을 추가하려면 인라인 스타일 시트, 내부 스타일 시트, 외부 스타일 시트 등 여러 가지 방법을 사용할 수 있습니다. CSS 선택자는 특정 요소를 선택하는 데 사용되는 패턴인 반면, CSS 레이아웃 속성을 사용하면 요소의 위치와 크기를 제어할 수 있습니다. 마지막으로 반응형 웹 디자인은 레이아웃을 최적화하기 위해 CSS 미디어 쿼리를 사용하여 여러 장치에서 액세스할 수 있는 웹 사이트를 만드는 기술입니다.

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