day4

📌정리

👉CSS 선택자
1. 전체 선택자 :
2. 태그 선택자 : 태그 (h1 span ...)
3. 클래스 선택자 : .클래스명 (.purpleText ...)
4. 아이디 선택자 : #아이디명 (#purpleText ...)
5. 속성 선택자 : 속성[속성명], 속성[속성명="속성값"] (a[target], a[target="_blank"])
6. 문자열 속성 선택자 :
[속성~=문자열] : 문자열이 포함되면
[속성|=문자열] : 문자열과 같으면
[속성^=문자열] : 해당 문자열로 시작하면
[속성$=문자열] : 해당 문자열로 끝나면
[속성=문자열] : 전체에서 해당 문자열이 포함되어 있으면

👉CSS 선택자 조합해서 사용
1. 그룹 선택 : , 로 구분

p, span, a {
	color: red;
}

2. 자식 선택 : > 로 선택

.group2 > p { 
	color: red;
}

3. 자손 선택 : 띄어쓰기 로 선택 (하위 범위 자식,자손들)

.group1 p {
	color: red; 
}

4. 인접 형제 선택 : + 로 선택 (바로 붙어있는 하나의 형제)

p + span {
	color: blue;
}

5. 형제 선택 : ~ 사용 (모든 형제)

p ~ span {
	color: green;
}

👉CSS 구조적 가상 클래스 선택자

자식태그:first-child 첫번째 자식
자식태그:last-child 마지막 자식
자식태그:nth-child(n) n번째 자식

자식태그:first-of-type 첫번째 자식 (특정 타입)
자식태그:last-of-type 마지막 자식 (특정 타입)
자식태그:nth-of-type(n) n번째 자식 (특정 타입) @

📖 단위

<절대적 크기>
1. px : 픽셀 (모니터 해상도별로 사이즈가 다르게 보임)

<상대적 크기>
2. em : 부모요소 대비
1em 동일, 2em 부모*2, 0.5em 부모/2
3. rem : html태그 기준 대비
1rem, 2rem, 0.5rem

4. vw : 화면 상대 크기 가로
   100vw (1280에서 100만큼)
5. vh : 화면 상대 크기 세로
   50vh (1080에서 50만큼)

📖 텍스트 속성

1. 색상

• 색상단어 : red, blue ...
• rgb 표기법 : rgb : 0 ~ 255
  rgb(62, 62, 199)
• rgba 표기법 : rgba(0,0 0,0)
  rgba -> a: 0 ~ 1 (불투명도)
• HEX 표기법 : 16진수 표기
  #2ac1bc
  0 1 2 3 ... a b c d e f

2. 글씨 크기
   font-size:
3. 글씨체
   font-family:
4. 글씨체 굵기
   font-weight:
5. 글꼴 스타일
   font-style:
6. 영어소문자 대문자로 바꿀때
   font-variant: small-caps;

📖 박스모델

👉1. margin 외부여백
margin-top
margin-right
margin-left
margin-bottom

margin: 20px;   4개(상하좌우) 모두 20px
margin: 10px 10px 20px 15px;  한꺼번에 적을 수 있다 
        top right bottom left
margin: 10px 20px;   위아래 여백, 좌우여백
      (top,bottom) (left,right)
      

👉2. padding 내부여백
(margin과 동일!)

👉3. content 내부 내용 요소
width: 가로길이
height: 세로길이
box-sizing: 박스 사이즈 기준 content-box , @ border-box => boder-box으로 놔야함! 지정된 너비와 높이에 테두리가 포함되도록 사용하므로!

👉4. border 테두리

border-width 테두리 두께(굵기)
border-style 선 스타일
border-color 선 색깔

border:1px solid black;   한꺼번에 적을 수 있다
     (width style color)
     

👉5. display 속성
display: inline block
inline-block

**inline** => 그 몸통까지만 차지 //width,height,top,bottom,margin 적용X

**block** => 한줄 차지 //width,height,top,bottom,margin 적용O

**inline-block** => inline 취급은 받는데 width,height,top,bottom,margin 적용O

🏆style 에서 이런식으로 쓰인다!

별 { /아예 처음에 이렇게 설정해놓고 하면 편하다!/
box-sizing: border-box;
margin: 0;
}

.box { /공통/
width: 100px;
height: 100px;
display: inline-block;
margin: 30px;
padding: 15px;
vertical-align: bottom; /수직정렬 기준 -> 정렬기준이 박스아래/
}