css는 무엇인가?

Cascading Style Sheets의 약자

• Inline Style Sheet : 우선순위가 2번째
• Internal Style Sheet : 스타일 태그 안에 사용
• Linking Style Sheet : css 파일을 외부에서 불러옴

📕 개념 및 문법

a { 
	background-color : yellow;
    font-size: 16px; 
 }

• a : 선택자
• background-color, font-size : 속성명
• yellow, 16px : 속성값
• (;세미콜론) : 선언 구분자, 선언 끝

📗 class, id 개념

id: 우선 순위가 3번째,
class: 우선 순위가 4번째

📕 properties

속성을 html에서는 attribute, css에서는 property 라고 함.

💡 property value 단위

• 크기의 단위:

1. px
2. %
3. vw(뷰포트 너비), vh(뷰포트 높이)
   height: 100vh를 쓰면 안되는 경우, 모바일일 때, 주소창을 포함한 크기가 vh로 잡힘
4. em, rem
   em: 부모 크기 기준
   rem: 최상단 크기 기준

• 색상의 단위
  rgb, HEX

📗 안보이도록 하는 속성들 3가지 차이

1. display: none;

• 공간 차지 X
• 이벤트 적용 X
• 탭 눌렀을 때 focus X

2. visibility: hidden;

• 공간 차지 O
• 이벤트 적용 X
• 탭 눌렀을 때 focus X

3. opacity: 0;

• 공간 차지 O
• 이벤트 적용 X
• 탭 눌렀을 때 O

📕 display 속성들 차이

1. display: block

• 한줄 공간을 모두 차지한다, 너비 높이 가질 수 있다.
• 줄바꿈 처리가 자동으로 된다.

2. display: inline

• 한줄 배치되고, 너비 높이값을 가질 수 없다.
• 글자나 문장에서 특정 단어만 효과를 준다.

3. display: inline-block

• 한줄 배치되면서(inline 속성), 너비 높이값 가질 수 있다(block 속성).

📗 position 속성

1. position: absolute

• 부모 중에서 position: static이 아닌 부모를 찾아 그 부모를 기준으로 움직임. 아무도 없으면, 뷰포트 기준으로 움직임.

2. position: reletive

• 본인이 움직임

3. position: fixed

• 항상 페이지의 같은 위치에 있어야 할 때 사용함, 스크롤 위치와 상관없이 꼭 그자리에 있어야할 경우에 사용

4. position: sticky

• 구체적으로 보기에 스크롤하고 특정 지점에 도달하면 중지하려는 항목이 있을 때 사용함