FrontEnd/HTML

HTML <div>,<span>,<article>,<section> 태그 차이

태그 ＜article＞요소는 내용이 각기 독립적이고,홀로 설 수 있는 내용을 담는다. 주로 블로그 글, 뉴스 기사 등… 블록체인이란? 분산형 시스템... ... 태그 ＜section＞ 요소는 서로 관계 있는 문서를 분리하는 역할을 함. 주로, 문서를 다른 주제로 구분짓기 위해 사용됨 HTML의 2번째 이야기 웹 문서를 만들때 ~~ ... 태그와 태그 ＜div＞는 의미적으로 관계가 없을때 주로 사용하고, 오직 내용을 묶는 역할이라고 보면 된다. ＜span＞과 비슷한 역할을 하는데 차이가 있다. ＜div＞는 줄바꿈이 되지만 ＜span＞태그는 옆으로 붙는다. 텍스트를 표현할 때 ＜div＞는 사각형 박스로 구역을 정하지만 ＜span＞은 문장 단위로 지정함. div 테스트 div 테스트 div 테스트 div 테스..

HTML input 태그의 주요 속성

자동으로 입력 커서를 갖다 놓는 autofocus 속성 예전에는 이 기능을 구현하려면 자바스크립트를 이용해야했지만 HTML5에서는 autofocus라는 속성으로 구현이 가능하다. //사용예시 이름 힌트를 표시해 주는 placeholder 속성 텍스트를 입력하기 전에 힌트를 써 주는 속성. 아래의 사진을보면 연락처 입력 칸에 있는 회색 글시를 의미함. 클릭하면 해당 글씨는 사라짐. //사용예시 연락처 읽기 전용 필드를 만들어 주는 readonly 속성 사용자가 입력하지는 못하고 읽게만 하는 읽기 전용 필드를 만들 때 사용. readonly 속성은 간단히 readonly라고만 쓰거나 readonly=”readonly”, 또는 readonly=”true”로 지정함. 필수 입력 필드를 지정하는 required ..

HTML 수평선 그리기

태그 HTML5에서는 hr태그를 표현적이기보다 의미적인 요소로 규정하여, 주제를 분리하기 위한 용도로 사용함. 닫는 태그는 없음. 너비,높이 등 스타일을 주고자 할 때는 CSS를 통해 작성함.

HTML 폼에서 사용하는 태그

여러 줄을 입력하는 텍스트 영역 태그 내용 ＜textarea＞태그의 속성 cols : 텍스트 영역의 가로 너비를 문자 단위로 지정함. rows : 텍스트 영역의 세로 길이를 줄단위로 지정함. 지정한 숫자보다 줄 개수가 많아지면 스크롤 막대가 생김. //사용 예 메모 드롭다운 목록을 만들어 주는 , 태그 사용자가 내용을 직접 입력하지 않고 여러 옵션 중에서 선택하게 할때 드롭다운 목록이나 데이터 목록을 사용함. 드롭다운 목록은 목록을 클릭했을 때 옵션이 요소 아래쪽으로 펼쳐져서 붙은 이름임. 드롭다운 목록은 ＜select＞태그와 ＜option＞태그를 이용해 표시함. ＜select＞태그로 드롭다운 목록의 시작과 끝을 표시하고, 그 안에 ＜option＞태그를 사용해 원하는 항목을 추가함. ＜option＞태그에..

HTML 사용자 입력을 위한 input태그

사용자 입력을 위한 : ＜input＞태그는 다양한 폼에서 사용자가 입력한 정보를 받을 때 사용함. ＜input＞태그에서 사용할 수 있는 다양한 type 속성은 다음과 같다. text : 한 줄짜리 텍스트를 입력할 수 있는 텍스트 박스를 넣는다. password : 비밀번호를 입력할 수 있는 필드를 넣는다. search : 검색할 때 입력하는 필드를 넣는다. url : URL주소를 입력할 수 있는 필드를 넣는다. email : 이메일 주소를 입력할 수 있는 필드를 넣는다. tel : 전화번호를 입력할 수 있는 필드를 넣는다. checkbox : 주어진 여러 항목에서 2개 이상 선택할 수 있는 체크 박스를 넣는다. radio : 주어진 여러 항목에서 1개만 선택할 수 있는 라디오 버튼을 넣는다. number..

HTML 다양한 파일 삽입

다양한 멀티미디어 파일 삽입 : //기본형 ＜embed＞태그는 HTML초기 버전부터 사용해서 대부분 브라우저에서 사용 가능. src속성을 사용해 멀티미디어 파일을 지정. 필요할 경우 width,height 속성으로 플레이어 크기 조절 가능. 닫는 태그가 없음. 찾아보니 ＜embed＞태그는 ＜video＞,＜audio＞,＜object＞태그를 지원하지 않는 웹 브라우저를 고려해야할 때만 사용하는것이 좋다고 함. 플러그인 문제로 인한 것 같음. 권장되지 않는듯? 오디오와 비디오 파일을 삽입하는 , 태그 HTML4까지는 웹 브라우저에 멀티미디어 파일을 삽입 후 재생하려면 플러그인이 필요했음. HTML5에서는 웹 브라우저 안에서 멀티미디어 파일을 삽입하고 바로 재생 가능. 따라서 웹 브라우저마다 플레이어가 다름. ..

HTML 이미지 삽입하기

이미지를 삽입하는 태그 src속성은 이미지 파일의 경로를 지정하기 때문에 반드시 있어야함. 웹 문서가 있는 폴더와 이미지가 같은 폴더에 있다면 src속성에 이미지 파일 이름.형식 만 적으면 되지만 하위 폴더에 있다면 ex)images폴더 “images/이미지파일이름.형식” 같처럼 넣어줘야 한다. alt속성에는 화면 낭독기 등에서 이미지를 대신해서 읽어 줄 텍스트를 입력하기 때문에 필수적이진 않음. 이미지를 크기를 조절하는 width,height 속성 ＜img＞태그로 이미지 파일을 삽입하면 원래 이미지 크기대로 표시됨. 이미지 파일을 수정하지 않고 웹 브라우저 창에서 보이는 이미지 크기만 조절하고 싶다면 width와 height 속성을 사용한다. width는 이미지의 너비 height는 이미지의 높이 를 ..

HTML 하이퍼링크 삽입

링크 삽입 태그 : , href속성 텍스트 또는 이미지 //이미지 예시 주문서 작성하기 //이런식으로 target속성에 _blank를 지정하면 링크를 클릭했을 때 연결된 문서가 새탭에서 열림