4. firstchild : 선택자 abc가 형제 요소 중 첫째라면 선택

ex) .fruits span:first-child {color: red;} 일경우, 여기서 span태그와 :first-child는 붙어있어서 일치선택자이다.

• 뒤에서부터 해석하면 첫번째 태그인데, span 태그여야한다는 뜻
• .fruits가 span 태그와 띄어쓰기 되어있기 때문에 하위 (자식)요소여야한다는 뜻.

<div class=”fruits”>

<span>딸기</span>

<span>사과</span>

<span>포도</span>

<h3> 망고</h3>

</div>

• 결국 여기서 딸기를 가리킴.

1. last-child :

선택자 abc가 형제 요소 중 막내라면 선택

.fruits h3:last-child {color: red;}

• 위에서보면 망고를 가리킴

2. nth-child

선택자 abc가 형제요소중 n째라면 선택

(1) .fruits *:nth-child(2) {color: red;}

• fruits에서, 전체에서, 2번째인경우를 찾는다는 뜻.
• 위에서 보면 사과를 가리킴

(2) .fruits *:nth-child(2n) {color: red;}

• n은 0부터 시작
• 2의배수(2,4,6,8)짝수번째의 요소를 가리킨다는 뜻

(3) .fruits *:nth-child(2n+1) {color: red;}

• 홀수번째의 요소를 가리킨다는 뜻

(4) .fruits *:nth-child(n+2) {color: red;}

• 0+2=2, 1+2=3, 2+2=4, 3+2=5 이런식으로 2부터 출력이 된다. 그래서
• 1번째것 제외하고 두번째것부터 전체다를 가리킨다는 뜻.
• 이런식으로 3으로 바뀌면 2번째부터 그 이후를 가리킨다.

(5) .fruits *:nth-child(-n+3) {color: red;}

• 0+3=3, -1+3=2, -2+3=1 까지 앞에서 3개의 요소를 나타낸다.

(6) .fruits *:nth-child(3n+4)

• 4 [=(3×0)+4], 7 [=(3×1)+4], 10 [=(3×2)+4], 13 [=(3×3)+4], ... 번째의 요소를 나타냅니다.

(7) .fruits p:nth-child(n) {color: red;}

• p전체를 다 가리킨다는 뜻 .

(8) .fruits p:nth-child(n+8):nth-child(-n+15) {color: red;}

• 자식 그룹 내에서 8번째부터 15번째 까지의 <p>
  요소를 나타냅니다.
  

not 부정선택자 :

선택자 xyz가 아닌 abc 요소 선택

.fruits *:not(span) {color: red;}

• 뒤에서부터 보면 , span 태그 말고, 전체 다를 뜻하고, fruits 태그안에 있어야한다를 뜻함.

<div class=”fruits”>

<span>딸기</span>

<span>사과</span>

<span>포도</span>

<h3> 망고</h3>

</div>

• 여기서 망고를 뜻한다.

가상요소:

1. before :

선택자 abc요소의 내부앞에 내용을 삽입

.box::before {content: “앞!”;}

• 가상의 인라인요소를 만들어서 내부 앞에 “앞!”을 넣는다는 뜻

2. after :

선택자 abc요소의 내부 뒤에 내용을 삽입

.box::before {content: “뒤!”;}

<div class=”box”>

content

___←이자리에 “뒤!”가 들어감.

</div>

• before와 after는 무조건 사용하지 않더라도 content를 꼭 같이써야함.(content:””; ←이거라도 넣어야함)

인라인속성은 아무리 무엇을 지정을 해도 안되는 특성을 가짐. 그래서 display를 block으로 바꿔줘야함.

속성:

1. ATTR:

• 속성 abc를 포함한 요소 선택

[disabled] { color: red;}
    
ex) <input type=”text” value=”ABCD” disabled> 

<input type=”password” value=”1234”>

이렇게 있다고 가정하면, 첫째줄을 가리킨다는 뜻.

  [type] { color: red;}

• 위에 중에서 둘 다를 가리킴.

2. ATTR = VALUE:

   속성 abc을 포함하고 값이 xyz인 요소 선택

 [type=”password”] {color: red;}

• 여기서 “type=”password”는 패스워드를 적을 때 안보이게 점점점으로 나오는게 “type=”password”의 역할
  • 위에 중에서 2번째줄을 가리킴

스타일 상속

상속 = 부모님으로 부터 재산을 상속받는다와 비슷함.

적용된 스타일들이 자식이나 하위로 상속되어 적용되는 것

모두 글자/문자 관련 속성들!

font 관련된 속성 (font-style, font-weight,font-size등 )

color, text-align 등

강제상속

inherit = 부모로부터 상속받기

선택자 우선순위

같은 요소가 여러 선언의 대상이 된 경우, 어떤 선언의 css 속성을 우선 적용할지 결정하는 법

1. 점수가 높은 선언이 우선함.
2. 점수가 같으면, 가장 마지막에 해석된 선언이 우선함.

• !important : 그 속성의 값은 무한대점이라는 뜻 , 중요도라고 부름. 우선 피하는게 좋음(한번 사용하면 계속 사용해야함)
  • style: 스타일에 html에 적으면 우선적으로 적용됨(1000점), 우선 피하는게 좋음. (인라인 방식)
  • body 태그는 점수를 매기지 않음, 속성이 되기는 한다.지정이 되어있을 경우.
  • 요소 = 태그
  • 클래스(10점)보다 id(100점)가 먼저이다, 태그는 1점 그리고 동일한 요소가 있으면 나중에 적힌것이 적용된다.

개요

• 속성

• 박스모델

• 글꼴 문자

• 배경

• 배치

• 정렬

• 전환

• 변환

• 띄움 (공중에)

• 애니메이션

• 그리드
  

• 다단 (2단, 3단 등)
  

• 필터 (블러blur, grayscale흑백효과, reverse반전)
  

너비 (width, height)

1.width,height

auto : 기본값 , 브라우저가 너비를 계산

단위: px, em, vw 단위로 지정

역할: width는 요소의 가로너비 , height는 요소의 세로너비

• span 요소 : 대표적인 인라인 요소 ! 가로넓이가 줄어들려고 함.본질적인 아무것도 나타내지 않은, 콘텐츠 영역을 설정하는 용도.
• div 요소 : 대표적인 블록요소, 가로넓이가 늘어나려고 함. 본질적으로 아무것도 나타내지 않는, 콘텐츠 영역을 설정하는 용도.
  
• 인라인요소 : 무엇을 지정해도 적용이 안됨. 글자를 제어하기 위한 것임.
  
• max-width, max-height
  • none: 최대 너비 제한 없음.
    
  • auto: 브라우저가 너비를 계산.
    
  • 단위 : px,em,vw등 단위로 지정.
    
• min-width, min-height
  • 0 : 최소 너비 제한 없음. 단위를 지정하지 않아도 됨.
    
  • auto: 브라우저가 너비를 계산
    
  • 단위 : px,em,vw등 단위로 지정.
    

css 단위

 - px 픽셀, 하나의 점을 의미
    
 -  %  상대적 백분율
    
 - em 요소의 글꼴 크기(예, 글꼴크기가 16이고, width를 10em으로주면 16 x 10=160이 된다.)
    
 - rem 루트 요소의 글꼴 크기(html요소를 보고 나타냄) 
    
 -  vw 뷰포트 가로 너비의 백분율, width
    
 - vh 뷰포트 세로 너비의 백분율, height 
    
 -  *모든 폰트 사이즈는 16이다.
    

외부여백

margin

  - 요소의 외부여백(공간) 을 지정하는 단축 속성
    
  - 음수를 사용할 수 있다.
    
  - 가로(세로) 너비가 있는 요소의 가운데 정렬에 활용해요.
    
  -  0 외부여백 없음.
    
  - auto 브라우저가 여백을 계산
    
  - 단위 px, em, vw 등 단위로 지정 
    
  - margin-bottom 아래쪽에만 여백을 줌.
    
  - top, right, bottom, left
    
    1개를 작성하면, 모두
    
    두개를 작성하면 위아래, 좌우를 뜻함.
    
    3개를 작성하면, top, 좌우, 아래
    
    4개를 작성하면, top,right,bottom,left
    
    margin-방향 = 개별속성 
    

내부여백

= padding 요소의 내부여백(공간)을 지정하는 단축속성 
    
 - 0 : 내부여백 없음
    
 - 단위 px,em,vw 등 단위로 지정
    
 - % 부모 요소의 가로너비에 대한 비율로 지정 
    
  - top,right,bottom,left
    
    1개를 작성하면, 모두
    
    2개를 작성하면, 위아래, 좌우
    
    3개를 작성하면, 상, 좌우, 하
    
    4개를 작성하면  top,right,bottom,left
    
  - 요소의 내부 여백을 지정하는 기타 개별 속성들.
    
  - 요소의 크기가 늘어남.
    

테두리선과 색상 표현

1. border: 선-두께 선-종류 선-색상

    - border-width, border-style, border-color
    = 요소의 테두리 선을 지정하는 단축속성
  	- 요소의 크기가 커짐.
    ex) border : 10px solid orange.
    

2. border-width 요소 테두리 선의 두께

    - medium 중간 두께
    
    - thin 얇은 두께
    
    - thick 두꺼운 두께
    
    - 단위 px, em,% 등 
    
    - 1개를 작성하면, 모두
    - 2개를 작성하면, 위아래, 좌우
    - 3개를 작성하면, 상, 좌우, 하
    - 4개를 작성하면  top,right,bottom,left
    
   

3. border-style

    - none 선 없음
    
    - solid 실선
    
    - dashed 파선
    
    - detted 점선
    
    - double 두줄 선 
    
    - groove 흠이 파여있는 모양
    
    - ridge 솟은 모양
    
    - inset 요소 전체가 들어간 모양
    
    - outset  요소  전체가 나온 모양 
    
    - 1개를 작성하면, 모두
    - 2개를 작성하면, 위아래, 좌우
    - 3개를 작성하면, 상, 좌우, 하
    - 4개를 작성하면  top,right,bottom,left
    

4. border-color

    = 요소 테두리 선의 색상을 지정하는 단축 속성
    
    - black 검정색
    
    - 색상 선의 색상
    
    - transparent 투명
    
    - 1개를 작성하면, 모두
    - 2개를 작성하면, 위아래, 좌우
    - 3개를 작성하면, 상, 좌우, 하
    - 4개를 작성하면  top,right,bottom,left
    

5. 색상표현

    색을 사용하는 모든 속성에 적용 가능한 색상 표현
    
    border-방향 -속성
    
    border-top : 두께 종류 색상;
    
    border-top-width: 두께
    
    border-top-style: 종류
    
    border-top-color: 색상
    
    border-bottom: 두께 종류 색상;
    
    border-bottom-width: 두께
    
    border-bottom-style: 종류;
    
    border-bottom-color: 색상;
    
    border-right: 두께 종류 색상;
    
    border-right-width: 두께;
    
    border-right-style: 종류;
    
    border-right-color: 색상;
    

6. border-radius

    - 요소의 모서리를 둥글게 깎음.
    
    - 0 둥글게 없음
    
    - 단위 px, em, vw
    
    - bordr-radius: 0 10px 0 0;
    
    - 왼쪽부터 시계방향으로 원하는 모서리만 깎임.
    

크기 계산

1.box-sizing

    = 요소의 크기 계산 기준을 지정
    
    - contentbox 요소의 내용(content)으로 크기 계산, 수동으로 바꿔줘야함. 기본값
    
    - border-box 요소의 내용+ padding+ border로 크기계산, 알아서 계산됨.
    

넘침 제어(overFlow)

    - overflow  요소의 크기 이상으로 내용이 넘쳤을 때, 보여짐을 제어하는 단축속성.
    
    - visible 넘친 내용을 그대로 보여줌. 기본값 
    
    - hidden 넘친 내용을 잘라냄
    
    - scroll  넘친 내용을 잘라냄. 스크롤바 생성
    
    - auto 넘친 내용이 있는 경우에만 잘라내고 스크롤바 생성
    
    - 요소의 크기 이상으로 내용이 넘쳤을 때 , 보여짐을 제어하는 개별 속성들 
    
    - overflow-x
    
    - overflow-y
    

출력 특성 (display)

    - block 상자(레이아웃) 요소
    
    - inline(글자요소)
    
    - inline-block 글자 + 상자 요소
    
    =  각요소에 이미 지정되어 있는 값
    
    -----------------------------------------
    
    flex 플렉스 박스(1차원 레이아웃)
    
    grid 그리드 (2차원 레이아웃)
    
    none 보여짐 특성없음. 화면에서 사라짐.
    
    = 따로 지정해서 사용하는 값
    
    ----------------------------------------
    
    기타 table, table-row, table-cell 등 ,,,
    

투명도

    - opacity 요소의 투명도
    
    - 1 불투명 
    
    - 0-1 0부터 1사이의 소수점 숫자
    
    - 5 : 앞에 소수점 생략가능 
    

글꼴

1. font-syle

    = 글자의 기울기 
    
    - nomal 기울기 없음
    
    - italic 이텔릭체
    
    - oblique 기울어진 글자
    

2. font-weight

    = 글자의 두께 (가중치)
    
    - nomal400 기본 두께 
    
    - bold700 두껍게 
    
    - bolder 상위(부모) 요소보다 더 두껍게
    
    - lighter 상위(부모)요소보다 더 얇게 
    
    - 100-900 100단위의 숫자 9개, nomal 과 bold이외 두께 
    

3. font-size

    - 글자의 크기
    
    - 16px 기본크기 
    
    - 단위 px,em,rem 등 단위로 지정
    
    - % 부모 요소의 폰트 크기에 대한 비율
    
    - smaller 상위(부모)요소보다 작은 크기 
    
    - larger 상위(부모)요소 보다 큰 크기 
    
    - xx-small~xx-larger 가장작은크기 ~ 가장 큰 크기 까지 7단계의 크기를 지정 
    

4. line-height

    - 한줄의 높이, 행간과 유사 
    
    - normal 브라우저의 기본 정의를 사용
    
    - 숫자 :요소의 글꼴 크기의 배수로 지정(16px (내가 지정한 숫자) x 1.4가 됨)
    
    - 단위 : px,em,rem 등의 단위로 지정
    
    - % 요소의 글꼴 크기의 비율로 지정 
    
    	ex) font-size: 16px;
    
    	line-height: 32px;
    
    	line-height: 2; = 숫자만 지정하면 배수가 됨 (=2배) = 32px, 200%
    
    	배수의 개념을 이용하면 좋음, 안그럼 그때마다 바꿔줘야함.
    
    	line-height: 200%; =(100%= 1배, 200% =2배)=32px,2;
    
    	line-height = 100px = 수직정렬
    

5. font-family: “글꼴1”, “글꼴2”, 글꼴 계열(필수작성)

    = 글꼴(서체) 지정 
    
    - 띄어쓰기 등 특수문자가 포함된 글꼴 이름은 큰 따옴표로 묶어야합니다.
    
    - serif  바탕체 계열
    
    - sans-selif  고딕체 계열
    
    - monospace 고정너비(가로폭이 동등)글꼴 계열
    
    - cursive 필기체 계열
    
    - fantasy 장식 글꼴 계열 
    

문자

1. color

    = 글자의 색상 
    
    - rgb(0,0,0) 검정색
    
    - 색상 기타 지정 가능한 색상
    

2. text-align

    - 문자의 정렬방식 
    
    - left 왼쪽 정렬 
    
    - right 오른쪽 정렬 
    
    - center 가운데 정렬
    
    - justify 양쪽 정렬 
    

3. text-decoration

    = 문자의 장식(선)
    
    - none 장식 없음
    
    - underline 밑줄 
    
    - overline 윗줄
    
    - line-through 중앙선 
    

4. text-indent

    = 문자 첫줄의 들여쓰기
    
    -  음수를 사용할 수 있음,반대는 내어쓰기 (outdent)입니다.
    
    - 0 들여쓰기 없음
    
    - 단위 px,em,rem 등 단위로 지정 
    
    - % 요소의 가로 너비에 대한 비율
    

배경

1. background-color

      = 요소의 배경색상 

      - transparent 투명함

      - 색상 지정가능한 색상 

2. background-image

      = 요소의 배경 이미지 삽입 

      - none 이미지 없음 

      - url(”경로") 이미지 경로
    

3. background-repaeat

      = 요소의 배경 이미지 반복

      - repeat 이미지를 수직, 수평 반복 

      - repeat-x 이미지를 수평 반복 

       - repeat -y 이미지를 수직 반복 

      - no-repeat 반복 없음 
    

4. background-position

      = 요소의 배경이미지 위치

      - 0% 0% = 0% ~100% 사이값

      1. 방향: top, bottom, left,right,center 의 방향 (방향 1, 방향 2 top, right)
      2. 단위 px,em,rem,등 단위로 지정 (x축, y축 100px,30px)
    

5.background-size

      = auto 이미지의 실제 크기

      - 단위 px,em,rem 등 단위로 지정 

      - cover 비율을 유지, 요소의 더 넓은 너비에 맞춤

      - contain  비율을 유지, 요소의 더 짧은 너비에 맞춤
    

6. background-attachment

      - scroll 이미지가 요소를 따라서 같이 스크롤

      - fixed 이미지가 뷰포트에 고정, 스크롤 x

      - local 요소 내 스크롤시 이미지가 같이 스크롤 (사용 xxx)