UpWrite

대화형 컨트롤을 만드는 태그 input 태그에서 공통적으로 사용되는 속성들 :: autocomplete (MDN) -- 양식 자동생성 기능 암시. Boolean 속성이 아니며 공백으로 구분된 문자열을 값으로 갖는다. -- 간단하게는 'on', 'off' 값으로 설정하지만 더 복잡한 자동 완성 구문을 사용할 수도 있다. :: autofocus -- 페이지가 로딩 될 때 자동으로 초점을 맞출 컨트롤을 지정. -- boolean 속성이므로 값을 갖지 않는다. -- 한 페이지에 하나의 컨트롤만 이 속성을 가질 수 있으며, 여러 컨트롤에 지정될 경우 맨 첫번째 컨트롤에 지정된다. -- 접근성 측면에서 사용이 권장되지 않는다. :: disabled -- 컨트롤의 활성화 여부 지정. -- boolean 속성이므로 값..

대화형 컨트롤을 만드는 태그 14. (MDN) :: 사용자가 색상을 지정할 수 있는 UI요소를 제공한다. :: 값의 형식은 16진수 형식의 RGB 색상을 지정하는 7자리 문자열('#rrggbb')이다. :: 이 속성으로는 알파 채널이 있는 색상은 지정할 수 없다. :: 초기값을 지정하지 않았을 때 기본값은 '#000000'으로 'null'이 아니다. :: 16진수값으로 대문자를 쓰더라도 값에는 소문자로 저장된다. 15. (MDN) :: 사용자의 장치 저장소 내에서 파일을 선택할 수 있는 인터페이스를 제공한다. :: 값으로 선택한 파일의 경로를 나타내는 문자열이 저장된다. :: 파일이 선택되지 않았을 경우 저장된 값은 'null'이다. :: multiful : 사용자가 여러개의 파일을 선택할 수 있음을 나..

대화형 컨트롤을 만드는 태그 7. (MDN) :: text 타입과 비슷하나 숫자만 입력받을 수 있도록 유효성 검사가 포함되어 있다. -- step 속성이 설정되어 있지 않다면 기본적으로 정수만 입력받을 수 있다. -- 브라우저에 따라 값을 조정할 수 있는 스테퍼 화살표가 표시되기도 한다. number 타입에서 추가로 사용되는 속성 :::: step : 값의 단위를 지정하기 위해서 사용되는 속성. 0을 초과하는 실수값 혹은 'any'라는 특수값을 갖는다. ---- 단위에 맞지 않은 값을 입력한 경우 유효성 검사에 실패하며 단위에 맞는 값을 추천해준다. ---- 'any' 입력시 스테퍼는 1단위로 움직이지만 모든 숫자 값을 입력받을 수 있다. (max, min 제한은 유효) :::: min : 입력 받을 수..

대화형 컨트롤을 만드는 태그 태그 (MDN) :: 대화형 컨트롤을 만들 때 사용되는 태그. :: type값에 따라 매우 다양한 작동방식을 갖는다. :: 같은 속성값도 타입에 따른 다른 작동 방식을 갖을 수 있으니 사용에 주의해야한다. :: type값을 지정하지 않을 경우의 기본값은 'text'이다. :: 작동방식이 타입에 따라 크게 달라지지 않는 속성은 가장 마지막에 따로 정리했다. 1. (MDN) :: 한 줄 짜리 텍스트를 입력하는 텍스트 박스를 만든다. :: 줄바꿈문자는 자동으로 제거된다. :: 유효성 검사를 하지 않을 경우 입력값은 ""(=null)일 수 있다. 텍스트 타입과 관련된 주요 속성 :::: size : 입력 필드의 넓이를 지정한다. 설정하지 않을 경우 기본값은 20이다. -- 양의 정수..

폼에 들어가는 컨트롤 태그들 태그 (MDN) :: 대화형 컨트롤 요소에 설명을 붙일 때 사용하는 태그. :: 레이블 가능한 컨트롤 요소와 연결할 수 있다. :: 레이블을 눌러서 컨트롤 요소에 초점을 맞출 수 있으므로 마우스나 터치스크린 사용자에게 도움이 된다. :: 또한 컨트롤 요소와 설명이 명시적으로 연결되므로 보조기술 이용자의 웹 접근성이 향상된다. :: 컨트롤과 레이블을 연결하는 방법 1 : 컨트롤의 id속성 값을 lable의 for속성값에 적는다. ex) 이름 :: 컨트롤과 레이블을 연결하는 방법 2 : 컨트롤을 레이블 태그 안에 적는다. (for와 id 필요없음) ex) 이름 -- 1번 방법을 사용할 경우 태그와 컨트롤 요소가 떨어져 있어도 된다는 장점이 있다. ---- id는 원칙적으로 문서내..

폼을 만드는 태그 폼(form)이란? :: HTML에서 폼이란 데이터를 서버에 보내기 위해 사용하는 모든 대화형 컨트롤을 의미한다. :: 보내진 데이터는 서버의 데이터베이스에서 처리하며 ASP나 PHP, JSP 같은 서버 프로그래밍 언어를 이용한다. :: HTML과 CSS로 눈에 보이는 프론트엔드 페이지를 꾸미고 실제 처리는 서버의 백엔드 스크립트가 처리한다. :: form태그는 동적웹에서 주로 활용되므로 결과를 제대로 확인하려면 실습환경을 그에 맞게 구성할 필요가 있다. -- 주로 APM이라고 부르는 Apach웹서버, PHP, MySql(혹은 MariaDB)를 설치한다. -- 실습환경 세팅에 대한 부분도 언젠가 기회가 된다면 포스팅 할... 지도? 태그 (MDN) :: 폼의 시작과 끝을 알리는 구획 태..

HTML 이미지 맵 만들기 이미지맵이란? :: 문서 내 이미지의 일부 범위만 지정해서 링크를 거는 것. :: 하나의 이미지의 서로 다른 범위에 서로 다른 링크를 거는 것도 가능하다. 태그 (MDN) :: 이미지 맵을 만들때 사용되는 태그 :: map태그의 name 속성과 img 태그의 usemap속성으로 서로 연결한다. :: id 속성을 사용했다면 name 속성의 값과 id 속성의 값은 서로 같아야 한다. ex) ... 태그 (MDN) :: 이미지맵에서 이미지 내의 범위를 지정하고 링크를 걸 때 사용하는 태그. :: a태그에 shape 속성과 coords 속성이 추가된 태그라고 생각하면 된다. -- 범위 지정시 웹페이지 내에서의 이미지로 지정해야한다. -- 이미지를 확대 혹은 축소했을 경우 좌표가 달라짐..

링크를 만드는 태그 태그 (MDN) :: 다른 문서 혹은 문서 내의 다른 부분 혹은 그 외의 주소(URL)로 이동하는 연결점을 만드는 태그. :: 텍스트 혹은 의 두가지 형태로 사용된다. :: 방문 주소를 나타내는 href 속성은 필수로 있어야 한다. :: 링크가 걸린 텍스트는 밑줄이 쳐진 색있는 텍스트로 표현된다. :: 링크를 방문하기 전에는 파란색, 클릭 중이면 빨간색, 방문 후에는 빨간색으로 표시된다. 태그와 관련된 주요 속성 :::: href 속성 -- 이동할 주소(URL)를 나타내는 속성. -- 값으로는 HTTP 기반 URL이 가장 많이 사용되지만, 브라우저가 지원하는 모든 URL 스킴을 사용할 수 있다. ---- URL 스킴이란 FTP, mailto, rtsp 등 URL의 맨 앞에서 URL의 ..

이미지를 표시하는 태그 태그 (MDN) :: HTML 문서에서 이미지를 표시할 때 사용되는 태그. :: 닫는 태그는 사용하지 않는다. :: 이미지 주소를 나타내는 src 속성은 필수로 있어야 한다. img 태그의 주요 속성 :::: src 속성 -- 표시할 이미지의 주소(URI)를 나타내기 위해서 사용되는 속성. -- 값으로 내 컴퓨터에 있는 파일 경로나 웹 이미지 링크 주소를 사용할 수 있다. ---- 내 컴퓨터에 있는 파일을 웹에 보여주려면 이미지 파일도 서버에 같은 경로로 올라가 있어야 한다. ---- 웹 상의 이미지를 사용할 경우 경로를 '참조'하는 방식이기 때문에 원본 경로의 이미지 상태에 종속된다. :::: alt 속성 -- 이미지를 표시할 수 없을 때 이미지를 설명하는 대체 텍스트를 삽입하기..

표를 만드는 태그 태그 (MDN) :: 표의 시작과 끝을 나타내는 태그. :: 기본 스타일에서는 테두리가 표시되지 않는다. 태그 (MDN) :: 표의 제목을 나타낸다. :: 태그의 첫번째 자식이어야 한다. :: 표의 상단에 가운데 정렬로 표시된다. 태그 (MDN) :: 표의 행(row: 가로줄)을 나타내는 태그. :: 태그 안에 사용한다. 태그 (MDN) :: 표에서 제목셀의 역할을 하는 셀 한칸을 나타내는 태그. :: 전역 속성인 id 속성을 사용해서 id를 지정해두면 headers 속성으로 관련된 셀임을 나타낼 수 있다. :: abbr 속성을 사용하여 화면엔 표시되지 않지만 접근성에 도움을 주는 셀 내용에 대한 간략한 설명을 추가할 수 있다. :: scope 속성을 사용하여 화면엔 표시되지 않지만 이..