CSS 기초

==============================================

<<CSS>>

◎CSS 3 단위

- 키워드

- 크기

- 색상

- URL

● 키워드

- 자동완성 기능

● 크기

pixel(절대 값), em(상대 값), %(상대 값) 등

- em은 배율을 나타내는 단위이며 앞서 나타난 고정 값의 배수가 된다.

● 색상

- rgb(red,green,blue) : 기본 3원색 색상

- rgba(red,green,blue,alpha) : rgb에서 투명도 조절 추가

- hex 코드 단위 : #000000

● URL 단위

url(링크 주소)

링크주소 사용시 쿼테이션(',")으로 감싸주어야 한다.

- 외부 링크를 참조하여 대상 호출

=============================

●컴포넌트 position

●padding

●border

●margin

=============================

●display 속성

- block,inline-block, inline을 변경하여 웹 페이지에 표현

=============================

●배경 속성

- background-image : 배경을 이미지로 지정

- background-attachment : 스크롤에 따라 그림이 따라오게 할지 혹은 고정시킬지 결정

·fixed : 고정

·scroll : 따라 움직임

=============================

●텍스트 속성

- font-size : 글씨 크기

- font-family : 글씨체(기본적으로 사용자 pc에 있는 font를 사용하나 최근들어서 브라우저나 웹에서 추가 제공)

·:','를 통해 없는경우 대체 폰트 지정 가능

- font-style, font-weight,text-decoration : 기울임, 굵게하기 등등 글꼴 설정

- text-align : 글자 정렬

- line-height : 글자(단어)간의 간격

=============================

●위치 속성

position

- absolute : 절대좌표 태그 겹치기 가능

- relative : 바로 이전 태그(부모 태그)의 위치를 기준으로 상대위치에 해당하는 부분에 표현

z-index : 위,아래/ 화면에 먼저보일 녀석들을 찾아내게 함

overflow : 공간을 초과한 경우 처리할 스타일

- hidden : 초과한 부분 안보이게 처리

- scroll : 스크롤을 통해 이동하여 숨겨진부분 볼 수 있음

※ 수평 정렬 : 부모태그에는 overflow:hidden으로, 자식에게는 float속성을 지정

※ 중앙 정렬 : position: absolute한 후 left, top값으로 조정(주로 margin 값을 이용)

=============================

●숨김

overflow 속성 사용

- hidden : 숨김

- scroll : 스크롤 지원

text-overflow 속성

- ellipsis : 생략

·title속성을 이용하여 mouse-over 이벤트 시 숨겨진 문구 출력 가능

=============================