본문 바로가기

HTML

 (7)
폼(form) 구성 요소 및 사용법 폼 요소들은 사용자 입력 양식을 표현하기 위해 사용하며, 보통 회원가입 및 로그인할 때 사용합니다. action 실행 애플리케이션을 지정하는 것이며, 데이터를 처리하는 서버에 데이터를 보내려면 브라우저가 전송 위치를 알아야 하기 때문에 이 속성을 사용합니다. 보통 속성값을 모르더라도 비워둔채 정의해야 문서 검사를 하는 validation에 오류가 나지 않습니다. method 어떤 방법으로 데이터를 전송할 지를 정의하는 것이며, 두가지의 방법이 있습니다. get : 기본값이며, 입력된 데이터가 url에 의해 전송되므로 암호화하지 않으면 어떤 데이터를 입력했는지 알 수 있습니다. post : 입력된 데이터를 HTTP Body에 담아 전송하며 서버측에서 데이터를 처리하는 방식이며, 주로 민감한 정보 데이터인 ..
테이블(table) 구성 요소 및 사용법 테이블은 x축과 y축을 기준으로 정보를 나열할 때 유용하게 사용할 수 있습니다. 테이블의 제목 tr 테이블의 행(row)을 말하며, 내부에 셀제목과 셀 내용을 포함합니다. th 테이블 셀 제목으로 행 내부에 포함되어야 합니다. th에서 사용할 수 있는 속성은 하단과 같습니다. scope : 행 또는 열, 행그룹, 열그룹의 제목 colspan : 열을 병합할때 사용 rowspan : 행을 병합할때 사용 td 셀 내용으로 tr 내무에 포합되어야 합니다. colspan : 열을 그룹 지을때 사용 rowsapn : 행을 그룹 지을 때 사용 thead 테이블 행 블록 내에 제목을 구성할때 사용하며, 필수 입력이 아닙니다. tbody 행 블록 내에 테이블 데이터를 구성할 때 사용하며, 필수 입력이 아닙니다.
HTML body 내부 태그 요소 - 인라인 요소(inline element) 인라인 요소(inline element) 특정 문서를 링크하는 기능이며, 인라인만 포함 가능합니다. - href : 링크 문서의 경로(필수 값) - title : 링크 문서에 대한 설명(마우스 커서를 올리면 나오는 문구) - target : 링크 내용이 보여질 방식 설정(_self: 기존창 표시 / _blank: 새창 표시) ​ 문장의 특정 구역을 선택 가능하며, 인라인만 포함이 가능합니다. 이미지를 삽입할 때 사용합니다. - src = "이미지의 경로" - alt = "표준법으로 인해 필수 기입을 해야하며, 이미지가 표시되지 못할때 대체 텍스트로 나옵니다." - title = "이미지의 제목" ​ 사용자에게 데이터를 입력 받기 위해서 사용합니다. type에 따라 동작방식은 달라지며, type의 속성이 ..
HTML body 내부 태그 요소 - 블록요소(block element) 블록요소(block element) ~ 문서의 주요 타이틀에 사용되며, 높은 제목일수록 중요도가 높습니다. 대제목, 중제목, 소제목, 소소제목 등등 으로 구성이 되며, HTML5에서는 섹션 콘텐츠 마다 사용 가능합니다. 텍스트의 문단(단락, 문장) 등을 구분할 때 사용합니다. 스페이스는 띄어쓰기 한번이라고 인식하며, p태그 안에 로 줄바꿈이 가능합니다. ,, 목록이 있는 집합을 나열할 때 사용하며, 각 집합의 유형에 따라 특징이 다릅니다. - : 순서가 필요없는 목록이며, ul 안에는 li만 포함이 가능합니다. - : 순서가 필요한 목록이며, ol 안에는 li만 포함이 가능합니다. - : 각 목록의 아이템이며, 블록요소+인라인요소 포함이 가능합니다. 과일 바구니 목록 딸기 사과 일간 음원 차트 순위 bt..
HTML 5 시맨틱 (Semantic)마크업 HTML 5 시맨틱 (Semantic)마크업 시맨틱(Semantic)은 "의미론적인"이란 뜻을 가진 단어이며, 문서의 의미에 맞게 구성된 웹을 뜻한다. 시맨틱 웹으로 작성하는 이유 검색 엔진 최적화(SEO) 웹 브라우저에 검색을 하게 되면 검색색엔진을 통해 정보를 제공하는데 이때, 로봇이 프로그램을 이용해 검색엔진의 크롤러가 웹 사이트 정보를 수집하는데 이 행위를 크롤링이라고 한다. 웹 접근성 웹 사이트에서 제공하는 정보에 비장애인과 동등하게 접근하고 이해할 수 있도록 하는 것 코드 가독성 단순히 div 태그를 주로 사용한다면, 구조적으로 파악하기 어려움으로 코드 가독성이 좋아진다. 시맨틱 태그 종류 페이지에서 머릿말, 사이트 네비게이션이나 페이지에 대한 정보를 담는 태그입니다. 보통 해당 페이지의 로고..
HTML body 내부 태그 요소 - 블록요소(block element) & 인라인 요소(inline element) 특징 블록요소(block element) html body 내부에 작성하는 수많은 태그들중 각각의 특정들이 있는데, 크게 두분류로 나누면 블록요소(block element)와 인라인 요소(inline element)가 있다. 블록요소와 인라인요소 특징 블록요소(block element) width는 별도 지정 값이 없을 경우 기본이 100%이며, 부모 요소의 넓이 값을 영향을 받습니다. 요소들이 세로로 쌓이는 특징이 있습니다. height에 별도 지정 값이 없을 경우 내부 콘텐츠 사이즈 높이에 영향을 받습니다. 모둔 방향의 margin, padding, border 값을 사용합니다. 블록요소는 블록요소와 인라인 요소를 함께 포함할 수 있습니다. 인라인 요소(inline element) text level el..
HTML head 요소 HTML head 요소 head 요소는 메타데이터(데이터에 대한 데이터)에 대한 컨테이너이며, HTML 메타 데이터는 HTML 문서에 대한 데이터입니다. 일반적으로 문서 제목문자 세트, 스타일, 스크립트 및 기타 메타 정보를 정의합니다. HTML 문서에 관한 정보를 검색엔진, 브라우저 등에게 제공하며 charset="문자의 인코딩 방식"을 뜻합니다. ​ 브라우저 툴바에서 제목을 정의하며, 즐겨찾기에 추가 될 때 페이지 제목을 제공합니다. 검색 엔진 결과에 페이지 제목을 표시합니다. HTML 문서의 제목 ​ 외부 문서를 연결할때 사용하며, 주로 스타일 시트 연결하는데 사용합니다. ​ HTML 문서의 자바스크립트를 입력하거나, 외부 자바스크립트 문서를 연결할 때 사용합니다 // 링크 연결할때 사용 ​ // ..

티스토리툴바