본문 바로가기
SMALL

퍼블리싱/html

 (7)
html 데이터 속성 data-* 리마인드 하기, 사용하는 이유 data-* 속성은 사용자 지정 데이터 특성(custom data attributes)으로 특정 클래스를 생성해서 임의의 데이터를 자바스크립트로 HTML와 DOM사이에 교환할 수 있는 방법이다. 이는 html5에서 지원하는 기능이다. 표준 사용자 지정 데이터 속성이다. data-* 를 사용하면 html에서 속성을 커스텀 해서 사용할 수 있다. 꼭 앞에 data-를 붙여줘야 한다. 그냥 클래스 붙혀서 사용할 수 도 있지 않을까?클래스명을 사용해서 처리를 할 수도 있지만 data- 속성을 사용하는 이유는 다음과 같다.1. data-* 를 사용하면 코드가 간결해지고 유지보수가 용이해진다. 자바스크립트를 통한 데이터 접근이 간단해진다.2. 브라우저는 커스텀 데이터 같은 경우 속성에 관여하지 않아서 화면에 영향을..
html5 <picture> 태그 알아보기 태그는 html5에서 새롭게 추가된 태그이고,미디어 쿼리에 따라 표현하고자 하는 이미지를 표현할 수 있다.반응형으로 미디어쿼리를 제어 했을때 뷰포트 크기에따라서 보여주고자 하는 이미지를 마크업에서 제어한다.  코드의 구성은 아래와 같다.  브라우저는 의 요소들의 속성값을 하나씩 확인해서 첫번째 요소부터 사용한다.각각 에 뷰포트를 지정해주고 srcset에 이미지 경로를 적어준다.여기서 요소는 자식 요소에서 가장 마지막에 위치하면 된다.위 는 태그를 지원하지 않는 브라우저의 하휘 호환성을 위해 사용되거나,위 가 모두 만족하지 않을때 태그에 있는 것을 보여준다.  https://www.tcpschool.com/html-tags/picture 코딩교육 티씨피스쿨4차산업혁명, 코딩교육, ..
HTML input 유효성검사 두가지 방법으로 하는 법(html, javascript) 1. html로만 유효성 적용하기 1-1. 일반적인 input 이메일 비밀번호 로그인 위 와 같이 버튼을 눌렀을 때 아무런 표시를 안 해두면 form에 어떤 field를 채워야 하는지 지시가 나오지 않기 때문에 에 requred 속성을 추가해 준다. 위와 같이 requred를 추가하면 버튼을 눌렀을 때 빈칸일 경우 브라우저에서 제공하는 기본 alert이 뜬다. required 속성은 text, search, url, tel, email, password, checkbox, radio, date pickers, number, file과 같은 유형에서 함께 사용가능하다. 1-2. checkbox, radio 유형 성별 저장하기 수량선택 선택하세요. 1 저장하기 2. HTML 추가적인 요소 유효성을 검사하는데..
html table 속성과 웹 접근성 정리 html5 table 속성 관련해서 한번 더 정리할 겸 웹 접근성과 함께 간단하게 정리해보았다. 1. 태그에서 존재하는 여러가지 속성 테이블 정의 테이블 cell 안에 있는 헤더 정의 테이블 안에 row 정의 테이블 셀 정의 테이블 캡션 정의 하나이상의 열 그룹을 지정할 때 사용 colgroup 요소 내의 각 열에 대한 속성 지정 테이블 헤더를 그룹화 테이블 바디를 그룹화 테이블 푸터 그룹화 1-1. 첫번째 tr안에는 thead가 들어가야 한다. Person 1 Person 2 Person 3 Emil Tobias Linus 16 14 10 1-2. 첫번째 열을 테이블 샐로 사용하려면 tr안에 th추가 Firstname Jill Eve Lastname Smith Jackson Age 94 50 1-3. ..
HTML5 데이터 속성 사용하기 (data-value) 데이터 속성 사용하기 Html에 스타일이나 자바스크립트에서 속성을 지정할 때 클래스로만 주지 않고 html에 있는 data를 이용해서도 적용 할 수 있다. data- 속성은 추가적인 DOM 속성과 같은 다른 조작을 하지 않고도, 의미론적으로 표준 html에 요소 추가 정보를 저장할 수 있다. 속성의 이름이 data-로 시작하는 모든 속성을 사용할 수 있다. 이렇게 함으로서 특정한 데이터를 DOM 요소에 저장해두기 위함이 목적이다. 그럼 그냥 클래스만 써서 적용하면 되지 왜 data-를 쓰냐?! class는 주로 CSS 스타일링이나 JavaScript에서 특정 요소를 선택하기 위한 용도로 사용된다. 같은 클래스명을 가진 요소들은 특정 스타일이나 동작을 공유할 수 있다. 반면에 data- 속성은 요소에 관련..
html 태그 <strong> <b> <i> <em> 차이 알아보기 Strong, b 태그 둘다 강조하는 태그는 맞다. b 태그 단순히 텍스트를 진하게 표시만 하는 역할을 한다. (굵게) strong 태그 단순한 강조가 아닌 실제로 페이지 내에 중요한 부분을 브라우저에게 알려주는 역할을 한다. (중요하게) 웹 접근성에 큰 기여를 한다. 스크린리더를 사용할 때 strong을 쓰면 거센 억양으로 강조하듯이 읽어준다. 결론적으로, 특정 텍스트에 실제로도 강조하고자 하는 경우 strong, 단순히 굵게만 보이도록 하려면 b 태그 사용하면된다. 비슷한 맥락으로 i(italic)태그도 동일하게 작용한다. i태그는 기울임(기술용어, 외국어 구절 등...)을 나타내는데 em은 주위 텍스트와 비교했을 때 실질적인 강조를 의미하게 된다. 마찬가지로 스크린 리더에 영향을 끼친다. 디자인적으..
막간을 이용해 정확히 짚고 넘어가는 <input> 태그의 속성들 나는 실무에서 input 태그를 많이 사용해봤지만... 사용할때 마다 100% 알지 못하는 그런 기분.. 아는데 모르는 기분... 이번기회에 다시한번 정리하고자 한다. 태그란? 태그의 type 속성의 기본값은 "text"이며, 요소의 필수 속성은 아니지만 명시해두는 것이 좋음. 속성값 속성값 설명 button 클릭할 수 잇는 버튼을 정의함 checkbox 체크박스를 정의함 color 색을 선택할 수 있는 입력필드를 정의함(color picker) date 날짜를 선택할 수 있는 입력필드를 정의(year, month, day) datatime-local 날짜,시간을 선택할 수 있는 입력필드 정의(year, month, day, hour, minute) email 이메일 주소를 입력할 수 있는 필드 정의 f..
반응형
LIST

티스토리툴바