CSS 구문
요소 선택
아이디 선택
(모든 요소) 클래스 선택
(만의 클래스 선택 <p> 요소)
선택기를 그룹화
CSS의 배경
페이지의 배경색을 설정
다른 요소의 배경색을 설정
페이지의 이미지를 배경으로 설정
방법 만 가로 배경 이미지를 반복
배경 화상을 배치하는 방법
고정 배경 이미지 (이 이미지는 페이지의 나머지 부분과 스크롤되지 않습니다)
하나의 선언의 모든 배경 속성
고급 배경 예
CSS 테두리
네 테두리의 폭을 설정
위쪽 테두리의 폭을 설정
아래쪽 테두리의 폭을 설정
왼쪽 테두리의 폭을 설정
오른쪽 테두리의 폭을 설정
네 테두리의 스타일을 설정
위쪽 테두리의 스타일을 설정
아래쪽 테두리의 스타일을 설정
왼쪽 테두리의 스타일을 설정
오른쪽 테두리의 스타일을 설정
네 테두리의 색상을 설정합니다
위쪽 테두리의 색상을 설정합니다
아래쪽 테두리의 색상을 설정합니다
왼쪽 테두리의 색상을 설정합니다
오른쪽 테두리의 색상을 설정합니다
하나의 선언의 모든 테두리 속성
각면에 서로 다른 테두리를 설정
하나의 선언에서 모든 위쪽 테두리 속성
하나의 선언의 모든 아래쪽 테두리 속성
하나의 선언의 모든 왼쪽 테두리 속성
하나의 선언의 모든 오른쪽 테두리 속성
CSS 여백
요소의 각 측면에 대해 서로 다른 여백을 지정
왼쪽 마진은 부모 요소에서 상속하자
여백 약식 속성
자동으로 설정 이익률은 컨테이너 내에서 요소를 중심으로하는
CSS 패딩
요소의 좌측 여백을 설정
요소의 오른쪽 여백을 설정
소자의 상단에 여백을 설정
소자의 아래쪽 여백을 설정
하나의 선언의 모든 패딩 속성
CSS 텍스트
다른 요소의 텍스트 색상을 설정할
텍스트를 맞 춥니 다
링크에서 줄을 제거
텍스트를 장식
텍스트에 문자를 제어
들여 쓰기 텍스트
문자 사이의 공간을 지정
라인 사이의 공간을 지정
요소의 텍스트 방향 설정
단어 사이의 공백을 증가
요소 내부의 텍스트 줄 바꿈을 사용하지 않도록 설정
텍스트 안에 이미지의 수직 정렬
CSS 글꼴
텍스트의 글꼴을 설정
글꼴의 크기를 설정
픽셀에서 글꼴의 크기를 설정
EM에서 글꼴의 크기를 설정
%와 그들에 글꼴의 크기를 설정
글꼴의 스타일을 설정
글꼴의 변형을 설정
글꼴의 대담을 설정
하나의 선언에서 모든 글꼴 속성
CSS 링크
방문 / 방문하지 않은 링크를 다른 색상 추가
링크 텍스트 장식의 사용
링크의 배경색을 지정합니다
하이퍼 링크에 다른 스타일을 추가
링크 상자 만들기 - 고급
고급 - 테두리 링크 상자 만들기
CSS 목록
리스트의 모든 다른 목록 항목 마커
목록 항목 마커로 이미지를 설정
목록 항목 마커의 위치를
하나의 선언에서 모든 목록 속성
색상과 스타일리스트
전체 폭 경계 목록
CSS 테이블
테이블, 일 및 TD 요소 검은 색 테두리를 지정합니다
국경 붕괴의 사용
테이블 주위 단일 경계
테이블의 폭과 높이를 지정
내용의 수평 정렬을 설정합니다 (텍스트 정렬)
내용의 수직 정렬을 설정합니다 (수직 정렬)
일 및 TD 요소의 패딩을 지정
수평 분할
Hoverable 테이블
스트라이프 테이블
표 테두리의 색상을 지정
테이블 캡션의 위치를 설정합니다
응답 표
멋진 테이블 만들기
CSS 박스 모델
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 카운터
CSS3 둥근 모서리
요소에 둥근 모서리를 추가
각 모서리 라운드 별도로
타원형 모서리 만들기
CSS3 테두리 이미지
라운드 키워드를 사용하여, 요소 주위에 이미지 테두리를 만들
스트레치 키워드를 사용하여, 요소 주위에 이미지 테두리를 만들
이미지 테두리 - 다른 슬라이스 값
CSS3의 배경
요소에 대해 여러 배경 이미지를 추가
배경 화상의 크기를 지정
"포함"및 "커버"를 사용하여 배경 이미지를 스케일
복수의 배경 화상의 크기를 정의
전체 크기 배경 화상 (완전 콘텐츠 영역을 기입)
배경 이미지가 위치 인 위치를 지정 배경 - 원점을 사용하여
배경의 그림 영역을 지정 배경 클립을 사용하여
CSS3 그라디언트
선형 그라데이션 - 위에서 아래로
선형 그라디언트 - 왼쪽에서 오른쪽으로
선형 그라데이션 - 대각선
선형 그라데이션 - 지정된 각도
여러 색상 정지와 - 선형 그라데이션
선형 그라데이션 - 무지개 + 텍스트의 색상
선형 그라데이션 - 투명도
선형 그라데이션 - 반복 선형 그라데이션
방사형 그라데이션 - 균등 색상 정지
방사형 그라데이션 - 다른 간격 색상 정지
방사형 그라데이션 - 세트 모양
방사형 그라데이션 - 다른 크기 키워드
방사형 그라디언트 - 반복 방사형 그라데이션
CSS3 그림자 효과
간단한 그림자 효과
그림자에 색상 추가
그림자에 흐림 효과를 추가
검은 그림자와 흰색 텍스트
빨간색 네온 빛 그림자
빨간색과 파란색 네온 빛 그림자
블랙, 블루, 및 darkblue 그림자와 흰색 텍스트
요소에 간단한 상자 그림자 추가
상자 - 그림자에 색상을 추가
색상을 추가하고 그림자를 상자에 흐림 효과
만들기 종이 형 카드 (텍스트)
만들기 종이 형 카드 (폴라로이드 이미지)
CSS3 텍스트
방법 숨겨진 오버플 콘텐츠는 사용자에게 신호한다 지정
요소를 통해 때 가져가 오버 플로우 콘텐츠를 표시하는 방법
긴 단어가 파괴 될 수 및 다음 줄에 포장 할 수 있도록 허용
줄 바꿈 규칙을 지정합니다
CSS3 글꼴
에서 "자신의"글꼴을 사용 @font-face 규칙
에서 "자신의"글꼴을 사용 @font-face 규칙 (굵게)
CSS3 2D 변환
translate() - 현재 위치에서 요소를 이동
rotate() - 요소를 시계 방향으로 회전
rotate() - 요소를 시계 반대 방향으로 회전
scale() - 요소를 높일
scale() - 요소를 줄일
skewX() - x 축을 따라 요소 기울어
skewY() - Y 축에 따라 요소를 기울입니다
skew() - X 및 Y 축을 따라 요소 기울어
matrix() -, 규모, 이동 요소를 왜곡 회전
CSS3 3D 변환
rotateX() - 주어진 수준에서의 X 축 주위의 요소를 회전
rotateY() - 주어진 수준에서의 Y 축 주위의 요소를 회전
rotateZ() - 주어진 수준에서의 Z 축 주위의 요소를 회전
CSS3 전환
전환 - 요소의 변화 폭
요소의 변화 폭과 높이 - 전환
전환에 대해 서로 다른 속도 곡선을 지정
전환 효과에 대한 지연을 지정합니다
전환 효과에 추가 변환
하나 약식 속성의 모든 전환 속성을 지정
CSS3 애니메이션
요소에 애니메이션을 바인딩
애니메이션 - 요소의 변경 배경 색
애니메이션 - 변경 배경 색상과 요소의 위치
애니메이션 지연
멈출 전에 애니메이션을 3 회 실행
영원히 애니메이션을 실행
반대 방향으로 실행 애니메이션
대체 사이클에서 실행 애니메이션
애니메이션 속도 곡선
애니메이션 약식 속성
CSS3 이미지
둥근 이미지
원 이미지
미리보기 이미지
링크로 미리보기 이미지
응답 이미지
이미지 텍스트 (왼쪽 상단)
이미지 텍스트 (오른쪽 상단)
이미지 텍스트 (왼쪽 하단)
이미지 텍스트 (오른쪽 아래)
이미지 텍스트 (중심)
폴라로이드 이미지
그레이 스케일 이미지 필터
고급 - CSS 및 자바 스크립트와 이미지 모달
CSS3 버튼
기본 CSS 버튼
버튼 색상
버튼 크기
둥근 버튼
컬러 버튼 테두리
Hoverable 버튼
그림자 버튼
장애인 버튼
버튼 폭
버튼 그룹
경계 버튼 그룹
애니메이션 버튼 (호버 효과)
애니메이션 버튼 (파급 효과)
애니메이션 버튼 (특수 효과를 누름)
CSS3 매김
간단한 매김
활성 및 hoverable 매김
둥근 활성 및 hoverable 매김
Hoverable 전환 효과
경계 매김
둥근 보더 매김
링크 사이의 공간 매김
페이지 매김 크기
링크 사이의 공간 매김
중심 매김
빵 부스러기
CSS3 다중 열
여러 열을 만듭니다
열 사이의 간격을 지정
열 사이의 규칙의 스타일을 지정
열 사이 룰의 폭을 지정
열 사이의 규칙의 색을 지정합니다
열 사이의 규칙의 폭, 스타일과 색상을 지정
요소가 전역에 걸쳐있는 방법을 많은 열 지정
열에 대한 제안, 최적의 폭을 지정합니다
CSS3 사용자 인터페이스
사용자가 요소의 폭의 크기를 조정하자
사용자가 엘리먼트의 높이를 크기 조정하자
사용자가 요소의 폭과 높이 모두의 크기를 조정하자
개요 및 요소의 테두리 사이의 공간을 추가
CSS3 상자 크기 조정
상자 크기 조정없이 요소의 폭
박스 크기와 요소의 폭
양식 요소 + 상자 크기 조정
CSS3 인 flexbox
세 플렉스 항목 인 flexbox
세 플렉스 항목 인 flexbox - RTL 방향
플렉스 방향 - 행 역
플렉스 방향 - 열
플렉스 방향 - 열 역
정당화 - 콘텐츠 - 플렉스 엔드
정당화 콘텐츠를 - 센터
정당화 - 콘텐츠 - 공간 사이
정당화 콘텐츠를 - 공간 주위에
정렬 - 항목 - 스트레칭
정렬 - 아이템 - 플렉스 시작
정렬 - 아이템 - 플렉스 엔드
정렬 - 항목 - 센터
정렬 - 항목 - 기준을
플렉스 - 랩 - 파라미터 nowrap
플렉스 - 랩 - 랩
플렉스 - 랩 - 랩 역
정렬 - 콘텐츠 - 센터
플렉스 항목을 주문
마진 오른쪽 : 자동;
여백 : 자동; = 완벽한 센터링
플렉스 항목에 대한 정렬 - 자기
플렉스 나머지 항목에 대해 플렉스 항목의 길이를 지정
인 flexbox와 반응 웹 사이트 만들기
CSS3 미디어 쿼리
뷰포트가 480 픽셀 넓거나 넓은 경우 lightgreen하는 배경 색상 변경
뷰포트가 480 픽셀 넓거나 넓은 경우 페이지의 왼쪽에 떠있는 메뉴를보기
CSS3 미디어 쿼리 - 더 예
HTML 페이지
520 699px로에서 폭 - 각 링크에 이메일 아이콘을 적용
700 1000px로에서 폭 - 텍스트와 링크를 머리말
1001px보다 폭 - 링크에 이메일 주소를 적용
1151px 위 너비 - 우리가 이전에 사용 된 아이콘을 추가
웹 페이지의 사이드 바의 이메일 링크 목록을 사용하여