(기능추가1)label태그를 이용한 업로드 버튼 꾸미기

1. 업로드 버튼 추가

            <label id="uploadBotton" for="input-file">

            +

            </label>

            <input type="file" id="uploadInput" style="display:none">

            <label className="input-file-button" for="input-file">

                +

            </label>

            <input type="file" id="input-file" style="display:none">

발생한 문제>

위쪽 코드는 내가 짠것, 아래쪽 코드는 웹사이트에서 긁어온 것이다.

실행시키니 내가짠 코드는 실시가 안되고 아래쪽 코드만 실시된다. 

해결>

이유는 for를 input의 아이디에 일치시키지 않아서였다. label에 for문을 사용하려면 input태그의 id를 정확하게 가져와야한다.

2. 업로드 버튼 css먹이기

        .uploadBotton {

            margin-top : 5px;

            box-sizing: content-box;

            display : block;

            float: right;

            color: rgb(254, 118, 118);

            width: 58px;

            height: 58px;

            cursor: pointer;

            font-size : 40px;

            text-align: center;

        }

        .uploadBotton:hover {

            color : white;

            background-color: rgb(254, 118, 118);

        }

발생한 문제>

1.label태그에서 +의 위치가 수직정렬이 되지 않았음  

2.label태그의 박스가 정사각형이 되지않았음

 

해결>

1.label태그에서 line-hight를 height크기만큼 지정도 해보고, vertical-align속성도 적용해봤지만, 해결이 안되었음. 그래서 그냥 버튼의 크기를 늘려서 야매로 해결함. 아직까지도 label태그에 어떻게 수직정렬을 하는지 모르겠음. 

2.display:block 설정을 하니 해결됬음. 높이와 너비가 조정가능해졌음. label태그자체가 인라인태그 속성을 가지고 있어서 그랬던것 같음.

 

완성본 

소감

버튼하나 넣기 힘들다..