CSS 예


CSS 인스턴스 sCSS 배경


페이지의 배경색 설정

다양한 요소의 배경색 설정

배경 이미지를 가로로 반복하는 방법

위치 지정 방법 배경 이미지

고정된 배경 이미지(이 이미지는 페이지의 나머지 부분과 함께 스크롤되지 않음)

모든 배경을 하나의 명령문으로 설정 속성

고급 배경 예

설명 배경 속성

CSS 텍스트

다양한 요소의 텍스트 색상 설정

텍스트 정렬


링크 밑줄 제거

텍스트 장식

텍스트의 제어 문자

텍스트 들여쓰기

문자 사이의 간격 지정

줄 사이의 간격 지정

요소의 텍스트 방향 설정

줄 바꿈

단어 사이의 간격 늘리기

텍스트 비활성화 이내에 element

텍스트 내부 이미지의 수직 정렬

텍스트 속성 설명

CSS 글꼴

텍스트 글꼴 설정

글꼴 크기 설정

px를 사용하여 글꼴 크기 설정

em 세트 글꼴 사용 Size

백분율과 ems를 사용하여 글꼴 크기 설정

글꼴 스타일 설정

글꼴 변형 설정

글꼴 두께 설정

모든 글꼴 속성을 하나의 명령문으로 설정


글꼴 속성 설명

CSS 링크

방문한/방문하지 않은 링크에 다른 색상 추가

링크에 텍스트 장식 사용

링크된 배경 색상 지정

하이퍼링크 추가 스타일 추가

고급 - 링크 상자 만들기


링크 속성 설명

CSS 목록

모두 목록에 있음 다른 목록 항목 태그

이미지를 목록 항목으로 설정 marker

크로스 브라우저 솔루션을 사용하여 이미지를 목록 항목 마커로 설정

모든 목록 속성을 하나의 명령문으로 설정

css 목록 항목 제거 li 기본 스타일


목록 속성 설명

CSS 테이블

테이블의 th, td 요소 지정, 검은색 테두리 추가

border-collapse 사용

너비와 높이 지정 the table

내용의 가로 정렬 설정(텍스트 정렬)

내용의 세로 정렬 설정(수직 정렬)

TH 및 TD 요소의 패딩 지정

표 테두리 색상 지정

테이블 제목 위치 설정

특이한 테이블 만들기


테이블 속성 설명

CSS 박스 모델

요소의 전체 너비를 250픽셀로 지정

지정 Crossbrowser 솔루션을 사용하여 요소의 전체 너비를 250픽셀로 설정


박스 모델 설명

CSS 테두리

4개 테두리의 너비 설정

상단 너비 설정 border

아래 테두리 너비 설정

왼쪽 테두리 너비 설정

오른쪽 테두리 너비


네 개의 테두리 스타일 설정

위쪽 테두리 스타일 설정

하단 테두리 스타일 설정

왼쪽 테두리 스타일 설정

오른쪽 테두리 스타일 설정


네 개의 테두리 설정 색상

상단 테두리 색상 설정

아래쪽 테두리 색상

왼쪽 테두리 색상 설정

오른쪽 테두리 색상 설정


하나의 선언에 있는 모든 테두리 속성


각 측면에 대해 서로 다른 테두리 설정

모든 위쪽 테두리 한 문장의 속성

한 문장의 모든 아래쪽 테두리 속성

한 문장의 모든 왼쪽 테두리 속성

한 문장의 모든 오른쪽 테두리 속성


테두리 속성 설명

CSS 개요

요소(윤곽선) 주위에 선 그리기

윤곽선 스타일 설정

윤곽선 색상 설정

윤곽선 너비 설정


윤곽선 속성 설명

CSS 여백

요소의 여백 지정

여백 약어 속성

센티미터를 사용하여 텍스트의 위쪽 여백에 설정된 값

백분율 값을 사용하여 텍스트의 아래쪽 가장자리 설정

사용된 센티미터 값은 텍스트의 왼쪽 여백을 설정


Margin 속성 설명

CSS Padding

요소의 왼쪽 패딩 설정

요소의 오른쪽 패딩 설정

요소의 위쪽 패딩 설정

요소의 아래쪽 패딩 설정

한 문장으로 모든 패딩 속성


패딩 속성 설명

CSS 그룹화 및 중첩

그룹 선택기

중첩 선택기


그룹화 및 중첩 설명

CSS 크기

픽셀 값을 사용하여 이미지 높이 설정 ​​

백분율을 사용하여 이미지 높이 설정

픽셀 값을 사용하여 요소 너비 설정

백분율을 사용하여 요소 너비 설정

요소의 최대 높이 설정

픽셀 값 사용 요소의 최대 너비 설정

백분율을 사용하여 요소의 최대 너비 설정

요소의 최소 높이 설정

픽셀 값을 사용하여 설정 요소의 최소 너비

백분율을 사용하여 요소의 최소 너비 설정


크기 속성 설명

CSS 표시

요소를 숨기는 방법(가시성:숨김)

방법 요소를 표시하지 않는 방법(표시:없음)

요소의 인라인 요소를 표시하는 방법

요소의 블록을 표시하는 방법

H 요소가 테이블의 축소 속성을 사용하는 방법


표시 속성 설명

CSS 위치 지정

브라우저 창을 기준으로 한 요소의 위치

요소의 상대적 위치 지정

요소의 절대 위치 지정

요소 겹치기

요소의 모양 설정

스크롤 막대를 사용하여 요소 내 오버플로 콘텐츠를 표시하는 방법

브라우저 자동 오버플로 처리를 설정하는 방법

픽셀 값을 사용하여 이미지 상단 설정 ​​

픽셀 값을 사용하여 이미지 하단 설정 ​​

픽셀 값을 사용하여 이미지의 왼쪽 설정 ​​

픽셀 값을 사용하여 이미지의 오른쪽 설정 ​​

커서 변경


위치 속성 설명

CSS float

float 속성을 사용하면

이미지에 추가됩니다. 테두리와 여백은 문단 왼쪽에 떠 있습니다.

제목과 이미지는 오른쪽에 떠 있습니다.

문단의 첫 글자가 왼쪽에 떠 있게 합니다.

float 사용 속성을 사용하여 이미지 갤러리 만들기

플로트 켜기 - 속성 지우기

가로 메뉴 만들기

테이블 없이 웹페이지 만들기

Float 속성 설명

CSS 정렬 요소

여백 중간 조정 사용

왼쪽/오른쪽 위치 정렬

크로스브라우저 솔루션 사용, 왼쪽/오른쪽 위치 정렬 설정

왼쪽/오른쪽 정렬, float

크로스브라우저 솔루션 사용, 왼쪽/오른쪽 위치 정렬 설정, 부동


정렬 속성 설명

CSS 생성 콘텐츠

콘텐츠 속성을 사용하여 각 링크 뒤에 괄호 안에 URL을 삽입하세요

장 수와 하위 섹션은 "Section 1", "1.1", "1.2" 등입니다.

quotes 속성은 따옴표를 지정합니다.

CSS 의사 클래스

하이퍼링크에 다른 색상 추가

하이퍼링크에 다른 스타일 추가

사용: 초점

:first-child - 첫 번째 p 요소와 일치

:first-child - 첫 번째 p 요소의 I 요소와 일치

:first-child - 첫 번째 p 요소와 일치

의 모든 I 요소 사용: lang


의사 클래스 설명

CSS 의사 요소

텍스트의 첫 글자를 특수 문자로 설정

텍스트의 첫 번째 줄 설정 특수용

첫 번째의 첫 글자 설정

사용법: 요소 앞에 내용 삽입

사용: 요소 뒤에 내용 삽입


의사 요소 설명

CSS 네비게이션 바

전체 세로 스타일 네비게이션 바

수평 네비게이션 바의 전체 스타일


네비게이션 바 설명

CSS 이미지 갤러리

이미지 갤러리


이미지 갤러리 설명

CSS 이미지의 불투명도

투명 이미지 만들기 - 마우스오버 효과

텍스트용 투명 상자를 사용하여 배경 이미지 만들기


이미지의 불투명도 설명

CSS 이미지 스티칭

이미지 스티칭

이미지 스티칭 - 탐색 목록

호버 효과 및 이미지 연결


이미지 스티칭 설명

CSS 속성 선택기

제목 속성이 있는 요소 선택

제목 = 특정 값인 요소 선택

제목 = 특정 값인 요소 선택(속성과 값을 구분하려면 (~)를 사용하세요. )

제목 = 특정 값이 있는 요소 선택(속성과 값을 구분하려면 (|) 사용)

속성 선택기 설명

CSS 속성 선택기

  • CSS 로딩 진행률 표시줄

  • CSS 페이지 매기기 style

  • CSS 진행률 표시줄

  • CSS 프롬프트 정보 예

  • CSS 텍스트 오버레이 이미지 호버 효과

  • CSS 텍스트 오버레이 이미지 호버 효과 - 위에서 아래로

  • CSS 텍스트 오버레이 이미지 호버 효과 – 아래에서 위로

  • CSS 텍스트 오버레이 이미지 호버 효과 – 오른쪽에서 왼쪽으로

  • CSS 텍스트 오버레이 이미지 호버 효과 – 왼쪽에서 오른쪽으로

  • CSS 텍스트 오버레이 이미지 호버 효과 – 투명하게 페이드

  • CSS 세로 버튼 그룹

  • CSS 버튼 그룹

  • CSS 로딩(로딩) 애니메이션 효과

  • CSS 로딩(로딩) 애니메이션 효과 2

  • CSS 로딩(로딩) 애니메이션 효과 3

  • CSS 로딩(로딩) 애니메이션 효과 4

  • CSS 동적 검색창

  • CSS 사용자 정보 카드

  • CSS 카드 스타일

  • CSS 이전 페이지, 다음 페이지 스타일

  • CSS 다양한 프롬프트 정보 상자

  • CSS 세 가지 가격 목록 스타일

  • CSS 스타일 전환

  • CSS로 DIV를 수평으로 중앙에 배치

  • CSS 4개의 위, 아래, 왼쪽 및 오른쪽 방향 화살표

  • CSS 피드백 정보 양식

  • CSS 글꼴이 멋진 아이콘 메뉴 모음

  • CSS 상단 탐색 스타일 예시

  • CSS 스티커 메모 스타일 효과

  • CSS 가로 스크롤 메뉴

  • CSS 세로 메뉴

  • CSS 세로 스크롤 메뉴

  • CSS 고정 메뉴 바

  • CSS 반응형 로그인 양식

  • CSS 고정 하단 메뉴 바

  • CSS 드롭다운 메뉴

  • CSS 콘텐츠 드롭다운 정렬

  • CSS 네비게이션 바 드롭다운 메뉴

  • 검색창이 있는 CSS 네비게이션 바

  • 검색이 포함된 CSS 네비게이션 바 - 제출 버튼 포함

  • 검색이 포함된 CSS 네비게이션 바 - 검색 언급 아이콘

  • CSS 고정 왼쪽 탐색 바

  • CSS 고정 왼쪽 탐색 바 – 높이 적응형

  • HTML/CSS/JS 문의 양식 템플릿(Baidu 지도 포함)

  • CSS Design One 웹사이트