잉어빵

Input 태그를 통해서 파일을 입력 받을 때 onChange 이벤트를 사용하게 됩니다. 

그러나 onChange는 실제 데이터가 바뀌는 경우에만 실행 되기 때문에 기존에 등록 된 파일을 다시 업로드 할경우에는 이벤트가 실행 되지 않을 수 있기 때문에 value 값을 초기화 해줄 필요가 있습니다.

const onChage = (e) => {
	업로드메소드(e.target.files[0]);
    e.target.value = '';
}

1. Block -> 길막!

따로 width를 선언하지 않은 경우 , width = 부모의 content-box 의 100%

따로 width를 선언한 경우 , 남은 공간은 margin 으로 자동으로 채움

margin : 0 auto 쓰면 가운데 정렬 처리 됨

따로 부모의 height를 선언하지 않을 경우 , 자식 요소의 height의 합 = 부모의 height

2. Inline -> 흐름

부모 객체의 width값을 넘어가면 자연스럽게 줄바꿈 처리

width, height, padding-top/bottom , border-top/bottom, margin-top/bottom 사용 불가

3. Inline-block -> 짬짜면

box-sizing 속성은 해당 컨텐츠의 크기의 기준을 어떤것으로 잡을것인지

정하는 속성이다.

[box-sizing의 값]

1. box-sizing: content-box (default, 콘텐트 영역을 기준으로 크기를 정한다.)

width:500px, height:100px를 주고 padding:20px를 주었을 때, padding값을 포함하여

width:540px, height:140px이 된다.

2. box-sizing: border-box (테두리를 기준으로 크기를 정한다.)

테두리를 포함한 크기를 지정하는 border-box는, 여백을 포함하여 크기를 정하게 된다.

border:1px solid #colorCode 와 같은 border나, padding값을 포함하여 크기를 정할 때 유용하게 쓰인다.

3. box-sizing: initial (기본값으로 설정한다.)

4. box-sizing: inherit (부모의 속성값을 따라간다.)