css의 경우, 내용이 워낙 방대하여 정리하는데 시간이 오래걸림.

🎇CSS 개요

• Cascading Style Sheets
• 웹사이트의 스타일을 입혀주는 언어.

내부 적용 CSS

• style 태그
• inline으로 style 속성

외부 적용 CSS

• link 태그 사용하여 외부 css 파일을 적용.
• Ex) <link rel="stylesheet" href="css 파일 경로"(상대경로)

🎇CSS 선택자

CSS 선택자란?

• 스타일을 적용하기 전에 어떤 요소를 스타일링 할지 선택해줘야 한다.
• CSS를 적용할 요소를 선택하는 역할.

CSS 선택자 종류

👉전체 선택자

• * {}
• HTML 문서 내 모든 요소에 CSS 적용.

👉태그 선택자

• 태그명 {}
• 동일한 태그에만 CSS 적용.

👉아이디 선택자와 클래스 선택자

• 아이디 선택자 : 태그에 id값을 지정 후 동일한 아이디명에만 CSS 적용.
  - #id명 {}
  • 유일한 값을 지정하며, 단일로 CSS 적용 시 사용한다.
• 클래스 선택자 : 태그에 class값을 지정 후 동일한 클래스명에만 CSS 적용.
  - .class명 {}
  • 그룹단위로 CSS 적용 시 사용한다.

👉속성 선택자

• 태그명[속성명] {}
• 태그명[속성명=속성값] {}
• 태그 내 동일한 속성명을 포함하고 있으면 CSS 적용.

👉그룹 선택자

• 여러 개의 선택자에 동일한 CSS 적용이 가능하다.
• 태그명, id명, class명 {}

👉자식 선택자

• 부모태그 > 자식태그 {}
• 태그명 대신 id명 또는 class명을 사용해도 CSS 적용이 된다.

👉하위 선택자

• 상위태그 하위태그 {} : 공백으로 구분.
• 상위 태그 하위에 모든 하위태그에 CSS 적용.

👉인접형제 선택자

• 태그명 + 인접한형제태그명 {}
• 인접한형제태그가 아닌 경우 CSS 적용 안됨.
• 동등한 위치의 태그 중 가장 가까운 태그에만 CSS 적용.

👉일반형제 선택자

• 태그명 ~ 아래형제태그명 {}
• 동등한 위치의 태그 중 선택된 태그 아래 중 하나에 CSS 적용.

👉가상 요소 선택자

• 태그명 :: before : 태그 앞에 가상의 빈공간에 CSS 적용.
• 태그명 :: after : 태그 뒤에 가상의 빈공간에 CSS 적용.

👉가상 클래스 선택자

• 태그명 뒤에 :(가상이벤트)를 붙이면 특정 이벤트마다 적용 할 CSS를 설정 할 수 있으며, 이를 가상 클래스라고 한다.

🫱링크 가상 클래스

• 태그명:link {} : 방문하지 않은 경우, CSS 적용.
• 태그명:visited {} : 방문한 기록이 있는 경우, CSS 적용.

🫱동적 가상 클래스

• 태그명:hover {} : 마우스를 위에 올려놓은 경우, CSS 적용.
• 태그명:active {} : 버튼을 선택한 경우, CSS 적용.

🫱input(입력요소) 가상 클래스

• input:disabled {} : 비활성화 상태에 CSS 적용.
• input:enabled {} : 활성화 상태에 CSS 적용.
• input:focus {} : 입력 시 커서 상태에 CSS 적용.
• input:checked {} : checkbox 타입의 입력요소에 체크된 상태에 CSS 적용.

👉자식 요소 선택자 추가

• 태그명:first-child {} : 동일한 태그 중 첫번째 태그에 CSS 적용. 만약, 첫번째 태그가 동일하지 않은 태그인 경우 CSS 적용되지 않는다.
• 태그명:last-child {} : 동일한 태그 중 끝태그에 CSS 적용. 만약, 끝태그가 동일하지 않은 태그인 경우 CSS 적용되지 않는다.
• 태그명:nth-child(n) {} : 동일한 태그 중 n번째 태그에 CSS 적용.만약, n번째 태그가 동일하지 않은 태그인 경우 CSS 적용되지 않는다.
• 태그명:nth-last-child(n) {} : 동일한 태그 중 끝에서 n번째 태그에 CSS 적용. 만약, 끝에서 n번째 태그가 동일하지 않은 태그인 경우 CSS 적용되지 않는다.
• 태그명:first-of-type {} : 태그 중 처음으로 선택된 태그에 CSS 적용. 첫 요소가 동일한 태그가 아닌경우, 다음 줄로 가서 동일한 태그를 찾은 다음 찾을 경우 첫번째로 찾은 태그에 CSS를 적용한다.
• 태그명:last-of-type {} : 태그 중 끝에 선택된 태그에 CSS 적용.
• 태그명:nth-of-type(n) {} : 태그 중 n번째로 선택된 태그에 CSS 적용.
• 태그명:nth-last-of-type(n) {} : 태그 중 끝에서 n번째로 선택된 태그에 CSS 적용.

🎇CSS 스타일 속성

CSS 스타일 적용 우선순위

1. 동일한 태그에 CSS 적용 시, 순서 상 마지막으로 적용한 스타일이 적용된다.
2. 개별성 점수
   • 전체 선택자(*) : 0점
   • 태그 선택자(div, p, span, ...) : 1점
   • 가상 요소 선택자(::before/after) : 1점
   • 클래스 선택자(.클래스명) : 10점
   • 가상 클래스 선택자(:hover, :visited, :link) : 10점
   • 아이디 선택자(#아이디명) : 100점
   • 인라인 속성(style="") : 1,000점
   • !important : 10,000점
3. 스타일 상속 : 일부 속성은 하위 태그로 상속된다.

font

👉 font-family

• 1st 글자체→ 2nd 글자체→ 3rd 글자체...
• 글자 양식(style), 후순위일수록 우선순위가 떨어진다.

👉 font-weight

• 글자 굵기

👉 font-size

• 글자 크기

👉 color

• 글자 색

👉 font-style

• 글자체

👉 font-variant

• 특정 글자체

👉 font-decoration

• 글자 서식 조정(기본 글자체 사용 유무)

👉 text-align

• 글자 정렬

👉 letter-spacing

• 자간 조정

👉 line-height

• 행간 높이 조정

Box 속성

• width : 너비
• height : 높이

👉 margin

• 위 오른쪽 아래 왼쪽
• margin은 다른 컨텐츠를 기준으로 생성되며, 다른 컨텐츠가 있어야 적용된다.

👉 border

• 테두리

border-style : 테두리 양식

👉 padding

• 글자와 테두리 사이 공간

👉 글자(text)

• 내부 컨텐츠

👉 box-sizing : border-box

• 박스 사이즈 기준을 절대 크기로 하며, 크기를 벗어날 경우 내부 글자 크기를 줄인다.

background 속성

👉 background-color

• 배경 색

👉 background-image

• 이미지를 배경으로 지정

👉 background-position

• 배경 위치

👉 background-repeat

• 배경이 이미지인 경우, 크기를 넘겼을 때 이미지를 반복.

👉 background-size

• 배경 크기 지정

👉 background

• 위의 모든 속성을 한번에 지정

background : red url('images/coffee.jpg') no-repeat center/100% 100% fixed;

Position 속성

👉 absolute

• 절대 위치

👉 relative

• 상대 위치(앞의 요소를 기준으로 표기)
• left : 왼쪽에서 오른쪽
• bottom : 아래에서 위

👉 sticky

• 화면에 고정된 상태 유지.(top에 붙은 상태로 유지)

👉 z-index

• position이 겹칠 경우, 요소에 z-index 값을 주어 앞으로 오도록 해준다.

Display 속성

👉 block

• 하나의 행 전체를 차지함.

👉 inline

• 컨텐츠 크기만큼만 차지함.

👉 inline-block

• 컨텐츠 크기만큼만 차지하지만, 블록 요소로 취급한다.

Float

• 요소를 다른 차원으로 배치하는 속성.

👉 clear

• block 요소 clear 시, float를 인식하여 하부에 행을 차지한다.
• inline 요소 clear 시, float를 인식하지 못한다.
• inline-block 요소 clear 시, float를 인식하여 옆에 inline 형태로 차지한다.
• clear 사용 시 float를 인식할 방향을 지정해줘야 하는데, 일반적으로 both를 한다.

flex

• 컨테이너 내부 요소 배치를 쉽게하기 위한 display

👉 flex-direction

• 요소 정렬 방향(row / column)

👉 flex-wrap

• 요소가 컨테이너 크기를 넘어가면 요소를 축소시켜 해당 요소가 컨테이너에 보이도록 해줌

👉 align-self

• 각 요소마다 다르게 배치하고 싶을 때 사용하는 속성

👉 justify-content

• 요소 배치 양식(정렬 시, 여백을 나누는 방식에 따라 구분된다)

grid

• 컨테이너 안에 요소들을 정사각형의 공간으로 동일하게 나눈 판 위에 배치되도록 해줌

👉 grid-template

• grid 항목을 기준으로 배치하는 속성

👉 grid-line

• grid 내 항목을 나누는 구분선을 기준으로 배치하는 속성

viewporter

• 접속한 디바이스의 화면에 맞게 화면이 보이도록 해주는 속성