웹솔루션개발 25년 노하우! 해피CGI의 모든것

HTML 구조  CSS 소스//Vars :root {  --rad: .7rem;  --dur: .3s;  --color-dark: #2f2f2f;  --color-light: #fff;  --color-brand: #57bd84;  --font-fam: 'Lato', sans-serif;  --height: 5rem;  --btn-width: 6rem;  --bez: cubic-bezier(0, 0, 0.43, 1.49);} // Setupbody {background: var(--color-dark); display: flex; align-items: center; justify-content: center; min-height: 100vh }html { box-sizing: border-box; he..

웹사이트내에 배너 삽입시 크기 표시가 포함된 이미지를 쉽게 표현 할 수 있도록 제공되는 PlaceHolder 입니다. https://www.placeholder.com/ 사이트 접속시 사용법을 확인이 가능 합니다. 간단하게는 아래와 같이 이미지 호출 URL을 지정하는것으로 사용이 가능합니다. 소스 : 결과 : URL에 150x300으로 호출시 위와 같이 이미지 호출이 가능 합니다. 이 외에도 다양한 옵션들이 존재하므로 https://www.placeholder.com/ 페이지를 참고 하셔서 필요하신곳에 이용 하시면 되겠습니다.

인풋 박스에 포커스가 되면 라벨을 이용한 인풋 타이틀이 위치가 변경됩니다. 타이틀의 스타일도 변경됩니다. 인풋의 placeholder 같은 느낌을 주면서 디자인을 할 수 있습니다. 해당 사이트 또는 첨부파일을 다운로드 받아보시면 전체 소스를 확인할 수 있습니다. 표시한 부분을 소스를 확인해보시면 쉽게 응용이 가능합니다.

HTML5로 들어오면서 새롭게 생겨난 속성입니다. 기존에 인풋박스에 placeholder와 같은 속성을 이용하려면 자바스립트나, jquery를 이용하여 이미지 또는 텍스를 이용하여 복잡하게 설정해야만 했지만. placeholder는 간단히 태그입력후 alt나 title속성입력하는것과 같이 원하는 문구를 적어주면 됩니다. 위와같이 사용할수도 있으며 인풋태그에 간단히 설명을 입력할 수 도 있습니다. 사용방법은 예시 html5로 업그레이드되면서 새롭게 생긴속성이라서 구버전 익스플로러에서는 사용이 되지 않습니다. ie의 같은경우는 10버전에서 일부의 html5를 지원하기때문에 9이하로는 무용지물이 됩니다. 아래의 링크를 통해서 개발자가 만들어둔 jquery소스를 이용해 placeholder를 ie9이하에도 사용..