본문 바로가기

html

[html] meta 태그의 종류와 이해 오늘은 홈페이지 구성에서 빠져서는 안 되는 메타태그에 대해 알아보자! 1. 메타태그(meta tag)란? 메타태그는 브라우저와 검색 엔진을 사용할 수 있게 문서 자체의 정보를 포함하는 태그이다. 반드시 앞, 안에 사용해야 한다. 2. 메타태그의 속성 http-equiv="항목명" 웹 브라우저가 서버에 명령을 내리는 속성 name 속성 대신 사용 가능 html 문서가 응답 헤더와 함께 웹 서버로부터 웹 브라우저에 전송되었을 때만 의미를 가짐 content="정보값" meta 정보의 내용을 지정 name="정보 이름" 몇 개의 meta 정보의 이름을 정할 수 있으며 지정하지 않으면 http-equiv와 같은 기능 3. 메타태그의 종류 keywords 검색 엔진에 의해 검색되는 단어를 지정 Descriptio.. 더보기
[html] a태그 클릭 시 다른 페이지의 원하는 위치로 이동하는 방법(+ 페이지 내 이동) 클릭 시 이동되었으면 하는 위치의 컨텐츠에 id를 부여하고 아래처럼 a태그에 작성해주면 된다. 섹션_1로 이동 페이지 내에서의 이동도 가능하다. 섹션_1로 이동 섹션_2로 이동 섹션_3로 이동 블라블라블라블라 블라블라블라블라 블라블라블라블라 a태그를 클릭하면 해당 id의 위치로 이동한다. id 대신 name도 사용이 가능하다. 더보기
[html] table 속성 정리 (tr, th, td, tbody, caption, colspan, colgroup) 게시판, 데이터 관리에 유용하게 쓰이는 table에 대해서 알아보자. 1. table 일반적인 표라고 생각하면 가장 이해하기 쉽다. 2. table 기본 태그 - table row table의 행을 의미하는 태그, 자식요소로 th나 td가 반드시 있어야 한다. - table header table의 제목을 의미하는 태그 (기본값으로 글자가 굵게, 가운데 정렬) - table data table의 일반 셀을 의미하는 태그 (기본값으로 왼쪽 정렬) 해당 테이블의 제목이나 설명을 작성하는 태그, 필수요소는 아니다. (기본값으로 가운데 정렬) 반드시 table 태그 바로 다음에 위치해야 한다. HTML5에서 새로 추가된 figure 태그 안에 마크업할 경우, figcaption이 같은 역할을 한다. 3. tab.. 더보기
[html] form에 대하여 1. form form 태그는 사용자로부터 입력을 받을 수 있는 HTLM 입력 폼(form)을 정의할 때 사용한다. form 은 다음 요소들을 포함할 수 있다. - - - - - - - - 예시) 제목 작성자 비밀번호 form에 사용 가능한 속성 accept 파일 타입 서버로 업로드할 수 있는 파일 타입을 콤마(,)로 구분된 리스트로 지정 HTML5에서는 더 이상 지원 X accept-charset 문자셋 폼 데이터(form data)가 서버로 제출될 때 사용되는 문자 인코딩(character encoding) 방식을 지정 action URL 폼 데이터가 서버로 제출될 때 해당 데이터가 도착할 URL을 지정 autocomplete on off 요소에서 자동 완성 기능을 사용할지 여부를 지정 enctype.. 더보기
[html] input, label 완전 정복! input type text 기본 값, 한줄의 텍스트 입력 칸 password 입력 된 문자가 보이지 않게 표시 checkbox 중복 선택 가능한 체크박스 radio 항목 중 한가지만 선택 가능한 버튼 button 클릭 가능한 버튼 submit 전송 버튼 reset 초기화 버튼 file 업로드할 파일 선택 버튼 hidden 사용자에게 보이지 않는 칸 (서버에 특정 값을 넘길 때 사용) image 이미지로 된 전송 버튼 color 색상 선택 칸 date 달력형의 날짜 선택 칸 datetime 날짜 시간 칸 (표준 시간) datetime-local 날짜 시간 칸 (표준 시간 없음) email 이메일 주소 입력 칸 month number 숫자 입력 칸 range 특정 범위를 마우스로 드래그하여 입력할 수 있는.. 더보기
[html] a태그에서 href에 링크 대신 적용할 수 있는 값(#, javascript:) a태그를 사용하면 클릭할 수 있게 커서 모양이 잡히게 된다. 나 같은 경우엔 웹접근성을 위해 링크 없이 a태그를 사용해야할 경우가 많은데, 이때 링크 대신 적용할 수 있는 값을 정리하려고 한다! 웹페이지가 새로고침되는 되어 웹 상단으로 이동하게 된다. 위의 네가지를 사용하면 페이지 이동 없이 a태그가 지니는 효과를 사용할 수 있다. 원하는 요소에 id값을 지정하고 href에 그 id값을 넣으면 a태그를 클릭했을 때 페이지 내에서 해당 요소가 있는 위치로 이동시킬 수 있다. 더보기
[html] 자주 쓰는 특수문자 코드표 (&, #, 여백) 특수문자가 포함된 경우 웹브라우저가 그것 또한 코드로 인식하여 오류가 생기는 경우가 많다. 이를 방지하기 위해 특수문자를 아래의 코드로 변경하여 작성한다. > & & # # " ' ' ; ^ ^ ; ; space(띄어쓰기) 더 많지만 자주 쓰는 것만 모아봤다! 더보기

티스토리툴바