Frontend/HTML17 [HTML] 데이터 속성 사용하기(data attribute) Data 속성 HTML5부터 데이터 속성이라는 개념이 추가되었는데 HTML 요소의 'data-'로 시작하는 속성이다. 이러한 데이터 속성은 특정한 데이터를 DOM 요소에 저장해두기 위함이 목적이다. 데이터 속성은 'data-'로 시작해야하면, 브라우저는 이러한 데이터 속성에는 어떠한 행동도 관여하지 않기 때문에 개발자는 요소에 특정한 데이터를 저장하고 싶은 경우 자유롭게 사용할 수 있다. data-*전역 트성은 사용자 지정 데이터 특성(custom data attributes)라는 특성 클래스를 형성할 수 있다. data-value 속성은 임의로 만들어진 사용자 지정 데이터이기 때문에 value속성과는 상관이 없다. 데이터 속성의 장점 데이터 속성의 장점은 이전과 같이 hidden으로 태그를 숨겨두고 데.. 2021. 10. 2. [HTML] button, output, progress, meter 태그 태그 - 버튼 넣기 태그로 submit이나 reset의 버튼을 만들 수 있다. 속성 속성 값 설명 submit 폼을 서버로 전송한다. reset 폼에 입력한 내용을 초기화시킨다. button 버튼 형태만 만들 뿐 자체 기능은 없다. 태그와 태그의 차이점 태그는 태그 이름에서 알 수 있듯이 화면 낭독기에 그 역할을 정확하게 전할 수 있다. 즉 웹접근성에 더 좋다는 것이다. 또한 태그를 사용한 버튼에는 콘텐츠를 포함할 수 있기 때문에 아이콘을 추가할 수 있고 CSS를 이용해 원하는 형태로 꾸밀 수 있다. form에서 버튼을 만들 때는 웹접근성을 위해 태그로 만드는 것이 좋을 것 같다. 태그 - 계산 결과 입력하는 값이 계산 결과라는 것을 브라우저에 알려준다. output 태그를 사용하면 output으로 묶인.. 2021. 9. 26. [HTML] 드롭다운 목록(select, option, datalist optgroup, textarea) , , 태그 - 드롭다운 목록 만들기 사용자가 내용을 입력하는 것이 아니라 여러 옵션 중에서 선택하도록 하고 싶을 때 드롭다운 목록을 사용한다. 태그 드롭다운 목록의 시작과 끝을 표시한다. 한 가지 옵션이 표시되고, 화살표를 클릭해 그 옵션들을 살펴볼 수 있고 필요한 한 가지 항목을 선택할 수 있다. 즉, 사용자가 선택할 수 있는 선택 항목을 제공하고, 그 범위내에서 선택이 가능하다. 속성 size - 화면에 표시될 드롭다운 메뉴의 항목 개수를 지정한다. multiple - 브라우저 화면에 여러 개의 옵션이 함께 표시되면서 ctrl 키를 누른 상태로 드롭다운 메뉴에 있는 여러 항목을 선택할 수 있다. 태그 드롭다운 목록에 표시되는 옵션들은 태그를 이용해 지정한다. 태그에서만 사용하는 속성은 다음과 같다... 2021. 9. 26. [HTML] form 이용해서 상품 주문서 작성해보기 See the Pen by seyoungjoy (@seyoungjoy) on CodePen. 각각 스타일을 주기위해 어떤 부분은 label안에 input을 포함할지 말지의 여부를 다르게 한다. 필수로 들어가야하는 부분은 required를 꼭 붙여주고 주문 정보 같은 부분은 한 list 안에 두개의 label태그가 들어가 상품 checkbox와 number 두개의 input을 만들어야한다. 2021. 9. 25. [HTML]<input> 태그 속성 autofocus 속성 - 입력 커서 표시하기 페이지를 불러오자마자 폼의 요소 중에서 원하는 요소에 마우스 커서를 표시할 수 있다. placeholder 속성 - 힌트 표시하기 사용자가 텍스트를 입력할 때 도움이 되도록 입력란에 적당한 힌트 내용을 표시하고 있다가 그 필드를 클릭하면 내용이 사라지도록 만들 수 있다. readonly 속성 - 읽기 전용 필드 만들기 입력란에 사용자가 입력하지 못하고 읽게만 만든다. required 속성 - 필수 필드 지정하기 내용을 폼에 입력한 후 submit 버튼을 클릭하면 폼을 서버로 전송하는데 이때 필수 필드에 필요한 내용이 모두 채워졌는지 검사해준다. min, max, step 속성 - 최솟값, 최댓값, 간격 태그의 유형이 date, datetime, datetim.. 2021. 9. 25. [HTML] <input> 태그의 type 웹에서의 폼은 크게 사용자가 입력하는 부분과 입력한 내용을 서버로 보내는 버튼 부분으로 나눌 수 있다. 사용자가 입력하는 부분은 한 줄짜리 텍스트나 비밀번호 같은 부분인데 이런 부분을 만들 때 사용하는 태그가 태그이다. id 속성 사용하기 input에서 id 속성은 매우 중요하다. 똑같은 폼 요소들을 많이 사용할 수도 있기때문에 이것을 구분해주고, 또 폼마다 다른 css를 적용해줄 때 id 값이 필요하다. 또한 id를 지정해놓으면 태그를 이용해 캡션을 붙일 수도있다. 태그의 type 속성에서 사용 가능한 유형 유형 설명 hidden 사용자에게는 보이지 않지만 서버로 넘겨지는 값을 가진다. text 한 줄짜리 텍스트를 입력할 수 있는 텍스트 상자를 넣는다. * 사용 가능한 속성 name - 텍스트 필드를 .. 2021. 9. 25. 이전 1 2 3 다음 반응형
