반응형 HTML4 HTML | base64를 활용해 이미지 업로드 필요 없이 img 태그안에 이미지 정보 담는방법 HTML의 IMG 태그 내에 이미지 정보를 담는 방법을 소개하는 글이다. IMG 태그에 이미지 정보 직접 대입 웹 페이지를 구성하면서 특정 페이지에서만 이용하는 이미지가 있을 수 있다. 이럴때도 다른 폴더에 이미지를 업로드 해놓고 사용할 수도 있지다. 하지만 아주 간단한 정적 페이지를 만드는 경우나 잦은 이동으로 이미지 파일을 잃어버릴 수 있는 상황 등 번거로운 상황을 아예 없애기 위해 이미지정보를 IMG 태그 안에 직접 담을 수 있는 방법이 있다. 방법은 이미지를 Base64를 기반으로 인코딩 하는 것이다. Base64 인코딩이란? Base64 인코딩은 어떤 운영체제에서도 문제 없이 사용 가능한 기본 64개의 문자를 활용해 정보를 변환하는 것이다. 기본적인 이해는 이것으로 충분하다. 사용방법은 다음 챕.. 2023. 2. 8. 18:00 HTML | 링크 a 태그 새창 새탭에서 여는 방법 새창에서 열기 html에서 링크를 표현할 때는 태그를 이용한다. 이렇게 해서 구현된 링크를 클릭하면 현재 페이지에서 태그가 가리키는 페이지로 이동한다. 이때 기존 페이지는 가만히 유지시키고 새로운 창에 띄우고 싶을 때가 있다. 이럴 때는 태그 내에 아래와 같이 속성을 추가해 주면 된다. ZYNGIROK a태그 내에 "target='_blank'"를 추가한 것이다. 속성들의 순서는 상관 없고 속성들 사이의 콤마도 필요 없다. 새 탭에서 열기 요즘은 브라우저 들에서 새로운 윈도우를 여는 대신 새로운 탭으로 링크를 띄워 여러 창이 뜨는 번잡스러움을 줄여주었다. 개발을 하다 보면 새 탭과 새 창을 구분해 섬세하게 구현하고 싶어 지기도 한다. 하지만 아쉽게도 현재 html 문법으로는 새창과 새 탭을 구분 지을 수.. 2022. 7. 21. 17:37 VSCode | Live Preview | 실시간으로 html 확인하는 방법 실시간으로 html 확인하기 html 작성을 하면서 의도한 대로 작성이 되었는지 확인하기 위해 빈번하게 브라우져를 켜는 일이 생기곤 한다. 많이 작성하고 한 번씩 볼떄는 그래도 할만한데 한 가지를 수정하기 위해 매번 브라우저와 에디터를 옮겨다니는 건 여간 번거로운일이 아니다. 본 포스팅에서는 그 문제를 깔끔하게 VSCode 내에서 해결하는 방법에 대해 소개하려고 한다. Live Preview 원하는 기능을 제공하는 Extension은 "Live Preview"이다. 설치 방법 VS 코드를 실행했을 때 왼편 맨 아래 사각형 4개 모양의 아이콘을 누르면 EXTENSIONS 메뉴가 뜨면서 검색어 입력창을 찾을 수 있다. 이 검색창에 "live preivew"라고 검색한다. 첫 번째 파란색 아이콘의 Live .. 2022. 7. 15. 20:22 HTML | Input 숫자만 입력되게 하는 방법 (Feat. type="text") 숫자만 입력 되도록 하는 방법 input태그의 type(타입) 속성을 number로 해주면 숫자만 입력이 가능하다. 그런데 이 경우에는 음수와 입력창 옆 화살표 아이콘이 생기는 등 딱 원했던 기능이 아닐 수 있다. 이 문제를 해결 하기 위해 type 속성을 text로 두고 해결해 보려 한다. type="text" 위의 oninput 속성을 추가하면 숫자 이외의 모든 입력값은 지워준다. 따라서 숫자만 입력 가능한 입력창이 구현 되는 것이다. 2022. 5. 31. 23:18 이전 1 다음 반응형
