Bang's

알고있으면 좋은 HTML5 Tip✨ 시맨틱 태그란? 시맨틱 태그란 의미가 있는 태그를 말한다. 모든 block 영역은 div 태그로, inline 요소는 span 태그와 달리, header, main, footer, section, article과 같은 태그 자체에 의미가 담긴 태그를 말한다. (1) 시맨틱 태그를 사용하는 이유 검색엔진은 태그를 기반으로 페이지 내 검색 키워드의 우선순위를 판단한다. 따라서 제목은 h1, 중요한 단어는 strong 또는 em을 사용하는 등 의미에 맞는 올바른 태그를 사용하는 것이 중요하다. 시각장애가 있는 사용자가 스크린 리더를 사용하여 페이지를 탐색할 때 도움이 된다. (2) 시멘틱 태그 종류 header 페이지의 제목과 같은 소개 내용을 포함한다. 일반적으로 head..

알고있으면 좋은 HTML5 Tip✨ HTML5에 CSS, Javascript 파일을 연결하는 두가지 방법은? HTML 파일에 style, script 태그를 넣어 직접 코드를 작성하는 방법이 있다. HTML과 CSS, Javascript 파일을 분리하여 작성한 후 HTML에 연결하는 방법이 있다. (1) HTML 파일에 CSS 파일 연결하기 rel : 스타일시트(stylesheet) href : CSS 파일 경로 type : 콘텐츠의 미디어 타입 (기본값이 설정되어 있기 때문에 반드시 명시할 필요는 없다.) (2) HTML 파일에 Javascript 파일 연결하기 src : Javascript 파일 경로 type : 콘텐츠의 미디어 타입 (기본값이 설정되어 있기 때문에 반드시 명시할 필요는 없다.) de..

알고있으면 좋은 HTML5 Tip✨ label 태그사이에 위치한 text, checkbox, radio 등은 클릭 가능 영역이 텍스트로 확장된다. 와 값은 서로 그룹을 형성한다. 쉽게 말해, 태그는 태그를 도와주는 역할을 한다. 태그가 디자인 하기 힘들 때 태그로 연결해서 쉽게 디자인하거나 클릭 편의성을 높일 수 있다. (1) label for 사용법 ID 태그는 for 속성을 사용해서 태그의 id 속성에 연계해서 사용한다. label의 for값과 input의 id값을 일치시키면 된다. 현재 시각으로 업데이트 가장 좋은 예시는 radio나 checkbox 속성값을 사용할 때이다. 보통 이런 버튼은 너무 작아서 클릭할 때 비효율적 작은 경우가 있다. 태그를 이용해 텍스트를 추가하면 텍스트를 클릭해도 자동으..

알고있으면 좋은 HTML5 Tip✨ Form 사용자가 정보를 입력 / 선택할 때 사용하는 HTML 태그이다. 사용자가 웹 사이트에 정보를 전송하는 것을 허용한다. text field, button field, select field 등의 역할을 수행한다. (1) form의 기본 형태 ... action : 사용자가 입력한 데이터를 전송하는 방법, 어느 서버로 데이터를 보낼지 결정한다. name : form의 이름을 정한다. 거의 사용되지 않는다. target : a 태그에서 사용되는 target 속성과 같다. _self, _blank method : 일반적으로 get 방식과 post 방식이 있다. 등록 submit : action 속성에 정의된 웹페이지로 전송한다. reset : 모든 폼 위젯을 기본 값..