[230313] 스프린트 회고 | button | 동적 가상 선택자 | 속성 선택자 | transform | 웹페이지 렌더링 | transition | animation

📌 스프린트 회고_1

좋은 개발자로서 어떤 역량들을 길러야 할까?
내가 잘 기르고 있는건가?

✔ 더 자주, 더 빠른, 더 꾸준한 ‘피드백’ 필요

멋사 수료 후 기업/회사에서 개발자로서 활동하는게 목표

회사가 개발자에게 요구하는 역량들을 중심으로 고민을 시작하고 피드백을 받으면
훨씬 더 중요한 역량부터 빠르게 피드백을 받아갈 수 있음

"이런 회사에 가고 싶다" → "내가 OO을 ‘기여’할 수 있는 회사에 가고 싶다"
회사는 부트캠프가 아니라 기여해야하는 공간. 능동형으로 문장 바꿔보기

개인의 커리어 성장이 가능한 회사
→ 개인의 커리어 성장을 가능하게 하여 회사의 성장에 기여할 수 있는 회사

멋사 수료 후 나는 어떤 상태이면 만족스러울지
목표를 달성했지만 불만족스러운 경우와 목표를 달성하지 못했지만 만족스러운 경우 고려해서
목표 세워보기

1. 단순 기록이 아니라 이해를 1순위로 매일 블로그 작성하기
2. 자바스크립트 스터디 참여하기, 코테 문제 매일 2개 이상 풀기
3. 개인, 팀 프로젝트 완성도 있게 진행하기

---

내가 개발자로서 얻고자 하는 역량을 회사의 요구에 맞춰서 생각해보는 것 자체가 좋은 피드백이 되는 것 같다. 부족한 것들을 미리 준비할 수 있으니까! 취업하려고 할 때 찾아보면 마음만 불안했을텐데 미리 할 수 있어서 좋은 기회인 것 같다:) 그리고 내가 멋쟁이사자처럼 프론트엔드스쿨로 무엇을 얻고 싶은지 다시 한 번 생각해볼 수 있는 시간이었다 👍🏻👍🏻

📝 button

• button
  클릭했을 때 아무것도 하지 않는다
  JavaScript와 연결하여 사용한다
  💡 양식 제출용이 아니라면 타입을 꼭 button으로 지정해야 한다!
• submit : 서버로 양식 데이터를 제출한다
• reset : <input type="reset"> 과 동일하게 초깃값으로 되돌린다
• disabled : 누르거나 클릭하는 것을 막는다
  ex) 필수 입력정보를 다 입력하지 않았을 땐 disabled, 입력한 후 해제 처리

💡 무엇을 써야할까?

<input type=”button” value=”버튼”>

<button type=”button”>버튼</button>

input
빈 태그 요소이기 때문에 value 특성에 텍스트 값 밖에 지정할 수 없다

button 👍🏻
여는 태그와 닫는 태그 사이에 여러 컨텐츠 삽입, ::before, ::after 와 같은 가상 요소를 사용하는 것도 가능하다

💡 a vs button

	a	button
역할	하이퍼링크	사용자의 동작 실행을 위한 트리거
기능	다른 페이지 혹은 페이지 내의 특정 영역으로 이동	브라우저 기본동작 없음 JS를 이용하여 동작 추가 (submit: form 전송 / reset: form 초기화)
키보드	엔터	스페이스, 엔터
shift + 클릭, ctrl + 클릭	이동 O	이동 X
마우스 우클릭	링크 관련	기본

🎨 CSS 선택자

동적 가상 선택자

:active

누르고 있는 동안

:visited

웹브라우저의 방문기록 정보를 사용한다

:disabled

비활성화된 요소

:hover

:focus

focus 받은 상태

:checked

input(checkbox, radio 등)이 선택된 상태

속성 선택자

[속성이름]

해당 속성을 가진 요소 모두 선택

[title]{
	text-decoration:underline;
}

[속성이름~="속성값"] 선택자

특정 문자열로 이루어진 단어를 포함하는 요소를 모두 선택

[class~="btn"]{
	text-decoration:underline;
}

class="btn"
class="btn reset"
class="reset btn"
class="btn-negative"
class="btn-positive"

[속성이름|="속성값"] 선택자

특정 문자열만 포함하거나 특정 문자열로 시작하면서 바로 하이픈 - 기호가 있는 태그

[class|="btn"]{
	text-decoration:underline;
}

class="btn"
class="btn reset"
class="reset btn"
class="btn-negative"
class="btn-positive"

[속성이름^="속성값"] 선택자

특정 문자열로 시작하는 요소를 모두 선택

[class^="btn"]{
	text-decoration:underline;
}

class="btn"
class="btn reset"
class="reset btn"
class="btn-negative"
class="btn-positive"

[속성이름$="속성값"] 선택자

특정 문자열로 끝나는 요소를 모두 선택

[class$="negative"]{
	text-decoration:underline;
}

class="btn-negative"
class="btn-negative error"
class="error btn-negative"
class="message-negative"
class="message-negative-error"

[속성이름*="속성값"] 선택자

특정 문자열를 포함하는 요소를 모두 선택합니다.

[class*="btn"]{
	text-decoration:underline;
}

class="btn-a"
class="a-btn"
class="eeebtneee"

🎨 transform

• scale
  요소의 크기를 조절할 수 있다
  기본적으로 자신의 가운데를 중심으로 크기가 변경된다
  transform-origin 을 통해 기준점을 변경할 수 있다

• rotate
  요소를 회전시킬 수 있다
  180deg 혹은 0.5turn 과 같은 형태로 사용할 수 있습니다
  기본적으로 자신의 가운데를 중심으로 회전된다
  transform-origin 을 통해 기준점을 변경할 수 있다

• translate
  자신의 위치에서 x, y축으로 이동시킬 수 있다
  기준점은 왼쪽 상단이다
  음수값도 지정할 수 있다

• skew
  요소를 왜곡시킬 수 있다
  각도 단위를 사용한다

💡 적용 대상: transformable elements
-> inline 요소는 적용되지 않는다

📌 웹페이지 렌더링

💡 무엇을 써야할까?

div{
	transform:translate(30px,30px);
}

div{
	position:relative;
    top: 30px;
    left: 30px;
}

1. HTML DOM으로 파싱

<link>, <img> 와 같은 태그를 만나면 리소스를 다운로드한다
<script> 태그를 만나면 DOM 파싱을 중단하고 자바스크립트를 해석한다
(∴ <script> 태그를 보통 </body> 위에 써준다)

2. CSS CSSOM으로 파싱

3. 렌더 트리 생성

렌더 트리 : 브라우저가 html을 분석하여 트리 형태의 구조로 재해석한 것
DOM과 CSSOM 정보를 토대로 생성된다
화면에 표현되는 정보만 트리에 담기게 된다
(display: none;은 트리에 담지 않는다, 화면에 보여지는 가상요소는 트리에 담긴다)

4. 페인트 기록 생성

레이아웃 트리(렌더 트리)를 따라 생성된다
페인트 기록에는 요소를 렌더링하는 순서가 저장된다
한 페이지를 여러개의 레이어로 나눈 뒤 그 위에 텍스트, 색, 이미지, 보더, 그림자 등 모든 시각적 부분을 그리는 작업이 진행된다

5. 컴포지팅

각각의 레이어를 스크린에 픽셀로 표현하고(레스터링) 나누었던 레이어들을 합성하여 페이지를 그린다

+ reflow vs repaint

브라우저는 html 구조 상의 변화 혹은 스타일의 변화가 있을때 reflow, repaint 라는 과정을 거치게 된다

• reflow: 레이아웃(너비, 높이) 변경 시 영향 받는 모든 노드(자식,부모)의 수치를 다시 계산하여 렌더 트리를 재성성한다
• repaint : reflow 과정이 끝난 후 재생성된 렌더 트리를 다시 그린다
  수치와 상관없는 스타일 변경시에는 reflow 과정을 생략하고 repaint 작업만 수행한다

만약 css를 통해 레이아웃이 바뀌는 애니메이션을 구현할 경우 브라우저는 매 프레임마다 reflow, repaint 과정을 수행해야하는데 reflow, repaint 작업은 브라우저에 상당한 부담이 된다

이때 브라우저의 부담을 덜기 위해서 사용자 컴퓨터의 GPU(graphic processing unit)를 이용한 그래픽 가속능력을 사용할 수 있는데 이러한 능력을 지원하는 css 속성이 바로 transform이다

정적인 사이트에서 요소의 위치를 단순 배치하는것은 position을 사용해도 괜찮지만,
애니메이션이나 혹은 동적으로 요소의 위치를 이동해야 하는 경우 transform 속성을 사용하는 것이 성능에 좋다

🎨 transition(단축 속성)

• transition-property transition-duration transition-timing-function transition-delay

transition: width 2s linear 1s;

• transition-property
  • 전환 효과를 적용할 CSS 속성을 설정한다
  • all: 기본값. 모든 속성에 transition 효과가 나타나게 한다
  • none: 속성들이 transition 효과를 받지 못하게 한다
  • initial: 속성의 기본값으로 설정해준다
  • inherit: 부모요소의 속성값을 상속받는다
• transition-duration
  • transition이 완료되는 데 걸리는 시간을 설정한다
• transition-timing-function
  • 진행 속도를 설정할 수 있다
  • 속성값 : ease, linear, ease-in, ease-out, ease-in-out, step-start, step-end, steps(int, start|end), cubic-bezier(n, n, n, n), initial, inherit
  • 대부분의 timing 함수들은 cubic bezier이라는 것을 사용한다
    cubic bezier 곡선이란 부드러운 곡선을 모델링 하기 위해 컴퓨터 그래픽에서 널리 쓰이는 것으로 4개의 컨트롤 포인트를 사용해 transition의 시작과 끝까지의 효과를 제어한다
    (크롬 개발자 도구에서 사용할 수 있다)
    
• transition-delay
  • 지연시간을 설정한다
  • 전환을 얼만큼 기다렸다가 실행할지 결정한다
    
    💡 음수값을 지정할 경우에는 지연 없이 바로 transition이 실행되며 지정해준 음수값의 절대값 시간만큼 지난 시점에서 시작하게 된다

🎨 animation(단축 속성)

transition은 요소의 상태가 변경되어야 애니메이션을 실행할 수 있지만
animation은 요소의 상태 변화와 관계없이 애니메이션을 실행할 수 있다

애니메이션을 나타내는 CSS 스타일과 애니메이션의 중간 상태를 나타내는 키프레임들로 이루어진다

• animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode animation-play-state

animation: animation-name 3s ease-in 1s infinite reverse both running;

• @keyframes
  두 개 이상의 애니메이션 중간 상태를 설정한다
  0%(from)는 시작점, 100%(to) 종료시점을 의미한다

@keyframes animation-name {
	from {}
	to {}
}

@keyframes animation-name {
	0% {}
	50% {}
	100% {}
}

• animation-name
animation-name의 시작에는 영문 소문자, 문자열, 언더바(_), 하이픈(-)을 사용한다. 영문 대문자, 숫자, 특수문자는 사용할 수 없다(파일 및 폴더명에는 허용)
  여러 개의 animation-name을 동시에 나열할 경우 ,를 사용한다

• animation-duration
  애니메이션이 한 사이클을 완료하는데 걸리는 시간을 지정한다
  음수값으로 설정하면 애니메이션이 실행되지 않는다

• animation-timing-function
  애니매이션이 진행되는 방식을 설정한다

  • ease : 기본값. 애니메이션 중간으로 갈수록 속도가 증가하고 끝에서 다시 느려진다
  • linear: 균일한 속도로 움직인다
  • steps(n) : n개의 단계

• animation-delay
  언제 애니메이션이 시작될지 지정한다
  음수값을 지정하게 되면 애니메이션이 도중에 시작된다(-1s 일 경우 시퀀스 1초부터 시작)

• animation-iteration-count
  애니메이션 재생 횟수를 설정한다

  • infinite : 영원히 반복
  • 0.5 : 절반 재생

• animation-direction
  앞으로, 뒤로 또는 앞뒤로 번갈아 재생되어야하는지 여부를 지정한다

  • normal: 기본값. 정방향으로 재생
  • reverse: 역방향 재생
  • alternate: 정방향, 역방향 반복
  • alternate-reverse: 역방향, 정방향 반복

• animation-fill-mode
  실행 전과 후에 대상에 스타일을 적용하는 방법을 지정한다

  • normal 기본값. 스타일 적용 X
  • forwards: 요소의 기존 스타일로 시작, 애니메이션 마지막 속성값 유지
  • backwards : 첫번째 정의된 값으로 시작, 요소의 기존 스타일로 돌아감
  • both : 첫번째 정의된 값으로 시작, 마지막 값 유지

• animation-play-state
  애니메이션 재생 여부 설정한다

  • paused : 정지
  • running : 재생