CSS 란 무엇입니까?
– CSS는 Cascading Style Sheets의 약자입니다.
– HTML 요소가 다양한 미디어에 표시되는 방식을 정의하는 데 사용되는 스타일 시트 언어
HTML4부터는 HTML 문서에서 이러한 서식 설정을 모두 분리할 수 있습니다.
– 대부분의 웹 브라우저는 CSS를 지원합니다.
CSS를 사용하는 이유
– HTML만으로 웹 페이지를 생성할 경우 각 HTML 요소의 세부 스타일을 별도로 설정해야 하는 번거로움이 있습니다.
– 시간이 많이 걸리고 완성 후에도 스타일을 변경 및 유지하기가 매우 어렵습니다.
– CSS를 사용하면 웹 페이지의 스타일을 별도의 파일로 저장할 수 있으므로 웹 사이트의 전체 스타일을 쉽게 제어할 수 있습니다.
– 웹 사이트 스타일을 일관되게 유지하는 데 도움이 되며 이에 따라 유지 관리가 쉽습니다.
– 확장자: .css
CSS 버전
– 1996년: 최초의 CSS1이 W3C 표준 권고안으로 제정됨
– 1998: CSS2 출시
– 2005년 이후: CSS3
– CSS는 현재 모듈별로 개발되어 있으며 브라우저 벤더가 지원하는 모듈을 자유롭게 선택
CSS 문법
CSS 선택기
– HTML 요소 선택기: h1, h2
– ID 유권자: #표제
– 수업 유권자: .m_box
– 그룹선택기: .m_box, .m_name
CSS 주석
: /* 주석 내용 */
CSS 적용
– 인라인 스타일
– 내부 스타일 시트 본문 { background-color:lightyellow; }– 외부 스타일 시트
CSS 표준 속성
색상
– 색상명 color:blue로 표현;
– RGB 색상값으로 표현 색상: RGB(0,0,255); / RGB(0,0,255, 255);
*a: 투명도
– 16진수 색상 값으로 표현 color:#0000FF;
배경
– 배경색 : 배경색
– 배경 이미지 : 이미지
– 백그라운드 반복: 반복
– background-position : 반복되지 않는 상대적 위치
– background-attachment : 배경 이미지 고정
– 배경 속성은 배경과 함께 바로 적용 가능
텍스트
– 색상: 색상
– 방향: 쓰는 방향(왼쪽에서 오른쪽(ltr) / 오른쪽에서 왼쪽(rtl))
– letter-spacing : 글자 사이의 간격
– 단어 간격: 단어 사이의 간격
– text-indent : 문단의 첫 줄 들여쓰기
– 텍스트 정렬 : 가로 방향
– 텍스트 장식 : 다양한 효과를 설정하거나 제거합니다.
– 텍스트 변환: 영문 대소문자 설정
– 줄높이 : 줄간격
– 텍스트 그림자 : 단순 그림자 효과
폰트
– 글꼴 패밀리
: serif { font-family: “Times New Roman”, Times, Serif; }
– 글꼴: 성씨 또는 속씨
– Family name은 글꼴 이름을 묶거나 글꼴 이름에 공백이 있는 경우 작은따옴표 또는 큰따옴표로 묶어 사용합니다.
– Generic Family: 글꼴
– Serif : 명조체체
– Sans-serif : 굵기가 일정하고 선명도가 없는 고딕체
– monospace : 문자 폭과 간격이 일정한 글꼴
– Italic : 손으로 쓴 듯한 손글씨체
– 판타지: 화려한 글꼴
– 여러 개의 폰트 설정 시 첫 번째 폰트로 표현할 수 없는 폰트만 다음 폰트로 사용
– 앞에 한글이 아닌 글자를, 뒤에 한글을 넣으면 하령과 영문이 다른 글자로 표현됩니다.
-글꼴 패밀리: Georgia, “말군고딕”, sefif;
– 글꼴 패밀리: Georgia, “Sunny Gothic”, Serif;
– 글꼴 스타일 : 일반, 기울임꼴, 오블리크
– font-variant : small-cpas(작은 대문자)
– 글꼴 두께 : 두께 표현
– 글꼴 크기 : 텍스트 크기
지름길
– 색상, 폰트 패밀리, 배경 속성 등 다양한 CSS 속성 적용
– 텍스트 장식 :none – 링크가 포함된 텍스트에서 밑줄을 제거합니다.
– 지름길 : 링크의 기본 상태이며 사용자가 링크된 페이지를 방문한 적이 없습니다.
– 방문 : 링크로 연결된 페이지를 1회 이상 방문한 사용자
– 호버링 : 사용자의 마우스 포인터가 링크 위로 이동합니다.
– 활동적인 : 사용자가 마우스로 링크를 클릭
– 포커스: 요소가 키보드나 마우스 이벤트 또는 기타 형태를 통해 포커스를 받은 상태
– a:link { 색상:올리브; }
-a:방문 {색상:갈색; }
– a:hover { 색상: 산호; }
– a: 활성 { 색상: 카키; }
목록
– 목록 스타일 유형 : 마커 스타일 변경
.lowerRoman { 목록 스타일 유형: 소문자; }
– 목록 스타일 이미지 : 나만의 이미지로 표시
list-style-image:url(“이미지 경로”)
– 목록 스타일 위치 : 위치 지정(기본 위치 – 외부)
.inside { 목록 스타일 위치: 내부; }
테이블
– 국경 : 국경
– 국경 붕괴 : 테이블의 행을 한 행에 표시
– border-spacing: 테이블 요소 사이의 간격
– 텍스트 정렬: 가로 정렬
– vertical-align : 수직 정렬
– caption-side : 테이블의 캡션 설정
– empty-cells : 빈 셀에 대한 표 테두리 및 배경색 표시
– 테이블 레이아웃: 레이아웃 알고리즘
이미지 스프라이트
– 여러 개의 이미지를 하나의 이미지로 결합하여 이미지 관리
– 많은 이미지를 사용할 경우 웹 브라우저는 서버에 이미지만큼 많은 이미지를 요청해야 하므로 웹 페이지를 로드하는 데 시간이 오래 걸립니다.
– 이미지 스프라이트를 사용하면 이미지 다운로드를 위한 서버 요구 사항이 줄어듭니다.
=> 웹 페이지 로딩 시간 단축
– 이미지가 많은 웹사이트나 게임에서 사용 가능