[GitHub Clone] 공통 설정

CSS 최상위 요소, BEM

<div class="body__container"> 
  <!-- body 대신 전체 영역에서 사용할 div 요소   -->

.body__container {
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #333; /*완전 검은색 x*/
}

❓ 언더바 2개 __ ?

BEM
CSS 작명 규칙

- 일반적인 단순 작명 <div class="togle-btn"></div>

-- ~의 상태
btn danger
btn warning
<div class="btn--success"></div>
<div class="btn--danger"></div>

__ ~의 일부분

<div class="container">
    <div class="container__item"></div>
</div>

item은 container class의 자식 요소로 container의 일부

전역스타일

버튼

전역에서 반복적으로 사용되는 요소 (input, btn)

<div class="btn">Hello world</div>

.btn{
  height:34px;
  background:#eee linear-gradient(to bottom, #fcfcfc, #eee);
  border: 1px solid #d5d5d5;
  border-radius:5px;
  display:inline-flex;
  align-items:center; 
  padding: 0 12px;
  font-size: 14px;
  font-weight: 500;
  line-height:1.5;
  cursor:pointer;
  box-sizing: border-box;
  position:relative;
}

display:inline-flex;
display:flex는 기본적으로 block요소처럼 만들어지는데
inlin-flex로 변경하면 inline 요소처럼 그 안에 들어있는 컨텐츠 너비 만큼만 축소 가능!
그리고 padding으로 좌우 여백만 수정

box-sizing: border-box;
padding이나 border가 들어갔을 때 사이즈 커지는 기능 막아주는 속성

.btn:hover::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.07);
      }

::before : button에 마우스를 올리면 이 버튼 앞쪽에 특정한 요소를 이렇게 만든다?

position: absolute 기본적으로 버튼의 절대 위치
abosolute 속성 쓰면 부모요소에 반드시 position:relative 필요
top, left, width, height 모두 부모요소를 기준으로 위치 변경 말하는 것
background: rgba(0, 0, 0, 0.07): 7%의 검정색 투명도!

가상클래스 & 가상요소

가상클래스

:focus
:hover
...
선택될 요소(element)의 특별한 상태를 지정하는 선택자(selector)에 추가된 키워드


탐색기 히스토리 (가령, :visited), 콘텐츠 상태(일부 폼 요소의 :checked 같은) 혹은 마우스 위치 (마우스가 요소 위인지 알 수 있는 :hover 같이)처럼 외부 요인(factor) 관련 요소에 스타일을 적용

가상요소

가상 클래스(pseudo-classes)처럼, 가상 요소(pseudo-element)는 선택자(selector)에 추가되지만 특별한 상태를 기술하는 대신, 문서의 특정 부분을 스타일

가상요소 종류
**::first-line

요소의 텍스트에서 첫 줄에 스타일 적용

::first-letter
요소의 첫번째 글자에 스타일 적용

::before
요소의 시작부분에 콘텐츠 추가

::after
요소의 끝부분에 콘텐츠 추가

::selection
사용자가 드래그 한 영역의 속성을 변경

::placeholder
input 필드의 힌트 텍스트에 스타일 적용

::after와 ::before쓸때 유의할 점
꼭 content속성과 같이 써줘야한다.

:before 와 ::before의 차이
차이는 없다. 오히여 더블콜론(::)::before을 쓴다면 ie8 이하 버전은 적용이 되지 않기 때문에 클론 하나만(:):before 쓰는 것이 좋다고 볼 수 있다.

content속성
content는 가짜 속성
html문서에 정보로 포함되지 않은 요소를 css에서 새롭게 생성하기 때문

content 속성의 종류

normal 아무것도 표시하지 않는 기본값

string 문자열 생성

image 크기조정 불가능

none 아무것도 표시 안함

attr 해당 속성의 속성값 표시