반응형
[Javascript / CSS / HTML ] 내 컴퓨터에 저장된 이미지 업로드 하기(화면에 업로드된 이미지 보여주기)
기타 공부들 2021. 11. 2. 23:24

구현할 것 파일선택 버튼 클릭 -> 내 컴퓨터에서 이미지 파일 선택 -> 화면에 이미지, 파일 이름 띄우기 부분 form을 통한 파일 처리 이미지 파일을 받기 위해 enctype을 설정해준다. input 설정 accept="image/*" : 이미지 형식 모두! 받아올 것이다~ type = "file" : 파일을 받아올 것이기 때문에 꼭 설정해줄 것. onchange : input이나 select 등의 데이터가 변경될 때 호출되는 이벤트. 위 코드에서는 파일을 불러왔을 때 loadFile함수실행. 이미지 표시 영역을 원하는 대로 꾸며준다! 별거 없다.. 내 컴퓨터에 있는 이미지 파일을 불러오는 예제를 만들어 보았다. 생각보다 간단하다!

[CSS] 부트스트랩 (Bootstrap 예쁜 CSS 가져오기)
기타 공부들 2021. 10. 3. 19:55

부트스트랩이란 예쁜 CSS를 미리 모아둔 사이이다. 여기서 완성된 CSS를 가져다 쓸 수 있어 구현이 더욱 편리하다. 아래 링크 첨부.. https://getbootstrap.com/docs/5.1/getting-started/introduction/ Introduction Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with jsDelivr and a template starter page. getbootstrap.com 사이트에 들어가서 Components 탭에 들어가보면 요로케 버튼 디자인부터 InputBox디자인까지 다양하게 있다. 사용방법은 간단하다..

[CSS] 구글 웹 폰트 적용하기
기타 공부들 2021. 10. 1. 22:37

https://fonts.google.com/?subset=korean Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 위 링크로 접속하게 되면 이렇게 많은 폰트들이 뜬다. 이중에 마음에 드는 것을 골라 클릭! 아무거나 하나 클릭해보면 안에서도 이렇게 선택지가 나뉜다. 이중에 마음에 드는 것으로 골라 우측의 "+ Select this style" 글자를 클릭한다. 그럼 우측 사이드에 코드가 하나 뜰 것이다. 빨간색으로 표시해놓은 부분의 코드들이 필요하다. 해당하는 번호 위치에 알맞게 잘 넣어주면 된다. 1번은 태그 안쪽에 2번은 태그 안쪽에 위치한다. 참고로 * {} 이부분..

반응형