CSS3를 사용하는 방법

CSS(Cascading Style Sheets)는 웹 요소의 스타일을 지정하는 데 사용되는 언어입니다. 1996년에 출시되었으며 수년간의 개발과 개선 끝에 이제 CSS3로 출시되었습니다.

CSS3은 개발자에게 애니메이션 효과, 텍스트 모양 및 레이아웃 제어 등과 같은 많은 새로운 기능을 제공합니다. 이번 글에서는 CSS3 사용법을 자세히 살펴보겠습니다.

1. CSS3 선택기

CSS3에는 개발자가 스타일을 적용할 요소를 더 정확하게 선택할 수 있도록 하는 많은 새로운 선택기가 도입되었습니다. 다음은 몇 가지 일반적인 선택기입니다.

1. 요소 선택기: HTML 요소 이름으로 요소를 선택합니다. 예: p{}.
2. 클래스 선택기: HTML 클래스 속성 값으로 요소를 선택합니다. 예: .classname{}.
3. ID 선택기: HTML id 속성 값으로 요소를 선택합니다. 예: #idname{}.
4. 속성 선택기: 속성 값으로 요소를 선택합니다. 예: [attr=값]{}.
5. 의사 클래스 선택기: 상태나 위치에 따라 요소를 선택합니다. 예: :hover{}, :nth-child(){}.
6. 의사 요소 선택기:::after{}, ::before{}와 같은 요소의 특정 부분을 선택하는 데 사용됩니다.

2. CSS3 애니메이션

CSS3 애니메이션은 페이지에서 요소를 동적으로 변경하는 방법입니다. 새로운 @keyframes 규칙과 animation-name, animation-duration, animation-timing-function과 같은 몇 가지 새로운 속성을 사용합니다.

다음은 간단한 예입니다.

/* 定义动画 */
@keyframes mymove {
    from {left: 0px;}
    to {left: 200px;}
}

/* 应用动画 */
div {
    animation-name: mymove;
    animation-duration: 5s;
}

이 예는 페이지의 div 요소를 x축을 따라 200픽셀 이동하며 애니메이션을 완료하는 데 5초가 걸립니다.

3. CSS3 상자 모델

상자 모델은 웹 페이지에 요소를 배치할 때 해당 요소가 콘텐츠 영역, 패딩, 테두리 및 여백을 포함하여 "상자"로 간주됨을 의미합니다. CSS3에는 페이지 요소의 크기와 위치를 보다 정확하게 제어할 수 있는 새로운 상자 모델이 도입되었습니다. 요소 자체의 너비와 높이에 테두리와 패딩의 너비를 추가합니다.

예는 다음과 같습니다.

/* 使用新的盒模型 */
div {
    box-sizing: border-box;
    width: 50%;
    padding: 20px;
    border: 1px solid black;
}

이 예는 콘텐츠 영역, 패딩 및 테두리를 포함하여 페이지의 div 너비를 상위 요소의 50%로 설정합니다. 새로운 상자 모델이 없으면 테두리와 패딩으로 인해 요소 자체의 너비와 높이가 늘어납니다.

4. CSS3 글꼴

CSS3를 사용하면 텍스트의 모양과 레이아웃을 보다 정확하게 제어할 수 있습니다. 다음은 몇 가지 새로운 속성입니다.

1. font-face: 웹 페이지에 로드된 사용자 정의 글꼴을 정의하는 데 사용됩니다.
2. text-shadow: 텍스트 그림자를 추가하는 데 사용됩니다.
3. text-overflow: 텍스트가 요소에 오버플로될 때 발생하는 상황을 제어하는 ​​데 사용됩니다.
4. 단어 줄 바꿈: 텍스트에서 단어 줄 바꿈 길이를 제어하는 ​​데 사용됩니다.

다음은 몇 가지 예입니다.

/* 定义字体 */
@font-face {
    font-family: "MyFont";
    src: url("myfont.ttf");
}

/* 应用字体 */
body {
    font-family: "MyFont";
}

/* 添加文本阴影 */
h1 {
    text-shadow: 2px 2px #000000;
}

/* 控制文本溢出 */
p {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

/* 控制长单词的换行方式 */
p2 {
    word-wrap: break-word;
}

5. CSS3 미디어 쿼리

미디어 쿼리는 CSS3를 사용하여 브라우저 창의 크기나 기타 장치 특성에 따라 다양한 스타일을 적용하는 방법입니다. 이를 통해 웹사이트는 다양한 모니터 크기와 장치에 더 잘 적응할 수 있습니다.

예는 다음과 같습니다.

/* 当浏览器窗口小于 600 像素时应用不同的样式 */
@media only screen and (max-width: 600px) {
    body {
        background-color: lightblue;
    }
}

이 예는 브라우저 창이 600픽셀보다 작을 때 페이지의 배경색을 연한 파란색으로 변경합니다.

요약:

CSS3에는 개발자가 웹 페이지 요소의 스타일과 레이아웃을 더 쉽게 제어할 수 있는 많은 새로운 기능이 도입되었습니다. 이 문서에서는 선택기, 애니메이션, 상자 모델, 글꼴 및 미디어 쿼리를 포함하여 일반적으로 사용되는 CSS3 기능을 소개합니다. 이 기사가 독자들이 CSS3 사용 방법을 더 잘 이해하는 데 도움이 되기를 바랍니다.

위 내용은 CSS3를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!