웹 프론트엔드 개발 CSS 기본 스타일 요약

색상 및 단위 사용

1. 색상
   • 색상 이름을 사용하여 색상을 나타냅니다(예: 빨간색
   • 16진수를 사용하여 데모를 나타냅니다. 예: #FF0000
   • 색상을 표현하려면 rgb 숫자값을 사용하고, rgb(빨간색, 녹색, 파란색)는 각각 0~255 사이입니다
     일반적으로 16진수를 사용하여 색상을 표현합니다
2. 단위
   • px: 픽셀, 해상도 설정과 관련됩니다.
   • %는 브라우저의 백분율에 상대적입니다. 너비는 설정할 수 있지만 높이는 설정할 수 없습니다.

텍스트 스타일(텍스트)

1. 색상: 텍스트 색상 설정
2. text-align: 텍스트 정렬 설정
   • 센터
   • 왼쪽
   • 그렇습니다
3. letter-spacing: 단어 간격/글자 간격
4. 단어 간격: 단어 간격, 공백이 있는 경우 설정, 중국어의 경우 공백을 참조하세요.
5. line-height: 줄 높이(두 번째 줄의 줄 높이 = 첫 번째 줄의 하단부터 세 번째 줄의 상단까지)
6. 텍스트 들여쓰기: 일반적으로 30픽셀의 경우 2
7. 텍스트 장식: 텍스트 장식
   • 밑줄: 밑줄
   • 윗줄: 윗줄
   • 줄바꿈: 취소선
   • 깜박이 플래시(사용불가)
8. text-transform: 대소문자 변환
   • 대문자: 모두 대문자
   • 소문자: 모두 소문자
   • 대문자화: 각 단어는 대문자로 시작합니다.
9. text-shadow: 텍스트 그림자를 만듭니다(가로 오프셋 px, 세로 오프셋 px, 흐림 수준 px, 그림자 색상). 흐림 수준 px 값이 높을수록 더 흐려집니다.
10. 글꼴 설정:

• 글꼴 스타일: 글꼴 스타일 이탤릭체, 경사 이탤릭체
• font-size: 글꼴 크기를 설정합니다
• font-weight: 글꼴의 두께를 설정합니다. 굵은 글씨가 가장 두껍습니다
• font-family: 텍스트 글꼴, 일반 스크립트, 공식 스크립트 등을 설정합니다.
• 글꼴 약어 속성: 스타일 가중치 크기 계열(공백) 순서는 이 형식이어야 합니다. 일반적으로 약어 속성을 사용한 후 문자 간격을 글꼴 속성 뒤에 입력합니다. 그렇지 않으면 덮어쓰게 됩니다.

테두리 및 배경

요소에 테두리 적용
1. border-width: 테두리 너비
   border-style: 테두리 스타일
   • 없음 테두리 없음
     점선
     실선
     이중 이중선
     홈 홈선
     점선 테두리
     삽입 포함된 시작 볼록
     능선 능선 경계
     
   bolder-color: 테두리 색상
   축약형 테두리:너비 스타일 색상 순서 없음
특정 테두리를 개별적으로 설정
2. 테두리 상단/하단/왼쪽/오른쪽 너비/스타일/색상
   약식: border-top{너비, 스타일, 색상}
둥근 테두리 적용(x반경, y반경, xy가 같으면 하나만 쓰세요)
3. 테두리 상단/왼쪽 하단/오른쪽 반경
   약어: border-radius
요소 배경 설정
4. 여백-오른쪽: 0px; 여백-하단: 0px; 패딩 오른쪽: 0px; 하단 패딩: 0px; disc;">Background-image:{url("")} 배경 이미지 주소
   Background-repeat: 배경 이미지 반복 방식, 일반적으로 반복되지 않음
   배경 크기: 배경 이미지 크기
   배경 위치: 배경 이미지 위치
   약어: 배경:컬러 이미지 반복 위치, 크기를 쓰지 않으면 충돌합니다
상자 그림자 만들기
5. box-shadow: 수평 오프셋 수직 오프셋 흐림 값 그림자 확장 반경 그림자 색상 10px 10px 5px 0px 빨간색;
   여러 개의 그림자를 추가하려면 첫 번째 그림자 뒤에 쉼표를 붙여서 두 번째 그림자를 정수로 설정하고 두 번째 그림자를 음수로 설정하세요.
개요 설정
6. 테두리와 윤곽선의 차이점: 윤곽선은 페이지에 속하지 않으며, 윤곽선 적용으로 인해 페이지 레이아웃이 조정되지 않습니다
   테두리는 실제 크기를 차지하지만 윤곽선은 차지하지 않습니다
   hover가 설정되면 윤곽선이 수정된 div는 이동되지 않지만 테두리가 수정된 div는 이동됩니다
   윤곽선-색상: 윤곽선 색상
   개요 스타일: 개요 스타일
   outline-width: 윤곽선 너비
   outline-offset: 요소 테두리에서 외곽선 오프셋
   약어:개요

기타 스타일(표, 목록, 투명도, 커서)

양식
1. 테두리 축소 인접 셀 테두리 처리, 테이블 병합=접기
   border-spacing: 인접한 셀 사이의 간격
   캡션 쪽: 제목 위치
   empty-cells: 빈 셀 표시 여부
2. 목록
   list-style-tyle: 목록 앞부분의 표시 스타일, 둥근 점, 사각형 점 등
   list-style-image: 목록 이미지 태그
   약어: list-style:none은 목록의 모든 속성을 취소하며 일반적으로 탐색에 사용됩니다
   가로 탐색: li{display:inline}
3. 투명성
   불투명도: 투명도 설정(0-1 사이의 값)
4. 커서 모양
   커서: 커서 모양을 설정합니다. 커서가 특정 div에 위치할 때 대기 상태, 손 모양 등을 설정합니다.

박스 모델

박스 모델은 요소, 패딩, 테두리, 여백으로 구분됩니다.

1. 특정 크기의 요소를 설정합니다

<span class="hljs-number">1). <span class="hljs-string">width:设置元素宽度
<span class="hljs-number">2). <span class="hljs-string">height:设置元素高度</span></span></span></span>

2. 패딩 설정

• 패딩 상단/하단/오른쪽/왼쪽
• 패딩: 약어

3. 여백(테두리부터 브라우저 가장자리 또는 다음 상자까지의 거리)을 설정합니다.

• 여백-위/아래/왼쪽/오른쪽
• 여백: 약어

4. 최소 및 최대 크기 설정(너비를 백분율로 설정한 경우 브라우저를 확장 또는 축소하거나 화면이 크거나 작은 모니터로 변경한 후 요소가 어긋나거나 넘치지 않도록 방지)

• min-width: 최소값은 두 div 너비의 합입니다
• 최대 너비: 최대값

5. 요소 콘텐츠 오버플로 처리

• overflow-x/y: x 또는 y축 오버플로
• overflow: 약어: 스크롤 스크롤 막대를 설정합니다(오버플로 처리 방법)

6. 요소 유형 변경

1) 유형은 다음과 같습니다.

• 인라인 요소: 너비와 높이는 페이지에서 설정할 수 없으며 행, b, 범위를 차지하지 않습니다
• inline-block 인라인 블록 수준 요소: 행을 차지할 수 없지만 .img 요소의 너비와 높이를 설정할 수 있습니다.
• block 블록레벨 요소: 전용 라인을 차지하며 width, height, p, div 요소를 설정할 수 있습니다

2).요소 유형 표시 변경:

• 요소 유형은 서로 변환될 수 있으며, 변환 후에는 요소의 속성도 변경됩니다
• div는 일반적으로 인라인 요소로 변환되지 않아 손실되며 높게 설정할 수 없습니다.

3) 숨겨진 요소: 표시:없음

7. 플로팅 및 스택 요소 차단

• 부동:부동:왼쪽/오른쪽
• 함께 쌓인 요소 제거:clear:both(왼쪽과 오른쪽 모두 제거)

8. 사례:

Baidu 페이지 구축:

• 팁: div를 중앙에 배치하려면 직접 여백: 0 auto;
• 처음에는 브라우저 기본 기능을 구현하지 않으려면: *{margin:0px}
• div 블록이 넘치는 것을 방지하기 위해 최대값과 최소값을 설정하세요. 최소값은 왼쪽과 오른쪽 div의 합입니다
• 가운데 세로 텍스트: 줄 높이
• 탐색의 경우 li 태그 외부에 링크 태그를 추가하세요

레이아웃 스타일

1. 포지셔닝 방법 위치

• 정적: 기본적으로 요소는 일반 요소, 문서 흐름 위치 지정, 위에서 아래로
• 상대적: 요소의 위치는 일반 위치를 기준으로 합니다. 변위 전의 위치는 다른 요소에서 사용할 수 없습니다. 일반적으로 요소의 위치를 ​​미세 조정하려면 상단만 사용할 수 있습니다. ,왼쪽 이전 위치에 비해 이동한 것 같습니다

• 고정(fixed): 브라우저 창을 기준으로 위치 지정, 자주 사용되는!!!, 위치는 변위 전에 점유되지 않으며 상하좌우로 사용할 수 있습니다. 🎜>작은 광고에 흔히 사용되는 기술 스크롤바는 계속 움직이며 위치는 변하지 않습니다. 문서 흐름에서 벗어나 위쪽, 아래쪽, 왼쪽, 오른쪽 위치에 떠 있게 됩니다. 예를 들어 top50px는 위쪽으로 50px 이동하지 않지만 요소는 상대적으로 상단 테두리에서 50px 거리에 버튼을 설정하는 것도 사용할 수 있으며 스크롤 막대를 당겨도 위치가 변경되지 않습니다.

• 절대(absolute): 상대 위치 값이 정적이 아닌 조상 요소입니다. 조상 요소는 조상 요소에 따라 변경되며, 조상 요소는 누가 변경되는지에 따라 정적일 수 없습니다. (기본값은 정적입니다. )

  은 상위 요소와 하위 요소 또는 상위 요소와 하위 요소 사이의 위치 변경이 발생하는 경우

  2. 포지셔닝 레이아웃
  위/아래/왼쪽/오른쪽
  3. Z-인덱스
  요소 및 요소의 표시 레이어 수를 설정하는 데 사용됩니다.

  위치와 함께 사용해야 합니다
  .

  전환, 변신
  1. 전환

  전환: 요소가 한 스타일에서 다른 스타일로 점진적으로 변경됩니다.

  속성:
  
transition-delay: 전환 전 지연 설정
transition-duration: 전환 시간 설정
transition-property: 전환 참여 속성을 설정합니다
전환 타이밍 기능: 전환 속도(선형 균일 속도)
• 전환: 약식(속성 기간 타이밍-함수 지연)
  역전환:
  마우스를 올려서 div에 붙여넣으면 완료

2. 변신

변환: 변환 방법을 지정합니다
변환: scaleX/Y(1.5) 배율 1.5배
변환: 회전(360deg) 360도 회전은 정도를 나타내며 전환 시간에 따라 효과가 매우 좋습니다
변환: 기울이기(X축 각도, Y축 각도) 기울기 각도
변환: 이동거리(X축 거리, Y축 거리) 이동