CSS 튜토리얼

CSS 홈 CSS 소개 CSS 구문 CSS 선택기 CSS 방법 CSS 주석 CSS 색상 CSS 배경 CSS 테두리 CSS 여백 CSS 패딩 CSS 높이/너비 CSS 상자 모델 CSS 개요 CSS 텍스트 CSS 글꼴 CSS 아이콘 CSS 링크 CSS 목록 CSS 테이블 CSS 디스플레이 CSS 최대 너비 CSS 위치 CSS Z-색인 CSS 오버플로 CSS 플로트 CSS 인라인 블록 CSS 정렬 CSS 결합기 CSS 의사 클래스 CSS 의사 요소 CSS 불투명도 CSS 탐색 모음 CSS 드롭다운 CSS 이미지 갤러리 CSS 이미지 스프라이트 CSS 속성 선택기 CSS 양식 CSS 카운터 CSS 웹사이트 레이아웃 CSS 단위 CSS 특수성 CSS !중요 CSS 수학 함수

CSS 고급

CSS 둥근 모서리 CSS 테두리 이미지 CSS 배경 CSS 색상 CSS 색상 키워드 CSS 그라디언트 CSS 그림자 CSS 텍스트 효과 CSS 웹 글꼴 CSS 2D 변환 CSS 3D 변환 CSS 전환 CSS 애니메이션 CSS 도구 설명 CSS 스타일 이미지 CSS 이미지 반사 CSS 객체 맞춤 CSS 객체 위치 CSS 마스킹 CSS 버튼 CSS 페이지 매김 CSS 다중 열 CSS 사용자 인터페이스 CSS 변수 CSS 상자 크기 조정 CSS 미디어 쿼리 CSS MQ 예 CSS 플렉스박스

CSS 반응형

RWD 소개 RWD 뷰포트 RWD 그리드 보기 RWD 미디어 쿼리 RWD 이미지 RWD 비디오 RWD 프레임워크 RWD 템플릿

CSS 그리드

그리드 소개 그리드 컨테이너 그리드 항목

CSS SASS

SASS 튜토리얼

CSS 예제

CSS 템플릿 CSS 예제 CSS 퀴즈 CSS 연습 CSS 인증서

CSS 참조

CSS 참조 CSS 선택기 CSS 함수 CSS 참조 청각 CSS 웹 안전 글꼴 CSS 애니메이션 가능 CSS 단위 CSS PX-EM 변환기 CSS 색상 CSS 색상 값 CSS 기본값 CSS 브라우저 지원

CSS 소개


CSS는 웹 페이지의 스타일을 지정하는 데 사용하는 언어입니다.


CSS 란 무엇입니까?

  • CSS는 Cascading Style Sheets의 약자입니다.
  • CSS는 HTML 요소가 화면, 종이 또는 기타 미디어에 표시되는 방식을 설명합니다.
  • CSS는 많은 작업을 절약합니다. 한 번에 여러 웹 페이지의 레이아웃을 제어할 수 있습니다.
  • 외부 스타일시트는 CSS 파일에 저장됩니다.

CSS 데모 - 하나의 HTML 페이지 - 여러 스타일!

여기에서는 4개의 다른 스타일시트와 함께 표시된 하나의 HTML 페이지를 보여줍니다. 다양한 스타일을 보려면 아래의 "스타일시트 1", "스타일시트 2", "스타일시트 3", "스타일시트 4" 링크를 클릭하십시오.



CSS를 사용하는 이유

CSS는 다양한 장치 및 화면 크기에 대한 디스플레이의 디자인, 레이아웃 및 변형을 포함하여 웹 페이지의 스타일을 정의하는 데 사용됩니다.

CSS 예

body {
  background-color: lightblue;
}

h1 {
  color: white;
  text-align: center;
}

p {
  font-family: verdana;
  font-size: 20px;
}

CSS는 큰 문제를 해결했습니다

HTML은 웹 페이지 서식을 지정하기 위한 태그를 포함하도록 의도된 적이 없습니다!

HTML은 다음과 같이 웹 페이지의 내용을 설명하기 위해 만들어졌습니다.

<h1>제목입니다</h1>

<p>이것은 단락입니다.</p>

<font>와 같은 태그와 색상 속성이 HTML 3.2 사양에 추가되었을 때 웹 개발자에게 악몽이 시작되었습니다. 모든 단일 페이지에 글꼴과 색상 정보가 추가되는 대규모 웹사이트 개발은 길고 비용이 많이 드는 과정이 되었습니다.

이 문제를 해결하기 위해 W3C(World Wide Web Consortium)에서 CSS를 만들었습니다.

CSS가 HTML 페이지에서 스타일 서식을 제거했습니다!

HTML이 무엇인지 모르는 경우 HTML Tutorial 을 읽는 것이 좋습니다 .


CSS는 많은 작업을 절약합니다!

스타일 정의는 일반적으로 외부 .css 파일에 저장됩니다.

외부 스타일시트 파일을 사용하면 파일 하나만 변경하여 전체 웹사이트의 모양을 변경할 수 있습니다!