HTML 폼 요소(Form Element) 종류

<input> 요소 가장 중요한 양식 요소는 <input> 요소이다. <input> 요소는 type 속성을 사용하여 여러가지 방식으로 표시될 수 있다. 예제 <select> 요소 <select> 요소는 드롭 다운 목록을 정의한다. 기본적으로 첫번째 드롭다운 목록의 첫번째 항목이 선택된다. 임의로 선택항목을 지정하고 싶다면 selected 옵션을 추가하면 된다. 이밖에도 아래와 같은 옵션이 더 존재한다. selected : 임의로 선택항목 지정. size : […]

HTML 폼(Form) 태그 만들기

폼(Form)웹 페이지에서는 form 요소를 사용하여 사용자로부터 입력을 받을 수 있다. 또한, 사용자가 입력한 데이터를 서버로 보낼 때에도 form 요소를 사용한다. <form> 요소 action 속성은 입력받은 데이터를 처리할 서버 상의 스크립트 파일의 주소를 명시한다. 이렇게 전달받은 데이터를 처리하는 스크립트 파일을 폼 핸들러(form-handler)라고 한다. method 속성은 입력받은 데이터를 서버에 전달할 방식을 명시한다. 따라서 사용자가 form 요소를 통해 […]

HTML 레이아웃(Layout) 만들기

레이아웃(Layout)레이아웃(layout)이란 특정 공간에 여러 구성 요소를 보기 좋게 효과적으로 배치하는 작업을 말한다. 웹 페이지의 레이아웃은 웹 사이트의 외관을 결정짓는 매우 중요한 요소이다. 레이아웃은 아래 사진과 같이 구성되게 된다. <header> – 문서 또는 섹션의 머리글을 정의한다.<nav> – 탐색 링크를위한 컨테이너를 정의한다.<section> – 문서의 섹션을 정의한다.<article> – 독립적 인 독립 기사 정의<aside> – 사이드 바처럼 콘텐츠를 제외하고 […]

HTML iframe 태그 종류와 예제

iframeframe이란 inline frame의 줄인말이다. iframe 요소를 이용하면 웹 페이지 안에 어떠한 제한 없이 또 다른 하나의 웹 페이지를 삽입할 수 있다. iframe 구문 HTML iframe은 다음 <iframe> 태그 로 표현한다. 사용 예제 iframe 높이 및 너비 설정 iframe 속성인 height, width 사용하여 높이 및 너비 길이를 설정할 수 있다. 높이와 너비는 기본적으로 픽셀 단위로 지정된다. […]

HTML 블록 및 인라인 요소(Block and Inline Elements)

HTML 요소의 타입 HTML의 모든 요소는 해당 요소가 웹 브라우저에 어떻게 보이는가를 결정짓는 display 속성을 가지게 된다. 대부분의 HTML 요소는 이러한 display 속성값으로 블록(block), 인라인(inline) 2가지 값 중 하나를 가지게 된다. 블록(block) 타입의 요소 display 속성값이 블록(block)인 요소는 언제나 새로운 라인(line)에서 시작하며, 해당 라인의 모든 너비를 차지한다. 예제 HTML display 속성값이 블록인 요소 위 요소들은 […]

윈도우10 PHP, apache 설치하기

웹 프로그래밍 언어인 PHP를 배우기 위해서는 APM(apache, php, mysql)설치된 개발서버 환경을 준비해야된다. 일반적으로 웹 호스팅을 서비스 받고 있는 상태라면 해당 웹 호스팅서버를 이용하면 되지만 그렇지 못한 환경이라면 자신의 윈도우 PC에 php, apache를 설치해서 php 공부를 해야될 것이다. php는 웹 사이트에 접속한 사용자의 요청을 처리하는 방식이기 때문에 HTML이랑 다르다. 고급언어라고 생각하는게 이해하기 쉬운데, 사용자가 입력한 데이터를 […]

HTML 테이블(Table) 태그와 속성

테이블(Table)테이블(Table)이란 여러 종류의 데이터(data)를 보기 좋게 정리하여 보여주는 표를 의미한다. HTML에서는 < table> 태그로 이러한 테이블을 표현한다. <table> 태그는 다음과 같은 태그들로 구성된다. <tr> 태그는 테이블에서 열을 구분해 준다. <th> 태그는 각 열의 제목을 나타내며, 모든 내용은 자동으로 굵은 글씨에 가운데 정렬이 된다. <td> 태그는 테이블의 열을 각각의 셀(cell)로 나누어 준다. 이번 장에서는 HTML 테이블 […]

HTML 목록(List) 태그 종류

목록(List)목록(List)이란 여러 요소들을 일렬로 나열된 글, 명단을 의미한다. 목록 = 리스트 같은 말로 사용 된다. HTML에서는 이러한 목록을 표현하기 위해 다음과 같은 리스트를 제공한다. 순서가 없는 목록(unordered list) 순서가 있는 목록(ordered list) 정의 목록(definition list) 순서가 없는 HTML 목록(Unordered HTML List) HTML에서 순서가 없는 목록은 <ul> 태그로 시작하며, 여기에 포함되는 각각의 목록 요소는 <li> 태그로 […]

HTML 이미지(Image) 태그 종류

이미지(Image)이미지(image)란 2차원 평면 위에 그려진 시각적 요소를 의미한다. 웹 페이지에는 이러한 이미지가 매우 중요한 요소의 하나다. 웹 페이지의 디자인과 모양을 크게 향상시킬수 있다. HTML <img> 태그 HTML에서 이미지를 삽입할때에 <img> 태그를 사용한다. <img> 태그는 종료 태그가 없는 빈 태그(empty tag)이며, src 속성을 사용하여 이미지 URL(주소)를 지정한다. 예제 alt 속성은 사용자가 볼 수 없는 이미지를 설명한 […]

HTML 링크(Link) 연결 태그 사용방법

링크(Link)링크는 거의 모든 웹 페이지에서 사용하고 있을만큼 사용용도가 높다. 링크를 통해 사용자는 페이지에서 페이지로 이동할 수 있도록 설정가능하다. HTML 하이퍼 링크(Hyperlink) HTML 링크는 하이퍼링크(HyperLink)라고 부른다. 현재 웹 페이지에서 다른 웹 페이지나 사이트로 연결하도록 하는 기능을 가지고 있다. 이러한 하이퍼 링크를 간단히 링크(link)라고 말하며, HTML에서는 <a> 태그를 사용한다. ※링크는 꼭 텍스트일 필요는 없다. 텍스트, 이미지 등 […]