[22-23 동계 모각코] 6회차 목표 및 결과

목표

6회차: 23/02/15 14:00~18:00
계획: CSS 기본 정리 (3)
목적: React 사용을 위함
방향: CSS의 기본 문법을 정리

결과

기본 문법

선택자

선택자 {
	선언;
    선언;
    선언;
}

• CSS에서 맨 앞에 적는 것
• 규칙을 어떤 요소에 적용할지 선택

선택자 목록

선택자1,
선택자2 {
	...
}

• 콤마(,)로 선택자를 연결하면 여러 선택자에 같은 규칙을 적용

선택자 붙여쓰기

<h2 id="mongolia" class="large title">몽골 대자연으로 떠나는 여행</h2> 

아이디 + 클래스

#mongolia.title

클래스 + 클래스

.large.title

태그 + 아이디 + 클래스

h2#mongolia.large.title

• 여러 조건을 동시에 만족하는 요소를 선택할 때 선택자를 붙여서 쓸 수 있음

자식 결합자(Child Combinator)

<div class="article">
  <img src="tesla-y-2025.png">
  ...
</div>

.article > img {
  width: 100%;
}

• 오른쪽 꺾쇠(>)로 선택자를 이어 줌
• 코드가 많아지면 나중에 혼동될 수 있어 선호되지는 않음

자손 결합자(Descendant Combinator)

<div class="article">
    <p> 이번에 리뷰해 볼 차량은 테슬라 모델 W 입니다.
      <img src="tesla-w-2025.png">
  </p>
  ...
</div>

.article img {
  width: 100%;
}

• 스페이스(띄어쓰기)로 선택자를 이어 줌
• 코드가 많아지면 나중에 혼동될 수 있어 선호되지는 않음

가상 클래스(Pseudo-class)

a {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

• 요소의 상태를 선택할 때 사용하는 클래스
• 선택자 뒤에 콜론(:)을 붙여 사용
• :hover: 마우스를 올렸을 때 밑줄이 생김
• :active: 클릭한 상태
• :visited: 방문한 적이 있는 링크
• :focus: 포커싱 됐을 때

전체 선택자(Universal Selector)

* {
  box-sizing: border-box;
}

• *: 모든 요소를 선택

.gallery > * {
  width: 120px;
  height: 90px;
}

• .gallery의 모든 자식 요소를 선택

캐스케이드(Cascade)

• 계단식 폭포처럼 CSS 규칙을 순서에 따라 합쳐서 적용
• 종속이라고도 함
• 우선순위가 높은 규칙일수록 우선적으로 속성을 적용
• 브라우저에서 기본으로 제공하는 스타일 시트(User Agent Stylesheet)는 작성된 코드보다 우선순위가 낮음
• 코드에서 아래 쪽에 쓴 코드일수록 우선순위가 높음
• 선택자는 명시도(선택자마다 우선순위를 매기기 위한 점수로 아이디 개수, 클래수 개수, 태그 개수로 구성됨) 점수를 비교해서 우선순위를 매김
• 가까운 조상에게서 물려받은 속성일수록 우선순위가 높음