03. CSS 복습

그동안 배웠던 css 복습타임 :-)
css는 별도의 css 파일에 분리하여 사용하는 것이 좋다.

---

CSS 선택자

• tag 선택자 : 문서 내 지명된 모든 태그에 적용
  ex) span, div로 해당 영역에 모두 명령하는 것
  
  
• class 선택자 : 문서 내 다수 요소에 동일하게 적용될 수 있는 class 속성에 따라 적용됨
  ex) <'h1 class="important"><'/h1>
  
  
• id 선택자 : 문서 내 유일한 요소에 적용될 수 있는 id 속성에 따라 적용
  (하나 이상 사용 금지)
  ex)<'section id="intro">
  
  
  -attr (속성) 선택자 : 태그의 속성과 그 값에 따라 적용

결합자

• 자손 결합자 :
  내부의 모든 요소를 선택.
  앞 선택자 뒤 스페이스를 두어 자손 요소들을 선택함
  
  html : <'div class="outer"></'div>
  css: div {
  padding: 24px;
  border: 1px solid black;
  }
  .outer div {
  background-color: green;
  }
  
  

• 자식 결합자 : 바로 안 단계의 요소를 선택. ' > ' 로 바로 자식만 선택

  ex) .outer > div {
  backgroud-color: red;
  }
  

- 인접 형제 (바로 다음 동생) 결합자 : 바로 안 단계의 요소들을 선택
-전체 선택자 : 모든 태그에 적용 특정 요소의 자손/자식으로 지정하지 않으면 body에도 적용 (section)

psudo(가상) 클래스

• 해당 부분은 github나 Google에서 보고 복습하자!

1. 부정 가상 클래스
.underline:not(.html상 부정으로 들어갈 변수 이름)

2. 순서 관련 가상 클래스
3. 마우스오버 가상 클래스

CSS 관련 기본 스타일

1. 글꼴, 글 관련 스타일

• font-famliy: 글꼴 그룹.
  사용자의 컴퓨터에 지정 폰트가 없을 경우를 대비하여 지정함
  ex) p { font-famliy:"맑은 고딕", 돋움, 굴림; }
  
• font-size : 글자 크기
  px (절대 크기: 모니터상의 한 점)
  em (상대 크기: 바로 윗 부모의 크기에 비례)
  rem (상대 크기: 최상위 조상의 크기에 비례
  
  
• font weight: 글자 굵기
  100-900 (절대값) , normal (일반굵기) bold,
  lighter,bolder (상속보다 얇거나 두껍게)
  
  
• font-style : 글자 스타일
  normal, italic, oblique (본 서체를 기울인 것)
  
  
• color : 글자 색
• text-decoration: 글자에 선 긋기
  class로 입력!
  underline, overline (윗줄), line-through(취소선)
  
  
• letter-spacing : 자간 조정
• text-align : 텍스트 정렬
  left, right, center, justify
• line-height: 행간
• list-style: ul 목록의 불릿 없애기
• opacity : 불투명도

상자 관련 스타일

• width, height : 높이와 너비
  px (절대 크기) % (상대 크기 : 바로 윗 부모의 크기에 비례)
  vw (상대 크기 : 뷰포트 너비의 1/100)
  vh (상대 크기 : 뷰포트 높이의 1/100)
  vmax (상대 크기 : 뷰포트의 너비, 높이 중 긴 쪽의 1/100)
  vmin (상대 크기 : 뷰포트 너비, 높이 중 짧은 쪽의 1/100)
  
  
• margin : 바깥쪽 여백
• padding : 안쪽 여백
• border : 테두리 선 (div)
  border: (선 굵기) (선 스타일) (선 색);
  solid (직선) dashed (점이 긴 점선) dotted (점선)
  div {
  margin: 24px;
  padding: 24px;
  border: 1px solid black;
  }
• border-radius : 둥근 모서리 (div)
• backgroud : 배경 (div)
  color, image, size, position, repeat
• box-shadow: 그림자
  box-shadow:(x축 위치)(y축 위치)(옵션)(색상)

css 레이아웃

• position : 위치 관련 스타일
  • static: 기본값 (span)
    span { font size,color, background-color,border}
  • relative : 상대적 배치 (nth-child)
    span {position: relative;}
    span:nth-child(1) {top: 12px;}
  • absolute : 절대적 배치
    족보상 가장 가까운, static이 아닌 조상 기준 상대적 위치에 배치
    <'div class="absolute_1"><'/div>
    <'div class="absolute_2"><'/div>
    
  • fixed : 고정 <'div class="tall"><'/div>
    스크롤에 영향을 받지 않으며 페이지 내 공간을 차지하지 않음
    
    
• display : 요소를 보여주는 방법 < div>
  • inline, block, inline-block
    기본 세팅 : body > div > * {
    background-color: red;
    }
  • display : none. 요소를 화면에 두지 않음 (자리차지x)
    display:hidden. 요소를 화면에 두되 보이지 않음 (자리 차지)
    opacity:0. 요소를 화면에 두고 불투명도를 0으로 (자리 차지)

css grid 레이아웃 (.wrapper)

• 부모요소를 grid 디스플레이로
  .wrapper {
  display: grid;
  }
• 열의 갯수와 크기 지정 : grid-template-colums
  절대값 (px) 비율 분할, 혼합 사용, 반복 지정 모두 가능
  ex) .wrapper {
  grid-template-colums : 100px 200px 300px;
  }
  .wrapper {
  grid-template-colums : 1fr 2fr 3fr 4fr;
  }
• 행의 갯수와 크기 지정 : grid-template-rows
  .wrapper {
  grid-template-colums: repeat(3,1fr);
  grid-template-rows: 100px 200px 300px;
  }
  
• 선 번호로 영역 지정 : <;div class="wrapper">
  grid-column, grid-row
• 이름으로 영역 지정 : grid-template-areas
• grid간 공간 띄우기
  .wrapper {
  gap: 10px;
  }