HTML/CSS (7)
HTML
버튼 꾹 👉
버튼은 사용자가 클릭할 수 있는 요소로 form 내부뿐만 아니라 버튼이 필요한 곳 어디든 배치할 수 있다.
✔️ button 타입
▪️ button : 기본 행동이 없기 때문에 JavaScript와 연결하여 사용한다.
→ 양식 제출용이 아니라면 button 타입으로 지정해야한다.
▪️ submit : 서버로 양식 데이터를 제출한다.
▪️ reset : <input type="reset">과 동일하게 초깃값으로 되돌린다.
▪️ disabled : 누르거나 클릭하는 것을 막는다.
→ 필수 입력정보를 다 입력하였을 때 disabled을 해제 시킨다.
<input type="button" value="버튼">vs<button type="button">버튼</button>
- input은 빈태그 요소이기 때문에 value 특성에 텍스트 값 밖에 지정할 수 없다.
- button의 경우 여는태그와 닫는태그가 있어, 태그 사이 여러 컨텐츠나 가상 요소를 사용할 수 있다.
🌐 접근성을 고려하여 버튼의 최소 크기는 44x44px를 권고한다.
✔️ a vs button
두 태그의 차이점
→ 오른쪽 마우스 클릭을 하였을 때 나타나는 속성들이 다르다.
→ 마우스오버, 포커스가 되었을 때 url이 브라우저 창 하단에 노출된다.
| a | button | |
|---|---|---|
| 역할 | 하이퍼링크 | 사용자의 동작 실행을 위한 트리거 |
| 기능 | 다른 페이지 혹은 페이지 내의 특정 영역으로 이동 | 브라우저 기본동작 없음 JS를 이용하여 동작 추가 |
| 키보드 | 엔터 | 스페이스, 엔터 |
| 주의사항 | href 값 없이 JS로 동작하게 하면 안된다. | JS로 동작한다. |
⚠️ 주의 사항
▪️ 마우스커서의 모양을 변경하기 위해 a 태그를 사용하면 안된다.
→ CSS의 cursor: pointer;로 지정해준다.
▪️ button의 focus를 없애기 위해 outline을 숨기면 안된다.
▪️ 누르는 효과를 주기위해 button을 사용하면 안된다.
▪️ li, img, span 등 다른 태그에 JS 기능으로 버튼처럼 만들면 안된다.
CSS
CSS "선택"ㅈr...
| ✔️ 동적 가상 선택자 | 설명 |
|---|---|
:active | 클릭 시 활성화 (누르고 있는 동안) |
:visited | 사용자가 이미 방문한 링크일 경우 해당 상태에 만족 웹 브라우저의 방문 기록 정보 사용 |
:disabled | 비활성화 된 요소 선택 |
:hover | 마우스 커서를 요소에 올려두었을 때 |
:focus | focus 받은 상태 |
:checked | input이 선택된 상태 (checkbox, radio 등) |
| ✔️ 속성 선택자 | 설명 |
|---|---|
[속성이름] | 해당 속성을 가진 모든 요소 선택 |
[속성이름 ~= "속성값"] | 특정 문자열로 이루어진 단어를 포함하는 요소 모두 선택 |
[속성이름 ㅣ= "속성값"] | 특정 문자열만 포함하거나, 특정 문자열로 시작하면서 바로 하이픈 기호가 있는 태그 |
[속성이름 ^= "속성값"] | 특정 문자열로 시작하는 요소 모두 선택 |
[속성이름 $= "속성값"] | 특정 문자열로 끝나는 요소 모두 선택 |
[속성이름 *= "속성값"] | 특정 문자열을 포함하는 요소 모두 선택 |
transform 변형이란 뜻
| transform | 설명 |
|---|---|
| scale | ▪️ 요소의 크기를 조절한다. ▪️ 기본적으로 자신의 가운데를 중심으로 크기가 변경된다. ▪️ transform-origin을 통해 기준점을 변경할 수 있다.▪️ x축 y축 별도로 크기를 지정할 수 있다. ▪️ 요소가 크기가 커져도 옆 요소들이 밀려나가거나 깨지지 않는다. |
| rotate | ▪️ 요소를 회전시킬 수 있다. ▪️ deg 각도, transform:rotate(0.5turn)과 같은 형태로 사용한다. ▪️ 기본적으로 자신의 가운데를 중심으로 회전한다. ▪️ transform-origin을 통해 기준점을 변경할 수 있다. |
| translate | ▪️ 자신의 위치에서 x, y축으로 이동할 수 있다. ▪️ 기준점은 왼쪽 상단이다. ▪️ 음수 값 지정이 가능하다. |
| skew | ▪️ 요소를 왜곡시키는 속성이다. ▪️ 각도 단위를 사용한다. |
⚠️ 정적인 사이트에서 요소의 위치를 단순 배치하는 것은 position을 사용해도 되지만, 애니메이션이나 동적으로 요소 위치를 이동해야하는 경우는 transform 속성을 사용하는 것이 성능적인 면에서 좋다. (웹 페이지 렌더링 참조)
변화를 기다릴 줄 아는 transition
transition은 CSS 속성값이 변할 때, 값의 변화가 일정 시간에 걸쳐 일어나도록 해준다.
▪️ 단축 속성 : transition-property transition-duration transition-timing-function transition-delay
transition-property : 전환 효과를 적용할 CSS 속성을 설정한다.
transition-duration : transition이 완료되는데 걸리는 시간을 설정한다.
transition-timing-function : 진행 속도를 설정할 수 있다.
cubic bezier 곡선을 사용하여 transition의 시작과 끝까지의 효과를 제어할 수 있다.
transition-delay : 지연시간을 설정한다.
animation 난 너 어려워
속성은 예전에 적은 CSS 블로그 글보고 찾아라 그냥
animation은 JS 없이 요소에 애니메이션 효과를 적용할 수 있으며, 애니메이션을 나타내는 CSS 스타일과 애니메이션의 중간 상태를 나타내는 키프레임들로 이루어진다.
transitionvsanimation
- transition은 요소의 상태가 변경되어야 애니메이션을 실행할 수 있다.
- animation은 요소의 상태 변화와 관계없이 애니메이션을 실행할 수 있다.
@keyframes animation-name 규칙
⭕ 시작 시 영문 소문자, 문자열, 언더바(_), 하이픈(-)을 사용할 수 있다.
❌ 시작 시 영문 대문자, 숫자, 특수문자는 사용할 수 없다.
▪️ 여러 개의 animation-name을 나열할 땐 ,를 사용한다.
웹 페이지 렌더링
1. 파싱
▪️ html 파일을 DOM으로 변환(파싱)한다.
▪️ 오타 혹은 잘못된 문법을 사용한 경우 예외처리 한다.
▪️ <link>, <img>와 같은 태그를 만나면 리소스를 다운로드 한다.
▪️ <script> 태그를 만나면 DOM 파싱을 중단하고 자바스크립트를 해석한다.
2. 스타일 계산
▪️ CSS을 파싱하여 CSSOM으로 변환한다.
▪️ CSSOM 정보를 통해 DOM 노드에 대한 스타일을 결정한다.
3. 레이아웃
▪️ DOM과 CSSOM 정보를 토대로 레이아웃 트리(렌더 트리)를 생성한다.
▪️ DOM과 계산된 스타일을 따라가며 요소의 크기나 좌표와 같은 정보를 담은 레이아웃 트리를 생성한다.
▪️ 화면에 표시되는 정보만 트리에 담긴다. → display: none은 담기지 않지만 화면에 보이는 가상요소는 트리에 담긴다.
4. 페인트
▪️ 레이아웃 트리(렌더 트리)가 생성되면 트리를 따라 페인트 기록이 생성된다.
▪️ 페인트 기록에는 요소를 렌더링하는 순서가 저장된다.
▪️ 지금까지의 정보를 바탕으로 한 페이지를 여러개의 레이어로 나눈 뒤 그 뒤에 시각적인 페인트 작업을 진행한다.
5. 컴포지팅
▪️ 각각의 레이어를 스크린에 픽셀로 표현하고(레스터링) 나누었던 레이어들을 합성하여 페이지를 그린다.
- 브라우저는 HTML 구조상의 변화 혹은 스타일의 변화가 있을 때 reflow, repaint 과정을 거치게 된다.
- 브라우저 각 단계별 렌더링 과정들은 반드시 전 단계의 데이터가 필요하기 때문에 전 단계에 변화가 일어나면 다음 단계 모두에 영향을 미친다.
css를 통해 레이아웃이 바뀌는 애니메이션이 구현된 경우 브라우저는 매 프레임마다 reflow, repaint 과정을 수행해야하기 때문에 이 현상은 브라우저에 부담이 될 수 있다.
👉 이러한 부담을 덜기 위해 사용자 컴퓨터 GPU(graphic processing unit)를 이용한 그래픽 가속능력을 사용할 수 있는데 이러한 능력을 지원하는 속성이 transform 이다.
