![]()
position: 요소가 배치되는 방식 static 기본값, 흐름대로 배치 relative: 기본위치에서 위치 이동가능 top left right bottom fixed: 사용자의 브라우저 기준 절대 좌표를 사용하여 위치 고정 sticky: 평소엔 기본 위치에 위치하고 있다가 스크롤바를 내렸을 때 위치를 고정한다. top left right bottom 으로 위치를 설정해둬야 작동한다 .wrapper { display: grid; grid-gap: 10px; grid-template-columns: 1fr 1fr 1fr; 한줄에 들어가는 갯수 /* fraction */ grid-template-rows: 100px 100px 100px; 크기 } #a{ grid-column:1/3; 위치 } #b{ gr..
![]()
복습 label 태그로 input을 묶어 줄 수 있는데 label로 인접하여 묶어 줄 필요없이 for=id를 사용하면 간격을 두고도 라벨 작용을 할 수 있다. .child > u:nth-child(odd) { background-color: coral; } odd,even .type > u:nth-of-type(2n) { background-color: coral; } (계산식) p::first-line { font-size: 1.4rem; } p::first-letter { background-color: aqua; } box-sizing: content-box; 크기를 내용 중심으로 결정 box-sizing: border-box; 크기를 테두리까지 포함한다. 백그라운드 float과 clear both..
![]()
netlify 무료서버다. 사이트 구성-사이트 이름 변경가능 디벨로프 파일 업로드. 자동 수정안되니 계속 재업로드 해야함 https://developers.kakao.com/tool/debugger/sharing 카카오 캐시 삭제 주소 input 은 name이 필수 프론트에선 해킹 가능. 보안은 백엔드에서 1글자 이상 5글자 이하 [0-9]{2} [가-힣]{3} 정규식 대괄호, 중괄호 안녕하세요 안녕하세 텍스트박스에는 정리를 하면 줄바꿈이 된다. form -액션, 메소드 인풋 -네임 button button 버튼은 submit 기능과 버튼의 기능이 있다. 타입을 명시하지 않으면 서브미트 기능을 한다. button onclick 눌렀을 때 반응 onmouserleave 마우스가 떠났을 때 반응 라벨로 감싸..
h1 ~ h6 : 제목 (진하게 크게) p : 본문, 단락, 문단 (p 마다 줄바꿈) span : 단어, 일부 문장 (줄바꿈 하지 않음) : 줄바꿈 : 띄어쓰기 : > 기호 : 줄바꿈 : 띄어쓰기 : > 기호 1. h1 - 제목 2. p - 내용 (단락 / 문단) 3. span - 단어 4. b 또는 strong - 진하게 5. i 또는 em - 이탤릭 (삐딱하게) 6. u - 밑줄 1. a - 링크 (하이퍼 텍스트) 2. img - 이미지 3. video - 동영상 4. audio - 음원 5. table / tr / td - 표 6. ul / li - 목록 1. 서버로 데이터를 전달해주기 위한 컨테이너 (가방) 2. action 속성으로 전달해줄 서버의 주소 지..
