CSS(2)

CSS 선택자

내부 외부에서 문서의 html 요소를 선택하는 문법

---

tag 선택자 : html 문서의 **모든 특정 태그**를 선택할 때 사용

id 선택자 : html 문서의 **하나의 요소**를 특정해서 선택할 때 사용

class 선택자 : html 문서의 **여러 요소를 그룹**으로 선택할때 사용

tag 선택자

---

html 태그의 이름으로 바로 선택가능

태그 이름 그대로 사용한다.

모든 문서 내 태그에 적용함

div {
	css 속성 선언
}

id 선택자

---

html 태그의 속성으로 id를 지정/선언이 가능함다.

하나의 id는 문서 내 하나만 존재한다.(primary key)

샵 (#) 기호로 표현한다.

#id {
	css 속성 선언
}

class 선택자

---

html 태그의 속성으로 class를 지정할 수 있다.

하나의 class는 문서 내 여러개 가능

. 을 앞에 붙여 표현한다.

.className {
	css속성 선언
}

CSS 조합 선택자

조합 선택자

---

특정 요소 하위에 있는 요소를 선택한다.

자식 조합 선택자 > 사용

자손 조합 선택자 : 띄어쓰기 사용

상태 선택자

---

: 기호를 사용한다. 요소가 특정 상태가 되었을 때만 선택한다.

반응 선택자 : hover(마우스 커서가 위에 있을때), active(활성화), visitied(방문한 링크)

상태 선택자 : focus(입력, 버튼에 포커스), enabled(사용가능), disabled(사용 불가능)

input : focus {
	css 속성 선언
}

특성 선택자

---

요소에 부여된 특성의 존재 여부나 그 값에 따라 선택 대괄호를 사용해서 특성을 지정함

a[href] : href 속성이 지정된 요소

a[href=https://www.google.com] : href 속성에 구글 사이트 주소인 경우의 요소

위치, 여백 설정

여백 관련 속성

---

Margin, Padding

Padding은 콘텐츠를 감싸는 부분이다.

Margin은 외곽선 기준으로 외부 영역이다.

padding, margin 속성 선언

---

상하좌우 여백을 동일하게 주는 경우

padding : 40px;
margin : 40px;

상하, 좌우를 다르게 주는 경우

padding : 20px, 40px;
margin : 20px, 40px;

상, 하, 좌, 우를 각각 다르게 지정하는 경우

padding : 10px, 20px, 30px, 40px;
margin : 10px, 20px, 30px, 40px;

좌우 여백을 중앙에 알아서 맞추는 경우

margin : 특정숫자 auto;

width + padding : 블록 요소가 실제로 보이는 너비

height + padding : 블록 요소가 실제로 보이는 높이

배경 속성 (background)

---

background-color : 배경 색
background-image : 배경 이미지
background-repeat : 배경 이미지 반복 여부
background-position : 배경 이미지 위치

요소의 위치와 규칙, display, float, position

---

display : 해당 요소가 어떻게 보여질지 (block, inline-block, inline)

block : 내용과 상관없이 지정한 크기를 지킴
inline : 내용의 규격에 맞체 최소화
inline-block : block은 가로로 나열 불가능함 이를 가능하게 하는 것이 inline block

float 화면 내용을 무시하고 좌측, 우측으로 위치 지정(left, right)

position : 위치 값을 직접 정할 수 있는 규칙 적용 (absolute, relative, fixed)

absolute : 절대적 좌표, 브라우저의 좌측 상단에서 고정으로 x,y좌표를 계산한다.
relative : 상대적 좌표, 요소의 원래 위치에서 x,y좌표를 계산한다.
fixed : 스크롤이 내려가도 고정이다. (절대값)

display

---

none : 화면에 보이지 않는다.
block : 블록 요소 형태로 표현한다.
inline : 인라인 요소 형태로 표현한다. (내용에 따라 너비가 달라진다.)
inline-block : 블록 요소로 표현하되 양 옆에 다른 요소가 위치할 수 있다.
flex : flex 레이아웃을 사용할 수 있게 한다. (비율 , 가변적)
grid : grid 레이아웃을 사용할 수 있게 한다. (표형태의 레이아웃)

float

---

left : 왼쪽 우선 정렬
right : 오른쪽 우선 정렬

position

---

left, top, right, bottom 속성과 같이 사용하며 특정 요소의 위치를 직접 지정한다.

absoulte : 문서 내 절대 좌표로 요소를 위치한다.
relative : 바로 앞의 요소에 대해 얼마나 떨어져 위치할지를 지정한다.
fixed : 스크롤 관계없이 고정
static (디폴트 값) : 아무것도 지정하지 않는다.

테두리 (border)

테두리 (border)

테두리 속성, border

---

특정 요소에 테두리를 지정할 수 있습니다.

border-width : 굵기
border-style : 선 종류 (solid: 실선, dotted: 점선, dashed; - 선, double: 이중선)
border-color : 선 색
bordr : 위 3 속성을 한번에 적용 가능
(border : 굵기 선 종류 선 색)

테두리 그림자 속성 (shadow)

---

box-shadow : 테두리 외부에 그림자 효과를 준다.

box-shadow : 1px 10px; (오른쪽으로 1px, 아래로 10px)
box-shadow : 1px 10px #000000; (오른쪽으로 1px, 아래로 10px, 그림자 색 지정)
box-shadow : 1px 10px 3px #000000; (오른쪽으로 1px, 아래로 10px, 그림자 색 지정, 3px정도 그림자 흐리게)
box-shadow : 1px 10px 3px 5px #000000; (오른쪽으로 1px, 아래로 10px, 그림자 색 지정, 3px정도 그림자 흐리게, 5px정도 그림자 퍼짐)

테두리 둥글게 (border-radius)

---

border-radius : 10px; 10px 만큼 상하좌우 테두리 둥글게

border-radius : 20px 5px; 왼쪽 상단, 오른쪽 하단 20px, 오른쪽 상단, 왼쪽 하단 5px
border-radius : 10px 20px 30px; 왼쪽 상단부터 시걔방향으로 적용
border-radius : 10px 20px 30px 40px; 왼쪽 상단부터 시걔방향으로 적용