2023.05.03 CSS 기본 개념

14강 + 숙제

nth-child(n) 셀렉터

: n번째 등장하는 요소만 스타일링 할 때 사용

td 하나로 합치기

colspan = “5” → 5개의 셀을 합쳐주세요.

cursor: pointer → 버튼을 눌렀을 때 커서가 변경됨

pseudo-style

• :hover → 마우스 올릴 때 스타일 변경
• :active → 클릭 중 스타일 변경
• :focus → 커서 찍혀있을 때 스타일 변경

pseudo-style (a 태크)

• :link → 방문 전 링크 스타일링
• :visited → 방문 후 링크 스타일링

순서가 중요함

:hover → :focus → :active 순서로 함

pseudo-class 특징

• 거의 모든 스타일을 넣기 가능

Object Oriented CSS

코드양 줄어드는 class 작명법

→ 뼈대용 class, 살점용 class 각각 제작

<button class="main-btn bg-red">버튼</button>
<button class="main-btn bg-blue">구매하기</button>

.main-btn {
  padding: 15px;
  font-size: 20px;
  border: none;
  cursor: pointer;
}
.bg-red {
  background: red;
}
.bg-blue {
  background: blue;
}

Utility class 만들어 두면 편함

→ 스타일 한 두개만 들어 있는 class

<button class="main-btn bg-red f-lg">버튼</button>
<button class="main-btn bg-blue">구매하기</button>

.f-smaill {
  font-size: 12px
}
.f-mid {
	font-size: 16px;
}
.f-lg {
	font-size: 20px;
}
.main-btn {
  padding: 15px;
  font-size: 20px;
  border: none;
  cursor: pointer;
}
.bg-red {
  background: red;
}
.bg-blue {
  background: blue;
}

class 작명 할 때 힘들면 BEM(Block_Element—modifier) 룰을 따라하면 된다.

class=”덩어리__역할

<div class="profile">
  <img class="profile__img">
  <h4 class="profile__title"></h4>
  <p class="profile__content"></p>
<button class="profile__button--red">버튼1</button>
<button class="profile__button--blue">버튼2</button>
</div>

React, Vue를 쓰면 덩어리(Component) 단위로 HTML 파일 나눠서 코드 짬 + Componet에만 사용 가능한 CSS 생성 가능

 

 

---------------------

아직은 코드 구성하는게 힘들지만, 그래도 개념정도는 생각이 나고있다.. 더 열심히 해야겠다