2/16-2 - KIM

CSS-Cascading Style Sheets
HTML 요소들이 각종 미디어에서 어떻게 보이는가를 정의하는데 사용하는 스타일 시트 언어
사용 이유
HTML 만으로 웹을 제작할 경우 세부 스타일을 일일히 따로 지정해줘야 하는 번거로움
그렇기에 많은 시간이 소요되며 스타일의 변경 및 유지 보수가 힘듬
버전-현재는 CSS3. 모듈별로 개발
문법
선택자 {속성별:속성값;(선언 구분자,마지막이면 선언 끝)}
선택자
- HTML 선택자 : h1,h2
- 아이디(id) 선택자 : #heading
- 클래스(class) 선택자 : .m_box
- 그룹(group) 선택자 : box, name
주석처리 : /* 주석내용 */ or // 한줄짜리주석
적용방법
- 인라인 스타일(Inline style) : 태그 안에 넣는 방법
- 내부 스타일 시트(Internal style sheet) : head 부분에 <style></style>을 추가하고 사이에 문법처럼 넣는 시스템
- 외부 스타일 시트(External style sheet)
color:rgba(red값,blue값,green값,alpha값(투명도))
rgb값 : 0~255 / alpha값 : 0~1[소수점1자리]
background관련
- background-image: url(그림위치)
  여러개를 쓸 수도 있는데 위에서부터 차곡차곡쌓인다고 생각하면 된다
- opacity : body 내의 모든 요소들의 투명도
TEXT관련
- direction : 써지는 방향 (ltr-왼쪽→오른쪽 or rtl 오른쪽→왼쪽)
- text-align : 수평 방향 정렬(left,right,center)
- text-decoration : 텍스트 데코레이션(대부분 줄 형태)
- text-shadow : 글자에 그림자 기능 (x이동위치-오른쪽으로 y이동위치-위쪽으로 흐림정도(px)-선택 색)
font관련
- font:family-name 또는 generic-family
  - font-family는 글꼴 이름. 글꼴 이름에 띄어쓰기가 있으면 작은 따옴표 또는 큰 따옴표로 감싸서 사용[컴퓨터 안에 설치 되어 있는 글꼴체들(한글도 가능)]
    한글형태가 없는 글꼴은 앞에, 한글 글꼴은 뒤에 두면 서로 다르게 표현 가능
  - generic-family는 글꼴 유형[serif,sans-serif,monospace,cursive,fantasy]
- font-weight,font-size
  - font-weight : 굵게(bolder)~얇게(lighter)
  - font-size:large,large,medium,small 또는 픽셀로 조절
link
- color,font-family,background 속성 등으로 다양하게 적용할 수 있음
- text-decoration : none 을 넣으면 밑줄을 제거한다
- 속성- a:속성{} 형태
  - link : 기본 상태
  - visited : 한번이라도 연결된 페이지를 방문한 상태
  - hover : 마우스 커서가 링크 위에 올라가 있는 상태
  - active : 마우스로 링크를 클릭하고 있는 상태
  - focus : 이벤트 또는 다른 형태로 해당 요소가 포커스를 가지고 있는 상태
리스트
- 마커 스타일(list-style-type) : ul에 순서가 있는 마커로 변경이 가능하고, ol에 순서가 없는 마커로 변경이 가능하다
- 마커 이미지(list-style-image):url(이미지 주소) : 마커 대신 이미지를 넣을 수 있다.
  마커 위치(list-style-position) : 마커의 위치를 임의로 수정 할 수 있다.(inside,ounside 등)
테이블
- border:테두리
- td:td 셀 속성
- border-collapse : 테두리나 셀 간의 간격(collapse하면 사이 간격이 없어짐, 기본값은 separate)
- empty-cells : 비어있는 셀(td가 있는 자리에만 해당.hide하면 숨겨짐.show가 기본값)
이미지 스프라이트(image sprite) : 여러 개의 이미지를 하나의 이미지로 합쳐서 관리하는 이미지.대부분 잘라서 사용함