HTML CSS(13)
-
<button>태그, <progress> 태그
보호되어 있는 글입니다.
2023.10.24 -
select박스, textarea
,,태그 - 여러 옵션 중에서 선택하도록 하고 싶을 때 드롭다운 목록을 사용한다. 클릭했을 때 옵션들이 요소 아래쪽으로 펼쳐지는 목록이다. - 태그 안에 태그를 넣고 각 태그의 value 속성을 이용해 서버로 넘겨주는 값을 지정한다. - 태그의 속성은 size와 multiple 속성이 있다. - size는 드롭다운 메뉴의 항목 개수를 지정한다. 3이면 3개 4이면 4개 이렇게 드롭다운 메뉴가 나오는데 크롬 브라우저의 경우 size 속성에 지정한 값보다 하나 더 많은 옵션을 표시한다. 예를들어 6은 7개 9는 10개이다. - multiple 속성은 드롭다운 메뉴에서 Ctrl키를 누른 상태에서 여러개의 옵션을 선택할 수 있다. - 태그의 속성은 value와 selected 가 있다. - 태그의 value는 ..
2023.10.03 -
input 태그 속성 정리(HTML)
autofocus 속성 - 페이지를 열자마자 autofocus 속성이 있는 요소에 마우스 커서를 표시한다. - 전에는 자바스크립트로 구현해야 했다면 HTML5부터 autofocus 속성을 이용해 구현할 수 있다. placeholder 속성 - 텍스트를 입력할 때 무슨 내용을 입력하는지 도움 받을 수 있도록 힌트를 표시한다. 필드를 클릭하면 내용이 사라진다. readonly 속성 - 사용자는 내용을 수정하거나 입력하지 못하고 읽을수만 있게 한다. required 속성 - submit 버튼을 클릭하면 required 가 있으면 필수요소로 내용이 채워져 있어야 한다. 내용이 비어있으면 전송이 안된다. min,max,step 속성 - input 태그의 type이 date, datetime, datetime-lo..
2023.10.03 -
<input> 태그 정리(HTML)
태그 - input 태그의 type이 같은 태그들이 여러개 있다. 예를들어 input type="text"인 태그가 여러개 있는데 각 input 태그를 구별하기 위해서 id 속성을 이용할 수 있다. id 속성을 이용해서 구별 뿐만 아니라 label태그를 이용해 캡션을 붙일 수도 있고 원하는 CSS도 적용할 수 있다. 라벨1 라벨2 라벨3 HTML 삽입 미리보기할 수 없는 소스 - input 태그에는 type을 뭐로 해주냐에 따라서 다양하게 정보들을 입력할 수 있다. type 속성의 각 값에 따른 설명을 보자 유형 설명 hidden 사용자에게는 화면에 보이지 않는 정보지만 서버로 데이터가 넘어간다. text 한 줄짜리 텍스트를 입력할 수 있는 텍스트 상자이다. search 검색 상자를 넣는다. text와 ..
2023.10.02 -
FORM 관련 태그 정리(HTML)
태그 - 여러가지 속성을 통해 사용자가 입력한 자료들을 서버로 어떤 방식으로 넘길지 서버에서는 어떤 프로그램을 이용해 처리할지 지정한다. - method 속성은 사용자가 입력한 내용들을 서버쪽으로 어떻게 넘겨줄지 결정한다. get방식으로 하는 경우가 있고 post 방식으로 하는 경우도 있다. - get 방식은 256~ 4096byte 까지의 데이터를 서버로 넘길 수 있다. - post 방식은 입력 내용의 길이에 제한을 받지 않고 사용자가 입력한 내용이 url에 드러나지 않는다. - name 속성은 폼의 이름을 지정한다. 하나의 html 파일에 여러개의 form 태그가 존재할 수 있는데 각 태그를 구별할 때 name 속성으로 알 수 있다. - action 속성은 form 태그안에 내용들을 처리해 줄 서버 ..
2023.10.02 -
SVG 이미지
웹에서 사용 가능한 이미지는 gif, jpg, png 파일 형식이 있다. 그런데 최근에 svg파일 형식이 많이 사용된다. 보통 이미지 파일들을 엄청 확대해서 보면 테두리 부분이 울퉁불퉁해 보인다. svg파일 형식이 많이 사용되는 이유는 아무리 확대하거나 축소해도 원래의 깨끗한 상태로 화면에 나타난다. 이러한 이유 때문에 러고나 아이콘에서 많이 사용되고 있다. svg 이미지를 사용하는 방법은 우리가 가지고 있는 jpg나 png 이미지 파일을 svg로 전환하고 전환한 파일을 태그로 나타내면 된다. 1) https://www.adobe.com/kr/express/feature/image/convert/svg 에 접속 2)이미지 업로드 클 3) 이제 바꾸려는 이미지 파일을 업로드하고 변환이 완료되면 다운로드 하..
2023.10.01