TechScribe Notes

반응형 웹 반응형 웹 디자인: 기존 웹사이트를 그대로 유지하면서 다양한 화면 크기에 맞춰서 요소를 재배치하고 표시방법을 변경해주는 것. 뷰포트: 실제 내용이 표시되는 영역 -뷰포트는 태그를 이용하여 태그 사이에 작성한다. 기본형 :

폼에서 사용하는 태그 종류 설명 폼의 시작과 끝을 만듦. 폼 요소를 그룹으로 묶음. 필드셋에 제목을 붙임 사용자가 내용을 입력할 필드를 삽입 , 드롭다운 목록 삽입할때 -select태그 속성: size -> 화면에 표시할 드롭다운 항목의 개수 지정 multiple -> 드롭다운 목록에서 둘 이상의 항목 선택할 때 -option 태그 속성: value -> 해당항목을 선택할 때 서버로 넘겨줄 값 지정 selected -> 드롭다운 메뉴 삽입시 기본으로 보여줄 항목 지정 텍스트를 여러줄 입력할 수 있는 텍스트 영역 데이터 목록 삽입 데이터 목록을 사용하면 텍스트 필드에 값을 직접 입력하지 않고 미리 만들어 놓은 값에서 선택할 수 있다. 선택옵션1 선택옵션2 Input 태그의 유형(type) 종류 설명 tex..

content: 텍스트나 이미지, attr 등을 입력할 수 있다. -content: "텍스트" -content: url("이미지경로")/"대체 텍스트"; -content: attr(요소의 속성이름); -> 속성을 문자열로 바꿔줌 -content에 counter 사용해서 자동으로 번호 매길 수 있음. 부모요소에 conter-reset: 함수명 지정해서 구현할 counter의 초기값을 지정한다. 자식요소에 counter-increment: 함수명 ; -> 1씩 카운터값이 증가한다. content: counter(함수명); content:counter(함수명, "-")' 와 같이 입력하면 1-1,1-2로 증가가능.

ClassList: 클래스를 조작하는 다양한 메서드 사용 가능! -classList.add(): 클래스를 필요에 따라 삽입 -classList.remove(): 클래스를 필요에 따라 제거 -classList.contains(): 클래스에 값이 존재하는지 체크한다(true/false) -classList.toggle(): 클래스 값이 있는지 체크하고 없으면 괄호안의 클래스 값을 더하고 있으면 제거함.

속성선택자 [속성]선택자: 특성 속성이 있는 요소를 선택하는 선택자. A[속성]{....} [속성=속성값]선택자: 특정 속성값이 있는 요소를 선택하는 선택자 input[type="checkbox"]{ ... } => input요소 중에서 type값이 "checkbox"인 요소/ 체크박스 요소 선택 [속성~=값]선택자: 여러 값 중에서 특정 속성값이 포함된 속성요소 선택/ 속성이 하나면서 속성값이 여러개일때 특정 속성값을 찾는데 편리하다. ex) [class ~=button]{ ... } => class값 중에 button이 있는 요소들(값을 포함하는게 아닌 일치하는! 경우에 선택/ 하이픈으로 연결된 값은 선택하지 않음. flat-button이나 buttons같은 경우는 선택하지 않는다.) [속성 |=값]..

Html CSS Javascript Figma ReactJS *{ margin:0; padding:0; box-sizing: border-box; } body{ display: flex; justify-content: center; min-height: 100vh; background: white; } .dropdown{ position: relative; margin-top: 100px; width: 300px; height: 50px; } .dropdown::before{ content: ''; position: absolute; width:8px; height: 8px; border:2px solid #333; right:20px; top:15px; z-index: 10000; border-top:..