💡CSS 기본 문법

• selector
• property 혹은 attribute
• value

selector{
  property1: value1;
  property2: value2;
}

• CSS작성 팁: html의 계층 구조에 따라 css를 순서대로 작성한다.

💡CSS선택자

<선택자 종류>

📌태그 선택자

p{
	text-align: center;
	color: red;
}

📌클래스 선택자(.)

.center{
	text-align: center;
	color: red;
}

📌아이디 선택자(#)

#center{
	text-align: center;
	color: red;
}

📌태그와 함께 쓰는 선택자

p.center{
	text-align: center;
	color: red;
}

▶️p태그 선택자와 .center 클래스 선택자를 함께 쓴 것이다.
p태그 중 center 클래스를 가지는 것에만 스타일이 적용된다.

📌그룹 선택자
두 개의 선택자의 css코드가 완벽히 일치하면 다음과 같이 표현할 수 있다:

h1, p{
	text-align: center;
	color: red;
}

📌하위 선택자
p 태그 안에 들어있는 태그에 스타일을 적용하고 싶을 때 사용한다.
(이 경우 p태그의 하위 요소인 span 태그에 적용하고 싶을 때)

p span{
	text-align: center;
	color: red;
}

📌전체 선택자(global selector)
html의 모든 요소를 선택할 때 사용한다. (대부분의 경우 사용하지 않음)

*{
	Font-size: 14px;
	Line-height: 24px;
}

📌css주석
원하는 부분을 선택한 후 ctrl + / 누르면 주석이 생성된다. 다시 누르면 주석이 해제된다.
Indent를 유지하면서 주석을 달고 싶은 경우 ctrl+shift+ / 누른다.

/*This is a single-line comment*/

📌html 주석

<!--주석내용-->

💡CSS적용 우선순위

1. !important Style-css 속성 끝에 작성
2. Inline style –html에 작성
3. ID selector style
4. class selector style
5. tag selector style

   css 코드 작성 순서에 관계없이 위의 위계를 따라 스타일이 적용된다.

▶️내용이 요소의 크기를 벗어났을 때 감추기

overflow: hidden; 

▶️스크롤할 때 배경 이미지 부착 여부를 지정: 움직이지 않고 고정

background-attachment: fixed;

💡CSS 기본 서식 스타일

• font-size: 텍스트의 크기 지정
  -value: px em pt % rem
  -rem은 반응형 웹 만들 때 사용한다.
• font-weight: 글꼴 두께
  -100-900 bold bolder lighter normal(400=normal, 700=bold)
  -기본적으로 굵은 글씨체를 원래대로 얇게 만들려면 font-weight: normal;

  font-weight: normal;

• line-height: 줄 간격을 지정하는 특성
-일반적으로 em 단위를 사용(1.6em 가장 많이 사용)한다.
-보통 body 태그에 포함한다.
-value: px em pt % rem(rem은 반응형 웹 만들 때 사용)
• font-family: 글꼴을 지정하는 속성
-value: font name

• font-style: 문자 스타일(ex. 기울림체)
-value: normal italic oblique

• color: 글꼴 색을 지정하는 속성
-value: color name #000000 rgb(0,0,0) rgba(0,0,0,0.5)
-rgba의 마지막은 투명도를 지정하는 요소이다.
• text-decoration: 텍스트 줄 표시/제거
-text-decoration: none; 을 사용해 기본적으로 밑줄이 쳐서 나타나는 a tag의 밑줄을 없앨수도 있다.
-value: none underline(밑줄), overline(윗줄), line-through(취소선)

• text-transform: 텍스트를 대문자 및 소문자로 변환
-value: none capitalize(단어의 첫글자를 대문자화), uppercase(모든 글자 대문자화), lowercase(모든 글자 소문자화)

• text-align: 문자 정렬 방법을 지정하는 속성
-value: center left right justify(양쪽을 균등하게 배치)

• text-shadow: 텍스트 그림자 효과
-value(1): x축 거리,y축 거리, 퍼짐 거리 정도, 색상
▶️값 4개 모두 지정해야 함
-value(2): none

• list style: list의 bullet point를 프로그래머가 원하는 아이콘으로 넣을 수 있다.

▶️before 가상클래스를 사용해 원하는 bullet-point 넣기

.class li:before{
	Content: ‘임티’;
} 

💡HTML 부모요소 vs 자식요소, CSS 자손선택자 vs 자식선택자

• 자식은 바로 밑의 요소인 것이다. 그보다 하위 요소는 '자식'이 아닌 '자손'이다.
• 자손선택자는 스페이스 사용, 자식선택자는 >(child selector)사용
• 자손선택자는 해당 하위 요소 전체를 가리킨다.
• 바로 아래 계층의 자식만을 선택하고 싶다면 >를 선택해야 한다.
  ▶️ html

  <div class=”box”>
  	<div>
  		<div></div>
  	</div>
  </div>

  ▶️css

  .box{
  	Border: 1px solid red;
  	Width: 400px;
  	Height: 400px;
  }
  .box > div{
  	Border: 1px solid blue;
  	Width: 200px;
  	Height: 200px;
  	Padding: 20px;
  }
  .box > div div{
  	Width: 50px;
  	Height: 50px;
  	Background-color: #000;
  }