Tiny Star

🖥️FrontEnd/🔴HTML 7

[HTML] input type=date에 placeholder 적용하기

[HTML] input type=date (yyyyyy-mm-dd) 해결 방법 | 달력 표시하기캘린더에서 날짜를 선택하는 방식, 직접 날짜를 입력하는 방식으로 내가 검색 조건을 받을 때 제이쿼리대신 간편하게 쓰는 태그 중 하나다. 제이쿼리 캘린더를 사용하면 커스텀이 용이하지만chun-k.tistory.com 지난 포스팅에서 input type이 date 타입일 때 연도가 6자리로 표시되는 것과 달력 표시하는 방법에 대해 적어 놨었다. 오늘은 input type이 date일 때 placeholder 적용하는 방법이다.label이 있다면 굳이? 싶은 기능이지만 input date는 연도-월-일 이라는 내용이 자동으로 적용되기 때문에label 없는 디자인에서는 뭐가 무슨 날짜인지 알 수가 없다. 그럴 때 우리..

[HTML] input type=date (yyyyyy-mm-dd) 해결 방법 | 달력 표시하기

캘린더에서 날짜를 선택하는 방식, 직접 날짜를 입력하는 방식으로 내가 검색 조건을 받을 때 제이쿼리대신 간편하게 쓰는 태그 중 하나다. 제이쿼리 캘린더를 사용하면 커스텀이 용이하지만 아직까지 커스텀을 휘황찬란하게 할 일이 없어서  주로 input 태그의 date 타입을 자주 사용한다. 손쉽게 캘린더를 만들 수 있지만 몇가지 단점이 있는데 그 단점을 보완?하는 방법이다.단점1. yyyyyy-dd-mm캘린더에서 날짜를 선택한 경우 yyyy-mm-dd 형태로 잘 입력이 된다. 그러나 input창에 직접 연도월일을 입력하게되면 yyyyyy-mm-dd의 형태로 연도가 6자리까지 입력을 받을 수 있게 되는데이게 사용성 측면에서는 별로인거다. 기본 설정이 6자리이기 때문에 발생하는 현상이라 별도로 max값을 지정해서..

[HTML] <i> 태그로 아이콘 넣기

태그는 원래 "italic"을 나타내기 위해 사용되었지만, 최근에는 HTML에서는 주로 아이콘을 삽입할 때 사용되고 있다. FontAwesome과 같은 라이브러리와 태그를 사용하면 특정 아이콘 클래스를 적용하여 아이콘을 쉽게 추가할 수 있게된다. 아이콘을 적용하는 순서1. FontAwesome CSS 링크 추가헤드 태그 안에 FontAwesome CSS 링크를 추가하여 아이콘을 사용할 수 있도록 한다. 2. 아이콘 클래스 적용 태그에 fa와 특정 아이콘 이름 클래스를 추가하여 원하는 아이콘을 표시한다.ex)  주로 많이 사용하는 아이콘은 아래와 같이 다양하게 있고 더 많은 아이콘은 FontAwesome 페이지에서 복붙해서 사용이 가능하다.fa-user: 사용자 아이콘fa-envelope: 이메일 아이콘..

[텍스트 태그] <hn></hn>

웹 문서에서 제목을 표시할 때 다른 텍스트보다 크고 진하게 표시하는 데 사용할 수 있는 태그가 바로 제목 태그다. 태그의 h는 제목을 의미하는 heading의 줄임말이고, n의 자리에는 1~6까지의 숫자를 넣어 다양한 크기로 제목 텍스트를 표시할 수 있으며 숫자의 크기가 작을 수록 큰 제목이다. 태그는 종료 태그 와 반드시 함께 사용해야 한다. 태그의 기본형 제목 제목 제목 제목 제목 제목

시멘틱 태그

시멘틱 태그란 전체 HTML문서의 구조화를 위해 사용하는 태그다. 필수적으로 사용해야 하는 태그는 아니지만, 잘 활용한다면 간결한 코드를 작성할 수 있다. 시멘틱 태그를 사용하게 되면 웹 브라우저가 HTML의 소스코드만 보고 어느 부분이 제목인지, 본문 내용인지 쉽게 알 수 있고 화면 낭독기가 필요한 사용자의 경우 시멘틱 태그로 구조화가 되어 있으면 보다 더 정확한 내용을 전달받을 수 있다. 또한 문서의 구조가 정확하게 나눠지므로 웹 브라우저와 다양한 스마트 기기의 화면에서 웹 문서를 표현하기가 쉬워진다. 시멘틱 태그의 종류 태그명 설명 맨 위쪽이나 왼쪽에 존재하며 검색창이나 사이트 메뉴를 삽입하는 구간 같은 웹 문서 안에서 다른 위치로 연결하거나 다른 웹 문서로 연결 핵심 콘텐츠를 담는 영역으로 웹 문..

HTML의 기본 구조

HTML의 기본 구조 HTML 문서는 정해진 형식에 맞추어 내용을 입력해야 한다. 좌측 이미지와 같이 , 태그는 웹 브라우저가 웹 문서를 해석하는데 필요한 정보를 입력하는 영역으로, 타이틀, 메타요소, 인코딩, 스타일 시트 등 중요한 내용들을 내포하며, 이 영역의 내용은 화면에 출력되지 않는다. 태그는 실제로 웹 브라우저 화면에 나타나는 내용을 저장하며, 대부분의 HTML태그는 태그 안에서 작성된다. HTML의 기본 태그 위 코드는 실제 문서를 작성할 때 사용되는 기본적인 태그들이다. 웹 문서의 첫 부분으로 웹 문서의 문서 유형을 지정하는 선언문이다. HTML5 언어로 작성한 웹 문서라는 의미로 사용된다. 위에서 설명한 것과 마찬가지로 웹 문서의 시작과 끝을 알리는 태그다. 태그에서는 lang속성을 사용..

HTML5의 정의

HTML의 정의 · Hyper Text Markup Language의 약자 · 웹 문서를 만드는 언어 HTML5란? HTML의 최신 버전으로, 단순하게 텍스트나 링크만 표시하지 않고 오디오와 비디오 등 웹 브라우저 상에서 다양한 멀티미디어 콘텐츠와 앱을 태그를 통해 바로 제공한다. 2014년 11월에 발표된 HTML 표준 규약은 이전 버전과 구별을 하기 위해 한동안 HTML5로 불렸으나, 최근 대부분의 웹 브라우저에서 HTML5를 지원하게 되면서 숫자 5를 빼고 HTML로 통용되고 있다. HTML의 태그 태그란? ''안에 명령어의 형태로 되어 있는 것을 태그라고 한다. 이러한 태그는 여러 형식이 있는데, 그중 대표적인 시작과 종료태그로 이루어진 것을 하나의 요소(=element)라고 하며, 이러한 ..