최신 웹 개발 튜토리얼
 

CSS예


CSS 구문

요소 선택
아이디 선택
(모든 요소) 클래스 선택
(만의 클래스 선택 <p> 요소)
선택기를 그룹화

CSS 구문 설명


CSS의 배경

페이지의 배경색을 설정
다른 요소의 배경색을 설정
페이지의 이미지를 배경으로 설정
방법 만 가로 배경 이미지를 반복
배경 화상을 배치하는 방법
고정 배경 이미지 (이 이미지는 페이지의 나머지 부분과 스크롤되지 않습니다)
하나의 선언의 모든 배경 속성
고급 배경 예

배경 속성 설명


CSS 테두리

네 테두리의 폭을 설정
위쪽 테두리의 폭을 설정
아래쪽 테두리의 폭을 설정
왼쪽 테두리의 폭을 설정
오른쪽 테두리의 폭을 설정
네 테두리의 스타일을 설정
위쪽 테두리의 스타일을 설정
아래쪽 테두리의 스타일을 설정
왼쪽 테두리의 스타일을 설정
오른쪽 테두리의 스타일을 설정
네 테두리의 색상을 설정합니다
위쪽 테두리의 색상을 설정합니다
아래쪽 테두리의 색상을 설정합니다
왼쪽 테두리의 색상을 설정합니다
오른쪽 테두리의 색상을 설정합니다
하나의 선언의 모든 테두리 속성
각면에 서로 다른 테두리를 설정
하나의 선언에서 모든 위쪽 테두리 속성
하나의 선언의 모든 아래쪽 테두리 속성
하나의 선언의 모든 왼쪽 테두리 속성
하나의 선언의 모든 오른쪽 테두리 속성

테두리 속성 설명


CSS 여백

요소의 각 측면에 대해 서로 다른 여백을 지정
왼쪽 마진은 부모 요소에서 상속하자
여백 약식 속성
자동으로 설정 이익률은 컨테이너 내에서 요소를 중심으로하는

여백 속성 설명


CSS 패딩

요소의 좌측 여백을 설정
요소의 오른쪽 여백을 설정
소자의 상단에 여백을 설정
소자의 아래쪽 여백을 설정
하나의 선언의 모든 패딩 속성

패딩 속성 설명


CSS 텍스트

다른 요소의 텍스트 색상을 설정할
텍스트를 맞 춥니 다
링크에서 줄을 제거
텍스트를 장식
텍스트에 문자를 제어
들여 쓰기 텍스트
문자 사이의 공간을 지정
라인 사이의 공간을 지정
요소의 텍스트 방향 설정
단어 사이의 공백을 증가
요소 내부의 텍스트 줄 바꿈을 사용하지 않도록 설정
텍스트 안에 이미지의 수직 정렬

텍스트 속성 설명


CSS 글꼴

텍스트의 글꼴을 설정
글꼴의 크기를 설정
픽셀에서 글꼴의 크기를 설정
EM에서 글꼴의 크기를 설정
%와 그들에 글꼴의 크기를 설정
글꼴의 스타일을 설정
글꼴의 변형을 설정
글꼴의 대담을 설정
하나의 선언에서 모든 글꼴 속성

글꼴 속성 설명


CSS 링크

방문 / 방문하지 않은 링크를 다른 색상 추가
링크 텍스트 장식의 사용
링크의 배경색을 지정합니다
하이퍼 링크에 다른 스타일을 추가
링크 상자 만들기 - 고급
고급 - 테두리 링크 상자 만들기

링크 속성 설명


CSS 목록

리스트의 모든 다른 목록 항목 마커
목록 항목 마커로 이미지를 설정
목록 항목 마커의 위치를
하나의 선언에서 모든 목록 속성
색상과 스타일리스트
전체 폭 경계 목록

목록 속성 설명


CSS 테이블

테이블, 일 및 TD 요소 검은 색 테두리를 지정합니다
국경 붕괴의 사용
테이블 주위 단일 경계
테이블의 폭과 높이를 지정
내용의 수평 정렬을 설정합니다 (텍스트 정렬)
내용의 수직 정렬을 설정합니다 (수직 정렬)
일 및 TD 요소의 패딩을 지정
수평 분할
Hoverable 테이블
스트라이프 테이블
표 테두리의 색상을 지정
테이블 캡션의 위치를 설정합니다
응답 표
멋진 테이블 만들기

표 속성 설명


CSS 박스 모델

250 픽셀의 전체 폭 요소를 지정합니다

박스 모델을 설명


CSS 개요

요소 주위에 선을 그립니다 (개요)
개요의 스타일을 설정
아웃 라인의 색상을 설정할
윤곽의 폭을 설정

개요 속성 설명


CSS 차원

요소의 높이와 폭을 설정
요소의 설정 최대 폭
다른 요소의 높이와 폭을 설정
화상하여 퍼센트의 높이와 폭을 설정
설정 분 너비 요소와 최대 폭
설정 최소 높이와 요소의 최대 높이

치수 특성 설명


CSS 표시

어떻게 요소를 숨기려면 (visibility:hidden)
어떻게 요소를 표시하지합니다 (display:none)
인라인 요소로 블록 레벨 요소를 표시하는 방법
블록 레벨 요소로 인라인 요소를 표시하는 방법
숨겨진 콘텐츠를 표시하기 위해 함께 자바 스크립트와 CSS를 사용하는 방법에

디스플레이 등록 정보 설명


CSS의 위치

브라우저 창에 요소의 상대적 위치를
정상 위치에 요소의 상대적 위치를
절대 값으로 요소를 배치
중복 요소
소자의 형상을 설정
요소의 내용에 맞게 너무 큰 경우 스크롤 막대를 만드는 방법
자동 오버 플로우를 처리 할 수있는 브라우저를 설정하는 방법
화소 값을 사용하여 이미지의 상단 가장자리를 설정
화소 값을 사용하여 이미지의 하부 에지를 설정
화소 값을 이용하여 화상의 좌단 설정
화소 값을 이용하여 화상의 우단을 설정
커서 변경 위치 이미지 텍스트 (왼쪽 상단)
위치 이미지 텍스트 (오른쪽 상단)
위치 이미지 텍스트 (왼쪽 하단)
위치 이미지 텍스트 (오른쪽 아래)
위치 이미지 텍스트 (중심)

위치 특성 설명


CSS의 부동

플로트 속성의 간단한 사용
단락의 오른쪽 수레 테두리와 여백 이미지
오른쪽에 수레 캡션과 이미지
왼쪽에 단락 부동의 첫 글자를 보자
플로트 속성과 이미지 갤러리 만들기
부동 끄기 (맑은 속성을 사용)
수평 메뉴 만들기
테이블없이 홈페이지 만들기

플로트 속성 설명


CSS 조심 요소

센터는 여백으로 정렬
위치에 왼쪽 / 오른쪽 정렬
왼쪽 오른쪽 위치에 정렬 / - Crossbrowser 솔루션
플로트와 왼쪽 / 오른쪽 정렬
왼쪽 오른쪽 플로트와 정렬 / - Crossbrowser 솔루션

속성 설명 정렬


CSS 연결자

하위 선택
아이 선택기
인접 형제 선택
일반 형제 선택

콤비 선택기 설명


CSS 생성 콘텐츠

컨텐츠 속성과 각 링크 한 후 괄호에 URL을 삽입
함께 섹션과 하위 섹션 번호 매기기 "Section 1", "1.1", "1.2" , 등
따옴표 속성을 인용 부호를 지정


CSS 의사 클래스

하이퍼 링크로 다른 색상 추가
하이퍼 링크에 다른 스타일을 추가
초점 : 사용
:first-child - 첫 번째 페이지 요소를 일치
:first-child - 모든 페이지 요소의 우선 요소를 일치
:first-child - 모든 첫 번째 자식 페이지 요소의 모든 내가 요소를 일치
의 사용 :lang

의사 클래스 설명


CSS 의사 요소

텍스트의 첫 글자 특별하게
텍스트의 첫 줄은 특별합니다
첫 글자와 첫 번째 줄의 특별한 확인
사용 요소 전에 일부 콘텐츠를 삽입하기 전에
사용 요소 후 일부 콘텐츠를 삽입 한 후

의사 요소 설명


CSS 네비게이션 바

완벽한 스타일 수직 탐색 모음
완벽한 스타일 가로 방향 탐색 메뉴

탐색 바 설명


CSS 드롭 다운

드롭 다운 텍스트
드롭 다운 메뉴
마우스 오른쪽 정렬 드롭 다운 메뉴
드롭 다운 이미지
드롭 다운 네비게이션 바

드롭 다운 설명


CSS 툴팁

오른쪽 툴팁
왼쪽 툴팁
최고 툴팁
아래 툴팁
화살표 도구 설명
애니메이션 툴팁

툴팁 설명


CSS 이미지 갤러리

이미지 갤러리
응답 이미지 갤러리

이미지 갤러리 설명


CSS 이미지 불투명도

투명 이미지 만들기 - 마우스 오버 효과
배경 이미지에 텍스트와 함께 투명 상자 만들기

이미지 불투명도 설명


CSS 이미지 스프라이트

이미지 스프라이트
이미지 스프라이트 - 탐색 목록
호버 효과와 이미지 스프라이트

이미지 스프라이트 설명


CSS는 선택기 속성

모든 선택 <a> 대상 속성을 가진 요소를
모든 선택 <a> 대상 = "_ 빈"속성과 요소를
"꽃"중 하나는 단어의 공백으로 구분 된 목록을 포함하는 title 속성을 가진 모든 요소를 선택합니다
로 시작하는 클래스 속성 값을 가진 모든 요소 선택 "top" (전체 단어이어야 함)
로 시작하는 클래스 속성 값을 가진 모든 요소 선택 "top" (전체 단어가 아니어야합니다)
끝나는 클래스 속성 값을 가진 모든 요소 선택 "test"
포함하는 클래스의 속성 값을 가진 모든 요소 선택 "te"

선택기 설명 속성


CSS 양식

반자 입력란
패딩 입력 필드
경계 입력 필드
하단 보더 입력란
컬러 입력 필드
집중 입력 필드
집중 입력 필드 2
아이콘 / 이미지 입력
애니메이션 검색 입력
스타일링 텍스트 영역
선택 메뉴를 스타일링
입력 버튼을 스타일링

양식 설명


CSS 카운터

카운터 만들기
중첩 된 카운터 1
중첩 된 카운터 2

카운터 설명


CSS3 둥근 모서리

요소에 둥근 모서리를 추가
각 모서리 라운드 별도로
타원형 모서리 만들기

CSS3 둥근 모서리 설명


CSS3 테두리 이미지

라운드 키워드를 사용하여, 요소 주위에 이미지 테두리를 만들
스트레치 키워드를 사용하여, 요소 주위에 이미지 테두리를 만들
이미지 테두리 - 다른 슬라이스 값

CSS3 테두리 이미지 설명


CSS3의 배경

요소에 대해 여러 배경 이미지를 추가
배경 화상의 크기를 지정
"포함"및 "커버"를 사용하여 배경 이미지를 스케일
복수의 배경 화상의 크기를 정의
전체 크기 배경 화상 (완전 콘텐츠 영역을 기입)
배경 이미지가 위치 인 위치를 지정 배경 - 원점을 사용하여
배경의 그림 영역을 지정 배경 클립을 사용하여

CSS3 배경 설명


CSS3 그라디언트

선형 그라데이션 - 위에서 아래로
선형 그라디언트 - 왼쪽에서 오른쪽으로
선형 그라데이션 - 대각선
선형 그라데이션 - 지정된 각도
여러 색상 정지와 - 선형 그라데이션
선형 그라데이션 - 무지개 + 텍스트의 색상
선형 그라데이션 - 투명도
선형 그라데이션 - 반복 선형 그라데이션
방사형 그라데이션 - 균등 색상 정지
방사형 그라데이션 - 다른 간격 색상 정지
방사형 그라데이션 - 세트 모양
방사형 그라데이션 - 다른 크기 키워드
방사형 그라디언트 - 반복 방사형 그라데이션

CSS3 그라디언트 설명


CSS3 그림자 효과

간단한 그림자 효과
그림자에 색상 추가
그림자에 흐림 효과를 추가
검은 그림자와 흰색 텍스트
빨간색 네온 빛 그림자
빨간색과 파란색 네온 빛 그림자
블랙, 블루, 및 darkblue 그림자와 흰색 텍스트
요소에 간단한 상자 그림자 추가
상자 - 그림자에 색상을 추가
색상을 추가하고 그림자를 상자에 흐림 효과
만들기 종이 형 카드 (텍스트)
만들기 종이 형 카드 (폴라로이드 이미지)

CSS3 그림자 효과 설명


CSS3 텍스트

방법 숨겨진 오버플 콘텐츠는 사용자에게 신호한다 지정
요소를 통해 때 가져가 오버 플로우 콘텐츠를 표시하는 방법
긴 단어가 파괴 될 수 및 다음 줄에 포장 할 수 있도록 허용
줄 바꿈 규칙을 지정합니다

CSS3 텍스트 설명


CSS3 글꼴

에서 "자신의"글꼴을 사용 @font-face 규칙
에서 "자신의"글꼴을 사용 @font-face 규칙 (굵게)

CSS3 글꼴 설명


CSS3 2D 변환

translate() - 현재 위치에서 요소를 이동
rotate() - 요소를 시계 방향으로 회전
rotate() - 요소를 시계 반대 방향으로 회전
scale() - 요소를 높일
scale() - 요소를 줄일
skewX() - x 축을 따라 요소 기울어
skewY() - Y 축에 따라 요소를 기울입니다
skew() - X 및 Y 축을 따라 요소 기울어
matrix() -, 규모, 이동 요소를 왜곡 회전

CSS3 2D 설명되는 TO


CSS3 3D 변환

rotateX() - 주어진 수준에서의 X 축 주위의 요소를 회전
rotateY() - 주어진 수준에서의 Y 축 주위의 요소를 회전
rotateZ() - 주어진 수준에서의 Z 축 주위의 요소를 회전

CSS3 3D 설명되는 TO


CSS3 전환

전환 - 요소의 변화 폭
요소의 변화 폭과 높이 - 전환
전환에 대해 서로 다른 속도 곡선을 지정
전환 효과에 대한 지연을 지정합니다
전환 효과에 추가 변환
하나 약식 속성의 모든 전환 속성을 지정

CSS3 천이를 설명


CSS3 애니메이션

요소에 애니메이션을 바인딩
애니메이션 - 요소의 변경 배경 색
애니메이션 - 변경 배경 색상과 요소의 위치
애니메이션 지연
멈출 전에 애니메이션을 3 회 실행
영원히 애니메이션을 실행
반대 방향으로 실행 애니메이션
대체 사이클에서 실행 애니메이션
애니메이션 속도 곡선
애니메이션 약식 속성

CSS3 애니메이션 설명


CSS3 이미지

둥근 이미지
원 이미지
미리보기 이미지
링크로 미리보기 이미지
응답 이미지
이미지 텍스트 (왼쪽 상단)
이미지 텍스트 (오른쪽 상단)
이미지 텍스트 (왼쪽 하단)
이미지 텍스트 (오른쪽 아래)
이미지 텍스트 (중심)
폴라로이드 이미지
그레이 스케일 이미지 필터
고급 - CSS 및 자바 스크립트와 이미지 모달

CSS3 이미지 설명


CSS3 버튼

기본 CSS 버튼
버튼 색상
버튼 크기
둥근 버튼
컬러 버튼 테두리
Hoverable 버튼
그림자 버튼
장애인 버튼
버튼 폭
버튼 그룹
경계 버튼 그룹
애니메이션 버튼 (호버 효과)
애니메이션 버튼 (파급 효과)
애니메이션 버튼 (특수 효과를 누름)

CSS3 버튼 설명


CSS3 매김

간단한 매김
활성 및 hoverable 매김
둥근 활성 및 hoverable 매김
Hoverable 전환 효과
경계 매김
둥근 보더 매김
링크 사이의 공간 매김
페이지 매김 크기
링크 사이의 공간 매김
중심 매김
빵 부스러기

CSS3 매김 설명


CSS3 다중 열

여러 열을 만듭니다
열 사이의 간격을 지정
열 사이의 규칙의 스타일을 지정
열 사이 룰의 폭을 지정
열 사이의 규칙의 색을 지정합니다
열 사이의 규칙의 폭, 스타일과 색상을 지정
요소가 전역에 걸쳐있는 방법을 많은 열 지정
열에 대한 제안, 최적의 폭을 지정합니다

CSS3 여러 열 설명


CSS3 사용자 인터페이스

사용자가 요소의 폭의 크기를 조정하자
사용자가 엘리먼트의 높이를 크기 조정하자
사용자가 요소의 폭과 높이 모두의 크기를 조정하자
개요 및 요소의 테두리 사이의 공간을 추가

CSS3 사용자 인터페이스를 설명


CSS3 상자 크기 조정

상자 크기 조정없이 요소의 폭
박스 크기와 요소의 폭
양식 요소 + 상자 크기 조정

CSS3 상자 설명 정립


CSS3 인 flexbox

세 플렉스 항목 인 flexbox
세 플렉스 항목 인 flexbox - RTL 방향
플렉스 방향 - 행 역
플렉스 방향 - 열
플렉스 방향 - 열 역
정당화 - 콘텐츠 - 플렉스 엔드
정당화 콘텐츠를 - 센터
정당화 - 콘텐츠 - 공간 사이
정당화 콘텐츠를 - 공간 주위에
정렬 - 항목 - 스트레칭
정렬 - 아이템 - 플렉스 시작
정렬 - 아이템 - 플렉스 엔드
정렬 - 항목 - 센터
정렬 - 항목 - 기준을
플렉스 - 랩 - 파라미터 nowrap
플렉스 - 랩 - 랩
플렉스 - 랩 - 랩 역
정렬 - 콘텐츠 - 센터
플렉스 항목을 주문
마진 오른쪽 : 자동;
여백 : 자동; = 완벽한 센터링
플렉스 항목에 대한 정렬 - 자기
플렉스 나머지 항목에 대해 플렉스 항목의 길이를 지정
인 flexbox와 반응 웹 사이트 만들기

CSS3의 인 flexbox 설명


CSS3 미디어 쿼리

뷰포트가 480 픽셀 넓거나 넓은 경우 lightgreen하는 배경 색상 변경
뷰포트가 480 픽셀 넓거나 넓은 경우 페이지의 왼쪽에 떠있는 메뉴를보기

CSS3 미디어 쿼리 설명


CSS3 미디어 쿼리 - 더 예

HTML 페이지
520 699px로에서 폭 - 각 링크에 이메일 아이콘을 적용
700 1000px로에서 폭 - 텍스트와 링크를 머리말
1001px보다 폭 - 링크에 이메일 주소를 적용
1151px 위 너비 - 우리가 이전에 사용 된 아이콘을 추가
웹 페이지의 사이드 바의 이메일 링크 목록을 사용하여

CSS3 미디어는 예를 설명 쿼리