Study/HTML, CSS 2

CSS: 너비와 높이가 100%일 때 가운데 정렬과 세로정렬, 요소 겹치기

화면 중앙에 버튼을 만들고 싶을 때가 있다 정가운데로 정렬할 수 있는 방법들을 생각해보았다 가로정렬과 세로정렬... 결국 난장판이 되었다 display속성을 꼭 사용하지 않아도 된다: position과 z-index 속성의 활용 position은 요소를 겹칠 때 사용하는 속성이다 하지만 어느 때는 옮겼지만 뒤로 가버리는 사태가 발생한다 겹칠 때 보여줄 우선순위를 정해주는 속성이 바로 z-index이다 방법은 다음과 같다 1) position: absolute; //절대 위치로 변환하고 2) top: 50%; left 50%; //퍼센트로 중앙 배치를 실현한다 3) z-index = 1; //우선순위를 1순위로 만든다 *flex, table등 많지만 여기선 다루지 않는다 .first{ background-..

Study/HTML, CSS 2021.10.07

HTML: input 태그와 Javascript

input 사용자의 입력값을 받는다 받는 방식이 다양하기 때문에 type속성으로 분류한다 Javascript 입력하는 곳이기에 focus 관련한 이벤트들이 존재한다 input 태그 다루기 input.value 입력된 값을 반환 HTML input type=" " text 텍스트를 입력하는 창 placeholder="미리 입력" password 비밀번호 입력하는 창 autofocus : 자동커서 button 일반 버튼 size="20" 입력폼 길이 checkbox 체크박스 maxlength="10" 글자 수 제한 hidden 사용자에게 안보이지만 서버 전송 list="리스트" 미리 리스트 생성 Javascript input 관련 이벤트 (e.type) focusin 요소에 포커스가 되었을 때 focusou..

Study/HTML, CSS 2021.09.26