UpWrite

요약문을 만드는 태그 태그 (MDN) :: "열림" 상태일 때만 내부 정보를 보여주는 정보 공개 위젯을 만든다. :: "닫힘" 상태일 때 보여줄 요약이나 레이블은 태그를 통해서 제공할 수 있다. :: 열림, 닫힌 상태는 레이블 옆의 작은 삼각형이 돌아가면서 표시된다. :: 이 마커는 css의 ::marker 가상 요소를 이용해서 스타일링 할 수 있다. :: Boolean값인 open 속성을 사용하여 초기 상태를 열림 상태로 바꿀 수 있다. 태그 (MDN) :: 디테일 태그 내부에 사용하여 "닫힘" 상태일 때 보여줄 요약이나 레이블을 표시한다. :: 사용하지 않을 경우 브라우저 기본값으로 자동 생성된다. See the Pen QWdgpKW by lypi (@Lypi) on CodePen.

구조를 만드는 시멘틱 태그 웹 표준인 HTML5가 제정되기 전까지는 문서 구조를 태그로 잡고 id 속성으로 구분했다. 이 방식의 문제점은 다음과 같다. 1. 문서 구조를 한눈에 파악하기 어려워서 이후에 유지보수 하기가 어렵다. 2. 웹 접근성 도구나 검색 엔진이 문서의 구조를 파악하기 어렵다. 이러한 문제를 해결하기 위해서 HTML 표준안에서 웹 문서의 일반적인 구조를 표현하는 시멘틱 태그들이 추가되었다. 시멘틱 태그들은 이런 표준화된 웹 문서 레이아웃을 표시하는데 도움을 준다. -- 시멘틱 태그들은 HTML 문서 본문의 구조를 나타내는 태그이므로 모두 body 태그 내부에 사용된다. 태그 (MDN) :: 문서의 머릿말 부분을 나타내는 태그. :: 전체 페이지에 대한 소개나 탐색을 위한 내용이 포함된다...

버튼을 만드는 태그 :: 도 버튼을 만드는데 사용되지만 태그도 버튼을 만드는데 사용된다. 태그의 장점 :: 태그는 태그보다 css디자인을 적용하기 훨씬 수월하다. -- 태그는 value 속성에 텍스트값 밖에 지정할 수 없지만, -- 태그는 내부에 HTML 콘텐츠(, 심지어 )도 포함할 수 있다. -- '::aftet', '::before' 가상 클래스까지 사용하는 복잡한 렌더링도 가능하다. 태그의 주요 속성 :: type : 버튼의 행동 방식. 'submit', 'reset', 'button'의 세가지 값을 가질 수 있다. -- submit : 버튼을 누르면 양식의 데이터를 서버로 제출한다. type속성의 기본값이다. -- reset : 버튼을 누르면 모든 컨트롤의 입력값을 초깃값으로 되돌린다. -- b..

대화형 컨트롤을 만드는 태그 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 속성이 추가된 태그라고 생각하면 된다. -- 범위 지정시 웹페이지 내에서의 이미지로 지정해야한다. -- 이미지를 확대 혹은 축소했을 경우 좌표가 달라짐..