one Book a Day

가입하기 form 안에 button을 사용해야 할 순간이 온다. 하지만 태그를 사용하면 type="submit"이 default값이기때문에 누르면 form이 보내져 버린다. 때문에 type='button'속성을 부여한다!!

input칸을 빈칸인채로 submit을 못하게막고 경고창을 띄워주는 required속성. (일부칸이 빈칸인채 submit하게되면 data가 없어 오류 생길 수 있음.) 아이디: required넣으면 제출 눌렀을 시 제출 안되고 칸을 채우도록 독려함.

돔(Document Object Model) = 구조화된 텍스트 그러므로 HTML은 단순 텍스트일지라도 돔은 메모리에 값을 가지고 있는 표현식이다. ex)하나의 프로그램에 다수의 프로세스 -> 하나의 페이지에 여러개의 탭, 하나의 HTML안에 다수의DOM HTML DOM은 노드를 탐색하거나 수정할 수 있는 API를 제공한다.(DOM Tree의 노드) 돔은 getElementById 혹은 removeChild와 같은 메소드를 포함한다. 우리는 웹 페이지의 컨텐츠를 동적으로 수정하고 싶을 때 DOM을 수정한다. var item = document.getElementById("My") item.parentNode.removeChild(item); document는 root node의 추상화된 개념인 반면에 g..

React 엘리먼트 : React의 최소단위 일반 객체 React DOM은 React 엘리먼트와 브라우저의 DOM을 일치시킬 수 있도록 업데이트 한다.(핵심기능) 보통 React로 구현된 App은 하나의 Root DOM Node를 가진다. (여러기능 통합한 경우 독립된 많은 수의 Root DOM Node를 가질 수도 있음) Root DOM Node를 선언하고 내부 엘리먼트들은 직접작성이 아닌 React에의해 Control되게 설계해야한다. const a = hi! React; ReactDOM.render(a, document.getElementById('root')); JS에서는 변수선언에 태그가 들어갈 수 없음. JSX문법.(일반객체에 엘리먼트를 담을 수 있다.) ReactDOM.render()을 사용..

-display: 어떻게 표시할 것인가?(상속 안됨) inline? 앞뒤로 줄바꿈 불가.(가로로 늘어섬, 요소 크기만큼만 차지.) block? 앞뒤로 줄바꿈 가능.(세로로 늘어섬, 가로 100%) none? 박스 생성되지 않음.(공간 사라지고 내부 요소만 남음) inline-block? 요소는 inline 내부는 block. = 박스모양이 inline처럼 가로로 늘어섬. (모양은 block 배치는 inline)(float속성 적용한 것처럼 늘어짐. -visibility: 보일것인가 말것인가?(상속 됨) visible? 기본값. 요소 보임 hidden? 요소 안보임. 그러나 공간은 차지(투명) collapse? table에서 사용하는 value. 선택 테이블의 행과 열을 숨김.(그냥 hidden이라 봐도 ..

div는 block. 안에 여러 요소를 넣기위한 영역. span은 inline. , , 과 같이 줄 안에 끼워 넣는 요소. text. inline요소는 문장 속 특정 text강조에 많이 씀.(선택해 지정) block요소는 로 가로 화면 전체 100%를 차지.(넓게 묶어 지정)

position: absolute; top: 50%; left: 50%; transform: translate( -50%, -50%) 배치기준이 요소의 왼쪽 위 꼭지점이기 때문에 transform을 통해 요소크기의 -50%만큼 이동시켜주면 수직정렬됨. .flex-container { display: flex; align-items: center; justify-content: center; } 이거도 된다는데 난 안됨.. vertical-align은 inline이나 inline-block에만(text) 적용되므로 div를 이용한 flexbox는 적용안됨. relative한 정렬이므로 그 줄의 line-height나 같은줄 인라인 요소의 크기에 따라 높낮이가 달라질 수 있음.

flex container에서 속성을 부여해 결정함. flex-direction : row, row-reverse, column, column-reverse 초깃값 row flex-wrap : nowrap, wrap, wrap-reverse 줄바꿀꺼냐? - nowrap 안바꾸고 box넘어가도 그냥 삐져나감. wrap: 아래로 줄바꿈, wrap-reverse: 위로 줄바꿈. flex-flow : 두개 동시선언. 특별한거 x order : 숫자(기본값 0) 이건 유일하게 container가 아닌 item에 부여. container의 flex-direction의 배치순서 기준 낮은 숫자를 먼저 배치하고 높은 숫자를 나중에 배치

id는 # class는 . 으로 선택 1. 태그 안에있는 태그 선택. ul li.flex_items (ul태그 안의 class name이 flex_items인 li태그 선택) 2. 속성지정 태그 선택. input[type=text] (input태그 중 type속성이 text인 것만 선택) 3. 자손 선택자. div h1 div > h1 위에는 div 안의 모든 h1태그. 아래는 div 바로밑의 h1태그(직속태그)만 선택(자손 선택자) 4. 동위 선택자. h3~div : h3태그와 동위에 있는 태그들 중 h3밑의 모든 div태그 h3+div : h3 동위, 바로 밑에있는 하나의 div태그 #title~div : id = "title" 밑에있는 모든 div 태그

border-radius: top-left-x top-right-x bottom-right-x bottom-left-x / top-left-y top-right-y bottom-right-y bottom-left-y 테두리 왼쪽 위 오른쪽 위 오른쪽 아래, 왼쪽 아래. x -> y 값 순으로 지정 가능. 값 하나 입력하면 모두 동일, 두개입력하면 대각선. 네개입력하면 x,y값 동일한 네 귀퉁이에 적용