이 글은 CSS에 대한 내용으로 충분하며, 지식을 빠르게 복습하는데 사용할 수 있는 CSS 기초의 포괄적인 모음입니다. 인터뷰를 위한 첫 번째 선택입니다.

1 CSS 소개

CSS는 Cascading Style Sheets의 약자입니다.
CSS는 마크업 언어이기도 하며 주로 HTML 페이지의 텍스트 내용(글꼴, 크기, 정렬 등), 이미지 모양(너비 및 높이, 테두리 스타일,
여백 등)은 물론 레이아웃 및 레이아웃을 설정하는 데 사용됩니다. 페이지의 모양 표시 스타일. .

더 많은 CSS 콘텐츠를 보려면 MDN: 보내기를 클릭하세요를 참조하세요.

1.1 CSS 구문 사양

모든 스타일이 포함되어 있습니다.

<head>
 <style>
 h4 {
      
      
 color: blue;
 font-size: 100px;
 }
 </style>
</head>

1.2 CSS의 세 가지 주요 기능

CSS에는 계단식 배열, 상속 및 우선 순위라는 세 가지 매우 중요한 특성이 있습니다.

1.2.1 스택 가능성

동일한 선택기가 동일한 스타일을 설정하는 경우 한 스타일이 충돌하는 다른 스타일을 덮어씁니다(계단식). 계단식 배열은 주로 스타일 충돌
문제를 해결합니다
.계단식 원리:

스타일 충돌은 근접성 원칙을 따르며, 구조에 더 가까운 스타일이 실행됩니다.
스타일이 충돌하거나 겹치지 않습니다.

1.2.2 상속

CSS 상속: 하위 태그는 텍스트 색상, 글꼴 크기 등 상위 태그의 일부 스타일을 상속합니다.
상속을 올바르게 사용하면 코드를 단순화하고 CSS 스타일의 복잡성을 줄일 수 있습니다.
하위 요소는 상위 요소의 스타일을 상속할 수 있습니다(이러한 요소의 시작 부분에 있는 텍스트, 글꼴, 선 요소는 상속될 수 있으며 색상 속성도 상속될 수 있음). )

행 높이 상속

body {
 font:12px/1.5 Microsoft YaHei；
}

행 높이는 단위를 따를 수도 있고 따르지 않을 수도 있습니다.
하위 요소가 행 높이를 설정하지 않으면 상위 요소의 행 높이인 1.5를 상속합니다.
이때 자식 요소의 줄 높이는 현재 자식 요소의 텍스트 크기 * 1.5 입니다.
본문 줄 높이 1.5 이 작성 방법의 가장 큰 장점은 내부의 하위 요소가 자체 텍스트 크기에 따라 줄 높이를 자동으로 조정할 수 있다는 것입니다.

1.2.3 우선순위

동일한 요소에 여러 선택기가 지정되면 우선순위가 생성됩니다.
선택자가 동일하면 캐스케이딩을 수행하고, 선택자가 다르면 선택자의 가중치에 따라 선택자를 실행합니다.
여기에 이미지 설명을 삽입하세요.

무게는 4개의 숫자그룹으로 구성되어 있으나 캐리는 되지 않습니다.
클래스 선택자는 항상 요소 선택자보다 크고, ID 선택자는 항상 클래스 선택자보다 크다는 등의 방식으로 이해할 수 있습니다.
레벨 판정은 왼쪽에서 오른쪽으로 진행되며, 특정 자리의 값이 같을 경우 다음 자리의 값으로 판정합니다.
간단한 니모닉: 와일드카드 및 상속 가중치는 0, 태그 선택기는 1, 클래스(의사 클래스) 선택기는 10, ID 선택기는 100, 인라인 스타일 시트는 1000
, !important는 무한대입니다.
상속된 가중치는 0입니다. 요소를 직접 선택하지 않으면 상위 요소의 가중치가 아무리 높아도 하위 요소의 가중치는 0이 됩니다.

가중치 중복: 복합 선택자인 경우 가중치가 중복되어 가중치를 계산해야 합니다.

div ul li ------> 0,0,0,3
.nav ul li ------> 0,0,1,2
a:호버 ------> 0,0,1,1
.nav a ------> 0,0,1,1

2개의 CSS 선택자

선택자는 두 가지 주요 범주 로 나뉩니다 基础选择器.复合选择器

2.1 기본 선택자

기본 선택기는 레이블 선택기, 클래스 선택기, ID 선택기 및 와일드카드 선택기를 포함하는 단일 선택기로 구성됩니다.

2.1.1 태그 선택기

태그 선택기(요소 선택기)는 HTML 태그 이름을 선택기로 사용하고, 태그 이름에 따라 분류하고,
페이지의 특정 유형의 태그에 대해 통합 CSS 스타일을 지정하는 것을 말합니다.

标签名{
 属性1: 属性值1; 
 属性2: 属性值2; 
 ...
}

<div>태그 선택기는 모든 태그, 모든 태그 등 특정 유형의 모든 태그를 선택할 수 있습니다 <span>.
장점: 페이지에서 동일한 유형의 레이블에 대한 스타일을 빠르고 균일하게 설정할 수 있습니다.
단점: 차별화된 스타일을 디자인할 수 없으며 현재 태그를 모두 선택할 수만 있습니다.

2.1.2 클래스 선택기

서로 다른 태그를 차등적으로 선택하거나 하나 또는 여러 개의 태그를 개별적으로 선택하려는 경우 클래스 선택기를 사용할 수 있습니다. 클래스 선택기는 HTML에서 클래스 속성으로 표시됩니다. CSS에서는 클래스 선택기가 점 "."으로 표시됩니다.

.类名 {
 属性1: 属性值1; 
 ...
}

label class 속성에는 여러 클래스 이름을 쓸 수 있으며, 여러 클래스 이름은 공백으로 구분해야 합니다.

2.1.3 ID 선택자

ID 선택기는 특정 ID로 표시된 HTML 요소에 대한 특정 스타일을 지정할 수 있습니다.
HTML 요소는 id 속성을 사용하여 id 선택자를 설정하며 CSS의 id 선택자는 "#"으로 정의됩니다.

#id名 {
 属性1: 属性值1; 
 ...
}

참고: id 속성은 각 HTML 문서에 한 번만 나타날 수 있습니다.

2.1.4 와일드카드 선택기

CSS에서 와일드카드 선택기는 "*"로 정의됩니다. 이는 페이지의 모든 요소(태그)가 선택된다는 의미입니다.

* {
 属性1: 属性值1; 
 ...
}

2.1.5 기본 선택기 요약

여기에 이미지 설명을 삽입하세요.

2.2 복합 선택기

일반적으로 사용되는 복합 선택자에는 하위 선택자, 하위 선택자, 공용체 선택자, 의사 클래스 선택자 등이 있습니다.

2.2.1 후손 선택자

포함 선택기라고도 하는 하위 선택기는 상위 요소 내의 하위 요소를 선택할 수 있습니다. 작성 방법은 바깥쪽 라벨을 앞쪽에, 안쪽 라벨을 뒤쪽에
공백으로 구분하여 쓰는 것입니다. 태그가 중첩되면 내부 태그가 외부 태그의 하위 태그가 됩니다.

元素1 元素2 { 样式声明 }

요소 1과 요소 2는 공백으로 구분됩니다.
요소 1은 상위 요소이고 요소 2는 하위 요소이며 최종적으로 요소 2가 선택됩니다.
요소 2는 요소 1의 자손인 한 아들, 손자 등이 될 수 있습니다.
요소 1과 요소 2는 기본 선택자가 될 수 있습니다.

2.2.2 하위 선택기

하위 요소 선택자(하위 선택자)는 요소의 가장 최근 하위인 요소만 선택할 수 있습니다. 간단한 이해는 아들 요소를 선택하는 것입니다.

元素1 > 元素2 { 样式声明 }

요소 1과 요소 2는 보다 큼 기호로 구분됩니다.
요소 1은 상위 요소이고 요소 2는 하위 요소이며 최종적으로 요소 2가 선택됩니다.
요소 2는 친아들이어야 하며 손자와 증손자는 그의 통제하에 있지 않으며 친아들 선택자라고도 할 수 있습니다.

2.2.3 유니온 선택기

Union 선택자는 영문 쉼표(,)로 연결된 선택자로 구성되며, Union 선택자의 일부로 어떠한 형태의 선택자가 사용될 수 있다.

元素1,元素2 { 样式声明 }

2.2.4 의사 클래스 선택자

의사 클래스 선택기는 링크에 특수 효과를 추가하거나 첫 번째 또는 n번째 요소를 선택하는 등 특정 선택기에 특수 효과를 추가하는 데 사용됩니다.
의사 클래스 선택기 작성의 가장 큰 특징은 :hover, :first-child와 같이 콜론(:)으로 표현된다는 점입니다.

2.2.4.1 링크 의사 클래스 선택자

효율성을 보장하려면 LVHA 순서대로 link-:visited-:hover-:active를 선언하십시오.
링크에는 브라우저의 기본 스타일이 있기 때문에 실제 작업에서는 링크에 대해 별도의 스타일을 지정해야 합니다.

 /* a 是标签选择器 所有的链接 */ 
 a { 
 color: gray;
 }
 /* :hover 是链接伪类选择器 鼠标经过 */
 a:hover { 
 color: red; /* 鼠标经过的时候，由原来的 灰色 变成了红色 */
 }

2.2.4.2 :focus 의사 클래스 선택기

:focus 의사 클래스 선택기는 초점이 맞춰진 양식 요소를 선택하는 데 사용됩니다.
초점은 일반적으로 <input>양식 요소에서 얻을 수 있는 커서이므로 이 선택기는 주로 양식 요소를 대상으로 합니다.

input:focus { 
 background-color:yellow;
}

2.2.5 화합물 선택기 요약

여기에 이미지 설명을 삽입하세요.

3가지 CSS 글꼴 속성

CSS 글꼴 속성은 글꼴 모음, 크기, 두께 및 텍스트 스타일(예: 기울임꼴)을 정의하는 데 사용됩니다.

3.1 글꼴 계열

CSS는 글꼴 계열 속성을 사용하여 텍스트의 글꼴 계열을 정의합니다.

p { font-family:"微软雅黑";} 
div {font-family: Arial,"Microsoft Yahei", "微软雅黑";}

가장 일반적인 글꼴: body {font-family: 'Microsoft YaHei',tahoma,arial,'Hiragino Sans GB'; }

3.2 글꼴 크기

CSS는 글꼴 크기 속성을 사용하여 글꼴 크기를 정의합니다.

p { 
 font-size: 20px; 
}

브라우저마다 기본적으로 다른 글꼴 크기가 표시될 수 있습니다. Google Chrome의 기본 텍스트 크기는 16px입니다.

3.3 글꼴 두께

CSS는 글꼴 가중치 속성을 사용하여 텍스트 글꼴의 가중치를 설정합니다.

p { 
 font-weight: bold;
}

여기에 이미지 설명을 삽입하세요.

3.4 텍스트 스타일

CSS는 글꼴 스타일 속성을 사용하여 텍스트 스타일을 지정합니다.

p { 
 font-style: normal;
}

여기에 이미지 설명을 삽입하세요.

3.5 글꼴 복합 속성

body { 
 font: font-style font-weight font-size/line-height font-family;
}

글꼴 속성 사용 시 위의 구문 형식에 따라 순서대로 작성해야 하며 순서는 변경할 수 없으며 각 속성은 공백으로 구분됩니다.
설정할 필요가 없는 속성은 생략 가능합니다(기본값 사용) 값), 그러나 글꼴 크기 및 글꼴 모음은 유지되어야 합니다. 속성, 그렇지 않으면 글꼴 속성이 아무런 영향을 미치지 않습니다.

3.6 글꼴 속성 요약

여기에 이미지 설명을 삽입하세요.

4개의 텍스트 속성

CSS 텍스트 속성은 텍스트 색상, 텍스트 정렬, 텍스트 장식, 텍스트 들여쓰기, 줄 간격 등과 같은 텍스트 모양을 정의합니다.

4.1 텍스트 색상

색상 속성은 텍스트의 색상을 정의하는 데 사용됩니다.

div { 
 color: red;
}

여기에 이미지 설명을 삽입하세요.

4.2 텍스트 정렬

text-align 속성은 요소 내 텍스트 내용의 가로 정렬을 설정하는 데 사용됩니다.

div { 
 text-align: center;
}

여기에 이미지 설명을 삽입하세요.

4.3 텍스트 꾸미기

text-장식 속성은 텍스트에 추가되는 장식을 지정합니다. 텍스트에 밑줄, 취소선, 윗줄 등을 추가할 수 있습니다.

div { 
 text-decoration：underline；
}

여기에 이미지 설명을 삽입하세요.

4.4 텍스트 들여쓰기

text-indent 속성은 텍스트의 첫 번째 줄, 일반적으로 단락의 첫 번째 줄의 들여쓰기를 지정하는 데 사용됩니다.

div { 
 text-indent: 10px;
}

p { 
 text-indent: 2em;
}

em은 현재 요소의 한 텍스트 크기인 상대 단위(글꼴 크기)입니다. 현재 요소에 크기가 설정되어 있지 않으면 상위 요소의 한 텍스트 크기가 됩니다 .

4.5 줄 간격

line-height 속성은 선 사이의 거리(선 높이)를 설정하는 데 사용됩니다. 텍스트 줄 사이의 거리를 제어할 수 있습니다.

p { 
 line-height: 26px;
}

4.6 텍스트 속성 요약

여기에 이미지 설명을 삽입하세요.

5가지 CSS 소개 방법

CSS 스타일이 작성된 위치(또는 도입 방법)에 따라 CSS 스타일 시트는 세 가지 주요 범주로 나눌 수 있습니다.

인라인 스타일 시트(인라인)
내부 스타일 시트(내장형)
외부 스타일 시트(링크됨)

引入外部样式表：
<link rel="stylesheet" href="css文件路径">

여기에 이미지 설명을 삽입하세요.

6가지 CSS 요소 표시 모드

웹 페이지의 레이아웃을 더 좋게 할 수 있습니다. 요소 표시 모드는 요소(라벨)가 표시되는 방식입니다. 예를 들어 요소(라벨)는 <div>단독으로 한 줄을 차지하며, 예를 들어 여러 요소를 한 줄에 배치할 수 있습니다 <span>.
HTML 요소는 일반적으로 블록 요소와 인라인 요소의 두 가지 유형으로 나뉩니다.

6.1 블록 요소

일반적인 블록 요소에는 <h1>~<h6>, <p>, , , 등이 있으며, <div>그 중 태그가 가장 일반적인 블록 요소입니다. 블록레벨 요소의 특징: ① 한 줄을 차지한다. ② 높이, 너비, 여백, 패딩을 모두 제어할 수 있습니다. ③ 너비는 기본적으로 컨테이너(부모 너비)의 100%로 설정됩니다. ④ 행 또는 블록 수준의 요소를 담을 수 있는 컨테이너 및 상자입니다. 알아채다 :<ul><ol><li><div>

블록 수준 요소는 텍스트 유형 요소 내에서 사용할 수 없습니다.
<p>태그는 주로 텍스트를 저장하는 데 사용되므로 <p>블록 수준 요소를 태그 안에 배치할 수 없습니다.<div>
마찬가지로 <h1>~<h6>등은 모두 텍스트 블록 수준 태그이며 다른 블록 수준 요소는 그 안에 배치될 수 없습니다.

6.2 인라인 요소

일반적인 인라인 요소로는 <a>, <strong>, <b>, <em>, <i>, <del>, <s>, <ins>등 <u>이 있습니다 <span>. 그 중
<span>태그가 가장 일반적인 인라인 요소입니다. 어떤 곳에서는 인라인 요소를 인라인 요소라고도 합니다.
인라인 요소의 특징:
① 인접한 인라인 요소는 한 줄에 표시되며, 한 줄에 두 개 이상 표시될 수 있습니다.
② 높이와 너비를 직접 설정할 수 없습니다.
③ 기본 너비는 해당 콘텐츠의 너비입니다.
④ 인라인 요소는 텍스트나 기타 인라인 요소만 수용할 수 있습니다.
알아채다:

링크 안에 더 이상 링크를 넣을 수 없습니다.
블록 수준 요소는 특수 링크 에 배치할 수 <a>있지만 <a>블록 수준 모드로 변환하는 것이 가장 안전합니다.

6.3 인라인 블록 요소

인라인 요소에는 블록 요소와 인라인 요소의 특성을 모두 갖는 몇 가지 특수 태그( <img />, <input />, ) 가 있습니다 . 일부 소스에서는 이를 인라인 블록 요소라고 부릅니다. 인라인 블록 요소의 특징: ① 인접한 인라인 요소(인라인 블록)와 같은 줄에 있지만 그 사이에는 공백이 있습니다. 한 줄에는 여러 요소가 표시될 수 있습니다(인라인 요소의 특성). ② 기본 너비는 해당 내용의 너비(인라인 요소의 특성)입니다. ③ 높이, 줄 높이, 여백, 패딩을 모두 제어할 수 있습니다(블록 수준 요소 특성).<td>

6.4 요소 표시 모드 요약

여기에 이미지 설명을 삽입하세요.

6.5 요소 표시 모드 전환

특별한 경우에는 요소 모드 변환이 필요합니다.간단한 이해: 한 모드의 요소에는 링크의 트리거 범위를
늘리려는 것과 같은 다른 모드의 특성이 필요합니다.<a>

블록 요소로 변환: display:block;
인라인 요소로 변환: display:inline;
인라인 블록으로 변환: display: inline-block;

7 CSS 배경

배경 속성에서는 배경색, 배경 이미지, 배경 타일링, 배경 이미지 위치, 배경 이미지 고정 등을 설정할 수 있습니다.

7.1 배경색

background-color 속성은 요소의 배경색을 정의합니다.

background-color:颜色值;

일반적으로 요소의 배경색 기본값은 투명이며, 수동으로 배경색을 투명하게 지정할 수도 있습니다.

background-color:transparent;

7.2 배경 이미지

background-image 속성은 요소의 배경 이미지를 설명합니다. 실제 개발에서는 로고나 작은 장식용 그림, 큰
배경 그림을 사용하는 것이 일반적인데, 위치 조절이 매우 쉽다는 장점이 있습니다.(스프라이트도 사용 시나리오입니다)

background-image : none | url (url)

여기에 이미지 설명을 삽입하세요.
참고 : 배경 이미지 뒤의 주소에 URL을 추가하는 것을 잊지 마시고, 내부 경로에 따옴표를 추가하지 마세요.

7.3 배경 타일링

HTML 페이지에 배경 이미지를 타일링해야 하는 경우 background-repeat 속성을 사용할 수 있습니다.

background-repeat: repeat | no-repeat | repeat-x | repeat-y

여기에 이미지 설명을 삽입하세요.

7.4 배경 이미지 위치

배경에서 이미지의 위치를 변경하려면 background-position 속성을 사용하세요.

background-position: x y;

여기에 이미지 설명을 삽입하세요.

매개변수가 방향명사입니다.
지정된 두 값이 모두 방향명사인 경우 두 값의 순서는 관계가 없습니다. 예를 들어 left top과 top left는 동일한 효과를 가집니다
. 하나만 있는 경우 방향 명사가 지정되고 다른 값은 생략되면 두 번째 값이 기본값이 됩니다.
매개변수는 정확한 단위입니다.
매개변수 값이 정확한 좌표인 경우 첫 번째 값은 x 좌표여야 하고 두 번째 값은 y 좌표여야 합니다
. 값을 하나만 지정할 경우 값은 x 좌표여야 합니다. 좌표이고 다른 하나는 기본적으로 수직 중앙에 위치합니다.
매개변수가 혼합 단위
지정된 두 값이 정밀 단위와 방위각 명사가 혼합된 경우 첫 번째 값은 x 좌표, 두 번째 값은 y 좌표가 됩니다.

7.5 배경이미지 고정(배경첨부)

background-attachment 속성은 배경 이미지를 고정할지 아니면 페이지의 나머지 부분과 함께 스크롤할지를 설정합니다.
배경 부착은 나중에 시차 스크롤 효과를 생성할 수 있습니다.

background-attachment : scroll | fixed

여기에 이미지 설명을 삽입하세요.

7.6 배경 합성 작성 방법

배경 속성의 코드를 단순화하기 위해 이러한 속성을 동일한 속성 배경에 병합할 수 있습니다. 이렇게 하면 코드 양이 절약됩니다.
축약된 속성을 사용할 경우 특정 쓰기 순서가 없습니다. 일반적으로 합의된 순서는 다음과 같습니다.
배경: 배경색 배경 이미지 주소 배경 타일 배경 이미지 스크롤 배경 이미지 위치;

background: transparent url(image.jpg) repeat-y fixed top ;

7.7 배경색 반투명

CSS3는 반투명 배경색 효과를 제공합니다.

background: rgba(0, 0, 0, 0.3);

마지막 매개변수는 알파 투명도이며 값 범위는 0에서 1 사이입니다.
우리는 0.3에서 0을 생략하고 이를 배경으로 쓰는 데 익숙합니다: rgba(0, 0, 0, .3);
참고: 배경 반투명이란 상자의 배경이 반투명하고 상자 내부의 내용이 영향을 받지 않음을 의미합니다.
CSS3 새 속성은 IE9+ 브라우저에서만 지원됩니다.

7.8 배경 요약

여기에 이미지 설명을 삽입하세요.

8박스 모델

웹페이지 레이아웃 프로세스:

먼저 기본적으로 상자인 관련 웹페이지 요소를 준비합니다.
CSS를 사용하여 상자 스타일을 설정한 후 해당 위치에 배치합니다.
상자를 내용물로 채웁니다.

웹 페이지 레이아웃의 핵심 본질은 CSS를 사용하여 상자를 배치하는 것입니다.
소위 상자 모델: HTML 페이지의 레이아웃 요소는 콘텐츠를 담는 컨테이너인 직사각형 상자로 간주됩니다.
CSS 상자 모델은 본질적으로 테두리, 여백, 패딩 및 실제 콘텐츠를 포함하여 주변 HTML 요소를 캡슐화하는 상자입니다.
여기에 이미지 설명을 삽입하세요.

8.1 경계

border는 요소의 테두리를 설정할 수 있습니다. 테두리는 테두리 너비(두께), 테두리 스타일, 테두리 색상의 세 부분으로 구성됩니다.

border : border-width || border-style || border-color

여기에 이미지 설명을 삽입하세요.
테두리 스타일 border-style은 다음 값으로 설정할 수 있습니다.

없음: 테두리 없음, 즉 모든 테두리의 너비를 무시합니다(기본값).
solid: 테두리가 단일 실선입니다(가장 일반적으로 사용됨).
dashed : 테두리가 점선으로 되어 있음
점선: 테두리가 점선입니다.

테두리 약어:

border: 1px solid red; 没有顺序

별도의 테두리를 작성하는 방법:

border-top: 1px solid red; /* 只设定上边框， 其余同理 */

8.1.1 표의 얇은 선 테두리

border-collapse 속성은 브라우저가 테이블 테두리를 그리는 방법을 제어합니다. 인접한 셀의 경계를 제어합니다.

border-collapse: collapse;

붕괴: 이 단어는 병합을 의미합니다.
border-collapse: 축소; 인접한 테두리가 함께 병합됨을 의미합니다.

테두리는 상자의 실제 크기를 추가합니다. 따라서 두 가지 해결책이 있습니다.

상자의 크기를 측정할 때 테두리를 측정하지 마십시오.
측정값에 테두리가 포함된 경우 너비/높이에서 테두리 너비를 빼야 합니다.

8.1.2 둥근 테두리

CSS3에는 새로운 둥근 테두리 스타일이 추가되었으며, border-radius 속성은 요소 외부 테두리의 둥근 모서리를 설정하는 데 사용됩니다.

border-radius:length;

매개변수 값은 숫자 또는 백분율 형식일 수 있습니다.
정사각형인데 원으로 설정하고 싶다면 높이나 폭의 절반으로 값을 변경하거나, 50%로 직접 적어주시면 됩니다.
이 속성은 각각 왼쪽 위 모서리, 오른쪽 위 모서리, 오른쪽 아래 모서리 및 왼쪽 아래 모서리를 나타내는 4개의 값이 뒤에 올 수 있는 단축 속성입니다.
별도로 작성: border-top-left-radius, border-top-right-radius, border-bottom-right-radius 및
border-bottom-left-radius
호환성 IE9+ 브라우저를 지원하지만 페이지 레이아웃에 영향을 미치지 않으므로 안심하고 사용할 수 있습니다.

8.2 패딩

padding 속성은 테두리와 내용 사이의 거리인 패딩을 설정하는 데 사용됩니다.
여기에 이미지 설명을 삽입하세요.

상자에 패딩 값을 할당하면 두 가지 일이 발생합니다.

내용과 테두리 사이에 거리가 있고 패딩이 추가됩니다.
패딩은 상자의 실제 크기에 영향을 미칩니다.

즉, 상자에 이미 너비와 높이가 있고 이때 내부 테두리를 지정하면 상자가 확대됩니다.
해결 방법:
상자 크기가 렌더링과 일치하는지 확인하려면 너비/높이에서 추가 패딩을 빼면 됩니다.

8.3 여백

여백 속성은 상자와 상자 사이의 거리를 제어하는 여백을 설정하는 데 사용됩니다.
여기에 이미지 설명을 삽입하세요.
margin의 약어는 padding과 정확히 같은 의미입니다.

여백은 블록 수준 상자를 가로로 중앙에 둘 수 있지만 두 가지 조건이 충족되어야 합니다.
① 상자는 너비(너비)를 지정해야 합니다.
② 상자의 좌우 여백을 자동으로 설정합니다.

.header{ width:960px; margin:0 auto;}

일반적인 작성 방법에는 다음 세 가지 방법이 포함됩니다.

여백 왼쪽: 자동; 여백 오른쪽: 자동;
여백: 자동차;
여백: 0 자동;

참고: 위의 방법은 블록 수준 요소를 가로로 중앙에 배치하고 인라인 요소 또는 인라인 블록 요소를 상위 요소에 추가하는 것입니다 text-align:center.

블록 요소의 수직 여백을 정의하기 위해 여백을 사용할 때 여백 병합이 발생할 수 있습니다.
두 가지 주요 상황이 있습니다.

인접한 블록 요소의 수직 여백 병합
중첩된 블록 요소의 수직 여백 축소

8.3.1 인접한 블록 요소의 수직 여백 병합

두 개의 인접한 블록 요소(형제)가 만났을 때 위쪽 요소는 아래쪽 margin-bottom을 갖고 아래쪽 요소는 위쪽
margin-top을 가지면 그 사이의 세로 간격은 margin-bottom이 아닌 margin-top의 합입니다. 두 값 중 더 큰 값을 취하는 현상을
인접한 블록 요소의 수직 여백 병합이라고 합니다.
해결 방법:
하나의 상자에만 여백 값을 추가해 보십시오.
여기에 이미지 설명을 삽입하세요.

8.3.2 중첩된 블록 요소의 수직 여백 축소

중첩 관계(부모-자식 관계)가 있는 두 개의 블록 요소의 경우 상위 요소에는 상단 여백이 있고 하위 요소에도 상단 여백이 있으며, 이 때 상위 요소는 더 큰 여백 값으로 축소됩니다.
해결 방법:
① 상위 요소의 상단 테두리를 정의할 수 있습니다.
② 상위 요소의 상단 패딩을 정의할 수 있습니다.
③ 상위 요소에 Overflow:hidden을 추가할 수 있습니다.
④ 부동형, 고정형, 절대적 위치 지정 등의 다른 방법이 있으므로 상자가 접히는 문제가 발생하지 않습니다.
여기에 이미지 설명을 삽입하세요.

8.4 내부 및 외부 여백 지우기

많은 웹 페이지 요소에는 기본 내부 및 외부 여백이 있으며 기본값은 브라우저마다 일관되지 않습니다. 따라서 레이아웃을 하기 전에 먼저
웹 페이지 요소의 내부 및 외부 여백을 지워야 합니다 .

* {
 padding:0; /* 清除内边距 */
 margin:0; /* 清除外边距 */
 }

참고: 호환성을 고려하기 위해 인라인 요소는 왼쪽 및 오른쪽 내부 및 외부 여백만 설정해야 하며 위쪽 및 아래쪽 내부 및 외부 여백은 설정하지 않습니다. 그러나 블록 수준 및 인라인
블록 요소로 변환하는 것은 잘 작동합니다.

9개의 그림자

9.1 상자 그림자

상자 그림자는 CSS3의 새로운 기능이며 box-shadow 속성을 사용하여 상자에 그림자를 추가할 수 있습니다.

box-shadow: h-shadow v-shadow blur spread color inset;

여기에 이미지 설명을 삽입하세요.
알아채다:

기본값은 외부 그림자(시작)이지만 이 단어를 쓸 수 없습니다. 그렇지 않으면 그림자가 유효하지 않습니다.
상자 그림자는 공간을 차지하지 않으며 다른 상자 배열에 영향을 주지 않습니다.

9.2 텍스트 그림자

CSS3에서는 text-shadow 속성을 사용하여 텍스트에 그림자를 적용할 수 있습니다.

text-shadow: h-shadow v-shadow blur color;

여기에 이미지 설명을 삽입하세요.

10가지 레이아웃 방법

CSS는 일반 흐름(표준 흐름), 부동 및 위치 지정이라는 세 가지 전통적인 레이아웃 방법(간단히 말하면 상자 배열 방법)을 제공합니다.

10.1 표준 스트림(일반 스트림/문서 스트림)

표준 흐름(Standard Flow): 라벨은 규정된 기본 방식으로 배열되며, 가장 기본적인 레이아웃 방법은 표준 흐름(Standard Flow)입니다.

블록 수준 요소는 위에서 아래로 순서대로 배열되어 자체 행을 차지합니다.
자주 사용되는 요소: div, hr, p, h1~h6, ul, ol, dl, form, table
인라인 요소는 왼쪽에서 오른쪽 순서로 정렬되며 상위 요소의 가장자리를 터치하면 자동으로 줄바꿈됩니다.
공통 요소: 범위, a, i, em 등

10.2 플로트

부동 속성은 부동 상자를 만드는 데 사용되며 왼쪽 또는 오른쪽 가장자리가 포함 블록이나 다른 부동 상자의 가장자리에 닿을 때까지 옆으로 이동합니다.

选择器 { float: 属性值; }

여기에 이미지 설명을 삽입하세요.
부동 소수점을 추가한 후의 요소에는 다음과 같은 많은 특성이 있습니다.

플로팅 요소는 표준 흐름을 벗어납니다(표준을 벗어남).
플로팅된 요소는 한 줄에 표시되고 요소의 상단이 정렬됩니다.
플로팅 요소는 인라인 블록 요소의 특성을 갖습니다.

참고 : 플로팅 요소는 서로 가깝습니다(간격이 없음). 상위 너비가 이러한 플로팅 상자를 수용할 수 없는 경우 추가 상자는
다른 줄에 정렬됩니다. .

플로팅 요소에는 인라인 블록 요소 속성이 있습니다.

모든 요소는 부동 가능합니다. 요소의 원래 모드에 관계없이 float를 추가하면 인라인 블록 요소와 비슷한 특성을 갖게 됩니다.
블록 수준 상자에 너비가 설정되지 않은 경우 기본 너비는 상위 너비와 동일하지만 부동 소수점을 추가한 후 크기는 내용에 따라 결정됩니다.

플로팅 요소는 표준 흐름 상위 요소와 함께 사용되는 경우가 많으며, 먼저 표준 흐름의 상위 요소를 사용하여 위쪽 및 아래쪽 위치를 정렬한 다음 내부 하위 요소를 플로팅하여 왼쪽 및 오른쪽 위치를 정렬합니다.
여기에 이미지 설명을 삽입하세요.

플로팅 레이아웃에 대한 참고 사항

플로트는 표준 스트림의 상위 상자와 일치합니다.
먼저 표준 흐름의 상위 요소를 사용하여 위쪽 및 아래쪽 위치를 정렬한 다음 내부 하위 요소의 왼쪽 및 오른쪽 위치에 플로팅 배열을 사용합니다.
한 요소가 부동되면 이론적으로 다른 형제 요소도 부동되어야 합니다.
한 상자에 하위 상자가 여러 개 있는데, 상자 중 하나가 뜨면 다른 형제도 떠야 문제를 방지할 수 있습니다.
플로팅 박스는 플로팅 박스 뒤의 표준 흐름에만 영향을 미치고 그 앞의 표준 흐름에는 영향을 미치지 않습니다.

10.2.1 플로트 지우기

많은 경우 부모박스에 높이를 주는 것이 불편한데 자식박스는 떠서 위치를 차지하지 않고 결국 부모박스의 높이가 0이 되면
아래의 표준 플로우박스에 영향을 미치게 됩니다.
플로팅 요소는 더 이상 원본 문서 흐름의 위치를 차지하지 않으므로 후속 요소의 레이아웃에 영향을 미칩니다.

클리어 플로트 에센스:

플로트 제거의 본질은 플로팅 요소 제거의 영향입니다.
상위 상자 자체에 높이가 있으면 플로트를 지울 필요가 없습니다.
플로트를 지운 후 부모는 플로팅 하위 상자를 기반으로 높이를 자동으로 감지합니다. 상위 항목에 높이가 있는 경우 아래 표준 흐름에는 영향을 미치지 않습니다.

选择器{clear:属性值;}

여기에 이미지 설명을 삽입하세요.
플로트 제거 전략은 다음과 같습니다. 플로트를 닫습니다.

플로트 방법 지우기:

파티션 방법이라고도 알려진 추가 레이블 지정 방법은 W3C에서 권장하는 방법입니다.
상위 항목에 오버플로 속성 추가
상위 요소에 의사 요소 뒤에 추가
상위 요소에 이중 의사 요소 추가

10.2.1.1 추가 표시 방법

파티션 방법이라고도 알려진 추가 레이블 지정 방법은 W3C에서 권장하는 방법입니다.
extra 태그 메소드는 부동 요소의 끝에 빈 태그를 추가합니다. 예를 들어 <div style=”clear:both”></div>, 또는 기타 태그
(예: <br />등)
단점: 의미 없는 태그를 많이 추가하고 구조가 열악함
참고: 이 새로운 빈 태그는 블록 수준 요소여야 합니다.

10.2.1.2 부모에 오버플로 추가

상위 항목에 오버플로 속성을 추가하고 해당 속성 값을 숨김, 자동 또는 스크롤로 설정할 수 있습니다.
단점: 오버플로된 부분을 표시할 수 없습니다.

10.2.1.3 : 의사 요소 메서드 이후

:after 메소드는 추가 태그 메소드의 업그레이드 버전입니다. 상위 요소에도 추가됨

.clearfix:after { 
 content: ""; 
 display: block; 
 height: 0; 
 clear: both; 
 visibility: hidden; 
} 
.clearfix { /* IE6、7 专有 */ 
 *zoom: 1;
}

단점: 낮은 버전의 브라우저 관리

10.2.1.4 이중 의사 요소 클리어 플로트

.clearfix:before,.clearfix:after {
 content:"";
 display:table; 
}
.clearfix:after {
 clear:both;
}
.clearfix {
 *zoom:1;
}

단점: 낮은 버전의 브라우저 관리

10.2.2 부동 요약 지우기

여기에 이미지 설명을 삽입하세요.

10.2 포지셔닝

위치 지정을 통해 상자는 상자 내에서 자유롭게 이동하거나 화면의 특정 위치를 고정할 수 있으며 다른 상자를 억제할 수 있습니다.
포지셔닝(Positioning): 상자를 특정 위치에 위치시키므로 위치 지정 방법에 따라 상자를 배치하고 상자를 이동하는 것도 포지셔닝입니다.

10.2.1 위치 지정 구성 요소

포지셔닝 = 포지셔닝 모드 + 에지 오프셋.
위치 지정 모드는 문서에서 요소의 위치를 지정하는 데 사용됩니다. 가장자리 오프셋은 요소의 최종 위치를 결정합니다.

10.2.1.1 위치결정 모드

위치 지정 모드는 요소의 위치 지정 방법을 결정하며 CSS의 position 속성을 통해 설정되며 값은 4가지로 나눌 수 있습니다.
여기에 이미지 설명을 삽입하세요.

10.2.1.2 가장자리 오프셋

가장자리 오프셋은 배치된 상자가 최종 위치로 이동되는 경우입니다. 위쪽, 아래쪽, 왼쪽, 오른쪽의 4가지 속성이 있습니다.
여기에 이미지 설명을 삽입하세요.

10.2.2 정적 위치 지정 정적

정적 위치 지정은 요소의 기본 위치 지정 방법이며 위치 지정의 의미가 없습니다.

选择器 { position: static; }

정적 위치 지정은 표준 흐름 특성에 따라 위치를 지정하며 가장자리 오프셋이 없습니다. 정적 위치 지정은 레이아웃에 거의 사용되지 않습니다.

10.2.3 상대 위치 지정 상대

상대 위치 지정은 요소가 이동할 때 원래 위치를 기준으로 한다는 것을 의미합니다.

选择器 { position: relative; }

상대 위치 지정의 특성:

원래 위치를 기준으로 이동합니다(위치 이동 시 기준점이 원래 위치임).
표준 스트림의 원래 위치는 계속해서 점유되며 후속 상자에서는 이를 여전히 표준 스트림으로 처리합니다.

따라서 상대 위치 지정은 표준을 벗어나지 않습니다. 가장 일반적인 용도는 절대 위치 지정입니다. . .

10.2.4 절대 위치 결정 절대

절대 위치 지정이란 요소가 이동할 때 상위 요소를 기준으로 한다는 것을 의미합니다.

选择器 { position: absolute; }

절대 위치 지정의 특성:

조상 요소가 없거나 조상 요소의 위치가 지정되지 않은 경우 브라우저의 위치 지정이 우선합니다(문서 문서).
조상 요소에 위치 지정(상대, 절대, 고정 위치 지정)이 있는 경우 가장 가까운 위치에 있는 조상 요소를 참조점으로 사용하여 위치가 이동됩니다.
절대 위치 지정은 더 이상 원래 위치를 차지하지 않습니다. (비표준)
따라서 절대 위치 지정은 표준 흐름을 벗어났습니다.

자식이 절대적 위치에 있는 경우 부모는 상대 위치를 사용해야 합니다.
① 자식은 절대적 위치에 위치하며 자리를 차지하지 않으며, 다른 형제 상자에 영향을 주지 않고 부모 상자의 어느 곳에나 배치할 수 있습니다.
② 상위박스 내에 하위박스가 표시되지 않도록 상위박스를 위치시켜야 합니다.
③ 부모박스를 배치할 때 위치를 점유해야 하기 때문에 상대적으로만 부모박스의 위치를 정할 수 있습니다.

10.2.5 고정 위치 고정

고정 위치 지정은 브라우저의 표시 가능 영역에서 요소가 고정되는 위치입니다. 주요 사용 시나리오: 브라우저 페이지를 스크롤할 때 요소의 위치는 변경되지 않습니다.

选择器 { position: fixed; }

고정 위치 지정의 특징:

브라우저의 뷰포트를 참조점으로 사용하여 요소를 이동합니다. 상위 요소와 아무 관련이 없으며 스크롤 막대로 스크롤되지 않습니다.
고정 위치 지정은 더 이상 원래 위치를 차지하지 않습니다.

고정 위치 지정도 오프 라벨이며 실제로 고정 위치 지정은 특별한 종류의 절대 위치 지정으로 간주될 수도 있습니다.

10.2.5 끈끈한 위치 고정

고정 위치 지정은 상대 위치 지정과 고정 위치 지정을 혼합한 것으로 생각할 수 있습니다.

选择器 { position: sticky; top: 10px; }

끈끈한 포지셔닝의 특성:

브라우저의 시각적 창을 기준점으로 사용하여 요소 이동(고정 위치 지정 기능)
끈적한 포지셔닝은 원래 위치를 차지합니다(상대 포지셔닝 특성).
위쪽, 왼쪽, 오른쪽, 아래쪽 중 하나를 추가해야 유효합니다.

페이지 스크롤과 함께 사용됩니다. 호환성이 낮고 IE에서는 지원되지 않습니다.

10.2.6 포지셔닝 요약

포지셔닝 모드	비표준인가요?	장소 이동
정적 정적 위치 지정	아니요	가장자리 오프셋을 사용할 수 없습니다.
상대적 상대적 위치	아니오 (점유 위치)	자신의 위치를 기준으로 이동
이동하다
절대 위치	예(직위를 차지하지 않음)	위치지정된 상위
고정 고정 위치	예(직위를 차지하지 않음)	브라우저에서 볼 수 있는 영역
끈적 끈적한 위치	아니오 (점유 위치)	브라우저에서 볼 수 있는 영역

10.2.7 스택 순서 Z-인덱스 위치 지정

위치 지정 레이아웃을 사용하는 경우 상자가 겹칠 수 있습니다. 이때 z-index를 이용하여 상자의 순서(z축)를 제어할 수 있습니다.

选择器 { z-index: 1; }

값은 양의 정수, 음의 정수 또는 0일 수 있습니다. 기본값은 자동입니다. 값이 클수록 상자가 높아집니다.
속성 값이 동일할 경우 마지막 항목이 먼저 오도록 작성 순서를 따릅니다.
숫자 뒤에는 단위를 추가할 수 없습니다.
위치가 지정된 상자에만 Z-색인 속성이 있습니다.

10.2.8 포지셔닝의 확장

10.2.8.1 절대 위치 상자 중심 맞추기

절대 위치 지정이 있는 상자는 margin:0 auto를 통해 가로 중심에 맞출 수 없지만 다음 계산 방법을 통해 가로 및 세로 중심에 맞출 수 있습니다.
① 왼쪽: 50%;: 상자의 왼쪽을 상위 요소의 수평 중앙 위치로 이동합니다.
② margin-left: -100px;: 상자가 너비의 절반을 왼쪽으로 이동하도록 합니다.

10.2.8.2 특별한 특성 찾기

절대 위치 지정과 고정 위치 지정도 부동과 유사합니다.

인라인 요소에 절대 또는 고정 위치 지정을 추가하고 높이와 너비를 직접 설정할 수 있습니다.
블록 수준 요소는 절대 또는 고정 위치 지정을 추가합니다. 너비나 높이가 지정되지 않으면 기본 크기는 콘텐츠의 크기입니다.

10.2.8.3 라벨이 없는 상자는 여백 축소를 유발하지 않습니다.

부동 요소와 절대 위치(고정 위치) 요소는 여백 병합 문제를 유발하지 않습니다.

10.2.8.4 절대 위치 지정(고정 위치 지정)은 상자를 완전히 누르는 것입니다.

부동 요소는 다릅니다. 아래 표준 흐름 상자만 억제하고 아래 표준 흐름 상자의 텍스트(그림)는 억제하지 않습니다. 그러나
절대 위치 지정(고정 위치 지정)은 표준의 모든 내용을 억제합니다. 아래 흐름.
플로팅이 텍스트를 억제하지 않는 이유는 플로팅의 목적이 원래 텍스트 감싸기 효과를 만드는 것이기 때문입니다. 텍스트가 떠 있는 요소 주위를 둘러쌉니다.

10.3 웹 페이지 레이아웃 요약

완전한 웹 페이지는 표준 흐름, 플로팅 및 위치 지정을 사용하여 배치되며, 각 항목에는 고유한 특수 용도가 있습니다.

표준 흐름을
사용하면 상자를 위아래 또는 왼쪽과 오른쪽으로 배열할 수 있으며 수직 블록 수준 상자는 표준 흐름 레이아웃을 사용하여 표시됩니다.
플로팅을
사용하면 여러 블록 수준 요소를 한 줄에 표시하거나 상자를 왼쪽과 오른쪽으로 정렬할 수 있습니다. 플로팅 레이아웃을 사용하면 여러 블록 수준 상자를 가로로 표시할 수 있습니다.
포지셔닝 포지셔닝의 가장 큰 특징은 스태킹(Stacking) 개념인데, 이는 여러 상자를 차례대로 표시할 수 있다는 의미입니다 . 요소가 상자 내에서 자유롭게 이동할 수 있는 경우
위치 지정 레이아웃을 사용합니다 .

11 CSS 속성 작성 순서

다음 순서를 따르는 것이 좋습니다.

레이아웃 포지셔닝 속성: 디스플레이 / 위치 / 부동 / 클리어 / 가시성 / 오버플로 (디스플레이를 먼저 작성하는 것이 좋습니다. 결국 모드와 관련이 있습니다)
자체 속성: width/height/margin/padding/border/background
텍스트 속성: 색상/글꼴/텍스트 장식/텍스트 정렬/세로 정렬/공백/줄바꿈-단어
기타 속성(CSS3): content/cursor/border-radius/box-shadow/text-shadow/Background:linear-gradient…

12 요소 표시 및 숨기기

웹사이트 광고와 마찬가지로 클릭하여 닫으면 사라지지만 페이지를 새로 고치면 다시 나타납니다!
본질: 요소를 페이지에 숨기거나 표시하도록 합니다.

디스플레이가 숨겨져 있지만 위치를 유지하지 않습니다.
가시성은 숨겨져 있지만 원래 위치를 유지합니다.
오버플로는 오버플로를 표시하고 숨기지만 오버플로를 부분적으로만 처리합니다.

12.1 표시 속성

표시 속성은 요소가 표시되는 방식을 설정하는 데 사용됩니다.

표시: 없음, 개체 숨기기
display: block; 블록 수준 요소로 변환하는 것 외에도 요소를 표시하는 것을 의미합니다.

표시가 요소를 숨긴 후에는 더 이상 원래 위치를 차지하지 않습니다.

12.2 가시성 가시성

visible 속성은 요소가 표시되어야 하는지 숨겨야 하는지를 지정하는 데 사용됩니다.

가시성: 표시됨, 요소가 표시됨
가시성:숨김; 요소 숨김

가시성이 요소를 숨긴 후에도 요소는 계속 원래 위치를 차지합니다.
숨겨진 요소가 원래 위치를 원하지 않으면 visible:hidden을 사용하고,
숨겨진 요소가 원래 위치를 원하지 않으면 display:none을 사용합니다(유용성이 더 강조됨).

12.3 오버플로 오버플로

Overflow 속성은 콘텐츠가 요소의 상자(지정된 높이와 너비를 초과)를 초과하는 경우 발생하는 상황을 지정합니다.
여기에 이미지 설명을 삽입하세요.

13가지 고급 CSS 팁

13.1 스프라이트

많은 작은 배경 이미지는 웹 페이지의 장식으로 사용되는 경우가 많습니다. 웹 페이지에 이미지가 너무 많으면 서버가 요청 이미지를 자주 주고받게 되어
서버에 과도한 요청 압력이 발생하여 로딩 속도가 크게 저하됩니다. 페이지의.

따라서 서버가 요청을 주고받는 횟수를 효과적으로 줄이고 페이지 로딩 속도를 높이기 위해 CSS 스프라이트 기술(CSS Sprite, CSS Sprite라고도 함)이 등장했습니다
.

핵심 원칙: 웹 페이지의 일부 작은 배경 이미지를 하나의 큰 이미지로 통합하여 서버에 하나의 요청만 필요하도록 합니다.

스프라이트 코어 사용:

스프라이트 기술은 주로 배경 이미지에 사용됩니다. 여러 개의 작은 배경 이미지를 하나의 큰 이미지로 통합하는 것입니다.
이 큰 그림은 스프라이트 또는 스프라이트라고도 합니다.
배경 이미지 위치를 이동하려면 background-position을 사용하면 됩니다.
이동한 거리는 대상 이미지의 x 및 y 좌표입니다. 웹 페이지의 좌표는 다릅니다.
일반적으로 위쪽 및 왼쪽으로 이동하므로 값은 음수입니다.
스프라이트를 사용할 때는 각각의 작은 배경 이미지의 크기와 위치를 정확하게 측정해야 합니다.

13.2 글꼴 아이콘

글꼴 아이콘 사용 시나리오: 주로 웹 페이지에서 일반적으로 사용되는 작은 아이콘을 표시하는 데 사용됩니다.
스프라이트 차트에는 많은 장점이 있지만 단점은 분명합니다.

이미지 파일은 여전히 상대적으로 큽니다.
확대하거나 축소하면 이미지 자체가 왜곡됩니다.
일단 이미지가 생성되면 교체하는 것은 매우 복잡합니다.

이때 위의 문제점을 아주 잘 해결하기 위해 등장한 기술이 있는데, 바로 아이콘폰트(iconfont)이다.
글꼴 아이콘은 프런트엔드 엔지니어에게 아이콘을 편리하고 효율적으로 사용할 수 있는 방법을 제공하며 기본적으로 글꼴인 아이콘을 표시합니다.

13.2.1 글꼴 아이콘의 장점:

경량: 아이콘 글꼴은 일련의 이미지보다 작습니다. 글꼴이 로드되면 아이콘이 즉시 렌더링되어 서버 요청이 줄어듭니다.
유연성: 본질은 실제로 색상을 변경하고, 그림자를 생성하고, 투명도 효과, 회전 등을 마음대로 할 수 있는 텍스트입니다.
호환성: 거의 모든 브라우저를 지원하므로 자유롭게 사용하십시오.

참고: 글꼴 아이콘은 elf 기술을 대체할 수 없으며 작동 중인 일부 아이콘 기술만 개선하고 최적화할 뿐입니다.

13.2.2 요약

구조와 스타일이 상대적으로 단순한 작은 아이콘이 있는 경우 글꼴 아이콘을 사용하세요.
구조와 스타일이 더 복잡한 작은 그림을 발견하면 스프라이트를 사용하십시오.

13.2.3 글꼴 아이콘 다운로드 웹사이트

권장 다운로드 웹사이트:

icomoon 글꼴 http://icomoon.io 추천 색인 ★★★★★
2011년에 설립된 IcoMoon은 사용자가 필요한 아이콘을 선택하여
단일 글꼴로 만들 수 있는 최초의 사용자 정의 아이콘 글꼴 생성기를 출시했습니다. 다양한 내용을 담고 있고 포괄성이 뛰어난 폰트인데, 아쉬운 점은 해외 서버라 네트워크 속도가 느린 점이다.
Alibaba 아이콘 글꼴 글꼴 라이브러리 http://www.iconfont.cn/ 추천 색인 ★★★★★
이것은 Taobao 아이콘 라이브러리 및 Alimama 아이콘 라이브러리를 포함하는 Alibaba M2UX의 아이콘 글꼴 글꼴 아이콘 라이브러리입니다. AI를 활용해
아이콘을 만들고 업로드해 생성 할 수 있습니다 . 요점은 무료라는 것입니다!

13.2.4 글꼴 아이콘 소개

다운로드 패키지의 글꼴 폴더를 페이지의 루트 디렉터리에 넣습니다.
CSS 스타일로 글꼴을 전역적으로 선언: CSS를 통해 이러한 글꼴 파일을 페이지에 도입하는 방법을 간단히 이해하세요.
글꼴 파일 경로에 주의하세요.

@font-face {
 font-family: 'icomoon';
 src: url('fonts/icomoon.eot?7kkyc2');
 src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
 url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
 url('fonts/icomoon.woff?7kkyc2') format('woff'),
 url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
 font-weight: normal;
 font-style: normal;
}

HTML 태그 안에 작은 아이콘을 추가하세요.
라벨의 글꼴을 정의합니다.

span {
 font-family: "icomoon";
}

참고: 이 글꼴이 위의 @font-face 글꼴과 일치하는지 확인하세요.
여기에 이미지 설명을 삽입하세요.

13.2.4.1 글꼴 파일 형식

브라우저마다 지원하는 글꼴 형식이 다르며, 글꼴 아이콘이 호환되는 이유는 해당 아이콘에 주류 브라우저에서 지원하는 글꼴 파일이 포함되어 있기 때문입니다.

트루타입(.ttf) 형식 .ttf 글꼴은 Windows 및 Mac에서 가장 일반적인 글꼴입니다. 이 글꼴을 지원하는 브라우저에는 IE9+, Firefox3.5+,
Chrome4+, Safari3+, Opera10+, iOS Mobile, Safari4.2+가 포함됩니다.
웹 개방형 글꼴 형식(.woff) 형식 woff 글꼴, 이 글꼴을 지원하는 브라우저에는 IE9+, Firefox3.5+, Chrome6+,
Safari3.6+, Opera11.1+가 포함됩니다.
Embedded Open Type(.eot) 형식.eot 글꼴은 IE용 특수 글꼴입니다. 이 글꼴을 지원하는 브라우저는 IE4+입니다.
SVG(.svg) 형식입니다. svg 글꼴은 SVG 글꼴 렌더링을 기반으로 하는 형식입니다. 이 글꼴을 지원하는 브라우저에는 Chrome4+, Safari3.1+,
Opera10.0+ 및 iOS Mobile Safari3.2+가 포함됩니다.

13.3 CSS 삼각형

삼각형은 웹 페이지에서 흔히 볼 수 있으며 CSS를 사용하여 직접 그릴 수 있으며 그림이나 글꼴 아이콘으로 만들 필요가 없습니다.
여기에 이미지 설명을 삽입하세요.

div {
 width: 0;
 height: 0;
 border-top: 10px solid pink;
 border-right: 10px solid red;
 border-bottom: 10px solid blue;
 border-left: 10px solid green;
}

13.4 CSS 사용자 인터페이스 스타일

소위 인터페이스 스타일은 더 나은 사용자 경험을 향상시키기 위해 일부 사용자 작업 스타일을 변경하는 것입니다.

사용자의 마우스 스타일 변경
양식 개요
양식 필드 드래그 방지

13.4.1 마우스 스타일 커서

li {cursor: pointer; }

개체 위로 이동하는 마우스 포인터에 의해 채택되는 시스템 정의 커서 모양을 설정하거나 검색합니다.
여기에 이미지 설명을 삽입하세요.

13.4.2 등고선

개요: 0; 또는 개요: 없음; 스타일을 양식에 추가한 후 기본 파란색 테두리를 제거할 수 있습니다.

input {outline: none; }

13.4.3 텍스트 필드를 드래그하면 크기가 조정되지 않도록 방지

실제 개발에서는 텍스트 필드의 오른쪽 하단을 드래그할 수 없습니다.

textarea{ resize: none;}

13.5 수직 정렬 속성 적용

CSS 수직 정렬 속성의 사용 시나리오: 이미지나 양식(인라인 블록 요소) 및 텍스트의 수직 정렬을 설정하는 데 자주 사용됩니다.
공식 설명: 요소의 수직 정렬을 설정하는 데 사용되지만 인라인 요소 또는 인라인 블록 요소에만 유효합니다.

vertical-align : baseline | top | middle | bottom

여기에 이미지 설명을 삽입하세요.

13.5.1 그림, 양식 및 텍스트 정렬

이미지와 양식은 모두 인라인 블록 요소이며 기본 수직 정렬은 기준선 정렬입니다.
이때, 그림, 폼 등 인라인 블록 요소의 수직 정렬 속성을 가운데로 설정하면 텍스트와 그림을 세로로, 가운데 정렬할 수 있습니다
.

13.5.2 그림 하단 기본 공백 문제 해결

버그: 인라인 블록 요소가 텍스트 기준선에 맞춰 정렬되므로 이미지 하단에 공백이 생깁니다.
두 가지 주요 솔루션이 있습니다.

이미지에 수직 정렬:중간 | 상단| 하단 등을 추가합니다. (사용을 권장합니다)
이미지를 블록 수준 요소로 변환합니다.

13.6 넘치는 텍스트 타원 표시

13.6.1 한 줄 텍스트 오버플로는 타원을 표시합니다.

3가지 조건이 충족되어야 합니다

/*1. 先强制一行内显示文本*/
 white-space: nowrap; （ 默认 normal 自动换行）
 /*2. 超出的部分隐藏*/
 overflow: hidden;
 /*3. 文字用省略号替代超出的部分*/
 text-overflow: ellipsis;

13.6.2 여러 줄의 텍스트 오버플로는 타원을 표시합니다.

여러 줄의 텍스트가 오버플로되고 타원이 표시됩니다. 이는 주요 호환성 문제가 있으며 webKit 브라우저 또는 모바일 터미널에 적합합니다(대부분의 모바일 터미널은 webkit 커널입니다
) .

overflow: hidden;
text-overflow: ellipsis;
/* 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 2;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;