CSS 기본내용

1. CSS란 Cascading Style Sheets의 약자이며 웹을 디자인하는 용도이다.

2.자바스크립트와 연계하기도 쉽다.

favicon

favicon은 각 사이트를 대표하는 이미지를 브라우저탭에 표시해 주는 것이다.

셀렉터

셀렉터는 특정한 요소를 가져오는 역할을 한다.

밑에내용들이 가져오는 방법이다.

border

• border 는 컨테츠를 감싸는 라인이다.
• border 는 두께, 종류, 색상 등을 설정 해준다.
• border 라인이 생길 경우 컨텐츠 크기에 영향으 미친다.
• boder-방향-속성 형식으로 표현이 가능하다.

위에 boder-방향-속성 형식으로 표현한 예시이다.

background

-background 속성을 이용하여 여러가지 효과를 줄 수 있다.

1. background-color: 해당 색상을 배경에 칠한다.

2. background-image: 선택된 이미지를 배경에 채운다.

3. background-repeat: 배경보다 이미지가 작을 경우 반복될 방향 설정

4. background-position: 이미지 위치 지정

5. background-size: 이미지 사이즈 지정

float

1.float 은 특정한 요소를 물 흐르듯 기준을 정해 세워 놓는 것을 의미 한다.

2.float:left 요소를 왼쪽에서 부터 정렬 하는 것을 의미 한다.

z-index

• 요소들 간에 누가 사용자 평면상 위로 올라 가느냐를 지정한다.
• 1~10까지 이면 높을수록 위로 간다

opacity

• 투명도를 의미한다
• 0~1까지가 있으며 0으로 갈수록 투명 해 집니다.
• 0.2~0.5 정도를 가장 일반적으로 사용 한다.

Sprite image

• 여러장의 이미지를 하나의 이미지로 병합 해 놓은 이미지이다.
• 2D 도트 게임에서 사용하는 개념으로 이제는 웹에서도 사용한다.

(1)추가적으로 알아야 할거

• link: 링크가 걸려 있는 상태
• active: 클릭을 했을 경우
• visited: 이미 방문한 페이지

(2)추가적으로 알아야 할거

• max-width: 지정한 숫자 이상으로 요소 크기가 늘어나지 않는다.
• min-width: 지정한 숫자 이상으로 크기가 줄어들지 않는다.

(3)추가적으로 알아야 할거

• display: 특정 요소를 삭제 및 생성 한다.
• none: 해당 요소를 삭제한다.
• block: 해당 요소를 속성으로 보이게 한다.("위에서 아래로")
• inline: 해당 요소를 인라인 속성으로 보이게 한다.("왼쪽에서 오른쪽으로")
• visibility: 특정 요소를 숨기거나 보여 준다.
• hidden: 해당 요소를 가린다.
• visible: 해당 요소를 보이게 한다.